HTML基础强化（1）

HTML学习 本文总阅读量次

前端三大件：
HTML（结构）、CSS（样式）、JavaScript（行为）

HTML版本

HTML版本

语法验证网站

w3c有一个语法验证网站：http://validator.w3.org/,可以在这查看你的网页是否存在HTML4的语法问题。

HTML5新增内容

新区块标签：section(区块)、article（标题）、nav（导航）、aside（一般是广告等不太重要的东西，基本不让他出现在大纲中）
前三个都会反映在 视图大纲 里。

新增内容：表单增强、日期、时间、搜索、表单验证（在这之前只能通过js来完成）、Placeholder、自动聚焦（网页加载好以后光标自动聚焦在输入框中）

HTML5新增语义

新增语义更加明确的元素，不建议使用一些语义不强的元素：b（粗体）、i（斜体）、font等，方便写出更加语义化的结构。

header/footer头尾（header可以表示 网站/区块 的头部）
section/article区域（比起div，他们有更加明确的语义范围）
address 区块容器（必须是作为联系信息出现，邮编地址、邮件地址等等一般出现在footer）
nav导航
aside不重要内容（侧边栏）
em/strong强调(粗体)
i 表示 icon（图标）
hgroup 对标题元素进行分组（参考例子）

html5建议使用 i 标签表示小图标（icon）而不是斜体：
例子

div虽然也是一个区块，但是他没有明确的语义，当你可以明确区块内的内容时就不建议使用div。
section / article就有明确的语义，section较为零碎（比如一些列表），article比较完整（比如一篇博客，拥有标题、文章等等）

HTML常见元素和理解

head中的元素标签

不会显示在页面上，主要放置配置信息：
meta、title、style、link、script、base
例子

网页适配移动端 首先就要设置viewport的宽度

body中的元素标签

一块区域：div / section / article / aside / header / footer
（div虽然也是一个区块，但是他没有明确的语义，当你可以明确区块内的内容时就不建议使用div。section / article就有明确的语义，section较为零碎（比如一些列表），article比较完整（比如一篇博客，拥有标题、文章等等））
段落:p
行内元素：span / em / strong
表格元素：table / thead / tbody/ tr（行）/ td（表头）
列表元素：ul（无序）/ol（有序）/li/dl（定义列表）/dt（标题）/ dd（内容）
链接：a
表单元素：form（表单） / input / select（下拉框） / textarea（一块文本输入区） /
button
（这里只列举了一部分）

HTML重要属性

a[href,target 网页打开的方式]
img[src,alt 未显示图片时的提示文字]
table td[colspan 合并列,rowspan 合并行]
form[target 表单提交到哪里,method 用什么方式提交,enctype 用什么编码方式提交]
input[type 多种类型（radio为单选框）,value]
【两个单选框二选一时可设置为同样name的两个<input type="radio"/>】
button[type(form中button的submit提交表单，reset重置)]
select>option[value]
label[for]一般用于单选框/复选框

如何理解HTML（结构与语义化）

借助工具看网页大纲

工具：http://h5o.github.io/

拖拽到书签栏即可使用：
安装方法

点击即可显示页面大纲：
使用方法

建议

书写HTML时要多关注HTML的结构是否清晰，注意语义化。

HTML元素分类

按默认样式分

块级block

默认独占一行的元素，可以直接设置宽高。

行内inline

不一定是方形的，甚至不一定是规则的（比如宽度不够被迫换行时）。

inline-block

对外像inline元素，对内像block元素（有自己的宽高）。
比如：select下拉框、input框。

按内容分

国内很少面试会关注这个，但了解之后对后面的“嵌套关系”的学习会比较轻松。
W3C中有关于这个分类的动态示意图。
动态示意图

Flow：流，基本所有可见元素
Flow

Metadata：配置信息的元素
base、link、meta、noscript、script、style、template、title

Interactive：和用户有互动的元素，比如a、button等
Interactive

Heading：h1到h6
h1-h6、hgroup

Sectioning：区块标签
article、aside、nav、section

Phrasing：（短语）大部分属于内联元素
Phrasing

Embedded：被嵌入的其他元素，比如img、video等
Embedded

HTML元素嵌套关系

就算我们嵌套错误也不会报错，浏览器做了很多的容错处理，我们可以在F12中通过观察 标签是否增加 看到浏览器做出的是怎么处理的。
（比如说p包含div是不合法的，那么浏览器就会让p的结束标签出现在div前，然后再在div的结束标签后增加一个p标签）

原则

  • 块级元素可以包含行内元素
  • 块级元素不一定能包含块级元素
  • 行内元素一般不能包含块级元素
    （但 a 包含 div 有可能是合法的，可看下方“方法2的例子”解答）

查看嵌套是否合法的方法

  • 方法1：**使用w3c的语法验证工具**看是否有错（因为原则基本都是html4的，所以可以使用工具查错）
  • 方法2：查看w3c的文档，在文档中可以直观的看到各种嵌套规则。假设我们希望a 嵌套b，则需要看看 被嵌套的元素b 属不属于 文档中 a 的 content model ，属于则可嵌套。

方法2的例子

为什么 a 包含 div是合法的？

  • a 包含 div 的例子：一些小广告，点击就跳转。
  • 首先，a 包含 div不一定是合法的，当包含a的标签是<body>/<div>时，是合法的。当包含a的标签是<p>时，是不合法的。
  • 是否合法决定于包含a的标签再忽略a标签后是否能包含内部的div标签。
  • 因为w3c文档告诉我们：**<a>标签在计算嵌套关系时会被当作“透明”的直接忽略掉，变成<body>包含<div>，自然也就合法**了。但如果忽略了a标签后变成<p>包含<div>那就不合法了。

推理过程：

  1. 在html4的文档中可以直观的看到各种嵌套规则。
  2. 找到 BODY-flow-inline：A inline excluding an enclosed A element（a标签只能包含行内元素，且不能包含另一个a标签）
  3. 也就是说在html4中 a 包含 div 是不合法的，但是在html5中是合法的。
  4. 但在w3c的文档中 a 标签的Content model中说“透明的，但必须没有交互式内容或a元素后代。”
  5. 继续点进去可以发现给出的对于“透明的”的解释是：在计算内容模型时，这个元素本身是不参与计算的。
  6. 也就是说，在a这里计算嵌套合法性时a是不参与计算的，相当于是<body>包含<div>，自然也就合法了。
HTML学习