HTML5核心知识

HTML语义

什么是HTML：超文本标记语言（HyperText Markup Language，简称HTML）是一种用于创建网页的标椎标记语言。

HTML4常用标签汇总：

基本文档：html、head、body...
基本标签：h1~h6、p、br、hr、
文本格式化：strong、b、em、i、small、strong、del、sub、sup...
链接：a、link
图片：img、map、area
区块：div、span
三大列表：ul li、ol li、dl dt dd
表格：table、caption、th、tr、td、thead、tbody、tfoot
框架：iframe
表单：form、input、select option、textarea、button、label
实体：&lt、&gt、&copy、&nbsp ...

HTML5常用标签汇总：

图形新元素：canvas
新多媒体元素：audio、video、source、embed、track
新表单元素：deatalist、keygen、output
新的语义和结构元素：article、aside、bdi、command、details、dialog、summary、figure、figcaption、footer、header、mark、meter、nav、progress、ruby、rt、rp、section、time、wbr

什么叫语义化：

指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。通俗理解：用正确的标签做正确的事

语义化的好处：

利于SEO优化（也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重）；
在样式丢失的时候，还是可以比较好的呈现结构；
更好的支持各种终端，例如无障碍阅读和有声小说等；
利于团队开发和维护，W3C给我们定了一个标准，那么团队中都遵循这个标准，那么代码的差异就会缩小，在开发和维护的时候就可以提高效率；

如何写出更优的html：

结构搭建上
代码校验
良好的代码排版
语义化设计
布局规范
标签嵌套规范
网站代码优化

结构搭建上：

采用HTML5标准时开头应该加上<!DOCTYPE html>；
应在head标签中引入CSS文件，这样浏览器就可以在输出HTML之前获取CSS信息；
在body标签的末尾引入JS文件，这样可以在页面显示之后再编译js文件，以加快页面读取速度，同时有助于Js对页面中的元素进行操作；
对元素的操作应添加在js代码中，而不要在html中添加，后期难以维护。

代码校验：

在项目中加入校验过程：可以在代码编辑器中使用HTMLHint、SublimeLinter这类代码校验插件，也可以在build的时候使用HTMLHint with Grunt这类校验工具，还可以通过W3CHTML validator等网站来在线监测代码；
尽量采用HTML5标准；
确保正确的HTML层级：嵌套元素时确保元素首尾完整，在一个有大量内容的元素的结束标签后应添加注释，这样有助于后期debug，特别是在使用模板的时候；
在所有不能自动结束的元素末尾添加结束标签；
li结束标签不是必须的，所以有些人认为可以不写li，这可以接受，但是ul和ol标签一定要加；
video和audio元素必须要有结束标签。

良好的代码排版：

在项目中保持同意的HTML代码风格；
使用代码编辑器来帮助你自动排版，比如在Sublime Text中可以使用自带的Reindent，也可以找一些自动排版插件来帮助你。同样也可以使用一些在线工具比如：CSS Beautifier和JS Beautifier；
在HTML中用缩进来分层更易于阅读，如果代码编辑器没有自动缩进功能的话可以自行修改相应的设置。当你发现你的HTML层级过深的时候，那就表示你需要重构一下你的HTML了；
用更直接易读的方式写HTML代码，注意标签的相互嵌套关系；
元素要按常规放置，比如footer元素最好是放在HTML页面的底部，虽然理论上把它放在任何地方都可以正常运行
统一所有引号的使用规则，不要这里用双引号，那里又用单引号
使用小写字母来写标签和属性，大写字母很不易读。

语义化设计

标题使用h1(h2、h3、...)，列表使用ul或者ol；
在适当的地方使用HTML5的新元素，比如header、footer、nav、aside；
正文中的文本内容要用p标签，内容的结构化可以使用HTML5的新元素（或者div）；
修改文字样式时，em和strong要比i和b更好些，因为前者语义更加明显；
form中要包含label元素，input要有type、placeholder以及其他必要的属性，即使值为空都可以；
尽量减少使用无意义的标签，例如span和div；
尽量不使用标签本身的CSS属性，例如b、font、s等标签，如果需要这些样式，那么使用CSS样式进行添加；
在需要强调的部分，使用strong、em，但是样式尽量使用CSS样式来描述；
使用表格时，标题用caption，表头用thead，主题部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
列表搭建时，使用 ul无序列表、ol有序列表、dl定义列表；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=id来让说明文本和对应的input关联起来，或直接在lable中内嵌控件

布局规范：

p元素用来放文字，而不是用来布局。在浏览器自身的样式中默认p有margin和其他样式；
想实现换行可以使用block元素或者CSS的display属性，尽量避免使用br来换行。文字内容中的换行可以用br，但通常也很少这样用；
不要滥用div，W3C对div的描述是这样的：当没有其他元素可用时才能使用div，如果想让link和img这类元素能够在结尾换行，可以在样式中添加display:block，这样要比把他们放进div或者使用br来换行要好很多；
必须知道哪些是块级元素，这样就可以避免把块级元素放到div里面，比如列表就不需要放到div里面；
table是用来放表格数据的，不是用来布局的；
flex box现在越来越流行，学一学没有坏处；
盒模型一定要掌握，必须知道什么时候该用padding，什么时候该用margin；是top和left
使用margin的规则：通常情况下，margin都是添加在元素的bottom和right，有时候也可以是top或者left。无论如何，尽量避免同时在bottom和top，或者right和left添加margin，可以用last-of-type选择器来去掉最后一子元素的margin；

