HTML标签
主体结构标签
<html></html> 此元素可告知浏览器其自身是一个 HTML 文档。
<head></head> 用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
<body></doby> 定义文档的主体
HEAD头部标签
<title></title> 定义文档标题
<base /> 标签为页面上的所有链接规定默认地址或默认目标
<meta /> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签永远位于 head 元素内部。
<meta charset="utf-8">
<link></link> 标签定义文档与外部资源的关系。
<link rel="stylesheet" type="text/css" href="style.css"></link><link rel="shortcut icon" type="images/x-icon" href="http://www.baidu.com/favicon.ico">
<style></style> 签用于为 HTML 文档定义样式信息。
<script></script> 标签用于定义客户端脚本,比如 JavaScript。script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
<script type="text/javascript" src="script.js"></script><script>
alert('OK')</script>
格式排版标签
<br/> 换行标签,完成文字的紧凑显示。可以使用连续多个<br/>标签来换行
<hr/> 水平分割线标签,用于段落与段落之间的分割
<p></p>段落标签,里面可以加入文字,列表,表格等,可以<p></p>或<p />使用
<pre></pre>按原文显示标签,可以把原文件中的空格,回车,换行,tab键表现出来
<hn></hn> 标题字标签,n为1-6,定义六级标题,而且会自动换行插入一个空行
<div></div> 没有任何语义的标签
文本标签
<em></em> 表示强调,通常为斜体字
<strong></strong> 表示强调(语气更强),通常为粗体字
<del></del> 标签定义文档中已删除的文本。
<ins></ins> 标签定义已经被插入文档中的文本
<sub></sub> 文字下标字体标签
<sup></sup> 文字上标字体标签
<mark></mark> H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面
<ruby></ruby> H5新增 标签定义 ruby 注释(中文注音或字符) 在东亚使用,显示的是东亚字符的发音。
<rt></rt> H5新增 标签定义字符(中文注音或字符)的解释或发音
了解标签
<!--一下文本标签 作为了解-->
<cite> 用于引证、举例、(标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题)通常为斜体字
<dfn> 定义一个定义项目
<code> 定义计算机代码文本
<samp> 定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来,对它们加以强调的极少情况下,才使用这个标签。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<abbr> 定义缩写 配合title属性 (IE6以上)
<bdo> 来覆盖默认的文本方向 dir属性 值: lrt rtl
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<small> 标签定义小型文本(和旁注)
<b> 粗体字标签 根据 HTML 5 的规范,<b> 标签应该做为最后的选择,只有在没有其他标记比较合适时才使用它。
<i> 斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
<u> 下划线字体标签 标签定义与常规文本风格不同的文本,像拼写错误的单词或者汉语中的专有名词。 请尽量避免使用 <u> 为文本加下划线,用户会把它混淆为一个超链接。
<q> 签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字)
<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。(大段文字) (块状元素)
<address> 定义地址 通常为斜体 (注意非通讯地址) 块状元素
<font> H5已删除 字体标签,可以通过标签的属性指定文字的大小、颜色及字体等信息
<tt> H5已删除 打字机文字
<big> H5已删除 大型字体标签
<strike> H5已删除 添加删除线
<acronym> H5已删除 首字母缩写 请使用<abbr>代替
<bdi> H5新增 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。(经测试,各大浏览器都不起作用)
<mark> H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面
<meter> H5新增 定义预定义范围的度量
<progress> H5新增 标签标示任务的进度(进程)
<time> H5新增 定义时间和日期
<wbr> H5新增 规定在文本中的何处适合添加换行符。Word Break Opportunity
超链接
<a href='要跳转的地址'>超链接文字</a>
a标签的属性
href -- 代表一个url链接源(就是链接到什么地方)
url除了是网页外,还可以是其它的文件(如文本文件,pdf文件等)。
url还可以是指向HTML文件中的一个位置。
url还可以是Email地址。
target -- 用来指出哪个窗口或框架应该被此链接打开
target=_blank: 将链接内容在新的浏览窗口中打开。
target=_self: 将链接的内容,显示在目前的窗口中。
target=_parent:将链接的内容,当成文件的上一个画面。
target=_top:这个参数可以解决新内容被旧框窗包围的困扰,使用这参数,会将整个画面重新显示成链接的画面内容。
title -- 代表链接的附加提示信息
download HTML5新添加属性 表示下载
锚点
<a> </a>
用<a name=“”>定义,例如:<a name=“here1”>第一部分</a>,
使用<a href=“#here1”>跳转到第一部分</a>超链接就可以定位到网页中的“第一部分”这个位置。
锚点的跳转
使用# <a href="#锚点名">跳转</a>
跳转到指定页面指定锚点 http://www.lampuser.com/index.html#section2
img 标签
<img src="图片地址" title="" alt="">
img属性
alt -- 代表图像的替代文字
src -- 代表一个图像源(就是图像的位置)
title 提示信息
border – 代表图片边框的宽度
height -- 代表一个图像的高度
width -- 代表一个图像的宽度
usemap 将图像定义为客户器端图像映射
常见图片格式
GIF -- 最多支持256色,支持透明,支持多帧动画显示效果.
JPEG -- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.
PNG -- 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画.
图像映射
<img src="planets.gif" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
<area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
<area href="venus.htm" shape="circle" coords="180,139,14">Venus</a></map>
map标签
<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
area标签
alt 规定区域的替代文本。如果使用 href 属性,则该属性是必需的。
href URL 规定区域的目标 URL。
coords 规定区域的坐标。
shape 规定区域的形状
rect 矩形
circle 圆形
poly 多边形
target -- 用来指出哪个窗口或框架应该被此链接打开
HTML列表标签
<ul></ul> 代表HTML无序列表 ,里面每一列表项使用<li>标签定义
<ol></ol> 代表HTML有序列表 ,里面每一列表项使用<li>标签定义
属性
start 规定有序列表的起始值。
type 规定在列表中使用的标记类型。(1 a A i I)
reversed H5新添加 降序
<li></li> 代表HTML列表项目,每个列表项使用一对<li></li>标记
<dl></dl> 定义了定义列表(definition list)
<dt></dt> 标签定义了定义列表中的项目(即术语部分)
<dd></dd> 在定义列表中定义条目的定义部分。
HTML列表标签
<table></table>
<caption></caption> 定义表格标题
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
<tr></tr> 行
<th></th> 表头单元格
<td></td> 单元格
给<td> 或者 <th> 设置属性 rowspan 和 colspan
rowspan 合并行
colspan 合并列
表单相关标签
<form></from> 定义一个 HTML 表单,用于用户输入。
属性
action
method
get
post
enctype
multipart/form-data(有文件表单时候,必须使用这个)
application/x-www-form-urlencoded
target
表单相关标签
<form></from> 定义一个 HTML 表单,用于用户输入。
属性
action
method
get
post
enctype
multipart/form-data(有文件表单时候,必须使用这个)
application/x-www-form-urlencoded
target
<input> 定义一个输入控件
属性
name 必须有,否则数据无法传递
type text、password、radio、hidden、checkbox、submit、image、file、reset、button、submit、email、number、color等
<button></button> 定义按钮
属性
type submit、reset、submit
name
<select></select> 定义选择列表(下拉列表)
属性
disabled 禁用
name 必须有
multiple 多选,默认会显示所有,名字要使用数组like[]
size 显示几个下拉
<option></option> 定义选择列表中的选项。
属性
value 提交的值,若没有,则提交内容
selected 定义选中项
disabled 选项禁用
<optgroup></optgroup> 把相关的选项组合在一起
属性
disabled 规定禁用该选项组。
label 为选项组规定描述。
<textarea></textarea>
属性
cols 可见宽度
rows 可见行数
readonly 文本区只读
name 必须有
disabled 禁用
<label> 定义 fieldset 元素的标题。
<fieldset></fidldset> 定义围绕表单中元素的边框
<legend></legend> 定义 fieldset 元素的标题。
表单组成控件
文本输入框
<input type="text" name="username"><input type="text" name="username" placeholder="请输入用户名"><input type="text" name="username" value="李大钊"><input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">
密码框
<input type="password" name="pwd"><input type="password" name="pwd" placeholder="请输入密码"><input type="password" name="pwd" placeholder="请输入密码" maxlength="12">
单选按钮
<input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex" value="female">男
复选框
<input type="checkbox" name="hobby" value="basketball"> 篮球<input type="checkbox" name="hobby" value="football"> 足球<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球 <input type="checkbox" name="hobby" value="baseball"> 棒球
文件选择框
<input type="file" name="pic"><input type="file" name="pics" multiple> <!--选择多个文件-->
规定类型的文本输入框(HTML5新增)
<!--邮箱--><input type="email" name="email" placeholder="请输入邮箱">
<!--url--><input type="url" name="url" placeholder="请输入网址">
<!--数字--><input type="number" name="num"><input type="number" name="num" min='10' max='100' step='10'>
<!--搜索框--><input type="search" name="kw" placeholder="搜索">
<!--电话号码 同于text 但是用移动设备,会直接弹出数字键盘--><input type="tel" name="tel_num" placeholder="请输入电话号码">
范围选择框(HTML5新增)
<input type="range" name="range"><input type="range" name="range" value="80"><input type="range" name="range" value="80" max="100" min="0">
颜色选择框(HTML5新增)
<input type="color" name="color">
时间日期选择框(HTML5新增)
<input type="date" name="date"><input type="month" name="month"><input type="week" name="week"><input type="time" name="time"><input type="datetime" name="datetime"><input type="datetime-local" name="datetime">
下拉选项
<select name="major">
<option value="computer">计算机</option>
<option value="archaeology">考古学</option>
<option value="medicine" selected>医学</option>
<option value="Architecture">建筑学</option>
<option value="Biology">生物学</option></select>
<!--多选--><select name="major" multiple>
<option value="computer">计算机</option>
<option value="archaeology">考古学</option>
<option value="medicine">医学</option>
<option value="Architecture">建筑学</option>
<option value="Biology">生物学</option></select>
多行文本输入
<textarea name="content"></textarea><textarea name="content" cols="30" rows="10"></textarea>
按钮
<!--提交按钮--><input type="submit" value="提交"><button>提交</button><button type="submit">提交</button>
<!--重置按钮--><input type="reset" value="重置"><button type="reset">重置</button>
<!--普通按钮--><input type="button" value="按钮"><button type="button">按钮</button>
表单中其他标签
field/legend
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset></form>
datalist(新增)
<input id="myCar" list="cars" /><datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo"></datalist>
表单控件相关属性
disabled 表示不可用 用于所有的表单控件
enabled 表示可用 用于所有的表单控件
readable 表示只读 用于可输入的表单控件
autofocus 自动获取焦点 所有表单控件
autocomplete 值on/off 用于可输入的控件 是否自动填充内容
pattern 正则验证 可输入的控件
required 必填
音频/视频 (HTML5新增)HTML标签
<video></video> 定义视频
| 属性 | 值 | 描述
| -------- | ------------------ | ------------------------------------------------------
| autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。
| controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。
| height | pixels | 设置视频播放器的高度。
| loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。
| muted | muted | 如果出现该属性,视频的音频输出为静音。
| poster | URL | 规定视频正在下载时显示的图像,直到用户点击播放按钮。
| preload | auto metadata none | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
| src | URL | 要播放的视频的 URL。
| width | pixels | 设置视频播放器的宽度。
<audio></audio> 定义音频
| 属性 | 值 | 描述
| -------- | ------------------ | ----------------------------------------------------------
| autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。
| controls | controls | 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。
| loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。
| muted | muted | 如果出现该属性,则音频输出为静音。
| preload | auto metadata none | 规定当网页加载时,音频是否默认被加载以及如何被加载。
| src | URL* | 规定音频文件的 URL。
<source></source>为媒体元素(比如 <video> 和 <audio>)定义媒体资源
| 属性 | 值 | 描述
| ----- | ------------- | ------------------------------------------
| media | media_query | 规定媒体资源的类型,供浏览器决定是否下载。
| src | URL | 规定媒体文件的 URL。
| type | MIME_type | 规定媒体资源的 MIME 类型。
布局相关的标签
<div></div> 定义文档中的分区或节
<span></span> 这是一个行内元素,没有任何意义
<header></header> HTML5新增 定义 section 或 page 的页眉
<footer></footer> HTML5新增 定义 section 或 page 的页脚
<main></main> HTML5新增 标签规定文档的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在 文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。IE都不识别
<nav></nav> HTML5新增 表示链接导航部分 如果文档中有“前后”按钮,则应该把它放到元素中
<section></section> HTML5新增 定义文档中的节 通常不推荐那些没有标题的内容使用section
<article></article> HTML5新增 定义文章 论坛帖子 报纸文章 博客条目 用户评论
<aside></aside> HTML5新增 相关内容,相关辅助信息,如侧边栏