一、Web标准构成
Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。

表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。

行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript

二、HTML初识
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

注意： 体会 文本 标签 语言 几个词语

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

三、HTML骨架

1 HTML标签：

作用所有HTML中标签的一个根节点。 最大的标签 根标签

2 head标签： 文档的头部

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

注意在head标签中我们必须要设置的标签是title

3.title标签： 文档的标题

作用：让页面拥有一个属于自己的标题。

4.body标签：文档的主体 以后我们的页面内容 基本都是放到body里面的

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

四、HTML标签分类
在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 、、都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素 。

1.双标签

<标签名> 内容
该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

比如 我是文字
2.单标签

<标签名 />
单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

比如

五、HTML标签关系
标签的相互关系就分为两种：

1.嵌套关系


2.并列关系



六、HTML常用标签
HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。

1、排版标签
排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

2、标题标签
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即 ：

、

、

、

、

和

3、段落标签
在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是 ：

文本内容


是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

4、水平线标签
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

就是创建横跨网页水平线的标签。其基本语法格式如下：

是单标签
5、换行标签
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 ：



6、div span标签
div span 是没有语义的 是我们网页布局主要的2个盒子 css+div

div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。

span, 跨度，跨距；范围

这是头部
今日价格
7、文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

8、标签属性
属性就是特性 比如 手机的颜色 手机的尺寸 ，总结就是手机的。

手机的颜色是黑色 手机的尺寸是 8寸

水平线的长度是 200

图片的宽度 是 300 键 值对

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容
在上面的语法中，

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值，省略该属性则取默认值。

采取 键值对 的格式 key="value" 的格式

9、图像标签img
HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式如下：


该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

10、链接标签
在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

文本或图像
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。

target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

注意：

1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

11、锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。 创建锚点链接分为两步：

1.使用“a href=”#id名>“链接文本"创建链接文本（被点击的）


2.使用相应的id名标注跳转目标的位置。

第2集


12、特殊字符标签

13、列表标签
1、无序列表 ul

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：


  • 列表项1

  • 列表项2

  • 列表项3

    • ......

2、有序列表 ol

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：


  1. 列表项1

  2. 列表项2

  3. 列表项3

    4. ......

3、自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：


名词1

名词1解释1

名词1解释2

...
名词2

名词2解释1

名词2解释2

...

14、表格（标签） table
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：




...

...
单元格内的文字

在上面的语法中包含三对HTML标签，分别为
、、，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释 ：

1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。

注意：

  1. 中只能嵌套
  2. 标签，他就像一个容器，可以容纳所有的元素
    表格属性

表头标签

表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签替代相应的单元格标签即可。

表格标题

表格的标题： caption

定义和用法

caption 元素定义表格标题。



我是表格标题

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格(难点)

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

公式： 删除的个数 = 合并的个数 - 1

合并的顺序 先上 先左

15、表单标签
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

表单控件：

包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件(重点)

在上面的语法中，标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，标签还可以定义很多其他的属性，其常用属性如下表所示。

label标签

label 标签为 input 元素定义标注。

作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢？

for 属性规定 label 与哪个表单元素绑定。



textarea控件(文本域)

如果需要输入大量的信息，就需要用到标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：


下拉菜单

使用select控件定义下拉菜单的基本语法格式如下 ：


注意：

中至少应包含一对。

在option 中定义selected =" selected "时，当前项即为默认选中项。

表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：


各种表单控件

常用属性：

Action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。

method 用于设置表单数据的提交方式，其取值为get或post。

name 用于指定表单的名称，以区分同一个页面中的多个表单。

注意： 每个表单都应该有自己表单域。