HTML
文章目录
1.HTML
1.1.什么是HTML
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言：HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面1
1.2.HTML的语法结构
1.HTML文件都是以【.html】或者【.htm】结尾的，建议使用【.html】结尾
2.Html文件分为头部分【】和体部分【】
3.Html标签都是由开始标签和结束标签组成
4.Html标签忽略大小写，建议使用小写
2.HTML入门
第一步：新建名为HelloHTML.html的文本文件
第二步：使用记事本打开该文件，写入如下内容
<html>
<head>
<title>我是标题</title>
</head>
<body>
我是内容
<b>我是加粗的文字</b>
</body>
</html>
第三步：使用浏览器打开编写好的文件，即可看到效果
代码解释：
HTML文件中的第一个标签是
<html>。这个标签告诉浏览器这个 HTML 文件的开始点。文件中最后一个标签是</html>。这个标签告诉您的浏览器，这是 HTML 文件的结束点。
位于<head>标签和</head>标签之间的文本是头信息。头信息不会显示在浏览器窗口中。
<title>标签中的文本是文件的标题。标题会显示在浏览器的标题栏。
<body>标签中的文本是将被浏览器显示出来的文本。
<b>和</b>标签中的文本将以粗体显示。
3.HTML标签
3.1.HTML 标题
HTML 标题（Heading）是通过<h1> - <h6>等标签进行定义的。
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
</body>
This is a heading
This is a heading
This is a heading
3.2.HTML段落标签
HTML 段落是通过
标签进行定义的。
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
</body>
这是段落。
这是段落。
这是段落。
段落元素由 p 标签定义。
3.3.HTML水平线标签
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p><html>
</body>
hr 标签定义水平线：
这是段落。
这是段落。
这是段落。
3.4.HTML字体标签
<font> 规定文本的字体、字体尺寸、字体颜色
<body>
<h1><font face="verdana">AAA</font></h1>
<p>
<font size="5" face="arial" color="red">BBB</font>
</p>
</body>
规定文本的字体、字体尺寸、字体颜色
AAA
BBB
3.5.HTML图像标签
在 HTML 中，图像由<img>标签定义。
<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src），src指 “source”。源属性的值是图像的 URL 地址。
其它属性：
width：设置图片的宽度
height：设置图片的高度
alt：当图片无法正常显示时的提示文字
语法：
<img src="url" />
代码示例
<body>
<p>
一幅图像：
<img src="http://photocdn.sohu.com/20160229/mp61032981_1456726265480_2.jpeg" width="250" height="250" />
</p>
<p>
一幅动画图像：
<img src="http://ww2.sinaimg.cn/large/85cccab3gw1ete5uvdyyjg20fa0681cx.jpg" width="250" height="150" />
</p>
<p>插入动画图像的语法与插入普通图像的语法没有区别。</p>
</body>
一幅图像： 
一幅动画图像： 
插入动画图像的语法与插入普通图像的语法没有区别。
3.6.列表标签
列表标签分为
有序列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表type属性
- disc实心
- circle空心
- square方块
无序列表：有序列表也是一列项目，列表项目使用数字进行标记。
<body>
<h4>一个无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一个有序列表：</h4>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<!--start设置开始的值-->
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
一个无序列表：
- 咖啡
- 茶
- 牛奶
3.7.链接标签
HTML 使用超级链接与网络上的另一个文档相连。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用<a> 标签在 HTML 中创建链接。
有两种使用 <a>标签的方式：
1.通过使用 href 属性 - 创建指向另一个文档的链接
2.通过使用 name 属性 - 创建文档内的书签
语法：
<a href="url">显示的文本</a>
href 属性规定链接的目标。
使用 Target 属性，你可以定义被链接的文档在何处显示。
开始标签和结束标签之间的文字被作为超级链接来显示。
代码示例
<body>
<!--当前窗口打开百度-->
<a href="https://www.baidu.com/">点击访问百度</a>
<!--新的窗口打开百度-->
<a href="https://www.baidu.com/" target="_blank">点击访问百度</a>
</body>
<!--新的窗口打开百度-->
<a href="https://www.baidu.com/" target="_blank">点击访问百度</a>
3.8.表格标签
表格由<table> 标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由 <td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
代码示例
<body>
<table border="1px" width="450px" height="150px" align="center" bgcolor="pink" cellspacing="0px" cellpadding="0px">
<tr height="100px" bgcolor="gold">
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</body>
代码解释
- 1.border属性：表格的边框属性，默认无边框
- 2.width、height属性：表格的宽高
- 3.align属性：控制表格内容的位置，center为居中
- 4.left：左、right：右
3.9.表格中的表头
使用<th>来定义表头
<th>和<td>的区别：
th中间的内容粗体显示。
th中间的内容默认居中。
th一般用来表格的表头
<body>
<h4>表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>电话</th>
</tr>
<tr>
<td>李四</td>
<td>1234567</td>
<td>8888888</td>
</tr>
</table>
<h4>垂直的表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>李四</td>
</tr>
<tr>
<th>电话</th>
<td>8888888</td>
</tr>
<tr>
<th>电话</th>
<td>8888888</td>
</tr>
</table>
</body>
表头：
| 姓名 | 电话 | 电话 |
|---|---|---|
| 李四 | 1234567 | 8888888 |
垂直的表头：
| 姓名 | 李四 |
|---|---|
| 电话 | 8888888 |
| 电话 | 8888888 |
3.10.合并单元格
行合并 rowspan=？
列合并 colspan=？
问号的值为：合并几个单元格，值就写几
示例代码
横跨两列的单元格：
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话（跨两列）</th>
</tr>
<tr>
<td>李四</td>
<td>88888888</td>
<td>88888888</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>李四</td>
</tr>
<tr>
<th rowspan="2">电话（跨两行）</th>
<td>88888888</td>
</tr>
<tr>
<td>88888888</td>
</tr>
</table>
3.11.表格练习题
使用所学习的表格知识，完成如下练习
效果图：
| 采购申请表 | |||||
| 部门 | 设备名称 | 采购量 | |||
| 现部门设备数 | 现集团设备总数 | ||||
| 采购原因 | |||||
| 部门负责人签名 | 日期 | ||||
| 采购部门审批 | 日期 | ||||
| 总经理审批 | 日期 |
编写7行6列的表格（先不考虑合并单元格），示例代码如下
<table border="1">
<tr>
<td>采购申请表</td>
<td> </td>
<td> </td>
<td></td>
<td></td>
<td> </td>
</tr>
<tr>
<td>部门</td>
<td></td>
<td>设备名称</td>
<td></td>
<td>采购量</td>
<td></td>
</tr>
<tr>
<td>现部门设备数</td>
<td></td>
<td>现集团设备总数</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>采购原因</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>部门负责人签名</td>
<td></td>
<td></td>
<td>日期</td>
<td></td>
<td></td>
</tr>
<tr>
<td>采购部门审批</td>
<td></td>
<td></td>
<td>日期</td>
<td></td>
<td></td>
</tr>
<tr>
<td>总经理审批</td>
<td></td>
<td></td>
<td>日期</td>
<td></td>
<td></td>
</tr>
</table>
编写好单元格后，我们来完成合并单元格
<table border="1">
<tr>
<td colspan="6">采购申请表</td>
</tr>
<tr>
<td>部门</td>
<td></td>
<td>设备名称</td>
<td></td>
<td>采购量</td>
<td></td>
</tr>
<tr>
<td>现部门设备数</td>
<td></td>
<td>现集团设备总数</td>
<td colspan="3"></td>
</tr>
<tr>
<td>采购原因</td>
<td colspan="5"></td>
</tr>
<tr>
<td>部门负责人签名</td>
<td colspan="2"></td>
<td>日期</td>
<td colspan="2"></td>
</tr>
<tr>
<td>采购部门审批</td>
<td colspan="2"></td>
<td>日期</td>
<td colspan="2"></td>
</tr>
<tr>
<td>总经理审批</td>
<td colspan="2"></td>
<td>日期</td>
<td colspan="2"></td>
</tr>
</table>
完善细节
1.设置表头
2.设置单元格间距、边距
3.文本对其方式
4.列的宽度
最终代码如下
<table border="1" cellspacing="0" width="600" cellpadding="10">
<tr align="center">
<th colspan="6">采购申请表</th>
</tr>
<tr align="center">
<td width="100">部门</td>
<td width="100"></td>
<td width="100">设备名称</td>
<td width="100"></td>
<td width="100">采购量</td>
<td width="100"></td>
</tr>
<tr align="center">
<td>现部门设备数</td>
<td></td>
<td>现集团设备总数</td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td>采购原因</td>
<td colspan="5"></td>
</tr>
<tr align="center">
<td>部门负责人签名</td>
<td colspan="2"></td>
<td>日期</td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>采购部门审批</td>
<td colspan="2"></td>
<td>日期</td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>总经理审批</td>
<td colspan="2"></td>
<td>日期</td>
<td colspan="2"></td>
</tr>
</table>
3.12.框架标签
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
1.开发人员必须同时跟踪更多的HTML文档
2.很难打印整张页面
代码示例
在下面的代码中，我们设置了一个框架集。左边被设置为占据浏览器窗口的 25%。右边被设置为占据浏览器窗口的 75%。HTML 文档 “left.htm” 被置于左边，而 HTML 文档 “right.htm” 被置于右边
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架标签</title>
</head>
<frameset cols="25%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</html>
Left.html
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
左侧内容
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
右侧内容
</body>
</html>
Frameset（框架集）中常用的属性
frame(框架)中常用的属性
3.13.框架使用案例
效果图
使用框架对界面进行分区，分别为上、中左、中右、下
点击百度、新浪可以在中右处显示对应的网页数据
index.html
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="10%,*,10%">
<frame src="top.html" noresize="noresize" />
<frameset cols="30%, *">
<frame src="left.html" noresize="noresize" />
<frame src="right.html" name="Right" />
</frameset>
<frame src="bottom.html" noresize="noresize" />
</frameset>
</html>
top.index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font size="7">欢迎XXXX进入后台管理系统</font>
</body>
</html>
left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="right.html" target="right">会员管理</a><br /><br />
<a href="#">品牌管理</a><br /><br />
<a href="#">商品管理</a><br /><br />
<a href="#">分类管理</a>
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
所有用户信息、
</body>
</html>
2.网页注册界面实现
2.1.表单
HTML 表单用于搜集不同类型的用户输入。
语法格式
<form>
form elements
</form>
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
执行流程
在页面上有一个表单
客户录入数据，点击提交按钮（提交文字自定义，也可以是注册），数据使用键值对的形式发送给服务器，多个数据中间使用【&】分隔，如下图所示
2.2.表单元素
<input>元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性，有不同的效果，常用值如下：
- type= “text” 文本输入域
- type =“password” 密码输入域
- type=“checkbox” 复选框
- type=“radio” 单选按钮
- type=“file” 文件上传
- type=“hidden” 隐藏域
- type=“button” 按钮（不提交表单信息）
- type=“sumbit” 按钮（提交表单信息）
- type=“reset” 按钮 （重置表单信息）
select （下拉列表）
<option>元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
可以通过添加 selected 属性来定义预定义选项。
<option value="fiat" selected>Fiat</option>
示例代码
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
如果不指定value的值，则提交的是标签中间的内容
textarea
多行文本域
- rows=" " 行
- clos=" " 列
- name=" " 名称
示例代码
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<button>元素
<button>元素定义可点击的按钮：
示例代码
<button type="button" onclick="alert('Hello World!')">点我</button>
表单代码示例
<body>
<form action="#">
用户名：<input type="text" /><br />
密码：<input type="password" /><br />
确认密码：<input type="password" /><br />
性别：
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女<br />
爱好：
<input type="checkbox" name="hobby" />钓鱼
<input type="checkbox" name="hobby" />摄影
<input type="checkbox" name="hobby" />写代码<br />
头像：<input type="file" /><br />
籍贯：
<select name="province">
<option>--请选择--</option>
<option>南京</option>
<option>无锡</option>
<option>徐州</option>
</select><br />
自我介绍：
<textarea> </textarea><br />
提交按钮：
<input type="submit" value="注册" /><br />
普通按钮：
<input type="button" value="defalutBtn" /><br />
重置按钮：
<input type="reset" />
</form>
</body>
2.3.表单输入属性
value 属性
value属性规定输入字段的初始值
代码示例
<form action="">
用户名:<br>
<input type="text" name="name" value="ZhangSan">
</form>
readonly属性
readonly 属性规定输入字段为只读（不能修改）
示例代码
<input type="text" name="name" value="ZhangSan" readonly>
disabled 属性
- 1.disabled 属性规定输入字段是禁用的。
- 2.被禁用的元素是不可用和不可点击的。
- 3.被禁用的元素不会被提交。
代码示例
<form action="">
用户名：<br>
<input type="text" name="firstname" value="John" disabled>
</form>
size 属性
size 属性规定输入字段的尺寸（以字符计）
<input type="text" name="name" value="LiSi" size="40">
maxlength 属性
maxlength 属性规定输入字段允许的最大长度
<input type="text" name="name" maxlength="10">
2.4.表单案例代码
使用表格配合表单完成如下效果
示例代码
<body>
<form>
<table cellspacing="0" border="1" width="50%" align="center">
<tr>
<td>输入姓名</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>输入密码</td>
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td>选择性别</td>
<td>
<input type="radio" name="sex" value="nan" />男
<input type="radio" name="sex" value="nv" />女
</td>
</tr>
<tr>
<td>选择爱好</td>
<td>
<input type="checkbox" name="love" value="lq" />篮球
<input type="checkbox" name="love" value="zq" />足球
</td>
</tr>
<tr>
<td>选择附件</td>
<td>
<input type="file" name="myfile" />
</td>
</tr>
<tr>
<td>选择城市</td>
<td>
<select name="city">
<option value="none">--请选择--</option>
<option value="bj">北京</option>
<option value="dj">东京</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="reset" />
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
3.HTML div 和 span
3.1.HTML div 元素
HTML
<div>元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。
<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用
<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
代码示例
<body>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
DIV使用案例
<body>
<p>我是文本</p>
<div class="news">
<h2>新闻标题</h2>
<p>简短摘要，简短摘要，简短摘要</p>
</div>
<div class="news">
<h2>新闻标题</h2>
<p>简短摘要，简短摘要，简短摘要</p>
</div>
</body>
上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起，也就是说，div 为文档添加了额外的结构。
同时，由于这些 div 属于同一类元素，所以可以使用 class=“news” 对这些 div 进行标识，这么做不仅为 div 添加了合适的语义，而且便于进一步使用样式对 div 进行格式化，可谓一举两得
3.2.HTML span 元素
HTML<span>元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
示例代码
<p><span>some text.</span>some other text.</p>
