目录
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>