HTML常用标签及属性
-
格式：
-
双边：
<标签名 属性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：光标放上去的提示信息，图片加载失败是也会显示。
-
-
-
src：指定资源
-
controls：显示控制条(值为controls，可以不写值)
-
loop：循环播放(值为loop，可以不写值)
-
autoplay：自动播放(值为autoplay，可以不写值)
-
-
-
音频的属性视频都有，功能也一样
-
多出来关于尺寸的属性：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">