HTML基础知识

这块内容分成下面5个部分：1.HTML常见元素和理解。2.HTML版本。3.HTML元素分类。4.HTML元素的嵌套关系。5.HTML元素的默认样式和定制化。

1.HTML常见元素：head区的元素：meta 、title 、style、link、script、base等，这类元素不会在页面上进行显示，表示与页面相关资源和描述；body区的元素：div/section/article/aside/header/footer、p、span/em/strong、table/thead/tbody/tr/td、ul/ol/li/dl/dt/dd、a、form/input/select/textarea/button等，这类元素显示在页面上，所以丰富一些。 比如：

<meta charset="utf-8">表示我们的文件采用什么样子的字符集，使用哪种编码的字符。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"视口（手机和电脑屏幕）初始缩放，最大缩放，是否可以缩放，适配移动端的宽度的第一步。

<base href="/">指定一个基础路径，所以路径都以它我基础路径。

HTML重要属性：a[href,target]、img[src,alt]、table td[colspan,rowspan]、form[target,method,enctype]、input[type,value]、button[type]、select>option[value]、label[for]。

如果用ajax提交请求，还是否有必要用form元素，答案是建议的，因为首先我们可以利用表单中submit、reset的特性来提交和重置表单；同时在jquery中serialize就可以整体提取表单的用法我们可以利用；可以和框架或验证组件结合进行表单验证；此外对用户来说浏览器会提供一些与form相关的功能，比如密码管理工具，帮助记住密码等。所以只要涉及到表单验证，所以即使你不用form的原生提交，还是建议加上form。

如何理解HTML?HTML到底是什么，如何去理解它。

HTML“文档”；描述文档的“结构”；有区块和大纲。HTML5 Outliner（H5o）大纲算法工具（from W3C），来查看一个页面的大纲。能够让机器和其他引擎更好的理解文档，也方便他人理解，不要一直用div，所以html标签的语义也是很重要的。如下图，用h5o查看淘宝网大纲：

HTML版本问题：

HTML/4.01(SGML) 、XHTML(XML)、  HTML5。

对于上面三种版本的格式书写，都有官方文档，同时W3C提供了网站:https://validator.w3.org，来上传我们的文件，然后出来检查的结果。会写出错误的个数以及错误的原因等。同样的代码用不同的标准来写，错误不一样。

下面准备一个XHTML的文件，进行验证：

相同同的内容，在HTML5标准：

建议大家在写完HTML5，都去验证一下。

关于HTML5新增内容：

HTML5新增的区块标签：section、article、nav、aside。它们除aside外会反应的大纲视图中，aside表示不太重要的内容，比如广告。

表单增强：日期、时间、搜索，表单验证(required,min,max,正则等)，Placeholder自动聚焦。

HTML5新增语义：header/footer 头尾；section/article区域（div是没有语义的）；nav导航；aside侧边栏，放不重要的内容，如友情链接等；em/strong（斜体/粗体）强调；i icon 图标。

HTML5其他新增内容，是关于API的，如本地存储，定位等等。

HTML元素的分类：

按照默认样式分：块级 block(默认方形会占据整行),行内 inline（内联元素），inline-block（对外像inline,对内又是block,有自己的形状，尺寸等，不多，大多是表单元素，比如select,input等）。下面用一个例子简单说明下这些区别：

test.html

如上图，select是一个inline-block元素，对外是与其他元素处于一行，对内可设置宽高，呈现方形，而em,strong是inline,不可以设置宽高。

HTML5中按照默认内容分：内容模型，如flow（文档流中元素，meta元素如base,title不在文档流中）,interactive（和用户有交互的元素）,heading,sectioning（分区的元素等）,embeded（嵌入其它资源，video,audio,canvas等）,phrasing（如em,strong等）,metadata。

"https://www.w3.org/TR/html5/dom.html#phrasing-content"有一个动态的图：

HTML元素的嵌套关系:

块级元素可以包含行内元素；块级元素不一定能包含块级元素；行内元素一般不能包含块级元素。

比如p不能包含div，行内元素a元素可以包含块级元素，但是为什么呢，具体嵌套关系是w3c中有规定的，上面的这三个说法是不严谨的。

