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新增 相关内容,相关辅助信息,如侧边栏

 

posted on 2018-07-31 20:12  阿乐的博客园  阅读(155)  评论(0编辑  收藏  举报

导航