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
• 实体：<、>、©、  ...

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标准时开头应该加上；
• 应在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文档声明）；
• 文档声明不区分大小写；
• 文档声明必须放在第一行（因为浏览器是从上到下解析的）；
• 必须写文档声明，如果不写就会发生怪异事件；
• 文档声明不是一个标签，它只是一个声明

meta

• meta：元信息，该标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务。

• 申明编码

• 页面关键词

• 页面描述

• 视口-移动设备

• 定义网页作者

• 先使用IE最新版本和Chrome

HTML Entity

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

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

作用：

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

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