HTML学习整理

HTML

认识列表

列表是网页中最常见的一种信息结构，很多初学者认为带有项目的符号的多行信息模块就是列表，这是对列表的语义误解，事实上，列表应该是同类、同行或同质信息的排列和结合。

· 列表的常用元素

• ui:无序列表
• ol:有序列表  
• li：列表项目
• dl：定义列表
• dt:定义列表标题
• dd:定义列表说明

认识表格

• table:表
• tr:表格行
• td:表格数据单元
• caption:表格标题
• thead：表格头部
• tbody：表格主体

table元素用来定义数据表格的外框，tr是一行数据的包含框，td简称单元格。数据表中的一般数据都储存在td元素当中，而该元素又嵌套在tr元素中，tr元素又嵌套在table元素中，形成3层结构关系

table元素可选属性

• border:表格边框宽度
• cellpadding:单元边沿与其内容的空白
• cellspacing:单元格之间的空白
• frame:规定哪些外侧边框是可见的

void	不显示外侧边框。
above	显示上部的外侧边框。
below	显示下部的外侧边框。
hsides	显示上部和下部的外侧边框。
vsides	显示左边和右边的外侧边框。
lhs	显示左边的外侧边框。
rhs	显示右边的外侧边框。
box	在所有四个边上显示外侧边框。
border	在所有四个边上显示外侧边框。

• rules:规定哪些内侧边框是可见的

none	没有线条。
groups	位于行组和列组之间的线条。
rows	位于行之间的线条。
cols	位于列之间的线条。
all	位于行和列之间的线条。

• tr可选属性

  align：定义表格行的内容对齐方式

valign：规定表格行中内容的垂直对齐方式

• td可选属性

  colspan：规定单元格可横跨的列数

  rowspan：规定单元格可横跨的行数

认识表单

一个完整的表单结构应该包含3部分：包含框，输入框和提交按钮

form元素是表单的意思，与table元素一样，form元素也是一个包含框，它包含了所有的表单域元素。form元素负责数据的处理任务，包括对各个表单域的数据采集、打包和发送到指定的服务器端目标文件中

• input是一个表单域对象，也可以称为一个输入框，由该元素还可以延伸出很多形式的输入框。
• form可选属性
• action：规定当表单提交时向何处提交表单
• method：规定用于发送form-data的http方法，分为get和post
• input可选属性
•   text:单行的文本
•   password:密码域
•   CheckBox:复选框
•   submit:提交按钮
•   reset:重置按钮
•   radio:单选按钮

textarea和select元素

textarea元素用来设置文本域，也就是所谓的多行文本框

textarea元素可选属性

cols和rows分别设置文本域的字符宽度和高度

wrap属性定义用户输入内容大于文本域宽度时的显示，选值包括2个；spft：当在表单中提交时，textarea的文本不换行，默认值；hard：当在表单中提交时，textarea中的文本换行，当使用hard时，必须规定cols属性

select元素用来定义下拉菜单或列表框。select元素必须与option元素搭配使用，option元素定义每个选项的信息。

表单分组

表格分组的目的是为了方便浏览，而表单分组就是为了方便输入。

表单分组可以使用fieldset和legend元素，fieldset元素默认显示边框效果，而legend默认位于左上角，所有这些样式都可以通过css来改变，legend元素必须包含在fieldset元素内部，且紧邻fieldset元素

绑定提示标签

在表单中还提供了一个label元素，label是标签的意思，即为表单域定义提示信息。当用户单击标签文本时，系统会自动把输入焦点定位到对应的表单域中，这对于快速输入信息有很大帮助。

select选项分区

optgroup是表单中比较生僻的一个元素，optgroup元素的作用是在下拉菜单或列表框中定义分组选项，通俗的来说，就是可使用optgroup元素为select元素所包含option元素进行分类

认识元素类型

在默认情况下，网页遵循HTTP（超文本传输协议）协议，以二进制数据流的形式从服务器端下到客户端中，浏览器接收到数据流之后，在根据HTML解析规则把数据流按顺序呈现在页面中。

由于HTML元素拥有不同的显示属性，所以最终显示的效果也不尽相同。根据显示属性的不同，网页元素可以包含以下几种：

