格式:
双边:<标签名 属性1="值1" 属性2=‘值2‘ 属性3=值3>内容</标签名>
单边:<标签名 属性1="值1" 属性2=‘值2‘ 属性3=值3 />
特点:
标签都是成对出现的,单边标签也不要忘记结尾的‘/‘
容错性强,但是不要故意写错,故意挑战浏览器的解析能力
标签名已经预定义,不要随便自己起名字
标签统一使用小写,属性值统一使用双引号包括
说明:标签就是HTML文件的骨架,是最重要的组成部分
示例:
<html>
<!--注释-->
<head>
<title>页面标题</title>
</head>
<body text="red" bgcolor="#00ff00">
这里是页面内容
</body>
</html>
说明
html:是文档中最大的标签,所有的标签都有放在该标签中
head:头部,里面的内容不会显示在页面上,但是可以设置页面信息,如:标题、字符集
body:身体,存放用于显示的页面内容,是页面的主体部分
body属性:
text:设置字体颜色
bgcolor:设置背景颜色
几乎每个标签都有的属性:
class、id、style、name
标题:h1~h6
,字体从大到小,h1一个页面最多一个,不能为了调整字体大小而使用
加粗:<b></b>、<strong></strong>
斜体:<i></i>、<cite></cite>、<em></em>
下划线:<u></u>
删除线:<s></s>
上标:<sup></sup>
下标:<sub></sub>
字体:<font></font>
size:大小
color:颜色
face:类型
换行:<br />
,浏览器对任意多个空格、回撤都解析为一个空格
段落:<p></p>
,表示一个段落
横线:<hr />
,一条顺平横线
滚动:<marquee></marquee>
原样:<pre></pre>
,浏览器中显示的文本内容与文本一样
无序列表:<ul></ul>
,里面的每个元素都是一个<li></li>
type:disc(实心圆,默认)、circle(空心圆)、square(实心方框)
有序列表:<ol></ol>
type:1、A、a、I
start:起始序号
说明:HTML中预留的字符都必须替换为字符实体才可以显示。
提醒:不用刻意记录这些字符实体,用的时候查一下即可。
示例:
> >
< <
空格
& &
说明:统一资源定位符,是URI的一种,可以唯一标识一个网络资源
组成:协议://主机:端口/文件?参数1=值1&参数2=值2
http:80,可以省略
https:443
名称:<a></a>
说明:超链接,可以完成页面的跳转
属性:
href:指定跳转地址
title:光标放上去的提示信息
target:新页面的打开目标
_self:当前标签栏,默认设置
_blank:新的空白标签栏
_parent:覆盖父级标签栏
_top:覆盖顶层标签栏
name:设置锚点,用于跳转定位
可以在href属性设置时更精准定位跳转地址
如:<a name="p3"></a>
,使用:<a href="xxx#p3">xxx</a>
说明:锚点不但可在一个页面内部跳转,还可进行跨越面跳转定位
图片:img(重点)
src:图片资源位置
width:宽度
height:高度,单独设置一个时,另一个会等比缩放,若同时设置可能会拉伸或压缩
title:光标放上去的提示信息,图片加载失败是也会显示。
音频(audio)
src:指定资源
controls:显示控制条(值为controls,可以不写值)
loop:循环播放(值为loop,可以不写值)
autoplay:自动播放(值为autoplay,可以不写值)
视频(video)
音频的属性视频都有,功能也一样
多出来关于尺寸的属性:width、height
单独设置会进行等比缩放,同时设置时会出现留白
说明:就是类似于excel的形式
table:表格标签,所有的表格内容都要放在该标签中
border:边框尺寸
bordercolor:边框颜色
width:宽度
height:高度
bgcolor:背景色
align:水平对齐方式(left默认、center、right)
tr:表格中的一行
bgcolor:背景色
align:水平对齐方式(left默认、center、right)
valign:垂直对齐方式(top、middle默认、bottom)
td:一行的一列
colspan:列合并,合并一行的若干列
rowspan:行合并,合并一列的若干行
th:功能与td相同,只不过样式不同,进行了着重强调,用于设置表头
caption:表格标题,通常用于描述表格的作用
说明:就是一个页面中包含另一个页面
属性:
src:加载的资源地址
width:宽度
height:高度
frameborder:是否显示边框(1/0)
scrolling:滚动条控制(yes、no、auto)
name:标识窗口的名字,可以用于a标签的打开目标地址
说明:替代body定义网页框架,而且可以根据需要指定尺寸或比例进行划分
属性:
rows:垂直方向的尺寸划分,可以使用像素、也可以使用百分比,*表示其他
cols:水平方向的尺寸划分
noresize:禁止调整尺寸
frameborder:是否显示边框
border:边框宽度
bordercolor:边框颜色
frame:frameset中的一帧内容,也就是一个页面
noframes:浏览器不支持frameset时使用,兼容设置显示内容
说明:服务器收集用户信息,如:登录、注册等场景
form:表单,所有提交的数据都需要放在该标签中
action:指定提交地址,默认提交到当前地址
method:请求方法,get、post
get:提交的数据会出现在URL中
post:提交的数据不会出现在URL中,经常用于登录、注册、上传文件等
input:输入框,是表单中最重要的组成部分
name:指定名字,没有名字是无法提交的(即使能提交,数据也没有意义)
value:文本框的内容,一般用于不可输入的文本框
placeholder:占位内容,通常用于提示
size:设置尺寸(宽度)
maxlength:限制最大输入字符个数
readonly:只读状态,不可更改
disabled:禁用状态
type:设置输入框类型
text:可见文本,默认属性
submit:是提交按钮
password:密文文本
radio:单选框,注意事项:
多个单选项的name属性要一样
因为无法输入内容,所以需要书写value属性进行选项的区分,不必非要与提示信息一致
checked属性可以用于默认选择状态的设置
想让提示信息关联单选框,可以通过label标签结合id属性完成
checkbox:复选框,注意事项与radio相同
hidden:隐藏字段,不可见的,可以传递特定不公开信息
file:上传文件字段,需要对表属性进行配套设置
表单提交方法只能是post:method="post"
指定编码类型:enctype="multipart/form-data"
select:下拉选择框
属性name需要设置
属性size可以控制显示的选项个数
每一个选项通过option标签体现,必须指定其value属性,默认选中使用selected
textarea:文本域,多行文本
说明:input是单行文本,textarea是多行文本
属性:
rows:设置行数
cols:设置列数
注意:不要在输入区域书写任何多余的内容
表单提交
<input type="submit" />
,标准的提交按钮,可以提交按钮本身的值
<button></button>
,可以提交,但是不能提价按钮的值
<input type="button" />
,长的跟按钮一样,但是不能提交,后面可以结合JS使用
说明:一般存放对网页进行说明的内容,不会显示在页面上
示例:
<!--设置字符集-->
<meta charset="utf-8" />
<!--设置标题-->
<title>表单内容</title>
<!--设置网页关键字-->
<meta name="keywords" content="PYTHON培训,PYTHON开发培训" />
<!--设置网页描述-->
<meta name="description" content="教育第一" />
<!--设置文件类型-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--加载CSS文件-->
<link rel="stylesheet" type="text/css" href="xxx.css">
<!--定时刷新页面-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">