HTML HTML基础(2)
1.开发者文档
W3C官网： www.w3c.org
W3School： www.w3school.com.cn
MDN： developer.mozilla.org —— 推荐。
2.排版标签
标签名 | 标签含义 | 单 / 双 标签 |
h1 ~ h6 | 标题 | 双 |
| p | 段落 | 双 |
| div | 没有任何含义，用于整体布局 | 双 |
(1). h1 最好写一个， h2~h6 能适当多写。
(2). h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
(3). p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签（暂时先这样记，后面会说规律）。
3.语义化标签
- 概念：用特定的标签，去表达特定的含义。
- 原则：标签的默认效果不重要（后期可以通过CSS随便控制效果），语义很重要！
- 举例：会与 h1 标签，效果是文字很大（不重要），语义时网页主要内容（很重要）。
- 优势：
- 代码结构清晰可读性强。
- 有利于SEO（搜索引擎优化）。
- 方便设备解析（如屏幕阅读器、盲人阅读器等）。
4.块级元素和行内元素
(1).块级元素：独占一行（排版标签都是块级元素）。
(2).行内元素：不独占一行。
(3).使用原则：
(1.块级元素 中能写行内元素和块级元素。
(2.行内元素 中能写行内元素，但不能写块级元素。
(3.一些特殊规则：
①h1~h6不能互相嵌套
②p中不要写块级元素
5.文本标签_常用标签
(1).用于包裹：词汇、短语等。
(2).通常写在排版标签里。
(3).排版标签更宏观（大段的文字），文本标签更围观（词汇、短语）。
(4).文本标签通常都是行内元素。
| 标签 | 标签语义 | 单/双 标签 |
| em | 要着重阅读的内容 | 双 |
| strong | 十分重要的内容 | 双 |
| span | 没有语义，用于包裹短语的通用容器 | 双 |
6.文本标签_不常用的
| 标签名 | 标签语义 | 单/双 标签 |
| cite | 作品标题 | 双 |
| dfn | 特殊术语，或专有名词 | 双 |
| del 与 ins | 删除的文本【与】插入的文本 | 双 |
| sub 与 sup | 下标文字【与】上标文字 | 双 |
| code | 一段代码 | 双 |
| samp | 从正常的上下文中，将某些内容提取出来，例如：表示设备输出 | 双 |
| kbd | 键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中 | 双 |
| abbr | 缩写，最好配合上 title 属性 | 双 |
| bdo | 更改文本方向，要配合 dir 属性，可选值：ltr（默认值）、rtl | 双 |
| var | 标记变量，可以与 code 标签一起使用 | 双 |
| small | 附属细则，例如：包括版权、法律文本 | 双 |
| b | 摘要中的关键字、评论中的产品名称 | 双 |
| i | 本意是：人物的思想活动、所说的话等等。 现在多用于：呈现字体图标。 | 双 |
| u | 与正常内容有反差的文本，例如：错的单词、不合适的描述等 | 双 |
| q | 短引用 | 双 |
| blockquote | 长引用 | 双 |
| address | 地址信息 | 双 |
备注：
1.这些不常用的文本标签，编码时不用过于纠结。
2.blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。
3.有些语义感不强的标签，很少使用，例如：
small、b、u、q、blockquote
4.HTML的标签太多了！记住那些：重要的、语义感强的标签即可；截至目前，有这些：
h1~h6、p、div、em、strong、span
7.图片标签
(1)基本使用
| 标签名 | 标签语义 | 常用属性 | 单/双 标签 |
| img | 图片 | src：图片路径 alt：图片描述 width：图片宽度，单位是像素（px） height：图片高度，单位是像素（px） | 单 |
总结：
1.像素(px)是一种单位。
2.尽量不同时修改图片的宽高，可能会造成比例失调。
3.暂且认为img是行内元素。
4. alt 属性的作用：
- 搜索引擎通过 alt 属性，得知图片的内容。
- 当图片无法展示时候，游戏浏览器会呈现 alt 属性的值。
- 盲人阅读器会朗读 alt 属性的值
(2).路径的分类
(1.相对路径：以当前位置作为参考点，去建立路径。
| 已有路径 | 符号 | 含义 | 举例 |
 | ./ | 同级 | 引入【怪兽.jpg】： <img src="./怪兽.jpg"> |
| / | 下一级 | 引入【喜羊羊.jpg】： <img src="./a/喜羊 羊.jpg"> | |
| ../ | 上一级 | 引入【奥特曼.jpg】： <img src="../奥特曼.jpg"> |
注意：
相对路径中的 ./ 可以省略不写。
相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。
(2.绝对路径：以根位置作为参考点，去建立路径。
1. 本地绝对路径： E:/a/b/c/奥特曼.jpg
2. 网络绝对路径： http://www.w3c.org/xxxx/xxxx/logo.png
注意：
1.使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。
2.使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败。