块状显示

块状显示会把元素当作一个木板显示出来，如果为块状元素设置边框，则可以清晰地看到它的轮廓。它拥有清晰的宽、高、边框、补白和背景等基本属性

块状元素具有的两个基本特性

• 块状元素默认宽度都是100%，即块状元素会挤满一排显示。
• 块状元素的的末尾都会隐藏一个换行符，当然是看不见它的，但是可以看到效果，也就是说，块状元素后面不能够再跟着显示其它行内元素或者块状元素。

行内显示

行内显示没有显示的轮廓，因此可以形象地把它联想成一个纸皮袋子。如果为行内元素描一个边，有时显示的是不规则的。同时，行内元素正如他名字那样，多个行内元素并列显示在同一个行内。

行内元素的两个基本特性

• 行内元素没有宽度和高度，即使为他定义高度，但在浏览器也不会显示。
• 行内元素的呈现效果与块状元素存在很大差别，这不仅仅体现在宽和高方面，它们可以并排显示，随行移动

行内块状显示

行内块状显示是行内和块状显示的结合，拥有块状和行内元素的各自优势。但是默认状态下，元素不会显示该状态，需要使用CSS声明
表格显示

表格也是一种块状元素，但是它还具有一些其他特性，如更严格的组织性，表格元素之间的严密协调性等。表格显示还包括表格、行、单元格、标题、列、组等不同的显示性质效果。

列表显示

列表也属于块状元素，但是它拥有项目符号等一些其他特性，借助CSS可以为元素定义更多的显示效果。

HTML5新增功能元素

• hgroup元素：用于对页面或页面中的一个内容区块的标题进行组合
• figure元素：表示一段独立的内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素添加标题
• video元素：定义视频，如电影片段或其他视频流。
• audio元素：定义音频，如音乐或其他音频流。
• embed元素:用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等
• mark元素：主要用来在视觉是向用户呈现那些需要突出显示或者高亮的文字
• time元素：可以表示日期或时间，也可以同时表示两者
• canvas元素：表示图形，如图标和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图APL展现给客户端JavaSceipt，以使脚本能够把想绘制的东西绘制到这块画布上。
• output元素:表示不同类型的输出，如脚本的输出。
• source元素：为媒介元素（如video和audio）定义媒介资源
• menu元素：表示菜单列表
• ruby元素：表示ruby注释（中文注音或字符）
• rt元素：表示字符（中文注音或字符）的解释或发音
• rp元素：在ruby注释中使用，以定义不支持ruby元素浏览器所显示的内容。
• wbr元素:表示软换行
• command元素：表示命令按钮，如单选框、复选框和按钮。
• details元素：表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用，summary元素提供标题或图例
• datalist元素：表示可选数据的列表，与input配合使用，可以制作出输入值的下拉列表。
• datagrid元素：表示可选数据的列表，它以树形列表的形式来显示。
• keygen元素：表示生成秘钥。
• progress元素：表示运行中的进程
• email：表示必须输入E-email地址的文本输入框
• url：表示必须输入url地址的文本输入框
• number：表示必须输入数值的文本输入框
• range：表示必须输入一定范围内数字值的文本输入值
• date：选取日、月、年
• month：选取日、月
• week：选取周、年
• time：选取时间（小时和分钟）

HTML5对象属性

1.表单属性

• 为input（type=text）、select、textarea、与button元素新增autofocus属性。它以指定属性的方式让元素在画面打开时自动获得焦点
• 为input（type=text）与textarea元素新增placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容
• 为input、output、select、textarea、button与fieldset新增form属性，声明它属于哪个表单，然后将其放置在页面上任何位置，而不是表单之类
• 为input元素（type=text）与textarea新增加required属性。该属性表示在用户提交时进行检查，检查该元素内一定要有内容
• 为input元素增加autocomplete、min、max、multiple、pattern、和step属性，同时还有一个新的list元素与datalist元素配合使用。datalist元素与autocomlete属性配合使用。Multiple属性允许在长传文件时时一次上传多个文件

2.链接属性

