目录
1.HTML相关概念
软件的结构：
①C/S(Client Server)结构的软件： 比如：QQ
优点： 减轻服务端的压力，而且可以大量保存数据在客户端。
缺点：更新的时候需要用户下载更新包然后再安装，程序员则需要开发客户端与服务端。
②B/S（Browser Server）结构的软件：比如： 微博 、 webQQ
优点：软件版本升级的时候不需要用户下载更新包，直接更新服务器的程序即可。程序员则只需要开发服务端。
缺点：增加了服务端的压力，bs结构的软件不能保存大量的数据在用户机上。
网站的类别:
静态网站: 静态网页中的数据都是写死的，如果需要修改网页的内容是需要直接修改网页的代码。没有数据库提供数据给它。
动态网站: 动态网站的数据来自于数据库，背后有一个后台程序管理页面中的数据。
html(Hyper Text Markup Language超文本标记语言)，用来编写静态网站的技术。
1. html语言是与平台无关的，任何平台只需要安装了浏览器都可以运行。
2.html不区分大小写。
html语言的结构：
<html>
<!-- 注释的内容 -->.
<head></head> 网页的头信息
<body></body> 网页的体部分
</html>2.主要标签
2.1头信息
1. 设置网页的标题。
2. 通知浏览器使用指定的码表解释html页面.
3. 设置关键字搜素（一般为3-4个）
2.2文本标签
标签：带有特殊含义的网页的标记元素
带标签体的标签 如： <p> XX </p>
不带标签体的标签 如： <br/>
属性：写在开始标签上的 名=“值”对 如：<font color=“red”></font>
一个标签可以有多个属性，多个属性之间使用空格隔开。
标题 <h1>到<h6>
水平线 <hr/>
段落 <p>
短文本引用 <q> 自动添加双引号
长文本引用 <blockquote> 没有双引号效果，但默认会有缩进。
上下标 <sup> <sub>
换行 <br/>
地址（默认斜体）<address>
原样标签 <pre> (会保留空格和换行符)
有序列表：
<ol>
<li></li>
......
<ol>无序列表：
<ul>
<li></li>
......
</ul>项目列表：
<dl>
<dt>
<dd></dd>
</dt>
<dl>行内标签 <span> （ <span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。）
块标签 <div> (标签内容独占一行)
<b>粗体效果</b>
b是bold的缩写，仅仅表示该文本是粗体的，并不暗示这段文字的重要性
<strong>粗体效果</strong>
strong虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。
<i>斜体效果</i>
i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性
<em>斜体效果</em>
em 是 emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 常常用于引入新的术语的时候使用。
<del>使用del标签实现的删除效果</del>
<ins>使用ins标签实现的下划线效果</ins>
2.3字符实体
一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始如果希望浏览器正确地显示这些字符，必须在 HTML 源码中插入字符实体。
2.4媒体标签
音视频 <embed>
hidden ： 设置隐藏插件是否隐藏。
src ：用于指定音视频的路径
飘动标签 <marquee>
direction : 指定飘动的方向
scrollamount : 指定飘动的速度。
loop :指定飘动的次数
2.5链接标签
<a>
href : 指定链接的资源
target: 设置打开新资源的目标。( _Blank 在独立的窗口上打开新资源;
_self 在当前窗口打开新资源)
</a>
邮件协议：mailTo 迅雷协议：thunder file协议（主要搜索本地机器的资源文件）
1. a标签的href属性值如果是以http开头的，那么浏览器会马上启动http解释器去解释该网址，首先会在本地机器去找一个hosts文件， 如果在hosts文件上该域名没有对应的主机，浏览器就去到对应的dns服务器去寻找该域名对应的主机号。如果找到了对应的主机，该请求就会发给对应的主机。
2. a标签的href属性值并不是以http开始，而是其他的一些协议，这时候浏览器就会到本地的注册表中去查找是否有处理这种协议的应用程序，如果有，马上启动该应用程序处理该协议。
3. a标签的href属性值没有以任何协议开头，浏览就会启动file协议解释器去解释该资源路径
超链接标签的作用：
- 用于链接资源。
- 锚点点位.
1) 首先编写一个锚点 锚点的格式： <a name="锚点名字"> 数据</a>
2)使用a标签 的herf属性连接到锚点出。 href=”#锚点名字”
例：
<a name="top">顶部</a>
<a href="http://www.baidu.com">百度</a>
<a target="_blank" href="常用的标签.html">标签.html</a><br/>
如果有需要请发送邮件至：<a href="mailTo:[email protected]">[email protected]</a><br/>
<a href="#top">回到顶部</a> 2.6图像标签
<img>
Src: 指定图片路径
width： 设置图片宽度
Height: 设置图片高度
alt: 如果图片资源无法找到，就显示对应的文字对图片进行说明。
热点图（在设计模式下，属性栏进行设置超链接）
<img src="11.jpg" alt="这是张三" width="400" height="300"><br/>
2.7表格标签
<table> 表格
<caption> 表格的标题
<tr> 行
<th> 表头（默认居中、加粗）
<td> 单元格
常用属性：
border 设置表格的边框
bordercolor：设置表格边框颜色
width : 设置表格的宽度
height: 设置表格的高度
colspan: 设置单元格占据指定的列数
rowspan : 设置单元格占据指定的行数
align: 设置对齐方式
注：浏览器一旦遇到了table标签的开始标签，就必须等到table标签的结束标签，才会在网页中显示一个表格的完整内容。为提高效率，将表格分成三部分：
<thead> 表头（可以没有）
<tbody> 表体（一个表格至少要有一个表体）
<tfoot> 表尾（可以没有）
此时，浏览器只要遇到一个完整的tbody 标签，就可先显示当前页面的信息。
例：
<table align="center" border="1px" bordercolor="#0066CC" width="400px" height="300px">
<caption>期末考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>分数</th>
<th>等级</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">小华</td>
<td>98</td>
<td>优</td>
</tr>
<tr>
<td>100</td>
<td>优</td>
</tr>
<tr>
<td>李四</td>
<td>99</td>
<td>非常好</td>
</tr>
<tr align="center">
<td>综合测评</td>
<td colspan="2">非常好</td>
</tr>
</tbody>
</table>2.8框架标签
frameset：按照行或者列把一个页面分成几份。不能用于body标签体内。
frame：位于frameset ,不能被切割。
iframe: 在一个网页中分割一部分的位置显示另外一个网页的的信息。
注：frameset标签不能用于body标签体内。 例：
<frameset rows="20%, 70%,*">
<frame src="top.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame name="center" src="center.html" />
</frameset>
<frame src="foot.html" />
</frameset>2.9表单标签
表单：在网页中主要负责数据采集的功能
表单标签： <form action=“” method=“”></form>
action: 提交数据的地址。
method：表单的提交方式。（get : 默认使用的提交方式,提交的数据会显示在地址栏上,数据大小受地址栏限制； post：提交的数据不会显示在地址栏上，无数据大小限制）
下拉列表 ：
<select size=”” >
<option> </option>
</select>multiple:多选
size:一次可以选择的选项数量
disabled:禁用
表单域 ： <input type=“” name=“”value=“”/>
type:决定输入的类型
name:提交的键
size:文本输入框的显示长度
maxlength:输入文本的最大长度
readonly：只读，不可修改文本内容（会提交）
disabled:禁用表单项（不会被提交）
常见的表单域
提交按钮： type="submit"
重置按钮 type=”reset”
文本字段 type=“text”
密码字段 type = "password" （隐藏字段)
单选按钮 type=”radio” 单选按钮必需要分组，给name属性相同的值,即为一组。
多选按钮 type =”checkbox”，给name属性相同的值,即为一组。
文件选择框 type=“file”
文本输入域 <textarea name=”” cols=”” rows=””> </textarea>
注：表单域的数据如果需要提交到服务器，必须要name属性值（作为键）（用户填入的文本域等数据或者value的值作为值）,以构成键值对。
例：
<form action="http://www.baidu.com" method="post">
用户名：<input name="userName" type="text"/><br/>
密码：<input name="password" type="password"/><br/>
<!--单选框 checked="checked"代表默认选中-->
男<input checked="checked" value="man" name="sex" type="radio"/> 女<input name="sex" value="woman" type="radio"/><br/>
<!-selected=”selected” 代表默认选中--->
来自城市：<select name="city">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">广州</option>
<option value="SZ">深圳</option>
</select><br/>
兴趣爱好：java<input value="java" name="hobit" checked="checked" type="checkbox"/>
javascripe<input value="javascripe" name="hobit" type="checkbox"/>
c<input value="c" name="hobit" type="checkbox"/><br/>
大头照：<input name="image" type="file" /><br/>
个人简介：<textarea name="intro" rows="10" cols="30">这里放默认显示的字：小华真帅，2018-10-25</textarea><br/>
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</form>浏览器打开的效果：
