HTML知识点

首先学习HTML我认为需要搞懂块级元素与行内元素这两个概念

块级元素与行内元素

块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。

你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素“a”。

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block 这样的属性，让他也有每次都从新行开始的属性。

可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。

块元素(block element)

*address-地址

*blockquote-块引用

*center-居中对齐块

*dir-目录列表

*div-常用块级元素，也是css layout的主要标签

*dl-定义列表

*fieldset-form控制组

*form-交互表单

*h1-h6标题

*hr-水平分隔线

*isindex-input prompt

*menu-菜单列表

*noframes-frames可选内容，（对于不支持frame的浏览器显示此区块内容

*noscript-可选脚本内容（对于不支持script的浏览器显示此内容）

*ol-排序表单

*p-段落

*pre-格式化文本

*table-表格

*ul-非排序列表

内联元素(inline element)

*a-锚点

*abbr-缩写

*acronym-首字

*b-粗体(不推荐)

*bdo-bidi override

*big-大字体

*br-换行

*cite-引用

*code-计算机代码(在引用源码的时候需要)

*dfn-定义字段

*em-强调

*font-字体设定(不推荐)

*i-斜体

*img-图片

*input-输入框

*kbd-定义键盘文本

*label-表格标签

*q-短引用

*s-中划线(不推荐)

*samp-定义范例计算机代码

*select-项目选择

*small-小字体文本

*span-常用内联容器，定义文本内区块

*strike-中划线

*strong-粗体强调

*sub-下标

*sup-上标

*textarea-多行文本输入框

*tt-电传文本

*u-下划线

*var-定义变量

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

*applet-java applet

*button-按钮

*del-删除文本

*iframe-inline frame

*ins-插入的文本

*map-图片区块(map)

*object-object对象

*script-客户端脚本

这两个概念在运用CSS样式padding和margin时显得更容易理解一点!

HTML5

html5有哪些新特性、移除了那些元素？

1.拖拽释放(Drag and drop)API

2.语义化更好的内容标签（header,nav,footer,aside,article,section）

3.音频、视频API(audio,video)

4.画布(Canvas)API

5.地理(Geolocation)API

6.本地离线存储

localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除

7.表单控件，calendar、date、time、email、url、search

8.新的技术webworker(多线程处理),websocket,Geolocation,applicationCache(离线应用) WebSocket是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,服务器可以主动传送数据给客户端

WebWorker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时web worker在后台运行。

9.移除的元素

纯表现的元素：basefont，big，center，font,s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

HTML5新增27个元素废弃16个元素,按照优先等级划分可以分为结构性元素,级块级元素行内语义性元素和交互性元素

结构性元素

结构性元素主要负责web的上下文结构的定义,确保html的完整性

Section给内容分段在web页面页面应用中,该元素也可以用于区域的章节表述,对网站内容进行分块,通常由内容和标题组成

当一个内容需要定义样式或者通过脚本定义行为时推荐使用div,div关注结构的独立性,而sesction关注内容的独立性,

section的作用是对页面上的内容分块处理,如对文章分段,相邻的section元素的内容应当是相关的,而不是article那样的独立,比如section里面放所有的评论,每条评论放在article 里,

article元素可以看做是特殊的section元素article则更强调独立性,完整性,section更强调相关性,如果一块内容相对来说比较独立,就使用article,如果对一块内容分成几段,就使用section,在h5中,div变成了一个容器,可以对容器进行整体的css套用

使用section时注意,

1.不要将section元素当做设置样式的页面容器应该使用div

2.如果article,aside或者nav元素更符合条件不要使用section

3.不要为没有标题比如h1-6的内容使用section

Article标识文章表示一篇文章的主体内容,可以被外部引用的内容,可以是一篇论坛评论,一段用户评论等,因为article是一段独立的内容,通常一个article有自己header(头部)或footer(底部),当article嵌套使用时,内部的article内容原则上和外部的article内容相关针对该新闻的相关评论就可以使用嵌套article的方式,用来呈现评论的article被包含在整体内容的article元素里面评论的每个人相对来说都是比较独立的,完整的,放在article中,所有评论放在section中,

Header页面主体的头部

Footer页面底部通常在这里会标出网站的一些相关信息,例如,关于我们,法律申明等

Nav导航信息专门用于菜单导航,链接导航的元素,链接到其他页面或者是当前页面的其他部分,一般一组链接就使用nav,具有辅助信息的链接,外层可以嵌套aside

可用于以下场景,

导航条,侧边栏导航,页内导航,翻页操作

级块级元素

级块级元素主要完成web页面区域的划分,确保内容有效分隔,

Aside辅助信息用于表达注记,侧栏,摘要,插入的引用等作为补充主体的内容从一个简单页面显示看,就是一个侧边栏,可以在左边,也可以在右边,从一个页面的局部看,就是摘要用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用,侧边栏,广告,导航条以及其他有别于主要内容的部分,

Aside元素主要有两种用法

1.作为主要内容的附属信息部分,包含在article元素中,可以是当前文章的参考资料或者名词解释等辅助信息

2.作为页面或者站点全局的附属信息部分在article元素之外使用,最典型的形式是侧边栏,其中的内容可以是友情链接,博客中的其他文章列表广告单元等