你须要知道的HTML知识

时间 2019-12-31

标签须要知道 html 知识栏目 HTML 繁體版

原文原文链接

前端三大件：HTML+CSS+JScss

今天咱们就来讲一说HTML，可能不少人以为这个太简单了，就是日常写网页的一堆元素。然而越是基础的东西人们越容易忽略，因此特地梳理了下相关知识，但愿加深对它的理解。html

若是你以为本文对你有所帮助，欢迎猛戳Github(梳理前端知识体系全集)前端

是什么

HTML（HyperText Markup Language）超文本标记语言。顾名思义，它是一门语言，用来标记文档结构的语言。就像你写 word 同样，有各类格式和大纲，HTML描述了网页文档的结构，标记各类区块。git

版本

若是你很早之前就接触过 html,那你确定知道下面的写法：github

<!-- HTML4.01 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
复制代码

上面分别是 HTML4 和 XHTML 的声明部分，其中的DTD规定了可用的元素和属性，这样浏览器才能正确地渲染网页。HTML4/4.01(SGML)时代，语法较为随意，好比标签能够不闭合/大写/属性可为空等，因此各大浏览器会有语法容错机制，自动补全标签闭合等。到了后来，你们以为这并非浏览器该作的事情，因此有更为严格的XHTML（xml）：必须小写/闭合/属性带引号等等。可是XHTML越发严格繁琐的语法让人不耐烦了，因此 HTML4 的下一个版本也即HTML5横空出世，轻松的语法，更多语义化的元素以及表单加强等等。浏览器

<!-- HTML 5 声明 -->
<!DOCTYPE html>
复制代码

注：HTML5是主流和将来，因此下文内容均是以 HTML5 为参考。网络

元素

HTML 文档由各类元素和属性组成，描述了网页的结构。dom

常见元素

HTML文档元素从上至下包括：ide

doctype:文档声明
head部分：包含页面设定，标题，引用资源等
- meta
- title
- style
- link
- script
- base
body部分：网页呈现出来的部分
- div/section/article/aside/header/main/footer
- p
- span/em/strong/i
- table/thead/tbody/th/tr/td
- a
- form/input/select/button/textarea

元素分类

按照默认样式分类

块级 block: 独占一行或多行,能够设置宽高及对齐等属性
行内 inline：不占独立区域，靠自身内容支撑结构，和相邻元素和气相处，宽高无效，但水平方向能够设置padding和margin
内联块级 inline-block：和其它inline元素同行显示，同时也能够设置宽高/margin/padding（水平和垂直）

block	inline	inline-block
独占一行，自上而下的排列	自左向右排序，宽度不够的时候换行	和其余inline元素同行显示
可设置宽度，默认是auto（margin+border+padding+content=父级元素的宽度）	设定具体的宽度是不起做用的，由文字内容决定	能够设置宽度，未指定时靠内容撑开
可设置高度，默认是0，靠内容撑开	不生效	能够设置高度，未指定时靠内容撑开
padding/margin两个方向都可改变元素位置	水平方向padding/margin可改变元素位置	padding/margin两个方向都可改变元素位置

按照元素类别

HTML5中的每一个元素均可以归为零个或多个类别，这些类别将具备类似特征的元素分组在一块儿。w3c中使用的主要类别以下:测试

Metadata content（元数据元素）是能够被用于说明其余内容的表现或行为，或在当前文档和其余文档之间创建联系的元素。
Flow content（流元素）是在应用程序和文档的主体部分中使用的大部分元素。
Sectioning content（区块型元素）是用于定义标题及页脚范围的元素。
Heading content（标题型元素）定义一个区块/章节的标题。
Phrasing content（语句型元素）用于标记段落级文本的元素。
Embedded content（嵌入型元素）引用或插入到文档中其余资源的元素。
Interactive content（交互型元素）专门用于与用户交互的元素。

元素的嵌套

你可能据说过如下常见的元素的规则：

<!-- 块级元素能够包含内联元素 -->
<div><span></span></div>
<!-- 块级元素能够包含某些块级元素 -->
<section><div></div></section> <!--正确-->
<p><div></div></p> <!--错误-->
<!-- form/a 不能再嵌套自身 -->
<a><a></a></a>
<!-- 内联元素通常不能嵌套块级元素 -->
<body><a><div></div></a><body> <!--HTML4中不合法（但浏览器支持）/但HTML5中是合法的-->
复制代码

其中关于HTML4的嵌套规则能够参考这里, 而HTML5中对元素从新作了分类，嵌套关系根据元素的content model进行合法肯定。好比上面的a>div在HTML5中就是合法的。参考HTML5中的a定义,它的内容模型定义为transparent(透明),透明的意思就是在计算合法性的时候，会忽略a自己，嵌套关系须要根据a的父标签来决定。请看下面嵌套：

<!--第一种嵌套-->
<div>
    <a>
        <div></div>
    </a>
</div>

<!--第二种嵌套-->
<p>
    <a>
        <div></div>
    </a>
</p>
复制代码

第一种是合法嵌套，由于至关于div嵌套div，而第二种则不合法，由于至关于p嵌套div,浏览器会进行猜想解析，不妨在浏览器测试一下哦。

语义化

先来看两段html代码:

<!--使用万能div-->
<div class="header"></div>
<div class="left"></div>
<div class="container">
  <div class="content"></div>
</div>
<div class="footer"></div>

<!--不使用div-->
<header></header>
<nav></nav>
<main>
  <article></article>
  <aside></aside>
</main>
<footer></footer>
复制代码

对于上面两种写法，第二种就是HTML语义化。可能有人以为这两种写法没什么太大区别呀，结构都很清晰，可是若是脱了css这层外衣，你以为哪一种写法更容易理解呢？所谓HTML语义化，就是用最恰当的元素标签标记内容结构。

为何须要语义化呢？

在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构；
语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式；
方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
提高搜索引擎优化(SEO)的效果。和搜索引擎创建良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来肯定上下文和各个关键字的权重；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，能够减小差别化。
一般语义化HTML会使代码变的更少，使页面加载更快。

那怎么写语义化的HTML呢？

尽量少的使用无语义的万能标签div和span；
在语义不明显时，既可使用div或者p时，尽可能用p, 由于p在默认状况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
须要强调的文本，能够包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和通常单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每一个input标签对应的说明文本都须要使用label标签，而且经过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

浏览器默认样式

现代浏览器对于HTML元素都提供了了默认的样式，好比body默认有必定的padding,下拉框/按钮等都有默认的外观。然而，这些默认的样式某些状况下会带来问题，好比咱们想要定制下拉框的外观，那就须要花费精力去处理默认样式，提升了定制成本。

解决的方向大概有两个：

干掉默认样式：覆盖重置（css reset）
统一默认样式：修改统一

css reset的话，能够在网络上找到一些简单的代码或者简单的经过如下来重置样式：

html *{
    margin:0;
    padding:0
    ...
}
复制代码

又或者经过统一的样式来处理，好比normalize.css