HTML5学习整理

HTML5

这里主要是对于HTML5、CSS3一些不熟悉的知识的整理。看的书是HTML5权威指南。

HTML文档

HTML文档中应该至少包含一个base元素。它通常是head元素中位置最靠前的子元素之一，以便随后的元素中的相对URL可以用上其设置的基准URL。

HTML5中的标记文字

1. a(如果想引用一个电子邮箱地址，可以使用mailto协议，如mailto:adam@qq.com)：href、target、media、rel、type、hreflang
2. b(不表示特别的强调或重要性，仅仅将内容从周围凸显出来)
3. em(对一段文字的强调)
4. i(表示一段文字与周围内容有本质区别，多用与外文词语、科技术语甚至某人的想法)
5. s(表示一段文字不在正确或准确,效果line-through)
6. strong(表示一段重要文字,效果加粗)
7. u(让一段文字从周围内容凸显出来，但不表示强调其重要性有所增加，效果下划线)
8. small(表示小号字体内容)
9. sub和sup(上标和下标)
10. br和wbr：br强制换行，wbr建议换行
11. code、var、samp、kbd：code表示计算机代码片段；var表示变成语境中的变量；samp表示程序或计算机系统的输出；kbd表示用户输入
12. abbr(表示缩写):局部属性title表示全称
13. dfn(表示定义中的术语):局部属性title表示所定义的术语
14. q(表示引自他处的内容):局部属性cite可以指定来源文章的URL
15. cite(表示所引用作品的标题)
16. ruby、rt、rp(为使用非西方语言提供支持)
17. bdo(用来撇开默认的文字方向设置，明确的指定其内容中文字的方向)：必须使用dir属性来指定方向，rtl或者ltr
18. bdi(表示一段出自文字方向考虑而与其他内容隔离开来的文字)
19. span
20. mark(用来表示因为与某段上下文相关而被突出显示的一段文字)
21. ins和del(添加和删除的内容)
22. time(用来表示时间或者日期)

HTML5中的组织内容（仅罗列一些不熟悉的）

1. pre(阻止合并空白字符串，让源文档中的格式得以保留)常和code元素搭配。
2. blockquote:作用于q元素类似，引用他处的一片内容，不过通常用在引用的内容更多的情况下，可以使用cite指定所引用内容的来源。
3. hr：代表段落级别的主题分隔。
4. ol(start、type、reversed)：type的值(1、a、A、i、I)所代表的含义。
5. figure(表示一个插图)：figure可以包含一个figcaption元素，表示插图的标题。

HTML5中的文档分节

1. h1~h6
2. hgroup(表示一组标题)
3. section(表示一个重要的主题或概念)
4. header和footer(表示首部和尾部)
5. nav(表示导航元素集合)
6. article(表示可独立发布的重要主题或概念)
7. aside(表示周边内容的一些沾边话题)
8. address(表示文档或文章的联系信息)
9. details和summary(生成一个区域，用户可将其展开以了解更多细节)：有了这个以后显示详情就简单多了

HTML5的表格元素

HTML5对表格这方面最大的变化是表格再也不能用来处理页面布局了。

内含元素有：table、tr、rd、thead、tbody、tfoot、caption。

td和th内有colspan和rowspan和headers属性。

可以使用colgroup和col元素对表格按列处理而不是按行处理。

HTML5的表单（不熟悉的）

1. form的action、enctype、autocomplete、target、name属性。
2. input的autofocus(只能用在一个input元素上，有多个时应用到最后一个元素)
3. fieldset(对input元素编组)以及legend元素(为fieldset元素添加说明标签)
4. button的type(submit、reset、button)，以及当type为submit时行为会覆盖form的对应行为

HMTL5的input元素

1. input的size和maxlength属性的含义与区别：size设定了文本框能够显示的字符数目，没有限定能够输入多少个字符。maxlength限定了能够输入的字符的数目。
2. readonly和disabled的区别：readonly不会改变外观，但是和disabled一样不能修改。disabled属性的input元素的数据不会被提交到服务器。
3. type：submit、reset、button、checkbox、color、date、datetime、datetime-local、email、month、number、radiobutton、range、tel、time、week、url。
4. 用input元素生成按钮与用button元素的不同之处在于后者可以用来显示含标记文字(b，em等等)。而且有些比较陈旧的浏览器(比如IE6)不能正确处理button元素。
5. type属性设置为email、tel和url的input元素会在submit的时候验证输入内容是否正确。
6. type为image时，点击input会提交表单，同时也会提交用户点击位置相对于图像左上角的x坐标和y坐标。
7. type为file时，可以上传文件。

HTML5的其他表单元素

