标签格式
- 格式:
- 双边:
<标签名 属性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中预留的字符都必须替换为字符实体才可以显示。
- 提醒:不用刻意记录这些字符实体,用的时候查一下即可。
- 示例:
> >
< <
空格
& &
URL(重点)
- 说明:统一资源定位符,是URI的一种,可以唯一标识一个网络资源
- 组成:协议://主机:端口/文件?参数1=值1&参数2=值2
- http:80,可以省略
- https:443
超链接(a)
- 名称:
<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
- 单独设置会进行等比缩放,同时设置时会出现留白
表格(table)
- 说明:就是类似于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:表格标题,通常用于描述表格的作用
分帧(iframe)
- 说明:就是一个页面中包含另一个页面
- 属性:
- src:加载的资源地址
- width:宽度
- height:高度
- frameborder:是否显示边框(1/0)
- scrolling:滚动条控制(yes、no、auto)
- name:标识窗口的名字,可以用于a标签的打开目标地址
分帧(frameset)
- 说明:替代body定义网页框架,而且可以根据需要指定尺寸或比例进行划分
- 属性:
- rows:垂直方向的尺寸划分,可以使用像素、也可以使用百分比,*表示其他
- cols:水平方向的尺寸划分
- noresize:禁止调整尺寸
- frameborder:是否显示边框
- border:边框宽度
- bordercolor:边框颜色
- frame:frameset中的一帧内容,也就是一个页面
- noframes:浏览器不支持frameset时使用,兼容设置显示内容
表单(form)(非常重要)
- 说明:服务器收集用户信息,如:登录、注册等场景
- 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使用
head标签
- 说明:一般存放对网页进行说明的内容,不会显示在页面上
- 示例:
<!--设置字符集-->
<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">