1、html的简介
1.1 什么是html？
HTML:HyperText Markup Language：超文本标记语言或超文本链接标识语言，目前网络上使用最为广泛的语言，是构成网页文档的主要语言。可以包含文字、图形、动画、声音、表格、链接等。
html结构包括头部（head）、主体（body），其中头部描述浏览器所需信息，而主体包含页面显示内容。。
超文本：超出文本的范畴，使用html可以轻松实现这样操作。
标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>。
1.2 html的规范（遵循）
html结构包括头部（head）、主体（body），其中头部描述浏览器所需信息，而主体包含页面显示内容。
HTML文档由4个主要标记组成，这4个标记主要有<html>、<head>、<title>、<body>。他们构成了HTML页面最基本的元素。
<html>标记是HTML文件的开头。所有HTML文件都是以<html>标记开头，以</html>标记结束。
<head>标记是HTML文件的头标记，作用是放置HTML文件的信息。
<title>标记为标题标记。可将网页的标题定义在<title>与</title>标记之中。
<body>是HTML页面的主体标记。页面中的所有内容都定义在<body>标记中。<body>标记也是成对使用的。
html的代码不区分大小写的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
</head>
<body>
<h1>hello word!</h1>
</body>
</html>
1.3 W3C介绍
W3C是英文world wide web consortium的缩写。中文意思是W3C理事会或者万维网联盟。
W3C于1994年在麻省理工学院计算机科学实验室成立。非盈利组织。像html、xhtml、css、xml的标准都由W3C来制定。
1.4 常用浏览器
1.4.1 IE浏览器
window自带浏览器
浏览网页效率偏低，尤其是早期的IE6，IE7，IE8后逐步改善。但由于他的普及率较高，所以虽然有谷歌浏览器、火狐等高效率的浏览器，但是我们还是需要兼容IE.
IE浏览器只建议浏览效果，不提倡用IE来进行调试html源码。
1.4.2 谷歌浏览器 Google Chrome
该浏览器执行效率高，平常我们浏览页面时都采用此浏览器。网页开发过程中也使用该浏览器调试页面源码。
使用Chrome调试页面源码：
使用浏览器打开网页，按“F12”打开调试窗口，可以使用鼠标在对应元素位置点击右键，然后点击查看元素
1.4.3 火狐浏览器
开源的浏览器。
火狐浏览器浏览效率高、安全性高、拓展性好。该浏览器和谷歌浏览器一样适用于源代码调试。调试方式也像类同。
2、HTML常用标记
HTML中提供了很多标记，可以用来设计页面中的文字、图片，定义超链接等。这些标记的使用可以使页面更加的生动。
2.1 注释
<!-- 注释 --> ：注释的内容将不会显示到浏览器页面中。
2.2 文本标签
2.2.1 基本结构样式：
<标记 属性=”属性值”>内容</标记>
<标记 属性=”属性值”></标记> 等价于 <标签 属性=”属性值”/>
标记也称为元素。
html中的标记是不区分大小写的。
2.2.2 文字标签
<font></font>：文字标签，修改文字的样式
属性：
- size: 文字的大小 取值范围 1-7,超出了7，默认还是7
- color：文字颜色
- face：字体
颜色两种表示方式
- 英文单词：red green blue black white yellow gray......
- 使用十六进制数表示 #ffffff : RGB
<font color="red">红色</font>
<font color="#EEEEEE">dffd</font>
2.3 标题标签、水平线标签和特殊字符
* 标题标签：
<h1></h1> <h2></h2> <h3></h3> .......<h6></h6> ：从h1到h6，大小是依次变小，同时会自动换行
* 水平线标签 <hr/>
属性：
- size: 水平线的粗细 取值范围 1-7
- color: 颜色
<hr size="5" color="blue"/>
* 特殊字符
想要在页面上显示这样的内容 <html>:是网页的开始！需要对特殊字符进行转义
版权号（©） ： ©
< ：< > ：> 空格 ： & ：&
2.4 换行标记
<br/> ：换行标签
2.5 段落标签
<p align=””>内容</p> : 段落标签。在段前和段后各添加一个空行。
align的值为left、center、right
与<br/>区别：
- <br/>只是换行操作
- 段落与其他内容间还增加了空行
- 段落内容可以进行对齐排版。
2.6 居中标签
HTML默认布局是从左到右依次排序。
<center></center> :居中标签，使页面中的内容在页面的居中位置显示。
2.7 列表标签
在每个列表项的前面添加一个空格。
- <dl> </dl>: 表示列表的范围
- 在dl里面 <dt></dt>: 上层内容
- 在dl里面 <dd></dd>：下层内容\
<dl>
<dt>部门</dt>
<dd>计划部</dd>
<dd>工程部</dd>
<dd>生产部</dd>
</dl>
2.7.1 无序列表
无序列表是在每个列表项的前面添加一个圆点符号。
通过符号<ul>创建一组无序列表，其中每个列表项用<li>表示。
属性： type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc
<ul>
<li>计划部</li>
<li>工程部</li>
<li>生产部</li>
</ul>
2.7.2 有序列表
有序列表是在每个列表项的前面添加排序。
通过符号<ol>创建一组无序列表，其中每个列表项用<li>表示。
| 属性 | 值 | 描述 |
| reversed | reversed | 规定列表顺序为降序。(9,8,7...) |
| start | number | 规定有序列表的起始值。 |
| type |
|
规定在列表中使用的标记类型。 |
<ol>
<li>计划部</li>
<li>工程部</li>
<li>生产部</li>
</ol>
2.7.3 字体显示补充
<b></b> 字体加粗
<i></i> 斜体
<u></u> 下划线
<sup></sup> 上标
<sub></sub> 下标
<del></del> 删除线
2.8 表格标签
表格包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。
表格标记<table>、标题标记<caption>、表格行标记<tr>、单元格标记<td>
基本语法：
<table></table> 表格标签，也是表格的最大标签，表格中所有内容都要放在此标签中。
<tr></tr> 表示表格中的一行，嵌套在<table>标签中。
<th></th> 表头单元格标签。表示表格的表头中的一个单元格。
<td></td> 单元格标签。表示表格中的一个单元格，是表格中的最小单位，嵌套在<tr>标签中。
可以对数据进行格式化，使数据显示更加清晰
- <table></table>: 表示表格的范围
- border：表格线
- bordercolor：表格线的颜色
- cellspacing：单元格直接的距离
- width：表格的宽度
- height：表格的高度
在table里面 <tr></tr>
- 设置对齐方式 align： left center right
在tr里面 <td></td>
- 设置显示方式 align： left center right
使用th也可以表示单元格
- 表示可以实现居中和加粗
表格的标题
<caption></caption>
* 合并单元格
- rowspan：跨行
** <td rowspan="3">人员信息</td>
- colspan：跨列
** <td colspan="3">人员信息</td>
2.9 HTML表单标签
表单的作用：主要用于让用户输入数据，并提交到服务器。
<form>标签中通常会有很多子元素，用来定义各种交互控件（文本字段、复选框、单选框、提交按钮等等），比如< input>、< button>、< select>、< textarea>等标签。
<form>标签语法格式：<form action="提交地址" method="提交方式">表单内容</form>
说明：表单内容可以是< input>、< textarea>、< button>、< select>、< option>、< optgroup>、< fieldset>、< label>等标签。
<form>标签属性：
- accept：服务器接收到的文件的类型（html5版本也不支持）；
- accept-charset：服务器可处理的表单数据字符集；
- action：当提交表单时向何处发送表单数据；
- autocomplete：是否启用表单的自动完成功能，值可以是：on、off，html5新增；
- enctype：在向服务器发送表单数据之前如何对其进行编码，method="post"时可以使用，值可以是：multipart/form-data、text/plain等；
- method：用于发送表单数据的HTTP方法，值可以是：get、post；
- name：规定表单的名称，在xhtml中也废弃，使用id来代替；
- novalidate：提交表单时不进行验证，值为：novalidate，html5新增；
- arget：在何处打开action属性中的地址，值可以是：_blank、_self、_parent、_top；
get和post区别？
1）get请求地址栏会携带提交的数据，post不会携带（数据在请求体里面）
2）get请求安全级别较低，post较高
3）get请求数据大小的限制，post没有限制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html中form表单标签的详细介绍</title>
</head>
<body bgcolor="bisque">
<form action="/1.php" method="get"> 用户名：<br>
<input type="text" name="userName">
<br>密码：<br>
<input type="text" name="password"><br><br>
<input type="submit" value="登陆">
</form>
</body>
</html>
表单元素标记
①.单行文本
<input name=”文本框名称” type=”text” value=”初始值” size=“显示字符数” maxlength=“最多容纳字符数”readonly=”readonly”(设置为只读) disable=”disable”(设置为不可操作) ></input>
②.密码框
<input name=”文本框名称” type=”password” value=”初始值” size=“显示字符数”></input>
③.单选框
<input name=”文本框名” type=”radio” value=” 提交值” checked=”checked”(是否被选中) ></input>,
④.复选框
<input name=”文本框名” type=”checkbox” value=”提交值” checked=“checked”></input>
⑤.下拉框
单选下拉框：
<select name=”下拉框名”>
<option selected=”selected” (那个是初始选择就添加) value=”提交值”>列表1</option>
<option>列表2</option>
</select>
（<optgrounp label=”分组名称”><option></option></optgrounp>用来做有子项的下拉框）
多选下拉框：
<select name="下拉框名字" size="显示的行数" multiple="multiple"> //multiple:表示允许多选
<option value="提交值">显示值</option>
。。。。
</select>
表单元素标签分类
1.<label >标注内容</label>标签：为input元素定义标注(标记)，<label>标签的for属性应当与相关元素id相同
如：<input type=”redio” name=”sex” id=”man”><label for=”man”>男</label>就把input标签和label标签关联在一起。
2.按钮
语法：<input type="按钮类型：reset[重置表单]、submit[提交表单]、button[普通按钮]、" name="按钮名称" value="按钮显示文本">
3.图片按钮
语法：<input type="image" name="按钮名称" src="图片路径" />
4.隐藏域：
语法：<input type="hidden" value="隐藏域的值" />
5.多行文本
语法：<textarea name="多行文本框名称" cols="每行中的字符数" rows="显示的行数"></textarea>
6.文件框
语法：<input type="file" name="文件框名称" size="显示长度"/>
7.表单外框
语法：<fieldset></fieldset>定义围绕表单中元素的边框
<legend></legend>为fieldset元素定义标题
8.动画插入
语法：<embed src="动画地址" width="宽度" height="高度" wmode="transparent:使flash背景部分透明"></embed>
9.滚动字幕
语法：<marqueen
direction="滚动方向：left[左]、right[右]、up[上]、down[下]"
behavior="滚动方式：scroll[一圈一圈绕着走]、slide[只走一次]、alternate[来回]"
loop="滚动的循环次数，若未指定则循环不止（loop="infinite"）"
bgcolor="背景颜色"
onMouseOver="this.stop(),鼠标进入暂停"
onMouseOut="this.start(),鼠标离开继续"
scorllamount="滚动速度，值越大，速度越快"
scrolldelay="延时，走一走，停一停"
></marqueen>
10.内嵌框架元素
语法：<frameset rows="行高及行数" cols="列数及列宽" framespacing="框架间距"
frameborder="框架边框设置：yes/no,1/0" border="边框宽度" bordercolor="边框颜色">
<frame src="被包含的文件路径及名称" name="框架名称" noresize="是否允许改变框架大小，true/false" scroll="滚动条显示控制，yes/no/auto">
</frameset>
2.10 图像标签（*******）
<img src="图片的路径"/>
- src: 图片的路径
- width：图片的宽度
- height：图片的高度
- alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容,有些浏览器下不显示（没有效果）
常用图片格式
| 图片类型 | 优点 | 缺点 | 适用场合 | 制作工具 |
| *.jpg | 体积小，比较清晰 | 有损压缩、画面失真 | 网页图片 | Photoshop |
| *.gif | 支持Internet标准，支持无损耗压缩和透明度，很流行 | 支持有限的透明度，效果不如别的图像 | 网页图片 | Photoshop |
| *.swf | 体积小，便于网络传输 | 制作麻烦 | 网页动画 | Flash |
| *.bmp | 支持24位颜色深度，兼容性好 | 不支持压缩，容量比较大 | 桌面墙纸 | Photoshop |
2.11 预格式化标签
语法：<pre>内容</pre>
作用：按html标签内的内容格式输出到浏览器页面，在pre元素中的文本会保留空格和换行符。文本显现为等宽字体。
我们经常会在要保持文本格式的时候使用pre标签，比如当我们要展示源代码的时候，只要放一个pre标签，然后把源代码直接复制，粘贴，然后在页面上就可以保持好格式。不会像放在其它标签里那样，把换行和空格都自动折叠了。
2.12 超链接标签
语法：<a href=”链接到资源的路径” targer=”” >内容</a>
- href：超链接跳转的URL
- target：设置打开的方式 ，默认是在当前页打开。
_self 在当前窗口中跳转，浏览器默认设定方式；
_blank 跳转到新的窗体中。
- 当超链接不需要到任何的地址 在href里面加#
定位资源
定义一个位置<a name="top">顶部</a>
回到这个位置<a href="#top">回到顶部</a>