你需要知道的HTML知识
前台三大件：HTML+CSS+JS
今天我们就来说一说HTML，可能很多人觉得这个太简单了，就是平时写网页的一堆元素。然而越是基础的东西人们越容易忽略，所以特意梳理了下相关知识，希望加深对它的了解。
是什么
HTML（HyperText Markup Language）超文本标记语言。顾名思义，它是一门语言，用来标记文档结构的语言。就像你写 word 一样，有各种格式和大纲，HTML形容了网页文档的结构，标记各种区块。
我的学习交流群点击：web前台学习交流群
版本
假如你很早以前就接触过 html,那你一定知道下面的写法：
<!– 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文档由各种元素和属性组成，形容了网页的结构。
常见元素
HTML文档元素从上至下包括：
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（水平和垂直）
按照元素类别
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默认有肯定的margin,下拉框/按钮等都有默认的外观。然而，这些默认的样式某些情况下会带来问题，比方我们想要定制下拉框的外观，那就需要花费精力去解决默认样式，提高了定制成本。
处理的方向大概有两个：
干掉默认样式：覆盖重置（css reset）
统一默认样式：修改统一
css reset的话，可以在网络上找到少量简单的代码或者者简单的通过以下来重置样式：
html *{
? ? margin:0;
? ? padding:0
? ? …
}
又或者者通过统一的样式来解决，比方normalize.css
我的学习交流群点击：web前台学习交流群
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 你需要知道的HTML知识
