html标签属性大全手册(html 标签属性大全 完美版)
HTML 标签大全及属性
基本结构标签:
HTML,表示该文件为HTML文件
HEAD,包含文件的标题,使用的脚本,样式定义等
TITLE---/TITLE,包含文件的标题,标题出现在浏览器标题栏中
/HEAD,HEAD的结束标志
BODY,放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示.
/BODY,BODY的结束标志
/HTML,HTML的结束标志
其它主要标签,以下所有标志用在BODY/BODY中:
A,HREF="…"/A,链接标志,"…"为链接的文件地址
IMG,SRC="…",显示图片标志,"…"为图片的地址
BR,换行标志
P,分段标志
B/B,采用黑体字
I/I,采用斜体字
HR,水平画线
TABLE/TABLE,定义表格,HTML中重要的标志
TR/TR,定义表格的行,用在TABLE/TABLE中
TD/TD,定义表格的单元格,用在TR/TR中
FONT/FONT,字体样式标志
属性:
属性是用来修饰标志的,属性放在开始标志内.
例:属性bgcolor="BLACK"表示背景色为黑色.
引用属性的例子:
BODY,bgcolor="BLACK"/BODY表示页面背景色为黑色;
TABLE,bgcolor="BLACK"/TABLE表示表格背景色为黑色.
常用属性:
对齐属性,范围属性:
ALIGN=LEFT,左对齐(缺省值),WIDTH=象素值或百分比,对象宽度.
ALIGN=CENTER,居中,HEIGHT=象素值或百分比,对象高度.
ALIGN=RIGHT,右对齐.
色彩属性:
COLOR=#RRGGBB,前景色,参考色彩对照表.
BGCOLOR=#RRGGBB,背景色.
center表示绝对居中.
table/table表格标识的开始和结束.
属性:
cellpadding=数值单位是像素,定义表元内距
cellspacing=数值单位是像素,定义表元间距
border=数值单位是像素,定义表格边框宽度
width=数值单位是像素或窗口百分比,定义表格宽度
background=图片链接地址,定义表格背景图
tr/tr表格中一个表格行的开始和结束;
td/td表格中行内一个单元格的开始和结束
属性:
Colspan="",单元格跨越多列;
Rowspan="",单元格跨越多行;
Width="";定义表格宽度
Height="";定义表格高度
Align="";对齐方式
Valign="";
Border="",边框宽度;
Bgcolor="",背景色;
Bordercolor="",边框颜色;
Bordercolorlight="",边框明亮面的颜色;
Bordercolordark="",边框暗淡面的颜色;
Cellpadding="",内容与边框的距离(默认为2);
Cellspacing="",单元格间的距离(默认为2);
强制换行
font/font文本标识的开始和结束
属性:
face=字体
color=颜色
b/b加粗文字标识的开始和结束
属性:
style=font-size:40pt;,用样式表方式控制字体大小,这里是40点
div/div,分区标识的开始和结束
属性:
align=|center|left|right|水平对齐方式
marquee/marquee动态标识的开始和结束,如标识内放置贴图格式则可实现图片滚动
属性:
scrollamount=1~60,滚动速度
direction=|left|right|up|down|,滚动方向
scrolldelay=滚动延时,单位:毫秒
P段落标识,
空格符,
img贴图标识
属性:
src=../../图片链接地址,贴图标识必备属性
style=filter:Alpha(opacity=100,style=2);
filter:样式表滤镜;
Alpha:透明滤镜,
opacity:不透明度100(0~100);
style:样式2(0~3),
rules="none"不显示内框"
embed,src="…"多媒体文件标识
属性:
SRC="../../FILENAME",
设定音乐文件的路径,文件类型除了可以播放.rm;.mp3;.wav等音频,还可播放.swf和.mov等视频.
AUTOSTART=TRUE/FALSE,
是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为FALSE
LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.
STARTIME="分:秒",
设定乐曲的开始播放时间,如20秒后播放写为STARTIME=00:20
VOLUME=0-100,
设定音量的大小.如果没设定的话,就用系统的音量.
WIDTH,HEIGHT,
设定控制面板的大小,都设为0可隐藏播放器
HIDDEN=TRUE,
隐藏控制面板
CONTROLS=CONSOLE/SMALLCONSOLE,
设定控制面板的样子,
bgsound,src="…",背景音乐标识,只能用于.wav和.mp3格式.
属性:
LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.
表单标签:
form/form表格标识的开始和结束,表单的内容都放在这里.
下边的标签放在表单内:
select下拉选择框
option/option
/select
属性:
Multiple,多选
textarea/textarea,大量文字输入的编辑块
属性:
Cols="",行;
Rows="",列;
input,type="text",文本框
input,type="password",密码框
input,type="submit",提交按扭
input,type="checkbox",复选框
input,type="radio",单选框
input,type="reset",重置按扭
input,type="image",图片按扭
input,type="hidden",隐藏域
input,type="button",按扭
input,type="file",浏览文件
公共属性:
Name="";
Value=""
Size=""
框架标签:
FRAMESET.../FRAMESET,定义框架.
FRAME,放在框架标签内,定义每个框架的内容.
属性:
Cols=""
Rows=""
Frameborder=""
Framespacing=""
src=""
Scrolling="",滚动条(No,Yes);
Noresize,框加大小不可变;
Marginhight="",高度空余空间;
Marginwidth="",宽度空余空间;
Target="",目标框架.
其他标签:
bgsound,背景音乐;
Src=""
Loop="",循环次数;
embed,媒体播放块;
Src=""
Loop="",循环次数;
marquee/marquee,滚动部分;
属性:
Bgcolor=""
Behavior,设置或获取文本如何在字幕中滚动.
Direction="",滚动方向;
Height=""
Width=""
Loop="",环次数;
scrollAmount="",设置或获取介于每个字幕绘制序列之间的文本滚动像素数.
scrollDelay="",设置或获取字幕滚动的速度.
scrollHeight="",获取对象的滚动高度;
scrollLeft="",设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离.
scrollTop="",设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离.
trueSpeed="",设置或获取字幕的位置是否使用scrollDelay和scrollAmount属性计算,已过的实际时间来自于时钟计时.
,注释标记,在""之间的内容将不在浏览器中显示.
--
基本标签:
html/html,创建一个HTML文档;
head/head,设置文档标题和其它在网页中不显示的信息;
title/title,设置文档的标题;
h1/h1,最大的标题;
pre/pre,预先格式化文本;
u/u,下划线
b/b,黑体字;
i/i,斜体字;
tt/tt,打字机风格的字体;
cite/cite,引用,通常是斜体;
em/em,强调文本(通常是斜体加黑体);
strong/strong,加重文本(通常是斜体加黑体);
font,size="",color=""/font,设置字体大小从1到7,颜色使用名字或RGB的十六进制值;
BASEFONT/BASEFONT,基准字体标记;
big/big,字体加大;
SMALL/SMALL,字体缩小;
STRIKE/STRIKE,加删除线;
CODE/CODE,程式码;
KBD/KBD,键盘字;
SAMP/SAMP,范例;
VAR/VAR,变量;
BLOCKQUOTE/BLOCKQUOTE,向右缩排;
DFN/DFN,述语定义;
ADDRESS/ADDRESS,地址标记;
/SUP,上标字;
SUB/SUB,下标字;
xmp.../xmp固定宽度字体(在文件中空白、换行、定位功能有效)
plaintext.../plaintext固定宽度字体(不执行标记符号);
listing.../listing,固定宽度小字体;
font,color=00ff00.../font字体颜色;
font,size=1.../font最小字体;
font,style,='font-size:100,px'.../font无限增大.
格式标签:
p/p,创建一个段落;
p,align="",将段落按左、中、右对齐;
,换行,插入一个回车换行符;
blockquote/blockquote,从两边缩进文本;
dl/dl,列表标签,定义列表;
dt,定义列表标题;
dd,定义列表内容;
例:
dl
dt标题1/dt
dd内容11/dd
dd内容12/dd
dt标题2/dt
dd内容21/dd
dd内容22/dd
/dl
ol/ol,列表标签,定义一个标有数字的列表;
ul/ul,列表标签,定义一个标有圆点的列表;
li,放在每个列表项之前;
放在ol/ol之间则每个列表项加上一个数字,放在ul/ul之间则每个列表项加上一个圆点;
div,align=""/div,分区标签,用来排版大块HTML段落,也用于格式化表;
MENU,选项清单;
DIR,目录清单;
nobr/nobr,强行不换行;
hr,size='9',width='80%',color='ff0000'水平线(设定宽度);
center/center,水平居中.
链接标签:
a,href="URL"/a,创建超文本链接;
a,href="mailtEMAIL"
/a,创建自动发送电子邮件的链接;
a,name="name"/a,创建位于文档内部的书签;
a,href="#name"/a,创建指向位于文档内部书签的链接;
BASE,文档中不能被该站点辨识的其它所有链接源的URL;
LINK,定义一个链接和源之间的相互关系;
链接标签注解:
target="...",决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top);
rel="...",发送链接的类型;
rev="...",保存链接的类型;
accesskey="...",指定该元素的热键;
shape="...",允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly);
coord="...",使用像素或者长度百分比来定义形状的尺寸;
tabindex="...",使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).
表格标签:
table/table,创建一个表格;
tr/tr,表格中的每一行;
td/td,表格中一行中的每一个格子;
th/th,设置表格头:通常是黑体居中文字;
table,cellspacing="",设置表格格子之间空间的大小;
table,border="",设置边框的宽度;
table,cellpadding="",设置表格格子边框与其内部内容之间空间的大小;
table,width="",设置表格的宽度.用绝对像素值或总宽度的百分比;
table,align="",设置表格格子的水平对齐方式(left,center,right,justify);
tr,align="",设置表格格子的水平对齐方式(left,center,right,justify);
tr,valign="",设置表格格子的垂直对齐方式(baseline,bottom,middle,top);
td,colspan="",设置一个表格格子跨占的列数(缺省值为1);
td,rowspan="",设置一个表格格子跨占的行数(缺省值为1);
td,nowrap,禁止表格格子内的内容自动断行;
CAPTION/CAPTION,表格的标题;
COLGROUP/COLGROUP,定义多个列为一组列;
TABLE/TABLE,创建一个表格;
THEAD/THEAD,定义表格的页眉;
COL,定义一个列组中的列，以便对它们能够同时设置有关属性;
TBODY/TBODY,定义一个表格的实体;
TFOOT/TFOOT,定义一个表格的页脚;
表单标签:
form/form,创建表单;
action="...",接收数据的服务器的URL;
method="...",HTTP的方法(get,,post),其中get是被反对使用的;
enctype="...",指定MIME(Internet媒体类型);
onsubmit="...",当提交表单时发生的内部事件;
noreset="...",在重新设置表单时发生的内部事件;
target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)
select,multiple,name="name",size=""/select,创建滚动菜单,size设置在需要滚动前可以看到的表单项数目;
option,设置每个表单项的内容;
select,name="name"/select,创建下拉菜单;
textarea,name="name",cols=40,rows=8/textarea,创建一个文本框区域,列的数目设置宽度,行的数目设置高度;
input,type="checkbox",name="name",创建一个复选框,文字在标签后面;
input,type="radio",name="name",value="",创建一个单选框,文字在标志后面;
input,type=text,name="foo",size=20,创建一个单行文本输入区域,size设置以字符串的宽度;
input,type="submit",value="name",创建提交(submit)按钮;
input,type="image",border=0,name="name",src="name.gif",创建一个使用图象的提交(submit)按钮;
input,type="reset",创建重置(reset)按钮;
BUTTON/BUTTON,创建一个按钮;
disabled="...",把按钮的状态设置为不能;
name="...",按钮的控制名,value="...",按钮的值;
type="...",按钮的类型(button,,submit,,reset);
FIELDSET/FIELDSET,把相互关联的控件组合成一组;
ISINDEX,提示用户输入;
LABEL/LABEL,为一个控件提供标签;
LEGEND/LEGEND,为FIELDSET元素指定一标题;
SELECT/SELECT,为用户做选择创建各个选项;
TEXTAREA/TEXTAREA,创建一个允许用户多行输入的区域.
表单标签注解:
type="...",用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一个单选钮设置为选中的状态;
disabled="...",把控件的状态设置为不能使用;
readonly="...",只对输入密码的文本框使用;
size="...",表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目;
src="...",一个图像控件的URL;
maxlength="...",指定可以输入的最多的字符数目;
alt="...",另外一种文本描述;
usemap="...",到客户端图形镜像的URL;
align="...",被反对.控制对齐方式(left,,center,,right,,justify);
tabindex="...",通过定义的tabindex值确定在不同元素之间获得焦点的顺序;
onfocus="...",当元素获得焦点时发生的事件;
onblur="...",当元素失去焦点时发生的事件;
onselect="...",当元素被选中时发生的事件;
onchang="...",当元素状态被改变时发生的事件;
accept="...",允许上载的文件类型.
帧标签(框架标签):
frameset/frameset,放在一个帧文档的body标签之前,也可以嵌在其他帧文档中;
frameset,rows="value,value",定义一个帧内的行数,可用像素值或高度百分比;
frameset,cols="value,value",定义一个帧内的列数,可用像素值或宽度百分比;
frame,定义一个帧内的单一窗或窗区域;
noframes/noframes,定义在不支持帧的浏览器中显示什么提示;
frame,src="URL",规定帧内显示的HTML文档;
frame,name="name",命名帧或区域以便别的帧可以指向它;
frame,marginwidth="",定义帧左右边缘的空白大小,必须大于等于1;
frame,marginheight="",定义帧上下边缘的空白大小,必须大于等于1;
frame,scrolling="",设置帧是否有滚动栏,其值可以是"yes","no",或"auto";
frame,noresize,禁止用户调整一个帧的大小;
IFRAME/IFRAME,创建一个内联的帧;
scr="...",定义在帧中显示的内容的来源;
frameborder="...",定义帧之间的边界(0或1);
align="...",被反对,控制对齐方式(left,,center,,right,,justify);
height="...",帧的高度,width="..."帧的宽度;
marquee.../marquee,普通卷动;
marquee,behavior=slide.../marquee,滑动;
marquee,behavior=scroll.../marquee,预设卷动;
marquee,behavior=alternate.../marquee,来回卷动;
marquee,direction=down.../marquee,向下卷动;
marquee,direction=up.../marquee,向上卷动;
marquee,direction=right/marquee,向右卷动;
marquee,direction='left'/marquee,向左卷动;
marquee,loop=2.../marquee,卷动次数;
marquee,width=180.../marquee,设定宽度;
marquee,height=30.../marquee,设定高度;
marquee,bgcolor=FF0000.../marquee,设定背景颜色;
marquee,scrollamount=30.../marquee,设定卷动距离;
marquee,scrolldelay=300.../marquee,设定卷动时间;
img,src="",插入图片,参数有:width="宽",alt="说明文字",height="高",boder="边框".
文档整体属性标签:
body,bgcolor="",设置背景颜色.使用名字或RGB的十六进制值;
body,background="",设置背景图片;
body,bgsound="",设置背景音乐;
body,bgproperties="fixed",固定背景图片(IE适用);
body,text="",设置文本颜色.使用名字或RGB的十六进制值;
body,link="",设置链接颜色.使用名,字或RGB的十六进制值;
body,vlink="",设置已使用的链接的颜色.使用名字或RGB的十六进制值;
body,alink="",设置正在被击中的链接的颜色.使用名字或RGB的十六进制值;
body,topmargin="",设置页面的上边距;
body,leftmargin="",设置页面的左边距.
HTML的标签属性有哪些？
Html主要有1文件标记2排版标记3字体标记4清单标记5表格标记6表单标记7图形标记8连结标记9框架标记10影像地图11多媒体12其他标记13 StyleSheet等13种主要类型。下面是这十三中常用标记的意义及作用：
HTML 文件声明 让浏览器知道这是 HTML 文件
HEAD 开头 提供文件整体资讯
TITLE 标题 定义文件标题，将显示于浏览顶端
BODY 本文 设计文件格式及内文所在
排版标记
!--注解-- 说明标记 为文件加上说明，但不被显示
P 段落标记 为字、画、表格等之间留一空白行
BR 换行标记 令字、画、表格等显示于下一行
HR 水平线 插入一条水平线
CENTER 居中 令字、画、表格等显示于中间
PRE 预设格式 令文件按照原始码的排列方式显示
DIV 区隔标记 设定字、画、表格等的摆放位置
NOBR 不折行 令文字不因太长而绕行
WBR 建议折行 预设折行部位
字体标记
STRONG 加重语气 产生字体加粗 Bold 的效果
B 粗体标记 产生字体加粗的效果
EM 强调标记 字体出现斜体效果
I 斜体标记 字体出现斜体效果
TT 打字字体 Courier字体，字母宽度相同
U 加上底线 加上底线
H1 一级标题标记 变粗变大加宽，程度与级数反比
H2 二级标题标记 将字体变粗变大加宽
H3 三级标题标记 将字体变粗变大加宽
H4 四级标题标记 将字体变粗变大加宽
H5 五级标题标记 将字体变粗变大加宽
H6 六级标题标记 将字体变粗变大加宽
FONT 字形标记 设定字形、大小、颜色
BASEFONT 基准字形标记 设定所有字形、大小、颜色
BIG 字体加大 令字体稍为加大
SMALL 字体缩细 令字体稍为缩细
STRIKE 画线删除 为字体加一删除线
CODE 程式码 字体稍为加宽如TT
KBD 键盘字 字体稍为加宽，单一空白
SAMP 范例 字体稍为加宽如TT
VAR 变数 斜体效果
CITE 传记引述 斜体效果
BLOCKQUOTE 引述文字区块 缩排字体
DFN 述语定义 斜体效果
ADDRESS 地址标记 斜体效果
SUB 下标字 指数
SUP 下标字 下标字
清单标记
OL 顺序清单 清单项目将以数字、字母顺序排列
UL 无序清单 清单项目将以圆点排列
LI 清单项目 每一标记标示一项清单项目
MENU 选单清单 清单项目将以圆点排列，如UL
DIR 目录清单 清单项目将以圆点排列，如UL
DL 定义清单 清单分两层出现
DT 定义条目 标示该项定义的标题
DD 定义内容 标示定义内容
表格标记
TABLE 表格标记 设定该表格的各项参数
CAPTION 表格标题 做成一打通列以填入表格标题
TR 表格列 设定该表格的列
TD 表格栏 设定该表格的栏
TH 表格标头 相等于TD，但其内之字体会变粗
表单标记
FORM 表单标记 决定单一表单的运作模式
TEXTAREA 文字区块 提供文字方盒以输入较大量文字
INPUT 输入标记 决定输入形式
SELECT 选择标记 建立 pop-up 卷动清单
OPTION 选项 每一标记标示一个选项
图形标记
IMG 图形标记 用以插入图形及设定图形属性
连接标记
A 连结标记 加入连结
BASE 基准标记 可将相对 URL 转绝对及指定连结目标
框架标记
FRAMESET 框架设定 设定框架
FRAME 框窗设定 设定框窗
IFRAME 页内框架 于网页中间插入框架
NOFRAMES 不支援框架 设定当浏览器不支援框架时的提示
影视地图
MAP 影像地图名称 设定影像地图名称
AREA 连结区域 设定各连结区域
多媒体
BGSOUND 背景声音 于背景播放声音或音乐
EMBED 多媒体 加入声音、音乐或影像
其他标记
MARQUEE 走动文字 令文字左右走动
BLINK 闪烁文字 闪烁文字
ISINDEX 页内寻找器 可输入关键字寻找于该一页
META 开头定义 让浏览器知道这是 HTML 文件
LINK 关系定义 定义该文件与其他 URL 的关系
StyleSheet
STYLE 样式表 控制网页版面
span 自订标记 独立使用或与样式表同用
HTML基础-常用标签及语法
HTML注释语法，VS code 快捷键【Ctrl + /】：
标题（Heading） ，是通过 h1-h6 六个标签分别来对六个级别的标题进行定义的。标题标签只是给标签内部的元素内容添加对应级别标题的语义，样式由CSS设定，标签之间不能相互嵌套，权重从 h1 向 h6 依次递减。
注意： h1 在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容，比如logo。 h1 由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果 一个页面出现多个 h1 ，反而降低权重。
约定俗成的，一个页面中只会出现一个 h1 。
段落（paragraph） ，是通过 p 标签进行定义的。 p 标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的 font 标签等。 p 标签的作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式。 换行的效果是由css决定的。
（breaking）标签 是HTML中一个简单的换行符。 br / 标签是一个单标签。 在需要换行的位置可以使用 br / 标签书写，但是 br / 与 p 不同， br / 没有建立新的 段落的语义，只是简单的进行强制换行。
HTML中有部分标签是用来对文字进行格式化显示设置的，比如粗体和斜体等。文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。在HTML4.0版本规范后，结构和样式进行了分离，大部分文本格式化标签被废弃， b i u em shrong 相对比较常用。
图像（image） 由 img 标签进行定义。 img 标签是单标签，本身相当于一个特殊的文本，作用是在指定的位置插入一张图片。在HTML文件，常用的插入图片的类型有：jpg、png、gif。由于 img 为单标签，所以它只能通过属性进行相关的图像设置。
路径指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法。 路径分为相对路径和绝对路径，不同的方式出发点和参考位置不同。
相对路径查找文件时，需要从HTML文件本身出发，根据相对的位置进行查找，包含三种方向。
绝对路径查找文件时，不需要从HTML文件出发，而是直接从电脑的盘符出发进行查找，或者 使用网址形式查找。
音频与视频分别使用 audio 和 video 标签进行定义。 audio 和 video 是双标签。同图片一样，需要使用src属性设置音频查找的路径。音频文件支持的格式包括：.mp3、.ogg、.wav。 视频文件支持的格式包括：.mp4、.ogg、.webm。
音频与视频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是 controls。
a 标签（anchor 锚）在指定的位置添加超级链接，提供用户进行点击和跳转。有两种跳转形式：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性。
页面内锚点跳转
①在目标位置找到任意一个标签，给它添加 id 属性， id 的属性值必须是唯一且必须以字母开头，后面可以有字母、数字、下划线和横线，区分大小写。
②在目标位置添加一个空的 a 标签，只设置一个 name 属性， name 属性值设置 方式与 id 相同，也必须是唯一的。
跨页面锚点跳转
列表用于制作HTML中的一系列项目。通常我们会将内容相关、结构相似、样式相近的内容使用列表结构进行搭建。根据项目的内容不同，可以有三种语义的列表结构： 无序列表、有序列表、定义列表 。
注意事项：
自定义列表不仅仅是一列项目，而是项目及其注释的组合。 由三个标签组成完整的结构，包含 dl 、 dt 和 dd 。 dl ： definition list ，表示定义一个自定义列表的大结构。 dt ： definition term ，表示定义自定义列表中的一个主题或者术语。 dd ： definition description ，定义解释项，表示描述或解释前面的定义主题。 dl 内部只能嵌套 dt 和 dd ， dt 与 dd 是同级关系。
注意事项：
常用的布局标签有 div 和 span ，俗称盒子，都没有具体明确的语义。
div： 全称division，分割、区域、跨度的意思。俗称大盒子。 div 是双标签，是最经典的容器级标签，内部可以放置任意内容。多用于划分网页区域，进行结构布局。一般将相关的内容使用 div 包裹起来，整体设置大的布局效果。
span： 小区域、小跨度的意思。俗称小盒子。 span 也是双标签，容器级标签。 在不改变整体效果的情况下，可以辅助进行局部调整。
创建一个简单的表格至少有三个标签组成，分别是 table 、 tr 、 td 标签，此外如果要制作表头，则使用 th 标签。
表格的单元格可以进行合并，通过 th 和 td 的两个属性可以进行合并设置。 rowspan ：跨行和并（上下的合并）。 colspan ：跨列合并（左右的合并）。属性值是数字，表示跨几行或跨几列合并。
制作技巧： (1) 先列出所有行 tr ，以最小单元格为标准。 (2) 再添加每一行的 td 或 th 单元格。 (3) 划分单元格所在行时，顶边对齐的属于同一行。 (4) 将所有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小 的单元格。
table 内部最直接的子级包含四个分区标签，他们都是双标签。
四个分区可以选择性的进行组合。 注意： 不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照 caption 、 thead 、 tbody 、 tfoot 执行的。制作的时候可以先书写大分区标签结构，接着填充每个分区的内部内容，如果有合并单元格内容，则进行单元格合并。
HTML表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击 的小控件。在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个 部分构成。
HTML表单域使用 form 标签进行定义。 form 标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个 form 标签之内。 form 标签为双标签，容器级标签。 form 标签通过对应属性规定提交数据的方法和提交位置。
input 标签是最重要的一个表单元素，为单标签，本身相当于一个特殊的文本，需要通过标签属性实现各种功能。其中ra， type 属性的值不同，决定了 input 标签的形态不同。
单选框和复选框都可以提前设置默认选中项。 input 标签有一个 checked 属性，如果不设置表示默认没有选中。 属性值如果设置为 "checked" ，表示该项默认被选中。
textarea 标签定义文本域，制作可以输入多行文本的区域，为双标签，本身相当于一个特殊的文字。 文本域可以设置默认输入的文字，在双标签之间书写默认文字。
textarea 有两个标签属性，可以设置显示区域大小。 rows ：行，属性值是数字，表示文本框显示的最大行数，如果超过了行数， 会被隐藏并且出现滚动条。 cols ：列，属性值是数字，表示在出现滚动条之后，每一行显示的最大字节数（一个汉字按2字节计算）。
HTML中的下拉菜单提前设置一些选项，然后可以通过点击选择其中一项。
下拉菜单需要至少两个标签完成结构： select ：选择，表示定义下拉菜单整体结构。 option ：选项，表示定义下拉菜单的每一项。 两个标签都是双标签，文本级标签。 关系： selectoption ， option 可以有任意多项。
默认情况下，选中的是第一项。 下拉菜单可以通过给 option 标签设置 selected 属性，属性值为 selected ，更改默认选中项。
下拉菜单中如果选项变得复杂，可以将 option 进行分组管理。 可以使用 optgroup 标签对选项进行分组， optgroup 是一个双标签。 关系： selectoptgroupoption ， optgroup 可以设置一个 label 属性，表示给这一组选项添加一个分组标签名，分组标签 optgroup 是不能被点击选择的。
所有的表单元素都可以通过绑定其他内容去扩大触发点击范围，这时需要使用一个 label 标签。该标签的作用是帮表单元素定义标注（标记）。 如果将表单控件与提示内容使用 label 进行绑定后，当用户鼠标点击 label 内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。有两种绑定方法：
在普通文字书写时，有一些特殊符号不能直接书写（例如 连续的空格），或者符号具有特殊功能也不能直接书写（例如符号）。可以使用一些HTML提前预留好的替换字符进行书写，这些替换字符叫做字符实体。
通过查询w3school手册 HTML ISO-885901 ，查看所有的字符实体以及特殊字符的替换写法，包含实体名称以及实体编号。
规则： 所有的字符实体和实体编号都是以 开头，以 ； 结尾的。
注意： 实体名称对大小写敏感！
建议1 ：使用实体名称，好处是名称易于记忆。不过坏处是，浏览器也许并不支持所有实 体名称（对实体数字的支持却很好）。
建议2 ：不需要强制记忆所有的字符实体，只需要记忆常用的几个字符实体名称即可，其 他可以通过手册进行查询。
HTML常用标签和属性
en英文
zh-CN中文
ja-jp日文
！-- -- 注释
p/p分段
br强制换行
ins/ins下划线
hr/水平线
strong/strong强调突出内容
em/em强调倾斜内容
del/del删除线
sub/sub下际
sup/sup上际
lt；大于号
gt；小于号
emsp；空格
trade；TM
reg；?
copy；?
amp；
yen；￥
deg；摄氏度
color=""水平线颜色
width=""水平线宽度
align=""水平线方向，left左，right右
noshade="noshade"水平线默认阴影消除
img? src＝" " alt＝" "
相对路径? ./ ../
绝对路径? 去网络里找图片链接
./是找同级或下级图片
../是找上级图片
src＝""引入图片链接
alt＝""当图片出现问题，可以提示一段文字
title＝""鼠标悬停信息
width＝"? px"设定图片宽度
height＝"? px"设定图片高度
a href=""/a
href=""链接的地址
tltle=""悬停提示信息
target=""填入网址
target=""里包含_blank和_self
_blank在浏览器新窗口打开页面
_self在浏览器原窗口打开页面
img src=" alt"可以在图片里加链接
1.#号和id属性
在要跳转的文本位置前填上块元素，给块元素命名
div id＝""/div
a href="#? ? "/a
2.#号和name属性
在要跳转的文本位置前在写一个
a name="? "/a
a herf="#? "/a
ul和li必须是组合出现的，他们之间是不能有其他标签的
ul
? li/li
/ul
ul/ul列表最外层容器
li/li列表项
type=""是改变前面标记样式（一般都是用css去控制 ）
ul type=""li /li /ul
disc是实心圆? ? ? ? circle是空心圆
square是实心方块? ? none是空白可以随意发挥
ol和li必须是组合出现的，他们之间是不能有其他标签的
ol
li/li
/ol
ol/ol列表最外层容器
li/li列表项
type=""是改变前面标记样式（一般都是用css去控制
ol type="" start="" li /li /ol
1是数字? ? ? ? ? a是小写字母? ? ? ? A大写字母? ? i罗马数字小写? I罗马数字大写
start=""从哪个数字开始（取值只能是数字）
dl?
dt/dt?
dd/dd?
/dl
dl/dl列表最外层容器
dt/dt定义专业术语或名词
dd/dd对名词进行解释和描述
table/table表格最外层容器
tr/tr定义表格行
th/th定义表头
td/td定义表格单元
caption/caption定义表格标题
border=""表格边框
cellpadding=""单元格内的空间
cellspacing=""单元格之间的空间
rowspan=""合并行
colspan=""合并列
align=""单元格文字左右对齐方式
align：left、center、right
valign=""单元格文字上下对齐方式
valign：top、middle、bottom
form action=""
? ? input type＝"text"
/form
form/form表单最外层容器
action＝""提交到一个地址
input标签用于搜集用户信息，根据不同的type属性值，展示不同的控件
? input type=""
? text普通文本密码框
? password密码输入框
? placeholdr提示文本
? button自定义按钮
? disabled禁用
? readonly只读
? submit提交按钮
? hidden是给后端带信息普通用户看不见 一般伴随（value）
? input type="image"src="/? ? "图片代替提交按钮
? reset重置按钮
2.checkbox复选框
? 加上checked会出现一个默认选择
? disabled禁止使用
3.radio单选框
? name="(写一个自定义的值)"通过name可以让两个或多个单选框变为一组（自定义的值要相同）
? 加上checked会出现一个默认选择
4.file上传文件
? multiple按住鼠标左键鼠标滑过可以多选
5.textarea多行文本框
? textarea? cols="30" rows="10"/textarea
? cols=""表示列
? rows=""表示行
? 可以通过调节行列改变大小
? resize重新设置大小（css）
? : vertical;垂直
? :horizontal;水平
? :both;默认
? :none;无法控制
6.? selectoption/option/select
? select下拉菜单
? size=""填入数字可以让下拉菜单显示多项
? multiple按住鼠标左键鼠标滑过可以多选
? option菜单里的选项传给后端要设置value值
? selected下拉菜单默认显示当前被选中的那一项
7. label for=""/label是一个辅助属性
? id和for要相同
? 拿3.做例子
? 正常点这个文字是选不中的
? input type="radio" name="gender"男
? input type="radio" name="gender"女
? 但是用上label后就可以了
? input type="radio" name="gender" id="man"label for="man"男/label
? input type="radio" name="gender" id="girl"label for="girl"女/label
fieldsetlegend/legend/fieldset
legend/legend缺口
1.div/div(块)用来划分区域
2.span/span（内联）对文字单独修饰
? style=""设计
? color颜色
? span style＝"color:? ? "/span
div和span都是没有任何默认样式的，需要配合css
audio src="? " /audio
controls控制栏
loop循环
autoplay自动播放
muted静音
video src="? "video
controls控制栏
loop循环
autoplay自动播放
muted静音
poster属性海报
section元素 表示页面中的一个内容区块（页面身体）
article元素 表示一块与上下文无关的独立的内容
aside元素 在article之外的，与article内容相关的辅助信息（侧边栏）
header元素 表示页面中一个内容区块或整个页面的标题（页面头部）
footer元素 表示页面中一个内容区快或整个页面的脚注（页面底部）
nav元素 表示页面中导游链接部分（页面导航栏）
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题（第一个获最后一个子元素的位置）
main元素 表示页面中的主要内容（ie不兼容）
form/form表单最外层容器
form action=""/form
action提交到一个地址
input/input标签用于搜集用户信息，根据不同的type属性值，展示不同的控件
input type=""
加上name是给后端的
type="color"生成一个颜色选择的表单
type="email"生成一个邮箱输入框
type="tel"换起拨号盘表单
type="search"产生一个搜索意义的表单
type="range"产生一个滑动条表单，支持min，max，value，step
（min最小值）
（max最大值）
（value设置默认）
（step移动数值）
type="number"产生一个数值表单，支持min，max，value，step
type="email"限制用户必须输入email类型
type="url"限制用户必须输入url类型
type="date"限制用户必须输入日期
type="month"限制用户必须输入月类型
type="week"限制用户必须输入周类型
type="time"限制用户必须输入时间类型
type="datetime-local"选取本地时间
input type="text" list="mylist"（list和id相连）
datalist id="mylist"(id自定义)
option value="手机"/option（这个是列表可以想写多少写多少）
/datalist
va lue自定义名称
autofocus自动获取焦点
required验证输入不能为空
multiple可以输入一个或多个值，每个值用逗号隔开
input type="email" multiple/还可用于file
pattern
将属性值设为某个正则表达式，在提交时会检查其内容是否合给定格式
input pattern="[0-9][A-Z][3]" title="输入内容：一个数与三个大写字母" placeholder="输入内容：一个数与三个大写字母"