标签嵌套规范

块元素可以包含内联元素或者块元素，但内联元素却不能包含块元素，它只能包含其他的内联元素
- div里可以放h1，正确
- a里可以放span，正确
- span里可以放div，错误
块级元素不能放在p里面
- p里放ol，错误
- p里放div，错误
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是h1~h6、p、dt
- h1里放div，错误
- p里放div，错误
- dt里放div，错误
ul, li；ol, li；dl, dt, dd 拥有父子级关系的标签；ul、ol下都只能跟li，dl下只能跟dt, dd
- ul下不放li，直接放a，错误
- dl下放dt，dt下放a，正确
- dl下直接放a，错误
a标签不能嵌套a标签

网站代码优化

要多为用户考虑，不同的设备条件、使用环境以及输入法等都会给你的HTML带来不同的体验
- 网页的title，keywords，description一定要写，要精简全面
- 网页使用语义化代码
- a标签要设置title属性；外部链接还要设置rel属性——rel="nofollow"，nofollow值会使得网络爬虫不顺着链接爬出
- 所有的标题使用h1标签，样式可以使用CSS设置
- br标签只能用于文本换行
- table一定要使用caption设置表格题目
- strong用来设置重标，em设置斜体
- img标签一定要设置其alt属性

HTML及扩展

DOCTYPE

文档声明；
声明帮助浏览器正确地显示网页；
定义这个文档的类型，浏览器会先识别这句话，会按照这个类型去解析这个文档；
HTML也有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能完全正确地显示出HTML页面；
一般高版本兼容低版本，所以在工作中我们默认写高版本就可以了（html5文档声明）；
文档声明不区分大小写；
文档声明必须放在第一行（因为浏览器是从上到下解析的）；
必须写文档声明，如果不写就会发生怪异事件；
文档声明不是一个标签，它只是一个声明

HTML Entity

    在编写HTML页面时，需要用到“<”、“>”、“空格”等符号，直接输入这些符号时，会错误的把它们与标记混在一起，非常不利于编码。那么就需要把这些字符进行转移，以另一种方式书写，以相同的形式展示。

在HTML中，这些字符可称为HTML Entity，即HTML字符实体
一个HTML Entity都含有2种转义格式：Entity Name和Entity Number

作用：

显示HTML保留字符，如 <、>、&、" 等（联想到XSS攻击）
表示难以用常规输入设备输入的字符，如©、®、± 等
表示给定的字符编码可能无法表达文档字符集的其他字符，如ASCII编码想显示中文，使用&#x6C34,表示“水”；

Entity Name

格式：&entityName;

说明：“&”开头，“;”结尾，以语义的形式描述字符。如字符“<”，英文名称为“less than”，Entity Name为“<”，取自“less than”2个单词的首字母。

Entity Number

格式：&#entityNumber;

说明：“&#”开头，“;”结尾，以编号的形式描述字符。此编号可以为十进制或十六进制（以“&#x”开头）等数字格式。

SVG矢量图形

SVG指可伸缩矢量图形（Scalable Vector Graphics）
SVG用来定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG是万维网联盟的标准
SVG与诸如DOM和XSL之类的W3C标准是一个整体

SVG优势：与其他图像格式相比（比如jpeg和gif），使用SVG的优势在于：

SVG图像可通过文本编辑器来创建和修改
SVG图像可被搜索、索引、脚本化或压缩
SVG是可伸缩的
SVG图像可在任何的分辨率下被高质量地打印
SVG可在图像质量不下降的情况下被放大

浏览器支持：

IE9+、Firefox、Opera、Chrome和Safari支持内联SVG

SVG使用-把SVG直接嵌入HTML页面

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red;stroke:black;stroke-width:5;fill-rule:evenodd;"></svg>

SVG代码以<svg>元素开始，包括开启标签<svg>和关闭标签</svg>。这是根元素。
width和height属性可设置此SVG文档的宽度和高度。
version属性可定义所使用的SVG版本，xmlns属性可定义SVG命名空间
stroke和stroke-width属性控制如何显示形状的轮廓。我们把圆的轮廓设置为5px款，黑边框
fill属性设置形状内的颜色。我们把填充颜色设置为红色
polygon用来创建含有不少于三个边的图形
points属性定义多边形每个角的x和y坐标

HTML5核心知识

HTML5核心知识

HTML语义

如何写出更优的html：

结构搭建上：

代码校验：

良好的代码排版：

语义化设计

布局规范：

标签嵌套规范

网站代码优化

HTML及扩展

DOCTYPE

meta

HTML Entity

SVG矢量图形

推荐阅读更多精彩内容