这是我参与「第四届青训营 」笔记创作活动的的第1天

HTML语义化

• 每一个HTML元素都有自己的具体含义
• 所有元素与展示效果无关（元素展示效果由CSS控制）

为什么需要语义化

• 优化搜索引擎
• 让浏览器理解网页

HTML基本元素

HTML框架

文本元素

h元素

h1-h6：表示1级标题-6级标题

p元素

段落元素，paragraphs

span元素

无语义，用来设置样式

pre元素

预格式化文本元素

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格在pre元素内部出现的内容，会按照源代码格式显示到页面上。

a元素

href属性

hyper reference：通常表示跳转地址

1. 普通链接
2. 锚链接

target属性

表示跳转窗口位置 target的取值：

• _self：在当前页面窗口中打开，默认值
• _blank: 在新窗口中打开

图片元素

img元素

• src属性：source
• alt属性：当图片资源失效时，将使用该属性的文字替代图片

多媒体元素

video元素和audio元素

• controls: 控制控件的显示，取值只能为controls
• autoplay: 布尔属性，自动播放
• muted: 布尔属性，静音播放
• loop: 布尔属性，循环播放

容器元素

div元素（无语义）

语义化容器元素

• header: 通常用于表示页头，也可以用于表示文章的头部

• footer: 通常用于表示页脚，也可以用于表示文章的尾部

• article: 通常用于表示整篇文章

• section: 通常用于表示文章的章节

• aside: 通常用于表示侧边栏

HTML实体

实体字符通常用于在页面中显示一些特殊符号

• &单词
• &#数字
• &lt小于符号
• &gt大于符号
• &nbsp空格符号
• &copy版权符号
• &amp&符号

路径的写法

绝对路径和相对路径

绝对路径

站外资源：绝对路径 绝对路径书写格式：

• 协议名://主机名:端口号/路径
• schema://host:port/path

相对路径

以./或者../等开头的

元素包含关系

1. 容器元素中可以包含任何元素
2. a元素中几乎可以包含任何元素
3. 某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素