• 为a与area元素增加了media属性，该属性规定目标url是为什么类型的媒介/设备进行优化的，只能在href属性存在时使用。
• 为area元素增加了hreflang属性与rel属性，以保持与a元素、link元素的一致
• 为link元素增加了新属性sizes。该属性可以与icon元素结合使用（通过rel属性），该属性指定关联图标（icon）的大小

HTML5全局属性

在HTML5中，新增全局属性的概念，所谓全局属性是指可以对任何元素都使用的属性

1.contentEditable属性

contentEditable属性的主要功能是允许用户可以在线编辑元素中的内容。contentEditable是一个布尔值属性，可以被指定为true和false。该属性还有一个隐藏的inherit（继承）状态，属性为true是，元素被指定允许编辑，属性为false时，元素被指定不允许编辑；未指定true或false时，则由inherit状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的。

2.designMode属性

designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上文所述的designMode属性的元素都变成了可编辑状态。designMode属性只能在JavaScript脚本中被编辑修改，该属性有2个值：on与off。属性被指定为on时，页面可编辑；属性被指定为off时，页面不可编辑。

3.hidden属性

在HTML5中，所有的元素都允许使用一个hidden属性。该属性类似于input元素中的hidden元素，功能是通知浏览器不渲染该元素，使该元素处于不可见状态。但是元素中的内容还是浏览器创建的，也就是说页面装载后允许使用JavaScript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也即时显示出来。Hidden属性是一个布尔值的属性，当设为true时，元素处于不可见状态；当设为false时，元素处于可见状态。

4.spellcheck属性

spellcheck属性是HTML5针对input元素（type=text）与textarea这两个文本输入框提供的一个新属性，它的功能为对用户输入的文本内容进行拼写和语法检查。spellcheck属性是一个布尔值的属性，具有false和true两种值。但是它在书写的时候有一个特殊的地方，就是必须声明属性值为true或false。

5.tabindex属性

tabindex属性是开发中的一个基本概念，当不断敲击Tab键让窗口或页面中的控件获得焦点，对窗口或页面中的所有控件进行遍历时，每一个控件的tabindex表示该控件是第几个被访问的。

HTML5元素分类

HTML5新增了27个元素，废弃16个元素，根据现有的标准规范，把HTML5的元素按优先等级定义为结构性元素、块级元素、行内语义性元素、交互性元素4大类

1.结构性元素

结构性元素主要负责web的上下文结构的定义，确保HTML文档的完整性，这类元素包括以下几个：

• section：用于表达书的一部分或一章，或一章内的一节。在web页面应用中，该元素也可以用于区域的章节的描述
• header：页面的主体上的头部，注意区别不是head元素。head元素中的内容往往是不可的；而header元素往往出现在body元素中
• footer：页面的底部（页脚）。通常，人们会在这里标出网站的一些相关信息。
• nav：是专门用于菜单导航、链接导航的元素。
• article：用于表示一篇文章的主体内容，一般为文字集中显示区域

1. 块级元素

块级元素主要完成Web页面区域的划分，确保内容的有效分隔，这类元素包含以下几个：

aside：用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。从一个简单显示来看，就是侧边栏，可以在左边，也可以在右边。从一个页面布局来看就是摘要。

figure：是对多个元素进行组合并展示的元素，通常与figcaption联合使用

coke：表示一段代码块

dialog：用于表达人与人之间的对话。该元素还包括对dt和dd这两个组合元素，它们常常同时使用，dt用于表示说话者，dd则用于表示说话者的内容

1. 行内语义元素

行内语义元素主要完成Web页面具体内容的引用和表述，是丰富内容展示的基础，这类元素包括以下几个：

meter：表示特定范围内的数值，可用于工资、数量、百分比等

time：表示时间值

progress：用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监视

video：视屏元素，用于支持和实现视屏（含视屏流）文件的直接播放，支持缓冲预载和多音频格式，如MPEG-4、OggV和WebM等

1. 交互性元素

交互性元素主要用于功能性的内容表达，会有一定的内容和数据关联，是各种事件的基础，这类元素包括以下几种：

details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如点击）与legend交互才会显示出来

datagrid：用来控制客户端数据与显示，可以由动态脚本即时更新

menu：主要用于交互菜单

command：用来处理命令按钮