在"https://www.w3.org/TR/html5/textlevel-semantics.html#the-a-element"中查看元素的Content model，

关于Transparent，点击进去，官方说明如下‘Some elements are described as transparent; they have "transparent" in the description of their content model. The content model of a transparent element is derived from the content model of its parent element: the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself.’

简单理解就是，Transparent透明的内容模型，在计算内容模型，其嵌套合法性的时候，本身不参加计算，是否合法取决于它外面的元素。

下面举一个简单的例子：

test.html

用浏览器打开该页面，发现任然显示了错误，没有报错，但是我们打开Elements进行查看，会有一个重大发现：

此时右边的文档结构已经发生了改变，这是没有预料到的，这是因为浏览器的容错机制，帮助我们去尽可能正确的容错，可是这种隐蔽的容错是开发人员不知道的，开发的时候不可控的，所以我们要避免出现这样的情况，所以每次我们还是到上文提出的网站'https://validator.w3.org'来检验你的html。同时也说明，p里面不可以包含div(a是不参与计算嵌套合法性)，我们打开官网查看一下p的Content model。

Phrasing content有哪些呢，在动态图中可以粗略看下，也可以点击上图Phrasing content。

HTML元素默认样式：

默认样式的意义：会给出一些元素一些有意义的样式；默认样式带来的问题：有些默认样式是超过我们预期之外，还有各个浏览器中默认样式不尽相同。下面举个例子来看看默认样式：

这里没有增加任何样式，但是仍然有样式显示，当你想查明原因时候，请从html标签开始查起，看样式为什么而来。比如：

html元素样式如下，发现html无默认样式，

body默认元素样式如下，发现body有8个像素的margin，是user agent stylesheet:

ul元素默认样式如下，可以看出有margin（黄色），有padding（绿色）。

在浏览器中更改样式如下，padding设置为0，没有了上图中的绿色部分，同时设置list-style-position:inside，表示list中点包括在li元素内，关于圆点的样式还有list-style-image,list-style-type属性可以设置：

css reset:

如何处理reset浏览器中的默认样式，去除所有的默认样式，或者使各个浏览器中的默认样式尽量保持一致，如：“https://meyerweb.com/eric/tools/css/reset/”，"https://yuilibrary.com/yui/docs/cssreset/"，还有一种如下四行的reset css 方式（如果你不想去了解css reset也可以加上这个简短的css reset），

上面三种都是为了干掉浏览器的默认样式，还有一种思路是尽可能使各个浏览器默认样式保持一致，尝试在各个浏览器中去做修正，如"https://necolas.github.io/normalize.css/"，Normalize.css定义是，“A modern, HTML5-ready alternative to CSS resets.Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.”

1.doctype的意义是什么。

让浏览器以标准模式渲染；让浏览器知道元素的合法性。

2.HTML XHTML HTML5的关系。

HTML属于SGML;XHTML属于XML，是HTML进行XML严格化的结果；HTML5不属于SGML或XML，比XHTML宽松。

3.HTML5有什么变化。

新的语义化元素，header article footer section nav 等；表单增强（新的元素和表单验证）；新的API(离线、音视频、图形、实时通信、本地存储、设备能力)；分类和嵌套变更（如a元素的嵌套的合法性）。

4.em和i有什么区别。

em是语义化的标签，表强调；i是纯样式的标签，表斜体；HTML5中i不推荐使用，一般用作图标，代表icon的意思。

5.语义化的意义是什么。

开发者容易理解；机器容易理解结构（搜索、读屏软件）；有助于SEO（搜索）；semantic microdata(另外一种规范，会做更加语义化的标记，帮助搜索)。

6.哪些元素可以自闭合。

表单元素input;图片img;br hr;meta link，对于自闭合元素在html5中可以不加斜杠，但是在xhtml中一定要加的。

7.HTML和DOM的关系。

HTML是‘死’的；DOM是经过浏览器HTML解析而来，呈现出来页面，是活的；JS可以维护DOM。

8.property和attribute的区别。

property是特性，attribute是属性，attribute是‘死’的，property是‘活’。首次渲染，首先将attribute赋值给property。

9.form的作用有哪些。

直接提交表单；使用submit/reset按钮；便于浏览器保存表单；第三方库可以整体提取值；第三方库可以进行表单验证。