概念
网页,是网站中的一个页面,通常是网页是构成网站的基本元素,是承载各种网站应用的平台。通俗的说,网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件,俗称 HTML文件。
基本标签
结构标签
属性名 | 代码 | 描述 |
---|---|---|
text | < body text="#f00"></ body> | 设置网页正文中所有文字的颜色 |
bgcolor | < body bgcolor="#00f"></ body> | 设置网页的背景色 |
background | < body background="1.png"></ body> | 设置网页的背景图 |
排版标签
注释标签<!-- -->
换行标签<br>
段落标签<p>文本消息</p>
特定:段与段之间有空行
属性:align对齐方式(left,center,right)
水平线标签<hr>
属性:
width:水平线长度
size:水平线的粗细
color:水平线颜色
align:水平线对齐的方式
块标签
标签 | 代码 | 描述 |
---|---|---|
div | < div></ div> | 行级块标签,独占一行,换行 |
span | < span></ span> | 行内块标签,所有内容都在同一行 |
基本文字标签
属性名 | 代码 | 描述 |
---|---|---|
size | < font size="7"></ font> | 用于设置字体的大小,最小1号,最大7号 |
color | < font color="#f00"></ font> | 用于设置字体的颜色 |
face | < font face="宋体"></ font> | 用于设置字体的样式 |
文本格式化标签
标签 | 代码 | 描述 |
---|---|---|
b | < b></ b> | 粗体标签 |
strong | < strong></ strong> | 加粗 |
em | < em></ em> | 强调字体 |
i | < i></ i> | 斜体 |
small | < small></ small> | 小号字体 |
big | < big></ big> | 大号字体 |
sub | < sub></ sub> | 上标标签 |
sup | < sup></ sup> | 下标标签 |
del | < del></ del> | 删除线 |
标题标签
标签 | 代码 | 描述 |
---|---|---|
h1 | < h1></ h1> | 1号标题,最大字号 |
h2 | < h2></ h2> | 2号标题 |
h3 | < h3></ h3> | 3号标题 |
h4 | < h4></ h4> | 4号标题 |
h5 | < h5></ h5> | 5号标题 |
h6 | < h6></ h6> | 6号标题,最小字号 |
列表标签(清单标签)
无序列表:<ul></ul>
属性值 | 描述 | 用法举例 |
---|---|---|
circle | 空心圆 | < ul type="circle">< /ul> |
disc | 实心圆 | < ul type="disc">< /ul> |
square | 黑色方块 | < ul type="square">< /ul> |
有序列表标签:<ol></ol>
属性值 | 描述 | 用法举例 |
---|---|---|
1 | 数字类型 | < ul type="1">< /ul> |
A | 大写字母类型 | < ul type="A" >< /ul> |
a | 小写字母类型 | < ul type="a">< /ul> |
I | 大写古罗马 | < ul type="I">< /ul> |
i | 小写古罗马 | < ul type="i">< /ul> |
无序列表和有序列表嵌套使用
<ol>
<li></li>
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ol>
图像标签
属性名 | 描述 |
---|---|
src | 引入图片的地址 |
width | 图片的宽度 |
height | 图片的高度 |
border | 图片的边框 |
align | 与图片对齐显示方式 |
alt | 提示信息 |
hspace | 在图片左右设定空白 |
vspace | 在图片的上下设定空白 |
链接标签
跳转到别的页面<a href=""></a>
属性:href跳转到另外页面的地址(外网的地址需要加网络协议)
设置跳转页面时的页面打开方式,target属性
_blank在新窗口打开
_self在原窗口打开
指向同一页面中指定位置
定义位置<a name ="名称"></a>
指向<a href="#名称"></a>
表格标签
普通表格(table ,tr,td)
表格的列标签<th>内容有加粗和居中
表格的列合并属性(colspan):在同一行内同时合并多个列
表格的行合并属性(rowspan):在同一列跨多行合并
HTML表单标签
html表单用于收集不同类型的用户输入数据
form元素常用属性
action表示动作,值为服务器地址,把表单的数据提交到这个服务器上
method:请求方式,get和post
get:
地址栏,请求参数都在地址后面接path?name="张三"&password="123456"
不安全
效率高
get请求大小有限制,不同浏览器有不同,但是大约是2KB;一般情况用于查询数据
post
地址栏:请求参数单独处理。
安全可靠些
效率低
6post请求大小理论上无限;一般用于插入删除修改等操作
input元素
属性值 | 描述 | 代码 |
---|---|---|
text | 单行文体框 | < input type="text"/> |
password | 密码框 | < input type="password"/> |
radio | 单选按钮 | < input type="radio"/> |
checkbox | 复选框 | < input type="checkbox"/> |
date | 日期框 | < input type="date"/> |
time | 时间框 | < input type="time"/> |
datetime | 日期和时间框 | < input type="datetime"/> |
电子邮件输入 | < input type="email"/> | |
number | 数值输入 | < input type="number"/> |
file | 文件上传 | < input type="file"/> |
hidden | 隐藏域 | < input type="hidden"/> |
range | 取值范围 | < input type="range"/> |
color | 取色按钮 | < input type="color"/> |
submit | 表单提交按钮 | < input type="submit"/> |
button | 普通按钮 | < input type="button"/> |
reset | 重置按钮 | < input type="reset"/> |
image | 图片提交按钮 | < input type="image"/> |
select元素(下拉列表)
单选下拉列表<select></select>
默认选中属性selected="selected"
多选下拉属性<select></select>
对选列表:multiple="multiple"
HTML框架标签
-
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
-
使用框架的缺点:
-
开发人员必须同时跟踪更多的HTML文档
-
很难打印整张页面
-
框架结构标签frameset
-
框架结构标签( < frameset>< /frameset>)用于定义如何将窗口分割为框架
-
每个 frameset 定义了一系列行或列
-
rows/columns 的值规定了每行或每列占据屏幕的面积
-
<frameset rows="">< /frameset>
-
<frameset cols="">< /frameset>
-
框架标签frame
每个frame引入一个html页面
基本的注意事项
-
不能将 < body>< /body> 标签与 < frameset>< /frameset> 标签同时使用
-
假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在< frame>标签中加入:noresize="noresize"。
HTML的其它标签和特殊字符
其他标签
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta http-equiv="description" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- href:引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src:js的文件地址-->
<script type="text/javascript" src=""></script>
特殊字符
占位符:空格 -