HTML5基础

实体字符

```sql
` `     空格
- `<` &lt; &#60; 小于号
- `>` &gt; &#62; 大于号
-  & &amp; &#38; 和号
-  " &quot; &#34; 引号
-  ' &apos; &#39; 撇号
-  ￠ &cent; &#162; 分
-  £ &pound; &#163; 镑
-  ¥  &yen; &#165; 日圆
-  € &euro; &#8364; 欧元
-  § &sect; &#167; 小节
-  © &copy; &#169; 版权
-  ® &reg; &#174; 注册商标
-  ™ &trade; &#8482; 商标
-  × &times; &#215; 乘号
-  ÷ &divide; &#247; 除号

元数据

5秒跳转到指定 URL

   <meta http-equiv="refresh" content="5;http://lanou3g.com">

只是定时刷新当前页面

<meta http-equiv="refresh" content="1">

另一种声明字符编码

<meta http-equiv="content-type" content="text/html charset=utf-8">

属性值说明
refresh 重新载入当前页面，或指定一个URL。单位秒。
content-type 另一种声明字符编码的方式

全局属性

• id 属性给元素分配一个唯一标识符,一般用于js编程中
• class 属性用来给元素归类。一般是文档中某一个或多个元素同时设置 CSS 样式
• hidden隐藏元素，后续标签会占用这个p的位置
• title属性用于对元素的内容进行额外的提示
• tabindex表单中按下 tab 键，实现获取焦点的顺序。如果是-1，则不会被选中。 一般用于编写管理软件的输入页面时，避免客户的鼠标操作
• style 属性可以用于定义当前标签的css样式

超链接

• href指定元素所指资源的URL
• hreflang指向的链接资源所使用的语言
• media说明所链接资源用于哪种设备
• rel说明文档与所链接资源的关系类型
• target指定用以打开所链接资源的浏览环境
• type说明所链接资源的 MIME 类型（比如 text/html）

只有href和target一般比较常用，而href是必须要用的。其他几个属性在元素使用较少

href是必须属性，否则元素就变成空元素了。如果属性值是https://开头的URL，意味着点击跳转到指定的外部网站。
例如<a href="https://www.4399.com">百度</a>

target属性告诉浏览器希望将所链接的资源显示在哪里

所谓相对路径就是相对于链接页面而言的另一个页面的路径

相对路径的条件是必须文件都在一个磁盘或目录下，如果是在同一个目录下，直接属性值就是被链接的文件名.后缀名。如果在同一个主目录下，有多个子目录层次，那就需要使用目录结构语法

分组元素

所谓分组，就是用来组织相关内容的 HTML5 元素，清晰有效的进行归类。
p表示段落
div一个没有任何语义的通用元素，和 span 是对应元素
blockquote表示引自他出的大段内容
pre表示其格式应被保留的内容
hr表示段落级别的主题转换，即水平线
ul,ol表示无序列表，有序列表
li用于 ul,ol 元素中的列表项
dl,dt,dd表示包含一系列术语和定义说明的列表。

• dt在dl内部表示术语，一般充当标题；
• dd在dl内部表示定义，一般是内容

figure表示图片
figcaption表示 figure 元素的标题

二维表格

table表示表格
thead表示标题行
tbody表示表格主体
tfoot表示表脚
tr表示一行单元格
th表示标题行单元格
td表示单元格
col表示一列
colgroup表示一组列
caption表示表格标题
表格默认不显示边框，如果需要显示边框，则需要使用css或者html属性border定义，border的值为边框的宽度元素表示一个表格的声明，元素表示表格的一行，元素表示一个单元格。 默认情况下表格是没有边框的，所以，在元素增加一个border属性，设置为 1 即可显示边框。

th元素主要是添加标题行的单元格，实际作用就是将内部文字居中且加粗。这里用了一个通用属性style，主要用于CSS样式设置，以后会涉及到。th和td均属于单元格，包含两个合并属性：colspan、rowspan等。

thead元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头，它的位置是不固定的，使用此元素可以限定在开头位置。

tfoot元素为表格生成表脚，限制在表格的底部。

tbody元素主要是包含住非表头表脚的主体部分，有助于表格格式的清晰，更加有助于后续CSS和JavaScript的控制。

caption元素给表格添加一个标题。
colgroup元素是为了处理某个列，span属性定义处理哪些列。

table除了可以定义一个二维表格之外，早期还经常用于格式控制，现在已经被div+css所替代

文档元素

• h1~h6表示标题
• header表示首部
• footer表示尾部
• nav表示有意集中在一起的导航元素
• section表示重要概念或主题
• article表示一段独立的内容
• address表示文档或 article 的联系信息
• aside表示与周边内容少有牵涉的内容
• hgroup将一组标题组织在一起
• details生成一个区域，用户将其展开可以获得更多细节
• summary用在 details 元素中，表示该元素内容的标题或说明

档元素基本没有什么实际作用效果，主要目的是在页面布局时区分各个主题和概念。文档元素的大部分标签，是没有任何效果的，完全是为了配合语义使用，以强调它的结构性。只有在后面的章节学习CSS，配合使用才能起到布局和样式的效果。

hgroup元素的作用就是当多个标题出现，干扰到一对或多个本身需要整合的标题，这是使用此元素包含群组。

section元素的作用是定义一个文档的主题内容。

nav元素给文档页面添加一个导航区域。

article元素表示独立成篇的文档，里面可以包含头、尾、主题等一系列内容。在比较大的页面中会使用到，比如一片博文的列表，每篇博文，都有自己的头、尾、主题等内容。和此相似的还有论坛的帖子、用户的评论、新闻等。

aside元素专门为某一段内容进行注释使用。

嵌入元素

• img嵌入图片
• map定义客户端分区响应图
• area表示一个用户客户端分区响应图的区域
• audio表示一个音频资源
• video表示一个视频资源
• iframe嵌入一个文档
• embed用插件在HTML中嵌入内容
• canvas生成一个动态的图形画布
• meter嵌入数值在许可值范围背景中的图形表示
• object在HTML文档中嵌入内容param表示将通过
• object 元素传递给插件的参数
• progress嵌入目标进展或任务完成情况的图形表示
• source表示媒体资源svg表示结构化矢量内容
• track表示媒体的附加轨道（例如字幕）

img元素主要是插入一张外部的图片，那么图片的路径问题和超链接一致图片可以是当前网站内的资源，也可以是其它网站中的资源【盗链】一般网站中所使用的图片有png、gif和jpg三种格式。

src嵌入图像的URL,图片可以来源于其它网站，也可以是当前网站中的资源
alt当图片不加载时显示的备用内容，如果图片正常显示则不会显示这个内容
width定义图片的长度,默认单位是像素，也允许使用百分比.200px等价于直接写
height定义图片的高度（单位是像素）

iframe表示内嵌一个HTML文档。其下的 src 属性表示初始化时显示的页面

embed元素是扩展浏览器的功能，大部分用于添加对插件的支持。

progress元素可以显示一个进度条，一般通过JS控制内部的值。IE9以及更低版本不支持此元素

meter元素显示某个范围内的值。其下的属性包含：min和max表示范围边界，low表示小于它的值过低，high表示大于它的值过高，optimum表示最佳值，但不出现效果。IE浏览器不支持此元素<progress id="pg" value="0" max="100"></progress>

主流视频支持的格式为：.avi、.flv、.mp4、.mkv、.ogg、.webm
主流的音频编解码器：AAC、MPEG-3、Ogg Voribs视频编解码器：H.264、VP8、Ogg Theora

form表示HTML表单

• input表示用来收集用户输入数据的控件
• textarea 表示可以输入多行文本的控件
• select 表示用来提供一组固定的选项
• option 表示提供提供一个选项
• optgroup 表示一组相关的option元素
• button 表示可用来提交或重置的表单按钮（或一般按钮）
• datalist定义一组提供给用户的建议值
• fieldset表示一组表单元素
• legend 表示 fieldset 元素的说明性标签
• label 表示表单元素的说明标签
• output 表示计算结果

表单数据验证

HTML5对表单提供了输入验证检查方式，但这种验证还是比较简陋的，并且不同的浏览器支持 的成熟度还不同。在大部分情况下，可能还是要借助jQuery等前端库来实现丰富的验证功能和显示效果。

常见的三种验证:
1、必须填写一个值 <input type=“text” required>
2、针对数值型输入限定在某一个范围内<input type=“number” min=“10” max=“100”>
3、使用正则表达式

应用系统

1、单机应用

2、C/S结构：又称为胖客户端应用，应用逻辑主要运行在客户端。服务器通常采用高性能的PC、
工作站或小型机，并采用大型数据库系统，如Oracle、Sybase、Informix或SQLServer

3、B/S结构：又称为瘦客户端应用，应用逻辑主要集中在服务器端。客户机上只要安装一个浏览
器Browser，服务器安装Oracle、Sybase、Informix或SQLServer等数据库以及应用程序

服务器-客户机，即Client-Server(C/S)结构。
C/S结构通常采取两层结构。服务器负责数据的管理，客户机负责完成与用户的交互任务 应用程序分为两部分：服务器部分和客户机部分。服务器部分是多个用户共享的信息与功能，执行后台服务，如控制共享数据库的操作等;客户机部分为用户所专有，负责执行前台功能，在出错提示、在线帮助等方面都有强大的功能，并且可以在子程序间自由切换。

B/S架构是web兴起后的一种网络架构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用.