1.开发者文档

• W3C官网： www.w3c.org

• W3School： www.w3school.com.cn

• MDN： developer.mozilla.org —— 推荐。

2.排版标签

        (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).文本标签通常都是行内元素。

6.文本标签_不常用的

备注：

        1.这些不常用的文本标签，编码时不用过于纠结。

        2.blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。

        3.有些语义感不强的标签，很少使用，例如：

           small、b、u、q、blockquote

        4.HTML的标签太多了！记住那些：重要的、语义感强的标签即可；截至目前，有这些：

        h1~h6、p、div、em、strong、span

7.图片标签

        (1)基本使用

        总结：

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.使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败。