目录
pre -- small -- b -- i -- q -- bdo -- bdi -- time -- mark -- span 文本标签
object 文件载入标签 和 param 对载入文件进行设置标签
HTML全部标签都可使用的属性
属性 | 描述 |
accesskey | 设置访问该元素的键盘快捷键。 语法: <元素标签 accesskey="快捷键字符" > 如:<a href="//www.baidu.com" accesskey="h"> 按住alt+h跳转到百度 </a> 激活方法: IE--Chrome = Alt + 定义的快捷键字符 |
class | 规定元素的类名(classname) 语法:<元素标签 class="string"> 如:<h1 class="intro">标题 1</h1> |
name | 给元素取一个名字(name) 语法:<元素标签 name="string"> 如:<h1 id="intro">标题 1</h1> |
id | 给元素设置一个id(id 在 HTML 文档中必须是唯一的。) 语法:<元素标签 name="string"> 如:<h1 id="intro">标题 1</h1> |
dir | 设置元素中内容的文本方向。 语法:<元素标签 dir="ltr | rtl | auto"> ltr (从左向右) rtl (从右向左) auto (让浏览器判断) 如:<bdo dir="rtl">文本方向从右到左!</bdo> |
hidden | 对元素进行隐藏。 语法:<元素标签 hidden> 如:<p hidden>这是一段隐藏的段落。</p> |
lang | 告诉元素该标签内的内容是什么语言 语法:<元素标签 lang="en"> 如:<p lang="en">asd</p> |
spellcheck | 检测元素是否拼写错误 语法:<元素标签 spellcheck="true|false"> true为开启检查,false为关闭 如:<p spellcheck="true">asb</p> |
contenteditable | 当属性值为true时,可对该标签的文本进行编辑操作 语法:<元素标签 contenteditable="true|false"> 如:<p contenteditable="true">这是一个可编辑段落。</p> |
title | 规定元素的额外信息(可在工具提示中显示) 语法:<元素标签 title="string"> 如:<p title="菜鸟">小菜鸟</p> |
style | 给该元素设置样式,一个或多个由分号分隔的 CSS 属性和值。 如:<h1 style="color:blue;text-align:center">这是一个标题</h1> |
data-* | 用于存储页面的自定义数据 |
draggable | 该属性可以规定该标签是否可以拖动(移动) 语法:<元素标签 draggable="true|false"> true为可移动 如:<p draggable="true">这是一段可移动的段落。</p> |
HTML事件属性
事件属性 | 描述 |
ondblclick | 当对该元素进行双击鼠标时运行指定函数 |
onclick | 当对该元素进行单击鼠标时运行指定函数 |
onsubmit | 当提交表单时运行指定函数 |
onresize | 当调整窗口大小时运行指定函数 |
基础标签介绍
<!DOCTYPE html> <!-- 声明标签,告诉浏览器我们的html文件是什么版本的,html是HTML5版本的 -->
<html lang="en"> <!--html标签,表示该文档是html文档-->
<head> <!-- <head> 元素是所有头部元素的容器。-->
<meta charset="UTF-8">
<!--meta标签为定义文档的一些内容。该标签不会显示在页面中,通常用于指定网页的描述,关键词,
文件的最后修改时间,作者及其他元数据。charset="UTF-8" 指定该文档使用的编码-->
<meta http-equiv="refresh" content="30"> <!--refresh 定义刷新设置,指定每隔30秒刷新一次页面-->
<meta name="author" content="Hege"> <!--author 定义作者标签,content=规定文档的作者的名字。-->
<meta name="description" content="Free web tutorials"><!--
规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。-->
<meta name="keywords" content="HTML, meta tag, tag reference"><!--
规定一个逗号分隔的关键词列表 - (告诉搜索引擎页面是与什么相关的)。
总是规定关键词(对于搜索引擎进行页面分类是必要的)。-->
<title>Title</title>
<!--<title> 标签定义文档的标题,会显示在工具栏中和收藏夹还有引擎搜索结果中-->
<base href="http://www.runoob.com/images/" target="_blank">
<!-- 规定页面上所有链接的默认 URL 和默认的target,该标签只可使用一次,应在head内使用,
这样在文本中就算链接标签没有设置target他也会给他们自动添加一个target-->
<link rel="stylesheet" type="text/css" href="theme.css"> <!--
<link> 标签定义文档与外部资源的关系。此元素只能存在于 head 部分;
rel="stylesheet" 要导入的样式表的 URL。 ;
type="text/css" 这个标签链接的内容的类型 ; href="theme.css" url或文件的地址 -->
<style >
h1 {color:red;}
p {color:blue;}
</style><!--style 样式标签,可在此标签内定义你想要的元素样式-->
</head>
<body> <!-- body主体标签。对主文的设置都在该标签内 -->
</body>
</html>
关于文本的标签:
p - 段落标签
<p> 段落标签 </p> <!-- 段落标签,标签的前后会自动添加换行 -->
sub -- sup 上下标标签
<p>这个文本包含 <sub>下标</sub>文本。</p><br> <!--sub该标签内的内容会变成下标,文本会比普通文本矮半截--> <p>这个文本包含 <sup>上标</sup> 文本。</p><br> <!--sup该标签内的内容会变成上标,文本会比普通文本高半截-->
del - ins - u - s 标签介绍
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <!--<del> 标签定义文档中已删除的文本。 <ins> 标签定义已经被插入文档中的文本。两标签一般搭配出现 --> <u>text</u><br> <!--u标签会为其中的内容添加下划线--> <s>My car is blue.</s><br> <!--<s> 标签对那些不正确、不准确或者没有用的文本进行中间横线标识。-->
textarea 文本框标签
<textarea maxlength="50" placeholder="描述信息..." > </textarea><!--textarea 标签定义一个多行的文本输入控件。 disabled 禁用该标签 form=""定义该文本标签是哪个表单的 maxlength="50" 限制文本框能输入的字符个数 placeholder="描述信息..." 该属性规定一个简短的提示,它描述了文本区域的期望值。 readonly 规定文本为只读。 required 规定文本区域是必需的/必填的。-->
blockquote 引用标签
<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization. </blockquote> <!-- 引用标签,标签内的文本为引用文本,cite为该文本来自哪里,标签内文本会自动缩进处理-->
abbr 缩写表述标签
<abbr title="World Health Organization">WHO</abbr> was founded in 1948. <!-- 标签用来表示一个缩写词或者首字母缩略词, 通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。 -->
cite 定义作品标题标签
<p><cite>呐喊</cite> 创作与 1893.</p> <!-- <cite> 标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题 -->
address 存放作者联系人信息标签
<address> 斜的 </address> <!-- 该标签定义文档作者/所有者的联系信息。文本是斜体的 -->
code 存放代码的标签
<code>一段电脑代码 print("Hello World")</code> <!--code标签内可以存放任何的代码,不会对其进行执行操作,用于显示输入的代码-->
pre -- small -- b -- i -- q -- bdo -- bdi -- time -- mark -- span 文本标签
<pre> <!-- 不对 pre 标签内的文本进行任何处理,会保留空格和换行符。而文本也会呈现为等宽字体--> 小型文本: <small>Copyright 1999-2050 Data.</small> <!--small标签内的文本会被变小化,相当于小型文本--> 加粗文本: <b>加粗文本</b> <!-- 加粗文本标签 --> 斜体文本: <i>The lightning</i> <!-- i 标签内容将呈现为斜体状态--> 引号: <q>Build a .</q> <!--q标签为引用标签,会将标签内的内容用双引号引起来--> 文字显示方向: <b><bdo dir="rtl">该段落文字从右到左显示。</bdo></b><!-- <bdo>标签用于设置文本的显示方式,dir:rtl(右到左),ltr(左到右)正常的 --> 隔离文本: <b>这句话叫:<bdi>独立的</bdi></b><!-- <bdi>标签可以让你将特别的信息单独隔离起来,这样就不会和普通的东西合在一起了--> 文本时间: <b>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</b><!--time标签为文本添加时间--> 背景颜色: <b>Do not <mark>milk</mark> today.</b> <!--mark标签内的文本会被添加背景颜色--> 字体颜色: <b>我的母亲有 <span style="color:#0033ff;font-weight:bold">蓝色</span> 的眼睛</b><br><!--span标签可以自定义标签内的文本颜色--> </pre>
video - audio 标签介绍:
<video controls width="320" height="240" src=""> <!--<video> 标签定义视频,比如电影片段或其他视频流。目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。 width="" 设置视频播放器的宽度。; height 设置视频播放器的高度。 autoplay 如果出现该属性,则视频在就绪后马上播放。; controls 如果出现该属性,则向用户显示控件,比如播放按钮。 loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。; muted 如果出现该属性,视频的音频输出为静音。 poster 规定视频正在下载时显示的图像,直到用户点击播放按钮。 src="" 要播放的视频的 URL或地址。 preload="metadata"( 指示当页面加载后仅加载音频/视频的元数据。) "auto"(指示一旦页面加载,则开始加载音频/视频。) 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。--> <track default kind="captions" srclang="en" src="" /> <!-- track标签为视频/音频标签插入字幕文件。格式为 WebVTT 格式(.vtt 格式文件)。 src="" 必需的。字幕文件所在地址 default 当该标签设置这个属性时,当没有为这个视频文件添加字幕的话,就默认使用这个字幕标签 kind="captions" 在视频中显示字幕, "subtitles" 在视频中显示字幕, srclang="" 如果 kind 属性的值是 "subtitles",则 srclang 属性是必需的。该字幕文件使用的是什么语言--> 抱歉,您的浏览器不支持嵌入视频! </video> ---------------------------------------------------------------- <audio controls> <!-- 音频标签,该元素支持的3种文件格式:MP3、Wav、Ogg 可以在 <audio> 和 </audio> 之间放置文本内容,这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。 autoplay 属性规定一旦音频就绪马上开始播放。如果设置了该属性,音频将自动播放。 controls 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。 loop 如果出现该属性,则每当音频结束时重新开始播放。 muted 如果出现该属性,则音频输出为静音。 src 规定音频文件的 URL或地址。--> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> <!-- 该标签允许您规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择,(如果都支持则任选一个) src 规定媒体文件的 URL或地址。 type 规定媒体资源的类型。video或audio--> </audio>
图片相关标签介绍:
<img src="qw.jpg" width="145" height="126" alt="Planets" usemap="#pla" > <!--该标签定义显示的图片 src:要显示的照片的路径或url; width:规定图形的宽度; height:规定图形的高度; alt:当浏览器无法显示指定图片时用户就可以通过该元素来查看alt的内容,alt的内容可以告诉用户该照片是什么 usemap:使用name为pla的<map>标签, --> <map name="pla"> <!-- 该标签内可以定义一些规则,让图片绑定这个规则,当图片内被触发了指定规则时就会执行指定操作 --> <area shape="rect" coords="0,0,82,126" alt="Sun" href="qq.jpg"> <!--该标签定义图片内哪些区域是可以点击的 coords:规定可点击区域的坐标; href:指定要访问的url或指定的东西 shape:规定形状,(default)规定全部区域。(rect)定义矩形区域。(circle)定义圆形。(poly)定义多边形区域。 alt:当浏览器无法显示指定图片时用户就可以通过该元素来查看alt的内容,alt的内容可以告诉用户该照片是什么 target:要在什么地方打开该网页; type:打开网页的类型 --> </map> ------------------------------------------------------------------ <picture><!--picture 元素允许我们在不同的设备上显示不同的图片. <picture> 元素中要有零或多个 <source> 元素和一个 <img> 元素, 每个 <source> 元素匹配不同的设备并引用不同的图像源,如果没有匹配的,则显示 <img> 元素的的图片。--> <source media="(min-width: 100px)" srcset="aa.jpg"> <source media="(min-width: 465px)" srcset="qw.jpg"> <img src="qw.jpg"> </picture>
form 表单介绍
<form action="" accept-charset="ISO-8859-1" enctype="multipart/form-data" method="post" novalidate>
<!--form 表单标签,action="该表单提交到哪" ; accept-charset="设置表单提交时使用的字符编码"
enctype=application/x-www-form-urlencoded (在发送前对所有字符进行编码)。
multipart/form-data (不对字符编码。当使用有文件上传控件的表单时,该值是必需的。)
text/plain (将空格转换为 "+" 符号,但不编码特殊字符。)
method="get|post" 指定该表单以什么方式提交数据
novalidate 如果使用该属性,表单提交时将不对其进行验证
target=_blank | _self | _parent | _top 规定在何处打开 action URL。-->
</form>
ul -- ol 列表标签介绍
<ul> <!--无序列表 -->
<li>Coffee</li> <!-- 列表的内容 -->
<li>Tea</li>
<li>Milk</li>
</ul>
<ol><!--有序列表 -->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
input 标签介绍:
input 标签除了特别说明的属性外,其它的都可以随便共同使用。
输入框相关
字符限制和输入框长度设置: <input type="text" name="pin" maxlength="4" size="4"><br> <!--定义一个文本标签,maxlength=该标签可接收的最长字符限制,size=该标签的元素长度--> 禁用该标签: <input type="text" name="lname" disabled ><br> <!-- 定义一个文本标签,disabled 禁用这个标签 --> 只读标签: <input type="text" name="country" value="Norway" readonly><br> <!-- 定义一个文本标签,该标签只可读,不可写入--> 设置提示标签:<input type="text" name="lname" placeholder="Last name"><br> <!-- 定义一个文本标签,placeholder=在这个元素内添加提示信息--> 该标签必须得输入内容:<input type="text" name="usrname" required><br> <!-- 定义一个文本标签,该标签必须得输入内容--> <hr> 搜索输入框<input type="search" name="googlesearch"> <!--定义搜索输入框,可以让用户输入内容,获取这个元素内容对其进行搜索操作--> <hr> 电话号码输入框<input type="tel" name="usrtel"> <!--定义用于输入电话号码的字段,该标签会显示用户自己输入过的电话值--> <hr> 邮件输入框:<input type="email" name="usremail"><br> <!--定义一个邮件地址标签,(当提交表单时会自动对 email 字段的值进行验证)--> <hr> 密码输入<input type="password" name="pwd"> <!--定义密码字段(密码字段中的字符会被遮蔽)--> <hr> 方便选择框<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> </datalist> <!--输入标签,该标签绑定一个列表元素,从而让用户方便输入--> <hr>
多选框
checkbox--value--checked:<br> <input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br> <input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br> <input type="checkbox" name="vehicle[]" value="Boat" checked > 我有一艘船<br> <!--定义多选框标签,name=这个元素的名字。value=这个元素的值。 checked 自动选择这个元素(这个属性只适合这个类型和radio类型的元素)--> <hr>
单选框
radio:<br> <input type="radio" value="male"> Male<br> <input type="radio" value="女"> 女 <br> <!--允许用户在一定数量的选择中选取一个选项--> <hr>
文件选择相关
file--accept: <br> <input type="file" accept="image/*"><br> <!-- 选择文件标签,accept=可接受的文件类型,audio/* 接受所有的声音文件。video/* 接受所有的视频文件。 image/* 接受所有的图像文件。--> 选择多个文件: <br> <input type="file" multiple> <!--该标签可选择一个或多个文件--> <hr>
提交按钮相关
submit--formaction:<br> <input type="submit" formaction="demo-admin.php" value="提交"> <input type="submit"> <!--定义一个提交按钮,点击该按钮就会将表单内容提交到指定的路由中,formaction="指定该按钮会将值传递到何处" 默认为from内指定的,formaction属性只适合image和submit--> <input type="submit" formnovalidate="formnovalidate" value="不验证提交"> <!--定义一个提交按钮,formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。使得不对提交的数据进行验证--> <hr> reset<br> <input type="reset" value="重置"> <!--从重按钮,点击的话就会重置表单内容--> <hr> image--src--alt--width--height:<br> <input type="image" src="qq.jpg" alt="Submit" width="48" height="48"> <!-- 定义图像作为提交按钮 ,src=图形的地址 , alt=无法查看图像时提供了替代文本。 和设置图片的款和高。这三个属性只针对 type=image --> <hr>
时间选择标签
年月选择框:<input type="month" name="bdaymonth"><br> <!--定义一个选择年月的标签--> 年月日选择框:<input type="date" ><br> <!--定义一个选择年月日的标签--> 年月日和具体时间选择框:<input type="datetime-local" name="bdaytime"><br> <!--定义一个选择年月日和具体时间的标签--> 时间选择框:<input type="time" name="usr_time"> <!--定义一个选择时间的标签--> <hr>
值选择框:
范围内移动取值:<input type="range" name="points" min="1" max="10"> <!--定义拉动条获取值字段,可以设置其的大小值--> <hr> 上下取值:<input type="number" name="quantity" min="1" max="10" step="2"> <!-- 定义数值标签,并限制他的最大最小区间 ,每次选择跨越的步长是两步--> <hr>
按钮:
按钮控件:<input type="button" value="点我" onclick="msg()"><br> <!--定义一个按钮标签,该按钮的名字是点我--> <hr>
颜色选择标签:
颜色选择器:<input type="color" name="favcolor" form="form_id"><br> <!--定义一个颜色选择器,form=这个元素是哪个表单的元素--> <hr>
隐藏的标签:
隐藏的标签:<input type="hidden" name="country" value="Norway"><br> <!--定义隐藏字段,隐藏字段对于用户是不可见的。隐藏字段常常存储默认值,或者由 JavaScript 改变它们的值--> <hr>
其他标签介绍:
br 换行标签
<br> <!-- 换行标签,只要一遇到这个标签就会自动换行一次 -->
hr 下划线标签
<hr><!-- 下划线标签-->
header - main - footer 页眉-主体-页脚标签介绍
<header> <!--<header> 标签定义文档一部分区域的页眉。<header> 元素应该作为介绍内容或者导航链接栏的容器。 在一个文档中,您可以定义多个 <header> 元素。--> </header> <main> 该html的主体内容。<!--<main> 元素是唯一的,所以不能出现一个以上的 <main> 元素。--> </main> <footer> <!--<footer> 标签定义文档一部分区域的页脚。在典型情况下,该元素会包含文档创作者的姓名、 文档的版权信息、使用条款的链接、联系信息等等。在一个文档中,可以定义多个 <footer> 元素。--> </footer>
div 区域标签
<div> <!--<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。--> <h6>这是一个在 div 元素中的标题。</h6> <p>这是一个在 div 元素中的文本。</p> </div>
h1 - h6 标题标签
<h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6> <!-- 六个不同大小的标题标签-->
hgroup
<hgroup> <!--<hgroup> 标签被用来对标题(h1-h6)元素进行分组。--> </hgroup>
a 超链接标签
<a href="aa.jpg" download="/images/logo.png">点击下载<br> <!-- 超链接标签-定义下载属性,当点击该链接时就会下载指定照片--> <a href="http://www.runoob.com" target="_top" type="text/html" >访问菜鸟教程!</a><br> <!-- <a>超链接标签-href是必要的属性,当点击该标签时会跳转到指定的url中 target=规定在何处打开这个标签的 URL。仅在 href 属性存在时使用。 _blank:在新页面中打开链接; _parent:在当前页面中打开链接。 _self:默认,在当前页面中打开链接; _top:在当前页面打开链接,并替换当前的整个框架页。 type="" 规定打开的页面是什么类型的-->
nav 导航条标签
<nav> <!--<nav> 标签定义导航链接的部分。并不是所有的 HTML 文档都要使用到 <nav> 元素。 <nav> 元素只是作为标注一个导航链接的区域。--> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
script - noscript 脚本标签
<!--<script> 标签用于定义客户端脚本,比如 JavaScript。 <script> 元素既可包含脚本语句,也可以通过 "src" 属性指向外部脚本文件。如果使用 "src" 属性,则 <script> 元素必须是空的。 async 属性一旦脚本可用,则会异步立即执行。; defer 属性规定当页面已完成加载后,才会执行脚本。 src="ss.js" 脚本的位置 ; type="text/javascript" 脚本的类型--> <script src="ss.js" charset="UTF-8"></script> <noscript>抱歉,你的浏览器不支持 JavaScript!</noscript><!-- noscript 元素用来定义在脚本未被执行时的替代内容(文本)。-->
button 按钮标签
<button type="button">点我!</button> <!-- 在 <button> 标签内部,您可以放置内容,比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。 如果在 HTML 表单中使用 <button> 元素,不同的浏览器可能会提交不同的按钮值。请使用 <input> 在 HTML 表单中创建按钮。 按钮的属性: disabled 规定应该禁用该按钮。 form="表单的id值" 规定按钮属于哪个表单。 formaction="url或地址" 规定将表单数据发送到的地址。 formenctype=application/x-www-form-urlencoded (在发送前对所有字符进行编码(默认)。) | multipart/form-data (不对字符编码。当使用有文件上传控件的表单时,该值是必需的。) | text/plain (将空格转换为 "+" 符号,但不编码特殊字符。) value="" 规定按钮的初始值。可由脚本进行修改 type="submit" 该按钮是提交按钮 | "button" 该按钮是可点击的按钮 | "reset" 该按钮是重置按钮。 name="" 规定按钮的名称。-->
progress - meter 进度标签
<progress value="22" max="100"></progress><!--<progress> 标签定义运行中的任务进度(进程)。 请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。 value="22" 当前值。 max="100" 规定需要完成的值。-->
<meter value="2" min="0" max="10">2 out of 10</meter><br> <meter value="0.6" >60%</meter> <!--展示给定的数据范围:value="要显示在哪个点上"-->
fieldset - legend 标签
<form> <fieldset><!-- 将这个标签内的内容用矩形括起来 --> <legend>Personalia:</legend> <!--<legend> 元素为 <fieldset>元素定义标题。--> Name: <input type="text" size="30"><br> Email: <input type="text" size="30"><br> Date of birth: <input type="text" size="10"> </fieldset> </form>
下拉选项列表相关
<select><!--<select> 元素用来创建有两个选项的下拉列表。 disabled 禁用该标签 form=""定义该文本标签是哪个表单的 multiple 可选择多个选项。 required 规定用户在提交表单前必须选择一个下拉列表中的选项。 size="2" 属性规定下拉列表中可见选项的数目。--> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <!-- <option> 标签定义下拉列表中的一个选项(一个条目)。 disabled 禁用该标签 value="" 定义送往服务器的选项值。--> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <!-- <optgroup> 标签把相关的选项组合在一起 label=""为选项组规定描述。--> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>
object 文件载入标签 和 param 对载入文件进行设置标签
<object data="horse.wav"> <!--可将指定文件载入到该html文档中,data=""要载入的文档的位置 form=规定对象所属的一个或多个表单 ; width height name type --> <param name="autoplay" value="true"><!--设置name="autoplay" 为 value="true",音频载入后会自动播放--> </object>
label 标记标签
<form action=""> <label for="male">Male</label> <!-- 文本标签,给input标签当标记用的 for 规定 label 与哪个元素绑定。 | form 规定 label 字段所属的一个或多个表单。--> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br><br> <input type="submit" value="提交"> </form>
datalist 数据列表标签
<datalist id="aa"> <option value="Internet Explorer"> <option value="Firefox"> </datalist> <!-- 数据列表标签,该标签内可以添加一些可选项,然后让其他元素可以通过id调用他,来获取列表内容 -->
figure -- figcaption 标签
<figure> <!--<figure> 标签规定独立的内容(图像、图表、照片、代码等等)。内容应该与主内容相关。--> <img src="qq.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption> <!-- <figcaption> 标签为 <figure> 元素定义标题。--> </figure>
字体注音标签
<ruby><!--<ruby> 标签定义 ruby 注释(中文注音或字符)。--> 漢 <rp>(</rp><rt>han</rt><rp>)</rp><!--<rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。--> 字 <rp>(</rp><rt>zi</rt><rp>)</rp><!--<rt> 标签定义字符(中文注音或字符)的解释或发音。--> </ruby>
dl - dt - dd 标签
<dl><!--<dl> 标签定义一个描述列表。--> <dt>Coffee</dt> <!-- <dt> (定义项目/名字)--> <dd>Black hot drink</dd> <!--<dd> (描述每一个项目/名字)--> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
template 隐藏标签介绍
<template><!-- <template> 标签定义在页面加载时隐藏的一些内容,该标签中的内容可以稍后使用 JavaScript 呈现。--> <h2>logo</h2> </template>
article 标签
<article> </article> <!-- 该标签定义独立的内容。 -->
section 标签
<section><!--<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。--> <h1>WWF</h1> <p>介绍上面缩写词的意思</p> </section>
表格标签相关
<table > <caption>表格标题</caption><!-- <caption> 标签必须直接放置到 <table> 标签之后。作用是:定义表格的标题。只能对每个表格定义一个标题。--> <tr> <!--tr表格中的行标签,行标签内的内容代表这一行的内容,下一个行标签代表下一行的内容--> <th>Month</th> <!--每一个th标签代表为这一行中的一个单元格。<th> 元素中的文本通常呈现为粗体并且居中。--> <th>Savings</th> </tr> <tr> <td>January</td> <!--每一个td标签代表为这一行中的一个单元格.<td> 元素中的文本通常是普通的左对齐文本。--> <td>$100</td> </tr> </table>