目录
1 meta标签
1.1 简介
<meta>标记用来描述一个HTML网页文档的属性，也称为元信息（meta-information），例如作者、日期和时间、网页描述、关键词、页面刷新等。
- name属性用于描述网页，其值最重要的是description、keywords和robots。
- http-equiv属性用于提供HTTP协议的响应头报文，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。
1.2?属性及取值
1.3?案例
<!doctype html>
<html lang="en">
<head>
<title>中国教育和科研计算机网CERNET</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta name="keywords" content="中国教育网,中国教育,科研发展,教育信息化……" />
<meta name="description" content="中国教育网是中国最权威的教育门户网站" />
<meta name="copyright" content="www.edu.cn" />
<meta name="robots" content="all" /> <!--允许搜索引擎机器人抓取网页所有信息-->
</head>
<body>
<p>这是中国教育和科研计算机网的头部部分标记的应用</p>
</body>
</html>
2?常用标签
2.1?标题
标签：<h1></h1>（h1-h6）
2.2?段落
标签：<p></p>
2.3?换行
标签：<br/>
2.4?水平分隔线
标签：<hr>
2.5?删除线
标签：<del></del>
2.6?下划线
标签：<u></u>
2.7?加粗
标签：<b></b>
2.8?斜体
标签：<i></i>
2.9?字体
标签：<font></font>
2.10?图片
标签：<img />
属性：
- src：图片所在的
绝对路径/相对路径（.同级路径? ?..上一级路径） - align：设置图像的对齐方式
- width
- height
- title：?起到注释的作用，当鼠标放在图片上时，会显示文字
- border：设置图片边框
- alt：设置图片的替换文本，当浏览器无法载入图像时，将显示替换文本
2.11?超链接
标签：<a></a>
target属性值：
- _blank?? ?在新窗口中打开被链接文档。
- _self?? ?默认。在相同的框架中打开被链接文档。
- _parent?? ?在父框架中打开被链接文档。
- _top?? ?在整个窗口中打开被链接文档。
- framename?? ?在指定的框架中打开被链接文档。
2.12?视频
标签：<video></video>
- controls属性: 规定浏览器应该为视频提供播放控件（播放、暂停、定位、音量、全屏切换）
3?列表
3.1?有序列表
3.1.1?简介
有序列表用来表示一组有序的、内容相似的的数据信息，自带顺序编号。
3.1.2?标签
- ol标签：有序列表
- li标签:有序列表项
3.1.3?type属性
规定列表的项目符号的类型。取值范围：A、a、1、i、Ι
3.2?无序列表
3.2.1?简介
无序列表用来表示一组无序的、内容相似的的数据信息，一般导航栏都是用无序列表实现。?
3.2.2?标签
- ul标签：无序列表
- li标签：无序列表项
3.2.3?type属性
取值范围： circle(空心圆)、disc(实心圆)、square(正方形)
3.3?自定义列表
3.3.1?简介
自定义列表用来表示一组无序的、内容相似的、具备标题的数据信息。
3.3.2?标签
- dl标签：自定义列表
- dt标签：自定义标题
- dd标签：自定义内容
3.4? 综合案例：个人介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人介绍</title>
</head>
<body>
<h1>个人介绍</h1>
<h3>基本信息</h3>
<font size="3" color="darkblue">
<p>姓名 百里乘风</p>
<p>性别 男</p>
<p>生日 1999.07.04</p>
</font>
<h3>教育背景</h3>
<img src="./同大.jpg" width="600" height="400" title="大同大学" alt="大同大学"/>
<p>本科院校 山西大同大学</p>
<p>专业 计算机科学与技术</p>
<h3>兴趣爱好</h3>
<ol type="1">
<li>阅读</li>
<li>写作</li>
<li>运动</li>
<li>自媒体</li>
<li>视频剪辑</li>
<h3>作品展示：</h3>
<video src="myVideo.mp4" width="600" height="400" controls="controls"></video>
</ol>
<h3>人生梦想</h3>
<ul type="disc">
<li>实现财务自由</li>
<li>成为一个温润如玉的人</li>
<li>关注并投身于公益事业</li>
<li>游遍祖国的大好河山</li>
</ul>
</body>
</html>
4?内联框架
4.1?iframe简介
iframe标签用于在当前网页上引入其他网页资源（非同源也可）
4.2?iframe的属性
- align：规定如何根据周围的元素来对齐此框架（取值：Left、Right、Top、Middle、bottom）
- src：规定在iframe中显示的文档的URL
- frameBorder：规定了框架是否有边框（1：有边框? 0：无边框）
- scrolling：规定是否在iframe中显示滚动条（yes：有滚动条? no：无滚动条?auto：有需要时显示滚动条）
- width/height：定义iframe的宽度/高度
4.3?iframe的优点
切换子页面时不需要刷新父页面，提高请求速度。?
4.4?案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联框架</title>
</head>
<body>
<iframe src="./resume/resume.html" name="left" align="left" width="700" height="1000" frameborder="1" scrolling="auto" ></iframe>
<iframe src="./resume/resume.html" name="right" align="right" width="700" height="1000" frameborder="1" scrolling="auto"></iframe>
</body>
</html>
5?表格
5.1?简介
网页中的表格：以多行、多列来显示信息的方式。在网页中使用如下标签显示（由于表格会生成更多额外代码，因此在管理端页面使用较多）。
5.2?标签
- table：表格标签
- thead：表头单元格，在此列可以定义表头，表头可以限定表体的宽度。
- tbody：表格的主体
- tr：表格中的行
- td：标准单元格
- th：表头中的单元格?
5.3?table的属性
- border(边框)：border=“number”
- background(背景)： background =“背景图片”
- bgcolor(背景颜色)：bgcolor = “颜色”
- width、height：width= “” height=“”
- align：表格的位置由<table>元素的align属性决定，可选值包括left、center、right。
- valign：表格内文字的位置是由<td>的align和valign决定的，valign可选值包括top、middle、bottom。
- cellpadding(填充)：设置单元格边框与内容之间的距离
- cellspacing(间距)：设置单元格之间的距离。
5.4?表格的合并
- colspan属性：跨列合并单元格(colspan = “number”)
- rowspan属性：跨行合并单元格(rowspan ?= “number”)
5.5?tr的属性
- align：设置行内容的水平对齐方式，属性值有left、center、right
- valign：设置行内容的垂直对齐方式，属性值有top、middle、bottom
5.6?案例
5.6.1?水平+垂直表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平+垂直表格</title>
</head>
<body>
<!-- 水平表头 -->
<h4 align="center">水平表头</h4>
<table border="1" cellpadding="5" cellspacing="2" align="center">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>30</td>
</tr>
</table>
<!-- 垂直表头 -->
<h4 align="center">垂直表头</h4>
<table border="1" cellpadding="5" cellspacing="2" align="center">
<tr>
<th>姓名</th>
<td>张三</td>
</tr>
<tr>
<th>性别</th>
<td>男</td>
</tr>
<tr>
<th>年龄</th>
<td>30</td>
</tr>
</table>
</body>
</html>
5.6.2?还原Excel表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格练习</title>
<style type="text/css">
th,td{height: 0.625rem; width: 3.125rem; text-align: center;}
#th_title{height: 2rem;}
</style>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="2" align="center" width="760">
<tr>
<th colspan="12" id="th_title">1105班信息表</th>
</tr>
<tr>
<th>学号</th>
<th>姓名</th>
<th colspan="2">电话</th>
<th colspan="8" rowspan="2">座位表</th>
</tr>
<tr>
<td>1</td>
<td>xx</td>
<td colspan="2">11111</td>
</tr>
<tr>
<td>2</td>
<td>xxx</td>
<td>11</td>
<td>111</td>
<td colspan="2">程云博</td>
<td colspan="2">石锐坚</td>
<td colspan="2">李宏伟</td>
<td colspan="2">刘涛</td>
</tr>
<tr>
<td>3</td>
<td>xxx</td>
<td colspan="2">11111</td>
<td>杜少雄</td>
<td colspan="2">张学伟</td>
<td>侯宇航</td>
<td> </td>
<td>梁朝辉</td>
<td>纪治鹏</td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td>xxx</td>
<td>11</td>
<td>11</td>
<td colspan="2">申高昂</td>
<td colspan="2">李超军</td>
<td> </td>
<td>高源好</td>
<td> </td>
<td>宋英姿</td>
</tr>
<tr>
<td>5</td>
<td>xx</td>
<td colspan="2">11111</td>
<td>王嘉敏</td>
<td>靳宇升</td>
<td colspan="2">曹腾渊</td>
<td colspan="2">药宇</td>
<td colspan="2">杨凯</td>
</tr>
</table>
</body>
</html>
?
?5.6.3?电商品牌墙
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格-天猫品牌墙</title>
</head>
<body>
<h3 align="center">天猫品牌墙</h3>
<table align="center">
<tr>
<td><a href="https://baidu.com"><img src="image1/icon1.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon2.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon3.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon4.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon5.jpg" width="150"></a></td>
</tr>
<tr>
<td><a href="https://baidu.com"><img src="image1/icon6.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon7.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon8.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon9.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon10.jpg" width="150"></a></td>
</tr>
<tr>
<td><a href="https://baidu.com"><img src="image1/icon11.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon12.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon13.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon14.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon15.jpg" width="150"></a></td>
</tr>
<tr>
<td><a href="https://baidu.com"><img src="image1/icon16.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon17.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon18.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon19.jpg" width="150"></a></td>
<td><a href="https://baidu.com"><img src="image1/icon10.jpg" width="150"></a></td>
</tr>
</table>
</body>
</html>
6?表单
6.1?简介
表单标签form：浏览器端的输入项容器，提交时会提交form表单内所有用于输入的子标签内容。
表单的作用：在动态网页技术中，主要用于用户与服务器的交互。
6.2?form的属性
6.2.1?action属性
设定处理表单数据提交的服务器url地址。如action=“mailto：liwu001@126.com”
6.2.2?method属性
设定数据传送到服务器的方式，常用的取值有get、post
get请求：声明本次请求的目的是从服务器获取数据。
post请求：声明本次请求的目的是向服务器传送数据。
get与post的区别：
1、目的不同
2、提交方式不同（一个在请求头，一个在请求体）
3、提交数据长度不同
- get：不超过255个字符 ?
- post：默认为不受限制
4、安全性：设置get后，信息显示在浏览器地址栏，安全性低
6.2.3?name属性
规定表单的名称。
6.2.4?target属性
规定在何处打开 action URL。
6.2.5?表单标签公有的属性（html4标准）
- id：表单的唯一性标识
- name：规定表单标签的名称，在提交数据时，以name属性作为检索值。
- disabled：规定禁用当前表单元素。
- readonly：规定表当前表单元素为只读元素。
- value：设定或获取当前表单元素的输入值。
readonly和disabled的区别：
- readonly只针对input(text / password)和textarea有效。
- disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
6.3?input标签
6.3.1?input公有属性说明（html4标准）
- name：设定input 元素的名称。
- value：设定 input 元素的值。
- checked：设定此 input 元素首次加载时应当被选中（单选按钮、复选框）
- maxlength：规定输入字段中的字符的最大长度。
- type：设定当前输入标签的类型。
6.3.2?type属性的取值
- text：定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。?
- password：定义密码字段。该字段中的字符被掩码。
- radio：定义单选按钮。
- checkbox：定义复选框。
- file：定义输入字段和 "浏览"按钮，供文件上传。
- button：表单中的普通按钮，按钮内容为文字，点击后没有默认行为。
<input type=“button“ value=“按钮名称” />- image：表单中的普通按钮，显示内容为图片，点击后没有默认行为。
<input type=“image“ value=“按钮名称” src="1.png" />- submit：表单中的提交按钮，点击自动将表单内容提交给服务器，可以使用js阻止提交。
<input type=“submit“ value=“按钮名称” />- reset：重置表单内容，点击后表单内所有输入元素的值将被重置为网页加载前的状态。
<input type=“reset“ value=“重置” />PS：由于input在定义按钮时无法同时显示文字和图片，建议使用button标签定义按钮
<button type=“submit/reset/button”>
按钮的文字 <img src = “anniu.png”/>
<button>6.4?下拉列表
6.4.1?简介
下拉列表使用select、option标签共同完成下拉框的显示。
6.4.2?select的属性
- multiple：规定可选择多个选项。
- size：规定可见下拉框选项的数量。
6.4.3?option的属性
- selected：规定下拉列表中被选项目的索引号
6.5?fieldset与legend标签
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到?<fieldset>?标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
</head>
<body>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框，请更换浏览器。</p>
</body>
</html>
6.6?textarea标签
6.6.1?简介
textarea是设定多行文本的输入控件（文本域）
6.6.2 属性
- ?cols：规定文本区内的可见宽度。?
- rows：规定文本区内的可见行数。
6.7?label标签
6.7.1?简介
label是input标签的文字描述标签，可以代替输入标签响应用户的操作。
6.7.2?属性
- for：输入标签的id属性值。
<Label for="InputBox">姓名</Label>
<input id="InputBox" type="text"> - accesskey：用户的快捷键值。?
<Label for="InputBox" accesskey＝"N">姓 名</Label><input id="InputBox" type="text"> 6.8?案例
6.8.1?常用表单标签总结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用表单标签总结</title>
</head>
<body>
<form>
<table border="1" width="90%" align="center">
<caption><h2 align="center">常用表单标签总结</h2></caption>
<tr height="40">
<th width="10%">文本框：</th>
<th width="40%"><input type="text" size="35" maxlength="10"></th>
<th width="10%">密码框：</th>
<th width="40%"><input type="password" size="35" maxlength="10"></th>
</tr>
<tr height="40">
<th>单选框：</th>
<th>
<input type="radio" name="answer">A
<input type="radio" name="answer" checked="checked">B
<input type="radio" name="answer">C
</th>
<th>复选框：</th>
<th>
<input type="checkbox" name="hobby" checked="checked">学习
<input type="checkbox" name="hobby" checked="checked">运动
<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">游戏
</th>
</tr>
<tr height="40">
<th>文件浏览框：</th>
<th><input type="file" size="40"></th>
<th>下拉列表：</th>
<th>
<select style="width:100px;">
<option selected="selected">请选择</option>
<option>清华大学</option>
<option>北京大学</option>
<option>复旦大学</option>
</select>
</th>
</tr>
<tr height="40">
<th>颜色拾取器：</th>
<th><input type="color"><部分浏览器不兼容></th>
<th>数量选择器：</th>
<th><input type="number"><部分浏览器不兼容></th>
</tr>
<tr height="40">
<th>日期选择器：</th>
<th><input type="date"><部分浏览器不兼容></th>
<th>时间选择器：</th>
<th><input type="time"><部分浏览器不兼容></th>
</tr>
<tr height="40">
<th>月份选择器：</th>
<th><input type="month"><部分浏览器不兼容></th>
<th>星期选择器：</th>
<th><input type="week"><部分浏览器不兼容></th>
</tr>
<tr height="40">
<th>滑块：</th>
<th><input type="range" min="0" max="100"><部分浏览器不兼容></th>
<th>邮箱输入框：</th>
<th><input type="email"><部分浏览器不兼容></th>
</tr>
<tr height="40">
<th>普通按钮：</th>
<th><input type="button" value="按钮"></th>
<th>图片按钮：</th>
<th><input type="image" src="image1/button_1.jpg" style="width: 100px;height: 40px;"></th>
</tr>
<tr height="80">
<th>文本域：</th>
<td colspan="3" align="center">
<textarea rows="4" cols="80">随便说点什么……</textarea>
</td>
</tr>
<tr height="40">
<td colspan="2" align="center"><input type="submit" value="提交表单按钮"></td>
<td colspan="2" align="center"><input type="reset" value="重置表单按钮"></td>
</tr>
</table>
</form>
</body>
</html>
6.8.2?阿里注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿里注册页面</title>
</head>
<body>
<table border="0" align="center" width="960">
<tr>
<td><img src="./images/head.jpg" width="954" height="107"></td>
</tr>
<tr>
<td>
<form>
<table width="100%" border="0" cellpadding="4" cellspacing="15">
<tr>
<td align="right" width="200">电子邮箱：</td>
<td><input name="email" type="email" size="35" maxlength="20"></td>
</tr>
<tr>
<td align="right">会员登录名：</td>
<td><input name="username" type="text" size="35" maxlength="20"></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input name="password" type="password" size="35" maxlength="20"></td>
</tr>
<tr>
<td align="right">再次输入密码：</td>
<td><input name="password2" type="password" size="35" maxlength="20"></td>
</tr>
<tr>
<td align="right">会员身份：</td>
<td>
<input name="usertype" type="radio" value="1" checked="checked"/>买家
<input name="usertype" type="radio" value="2"/>卖家
<input name="usertype" type="radio" value="3"/>两者都是
</td>
</tr>
<tr>
<td align="right">验证码：</td>
<td>
<input name="code" type="text" size="15" maxlength="4">
<img src="./images/verycode.gif" name="code" width="132" height="55" align="absmiddle"/>
<a href="#">看不清？换一张</a>
</td>
</tr>
<tr>
<td></td>
<td><input name="register" type="image" src="./images/btn_reg.gif"></td>
</tr>
<tr>
<td></td>
<td>
<textarea name="read" cols="60" rows="5" >欢迎阅读阿里巴巴公司（阿里巴巴）服务条款协议(下称"本协议")，您应当在使用服务之前认真阅读本协议全部内容，且对本协议中加粗字体显示的内容，阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站（所涉域名为：Alibaba.com.cn、alibaba.cn、1688.com，下同），所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。
</textarea>
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td><img src="./images/foot.jpg" width="954" height="61"></td>
</tr>
</table>
</body>
</html>
