HTML5的初步认识

WebHTML5的学习（1）

首先
#认识前后端的关系和内容

前端中包括了手机和电脑的网页，也有对ios和android的区分，同时还有小程序，嵌入式操作平板和大屏仪表盘等，需要学的知识包含html，css，jQuery等。

#document的编程可以将html文件具体分为三要素html是名词，css是用来修饰名词的形容词，而JavaScript则是名字发生动画的动词。

我接下来进入到HTML的学习中。

（1）什么是HTML
HTML是HyperTextMarkupLanguage(超文本标记语言)的简写，他不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。他可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为html文件的后缀名（扩展名）

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

注：C/Sclient/server客户端/服务器模式

（3）http协议（HyperTextTransportProtocol）
HTTP是超文本传输协议的缩写，它用于传送WWW方式的数据。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求，请求头包含请求的方法、URL、协议版本、以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应，响应的内容包括消息协议的版本，成功或者错误编码加上包含服务器信息、实体元信息以及可能的实体内容。

（4）URL（UniformResourceLocator）
URL就像每家每户都有一个门牌地址一样，每个网页也都有一个Internet地址。当你在浏览器的地址栏中输入一个URL或者单击一个超链接时，URL就确定了要浏览的地址。浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页。
URL的格式如下协议://ip:port/path

（5）Html元素（HTMLelement）
一个Html元素是由一个开始标签，一个结束标签，以及内容。结束标签与开始标签类似，不过结束标签在尖括号内多了一个斜线。标签决定了其内容的特性。如下，标签内的问题以段落形式进行显示。
#把script放在body最后节点把动态放在最后浏览器编译的顺序

（6）Html属性（Attributes）
元素也可以拥有属性，与元素相关的特性称为属性，属性由键值对组成。属性信息不会出现在你的实际内容里。比如添加一个class属性用于识别元素，稍后也可以根据该属性进行一些样式信息的设定或者其他事情。属性是由属性名和属性值组成，属性名与属性值之间使用等于号“=”分割，属性与属性之间使用空格“”分开，属性值通常使用单引号或者双引号括起来。

核心属性：大多数元素都可以使用的属性
1.id唯一标识
2.class标识一类元素
3.style样式
4.title描述信息

（7）Html语法
1.空白在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白实体在HTML中，某些字符是预留的。例如：不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在HTML源代码中使用——
2.字符实体（characterentities)，实体以&符开始以;结尾。以下是常见的实体

3.注释注释会被浏览器忽略而不被解析，用户无法看到，注释的作用是让程序员表明代码的含义，方便以后再看的时候能看明白。
< !–这是一段注释–> #注释快捷键ctrl+/

（8）超链接（a）
超链接可以允许我们从当前文档链接到任意其他文档（其他资源），也可以链接到文档的某个特定部分。
<ahref="http://www.baidu.com"target=“blank”>百度一下

href表示跳转的目的地，取值如下
1.ID值用于锚点跳转
2.URLURL使用path来定位文件path又分为相对路径和绝对路径
3.emial<ahref=“mailto:xxxxxxx”>Sendemailtonowhere
4.target规定在何处打开链接文档_blank_self_parent_top

（9）图片 img
在Html文档中代表图片。
<imgsrc="images/phone.jpg"alt="图片找不到了…“width=”200px”>
src表示图片的URL地址（必须）
alt表示替换图片的文本内容，当url地址出错时，将会显示alt的内容
width设置图片的宽度，单位为pxlheight设置图片的高度，单位为px

（10）表格 table
在Html文档中代表表格，通过二维数据表表示数据。Table标签经常需要配合一起使用。

thead表示表头，包含了tr以及td。
Tfoot表示表脚，包含了对表的总结信息。
tbody表示表格的表体，包含了很多caption表示表格的标题信息。
tr表示表格的行，包含td,th。

属性有1.colspan跨列数2.rowspan跨行数3.width宽度

1.table-align表格应该如何在文档中对齐，可以取值：
2.left,center,right•border设定表格边框特性，取整数为值，单位为px
3.cellpadding设定内容与单元格之间的距离
4.cellspacing设定单元格与单元格之间的距离
5.width设定表格的宽度
6.bgcolor设定表格的背景色
7.colgroup定义一个表中的一组列，只能作为table的子元素，位于caption元素后，其他元素之前。
8.col定义一个表中的列，并用于在所有公共单元上定义通用语义，经常作为colgroup元素的子元素。
9.span跨列数，即规定有几列可以作为同一列

（11）Html5新增标签
header：描述了文档的头部区域，于定义内容的介绍展示区域，header是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。

nav：是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。

section：定义文档中的节（section、区段），作为Html文档独立的功能。比如章节、页眉、页脚或文档中的其他部分，section通常包含了一组内容及其标题。

article：代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任何独立的内容。

aside：元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。

figure：标签规定独立的流内容（图像、图表、照片、代码等等）figure元素是一种元素的组合，带有可选标题，figure元素表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。

figcaption：figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。

footer：文档的底部区域，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。

address：用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。