HTML自学笔记：网页设计基础与重要代码结构解析
需积分: 9 117 浏览量
更新于2024-07-15
收藏 734KB DOCX 举报
"HTML自学笔记，记录作者学习HTML一个月的心得，包括HTML基础、CSS样式以及编写网页的步骤等。"
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，它描述了网页的结构和语义。在HTML文档中，元素以开始标签和结束标签的形式存在，例如`<h1>`和`</h1>`表示一级标题。HTML的主要目的是赋予文本特定的意义，而不是关注其视觉表现。虽然某些标签如`<h1>`会影响到浏览器的默认样式，但它们的核心功能是定义内容的类型。
URL（Uniform Resource Locator）是互联网上资源的地址，由协议类型（如HTTP或HTTPS）、服务器IP地址、端口号和资源路径组成。在示例中，`http://127.0.0.1:80/index.html`，`127.0.0.1`是本地主机的IP地址，`:80`是默认HTTP端口，`index.html`是请求的页面。
编写HTML网页的基本步骤如下：
1. 新建一个文本文件。
2. 使用文本编辑器（如记事本）打开文件。
3. 输入HTML代码。
4. 保存文件，将其扩展名改为`.html`。
5. 使用浏览器打开保存的文件。
HTML文档的基本结构通常包括DOCTYPE声明（告诉浏览器使用哪种HTML版本，如`<!DOCTYPE html>`）、`<html>`根元素、`<head>`部分（包含元信息，如字符集设置`<meta charset="GBK">`和页面标题`<title>`）和`<body>`部分（包含实际可见的网页内容）。
在Web开发工具如WebStorm中，可以使用快捷键提高效率，例如`Ctrl+Alt+Insert`创建新文件，`End`或`Home`键移动光标，`Ctrl+D`复制一行，`Ctrl+X`剪切一行，`Ctrl+Alt+T`快捷包裹内容。
HTML中，`<h1>`至`<h6>`标签用于表示不同级别的标题，而`<hr>`标签创建水平分割线，提供视觉分隔。注释可以通过`<!—xxxxx-->`进行添加，方便代码阅读和维护。`<img>`标签用于插入图片，其`src`属性指定图像源，`alt`属性提供替代文本，当图片无法加载时显示。
在学习HTML的过程中，可以参考W3C的资源，例如中国的官方网站http://www.w3school.com.cn，该网站提供了丰富的教程和参考资料。通过持续实践和学习，可以逐渐掌握HTML的基础和进阶技巧，从而更好地设计和构建网页。
5 定义列表：
给一堆数据添加列表语义
先通过 标签定义列表中的所有标题，然后再通过 标签给每个标题添加描述信息
格式：
,
,
,
是英文 D@'@ 的缩写，所以 的含义就是用来定义列表中的标题
是英文 D@'&4(@' 的缩写，所以 的含义就是用来定义标题对应的描述的
定义列表的应用场景
3E 做网站尾部的相关信息
%E 做图文混排
注意点：
3E 和 6' 一样， 和 是一个整体，所以他们一般情况下不会单独出现，都是一
起出现
%E 和 6' 一样，由于 和 是一个组合标签，所以 中建议脂肪 和 标签
4E 一个 可以没有对应的 ，也可以有多个对应的 ，但是无论有或者没有 都
不推荐使用（推荐一个 对应一个 ）
E 快速创建一对 标签：)
6 表格标签：
作用：用来给一堆数据添加表格语义（其实表格是数据的展现形式，当数据量非常大
时，表格是最为清晰的展现形式）
格式：
"%%'((
%
需要显示的内容,
,%
,
3%：代表整个表格
(：代表整个表格中的一行数据
：一行中的一个单元格
注意点：
表格标签有一个边框属性，这个属性决定了边框的宽度，默认情况下这个属性的值是
，所以看不到边框
表格标签和列表标签一样，它是一个组合标签，所以 3%( 要么一起出现，要么
不出现，不会单个出现
0.
剩余39页未读，继续阅读
点击了解资源详情
点击了解资源详情
点击了解资源详情
orange_idea
- 粉丝: 3
- 资源: 1
我的内容管理
展开
最新资源
- JHU荣誉单变量微积分课程教案介绍
- Naruto爱好者必备CLI测试应用
- Android应用显示Ignaz-Taschner-Gymnasium取消课程概览
- ASP学生信息档案管理系统毕业设计及完整源码
- Java商城源码解析：酒店管理系统快速开发指南
- 构建可解析文本框：.NET 3.5中实现文本解析与验证
- Java语言打造任天堂红白机模拟器—nes4j解析
- 基于Hadoop和Hive的网络流量分析工具介绍
- Unity实现帝国象棋：从游戏到复刻
- WordPress文档嵌入插件：无需浏览器插件即可上传和显示文档
- Android开源项目精选：优秀项目篇
- 黑色设计商务酷站模板 - 网站构建新选择
- Rollup插件去除JS文件横幅：横扫许可证头
- AngularDart中Hammock服务的使用与REST API集成
- 开源AVR编程器：高效、低成本的微控制器编程解决方案
- Anya Keller 图片组合的开发部署记录