1. select可以设置size(size=”3”)让select元素显示多个选项，设置multiple属性(multiple)可以让用户一次选择多个选项，需要按住Ctrl。
2. select中可以设置optgroup对option元素进行编组。其label属性可以用来为整组选项提供一个小标题，而dislabed属性则可以用来阻止选择组内的任何选项。
3. 要想不经输入验证就能提交表单，可以设置form元素的novalidate属性，也可以设置用来提交表单的button或input元素的formnovalidate属性。

HTML5的嵌入内容

1. 创建客户端分区响应图，给img元素添加usemap属性，usemap属性的值必须是一个井号串名称引用，如usemap="#mymap"。然后在后面定义map，name属性的值为mymap，与前面的usemap对应。area元素中定义shape和coords属性。
2. 使用iframe的时候，HTML5新增了2个属性，第一个是seamless，它会指示浏览器把iframe的内容显示得像主HTML文档的一个整体组成部分。第二个是sandbox，他对HTML文档进行限制，应用这个属性时如果不附带任何值，会禁用脚本、表单、插件和指向其他浏览器上下文的链接。
3. 可以使用object和embed元素插入内容。object相比较embed的优点是当内容插入失败后悔显示备用内容。
4. 使用progress插入进度条。
5. meter元素显示了某个范围内所有可能值的一个。
6. 插入audio、video、source、track等音频和视频。
7. canvas元素来插入图形。

CSS选择器

1. 使用相邻兄弟选择器可以选择紧跟在某元素之后的第一个某元素。如p + a，匹配p元素后面的第一个a元素。
2. 普通兄弟选择器则是匹配某元素之后的所有某个元素。如p ~ a,匹配p元素后面所有a元素。
3. 伪类选择器中，着重了解before和after。
4. 了解:nth-child()和:nth-of-type()的区别，如p:nth-child(2)，只有父级元素的第二个子元素是p元素的时候才有用，而p:nth-of-type(2)是父级元素的第二个p元素。
5. 了解一些伪类选择器：lvha，target，lang，empty，focus等。

边框和背景

1. 使用border-radius的时候，如果水平和竖直方向的半径不同的话，记得要用/字符分隔。
2. background-size使用百分比的时候要注意它定的容器的百分比，不是图片的百分比。了解cover和contain的区别。cover是浏览器选中长宽较小的值来适应容器。而contain则相反，所以cover可能会出现容器装不下图片，而contain会出现图片太小，容器还有空余。
3. 背景图片的附着方式，background-attachment：fixed、local和scroll。
4. background-origin和background-clip设置背景图片的开始位置和裁剪样式。
5. 了解box-shadow新特性。
6. 边框和轮廓最大的区别就是，轮廓不属于页面，因此应用轮廓不需要调整页面布局。有时候像边框的东西就是轮廓，outline来设置轮廓。

盒模型

1. 使用overflow来处理溢出内容。
2. visibility：hidden和display：none的区别：display：none不保留位置，后面的元素会补上来。visibility：hidden则相反，他会保留位置。
3. display：run-in。第一次遇见，怎么说呢，他的display取决于周围的元素。如果他包含一个display为block的元素，那么他的display为block。如果他的相邻元素是block元素，那么他就是行内元素。其他情况都是block元素。

创建布局

1. 使用column来设置多列布局。
2. 弹性布局flex。
3. box-flex、box-pack、box-align。

设置文本样式

1. text-align如果为justify，则text-justify的则会用来指定对齐文本的规则。
2. whitespace：normal、nowrap、pre、pre-line和pre-wrap。
3. leteter-spacing、word-spacing和line-height。
4. word-wrap：normal和break-word。
5. 首行缩进text-indent。
6. text-decoration：none、inderline、overline、line-through和blink。
7. text-transform：none、capitalize、uppercase和lowercase。
8. text-shadow设置文本阴影。
9. @font-family可以指定Web字体。src属性用来指定字体文件的位置。Web字体有多种格式，但WOFF格式得到了最为广泛的支持和泛用。

过渡、动画和变换

CSS3的重点，也是最好玩的地方。

过渡

过渡效果一般是由浏览器直接改变元素的CSS属性实现的。

CSS过渡特性允许我们控制应用新属性值的速度。

transition: transition-property, transition-duration, transition-timing-function, transition-delay.

在创建动画的时候别忘了创建反向动画，这样才不会显得突兀。

transition-timing-function：wase、linear、ease-in、ease-out和ease-in-out。

动画

CSS动画本质上时增强的过渡。

animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count.

在定义完动画名称后，要应用到@keyframes指定的动画属性上。

变换

变换也就是使用CSS对元素进行旋转，缩放，倾斜和平移。

这部分内容比较多，我建议边翻手册边做demo。手册可以看这个。

其他CSS属性和特性

1. 使用opacitu属性让整个元素和文本内容透明。注意是整个元素和文本内容透明。而color的rgba()中的透明度只对背景颜色有效。
2. table的border-collapse、border-spacing、caption-side、empty-cells、table-layout。
3. cursor属性用来改变光标的外形。