[置顶] HTML常用标签
2018-03-29 17:14
357 查看
HTML常用标签
1.1 HTML颜色六位的十六位
Ø 比如：#ff0000 以上格式简写为#f00其中前两位表示红色，中间两位表示绿色，最后两位表示蓝色。
Ø 注释格式：<!-- 内容-->
Ø 注释快捷键：Shift+/
Ø 全角空格的空格 与半全角的空格
的区别 。
1.2 head中常用的标签
Ø <title> </title> 设置网页的标题Ø <meta charset ="utf-8"/ > 设置页面字符集 (HTML5)
Ø <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 设置字符集(HTML4 )
Ø http-equiv 告知浏览器的行为
比如：<meta http-equiv="refresh" content="5;url="http://www.baidu.com"/> 表示让浏览器5S后刷新 跳转到一个URL地址上
Ø <meta name="keywords" content="关键1，关键2等等"/> 提供关键字，让搜索引擎来搜索。
比如：在百度上搜索关键字。多个关键字之间用英文状态下的逗号分割（不显示在页面中）
Ø <meta name="description" content="描述的内容">对网页的描述（不显示在页面中
好比，百度搜到该网站后需要描述）
Ø <link />定义两个文档之间连接的关系
<link/>标签定义文档与外部资源的关系
<link/>标签最常见的用途是链接样式表
Ø <link/>标签中的属性
rel="表示文档与被连接文档之间的关系"
type="被连接文档的类型"
href="被连接文档的地址"
Ø 加载标题小图标<link rel="icon" type="image/jpeg" href="./a.jpg " />
Ø 加载css 样式 <link rel="stylesheet" type="text/css" href=" " />
Ø 加载JS脚本 <script></script>
Ø 加载CSS样式 <style></style>
1.3 body 标签中常用的标签
Ø 文本与文本格式标签<p></p>段落标签 上下文本间隔一行
<br/>换行标签
<b></b> 加粗标签 物理标记
html
<strong></strong> 定义重要的文本
也就是加粗 逻辑标记
Xhtml
<e></e> 强调某段文本
斜体 逻辑标记
<i></i> 定义斜体标签
物理标签
<hr/> 水平线标签
<u></u> 下划线标签
<del></del>删除线
贯穿线
Ø h族标签
<h1></h1>到<h6></h6>
标题标签。没有h7以上的标签.
Ø 方向标签
<bd0 dir="属性值"></bdo> (可以改变文本的方向)
属性值：ltr rtl （
left t：to r：right）
<sup></sup> 定义上表文本
<sub></sub> 定义下表文本
Ø 详情标签
<details> </datails>详情描述标签定义元素的细节，用户点击查看，点击隐藏。
修改详情标题<summary></summary>为details标签定义标签
Ø 聊天标签
<dialog open="true"></dialog>聊天标签
需要配合的属性open="true"该标签chrome(谷歌)浏览器支持
Ø <body></boby> 中属性
：
bgcolor设置页面的背景颜色
background 设置页面的背景图片
text设置字体颜色
1.4 HTML中的列表标签
Ø 无序列表： <ul></ul>Ø 有序列表： <ol></ol >
Ø <li></li> 定义列表项，有序列表和无序列表中都使用该标签定义列表项
Ø <dl></dl>定义一个列表
Ø <dt></dt>定义一个列表中的项目，以及dialog的一个角色
Ø <dd></dd>定义对列表中项目的描述，或者dialog中对人物所说的内容
Ø <pre></pre>原格式输出标签
Ø 已经被HTML5舍去的标签，但是还能使用的标签：<center></center> 居中标签
Ø <font color="" size="" face=""></font>字体标签
属性：color 设置字体颜色
size 设置字体大小 注意最大支持7
face设置字体的类型
1.5 HTML 中的超链接标签
Ø <a></a>定义超链接标签中的属性u href="" url地址
./表示为当前目录
../表示为上级目录
target="" 定义页面打开的方式
_self 认在当前窗口中打开链接的文档。
_blank在新窗口中打开被链接的文档。
Ø <a>标签中锚点的应用（快速定位到页面中我需要的位置）
需要定位的地方定义一个a标签，给该a标签设置属性id
需要在跳转的a标签href属性值最后写#后面跟ID设的值即可实现 锚点的应用
Ø 邮件链接跳转：（客户端必须下载有邮箱客户端）
<a href="mailto:收件人邮箱地址"></a>
1.6 HTML中的多媒体标签
Ø <img />定义图片地址属性src 定义图片地址，如果图片的路径绝对路劲，那么必须加上协议
width 设置图片的宽度
height 设置图片的高度
alt 当图片加载失败时，用于替换的文字信息
title 图片的标题，当鼠标移动到图片时，显示的文字信息
lsmap 将点击的坐标传给服务器
usemap 属性与map标签的id属性关联
Ø 图像映射(图像映射指的是带有可点击区域的图像)
<map></map>定义客户端的图像映射
id属性定义一个名字
<area />定义图像的映射的区域
shape 定义区域的形状
href URL
target 打开页面的方式
Ø 注意:<img>标签中定义usemap属性，属性值为#后面跟<map>标签中定义
的id值即可实现关联。
Ø <audio></audio>定义声音标签
src 声音的地址
controls 播放控件
autoplay 自动播放
loop连续播放
preload 提前加载准备播放，注意该属性不能和autoplay一起使用
<source/>定义媒介资源 src媒介地址"
Ø <video></video>定义视频标签
controls 播放控件
width 视频宽度
height视频高度
poster 定义视频在点击播放前显示的图像
autoplay 自动播放
<source/>定义媒介资源src定义图像地址
Ø <embed></embed>加载多媒体 加载一个flash
src="地址"
width 宽度
height高度
1.7 HTML的表格标签
Ø <table></table> 定义表格常用的属性：
border 定义表格边框的宽度
width 定义表格宽度
height 定义表格高度
align 定义表格相对页面水平对齐方式
取值：left center right
cellspacing 设置单元格之间距离
cellpadding 设定内容到单元格边框的距离
bordercolor 设置边框的颜色
<caption></caption> 定义表格的名
<tr></tr> 定义表格中的行
属性：align 水平对齐方式
取值：left center righ
<td></td>定义表格中的表格元格
属性：align 水平对齐方式
取值：left center right
<thead></thead> 定义表格的头
<tbody></tbody> 定义表格的内容
<tfoot></tfoot> 定义表格的尾
valign 垂直对齐方式
取值
top middle bottom
colspan 规定单元格可横跨的列数 (一行中做跨列合并)
rowspan 规定单元格可纵跨的行数
（一行中做跨行合并）
通用属性：
bgcolor 设置背景颜色
background 设置背景图片
2 HTML中的form标签
2.1 form表单
Ø <form></form> 用于为用户输入创建HTML表单
必须属性：
action 浏览这输入数据被传送到的地方。
method 数据传送的方式
get /post
Ø <input />为用户定义需要使用的表单项
name 次表单项的名称
value 此表单项的初始值
type 代表一个输入域的显示方式(分为：输入型 选择型 点击型)
type 的属性：
text 普通文本域
password 密码域
radio 单选框（如果要实现单选，name
属性名必须一致才会产生
排斥效果） 默认选择
加上checked
checkbox 复选框（复选框中要求定义好name属性名以后后面加
[]） 默认选择
加上checked
submit 提交按钮 可以用value属性来提交
按钮的文字
image 使用图片来显示提交按钮使用src属性来指定图片的位置，类 似于img标签。点图片加载失败时可以使用alt属性显示的文字信息，如果没有alt属性没有，也可以用value属性来显示文字信息
reset 重置按钮
hidden 隐藏域 传递一些隐藏的信息。
2.2 form表单相关标签
Ø <button></button>提交按钮（可以实现提交）
Ø <button type="button"></button>没有意义的一个按钮
为JS提供服务的，后 期可以使用JS为这个按钮写一些自定义的功能。
Ø <textarea></textarea> 多行文本输入域
常用的属性（该标签没有value的属性）：
name 名称
rows 显示的行数
cols 显示的列数
Ø <select name="" >下拉列表
<option value=""></option>为下拉列表定义列表项（如果列表中没有 设置value 属性，那么点击提交时，将获得option 中内容提交，如果有设置
将获取value属性设置的值）
.....
</select>
selected 为下拉列表项定义默认选中
Ø <optgroup><optgroup/>下拉列表定义分组（还是在<select></select>中）
需要配合属性：label定义分组的名称。 (下拉分类)
<optgroup></optgroup>只有定义这类下拉表单的组名时用的标签
Ø <label></label> 为input元素定义标注（绑定元素
就是选择是点击文本也能起到选择的效果）
实现绑定元素方式1：直接将内容和input 标签包含在一块
实现绑定元素方式2：
1.在input 标签中定义一个id值
2.在label 标签定义一个for 属性
属性值为id属性值
2.3 form表单新增的表单类型
Ø <input type="date" name="" value=""/>时间范围：
date 表示日期选择表单
time 表示时间选取表单
week 周选取表单
month 月选取表单
datetime-local 完整日期
（以上 QQ浏览器
IE 谷歌浏览器支持 火狐不支持
自己测试）
email 设定当前表单验证方式是email验证
URL 设定当前表单的验证方式是URL验证
number 设定当前表单的验证方式是数组验证
min 用于设定表单的最小值 (适用于数值表单)
max 用于设定表单的最大值 (适用于数值表单)
step 设定跳过的数值或者设定2个数值之间的间隔（适用于数值表单 ）
range 设定当前表单验证方式是在指定的范围
需要配合的属性
min max
search 设定当前表单为搜索表单
（需要添加results="n" 会在chrome 下显示小放大镜
最新谷歌版本支持）
color 设定当前表单选取颜色表单
tel 电话表单
没有验证 和text一样。
2.4 form表单的新玩法
Ø <fieldset></fieldset> 将表单内的相关元素分组（跟体检表单那种）
Ø <legend></legend> 为fieldset 定义标题
Ø <datalist></datalist> 定义可选数据列表（打一个字出现后面的text搜索）
将可选数据列表与文本域进行关联：
1.在datalist标签中定义id属性
2.在文本域中定义list属性，属性值指定id的属性值即可实现关联
3.同时也要注意：列表项依然使用<option></option>来定义
2.5 表单分离技术
在HTML5 中为了排版方便，表单标签允许跳出form表单之外，但是要实现提交功能需要做2件事1.为form标签添加唯一表示ID属性
2.为需要提交的元素添加form属性，属性值指定1步骤的id值即可
表单中常用的属性：
readonly 输入域可以选择，但不能修改
disabled 输入域无法获取焦点
无法选择 以灰色显示
autofocus 自动获取焦点属性
placeholder 表单信息提示 用代替表单中显示默认值需要使用value的情况，placeholder取代了value属性的显示提示信息的功能，并且不会随着提交而提交数据（表单中浅灰色的提示。）
required 用于强制用户必须为该表单赋值，否者提示信息。
multiple 设定当前表单允许同时选择多个文件，适用于input tpye=file （上传标签）
但是要是实现多选必须在name属性名字后面加上[]
pattern 用于自定义验证规则（必须配合正则表达式的语法使用）
novalidate 取消表单验证
适用于form标签
formaction 用于在提交按钮中修改当前表单的提交页面的url
formmethod 用于在提交按钮中修改当前表单的提交方式（get/post）
formenctype：用于在提交按钮中修改当前表单提交数据编码类型(一般不用 文件上传时使用)
formnovalidate 用于在提交按钮中修改当前表单的验证方式或取消验证
tabindex Tab键切换索引属性
2.6 HTML全局属性
Ø contentEditable 内容可编辑属性设定该属性的元素内容允许在页面中直接修改
注意在页面中修改知识临时修改，如果需要长期修改，需要JS和AJAX
Ø designMode 页面可编辑属性(标签无法修改)
注意当前属性不是任何标签的属性，而是文档的属性，如果文档设置该属性为on那么页面中所有的元素均可实现修改
3 HTML 的行内框架标签
Ø 分帧标签<frameset></frameset>代替<body></body>标签（主页面）定义了框架页，并且定义了框架页将分为多少行或者多少列cols 定义框架页面含有多少列与列的大小(每个值使用逗号分隔，值为像素或百分比)
rows定义框架页面含有多少行与行的大小（每个值使用逗号分隔，值为像素或百分比）
Ø <frame/> 定义frameset标签中每个框架页的内容
常用属性：
src 定义内容页的url地址
name 为每一个框架页定义名称（在一个框架页链接到另一个框
架页时使用）
ps：在引入页面时需要用target =""（name的值）属性来 来选择显示的页面
如：头页面有个超链接<a href="###" target="left">###</a>
Ø <iframe></iframe> 在页面中开一块空间链接子页面
该标签不需要删除<body>
常用的属性：
src引入一个子页面
width定义子页面的宽
height 定义子页面的高
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