本文主要是介绍Mozilla 笔记- HTML5常用标签有哪些？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Mozilla 学习 HTML 笔记 - HTML常用标签
HTML元素
<p>标签，段落
在HTML中，每个段落是通过 <p> 元素标签进行定义的
<p>我的猫咪脾气爆:)</p>
我的猫咪脾气爆:)
<em>强调
<em>刀枪剑戟 斧钺钩叉</em>
刀枪剑戟 斧钺钩叉
<strong>重点强调
Strong 元素 (<strong>)表示文本十分重要，用粗体字来达到强调的效果
<p>我的猫咪脾气<strong>爆</strong>:)</p>
我的猫咪脾气爆:)
<b>,<i>,<u> 斜体字、粗体字、下划线
<i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
<b> 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
<u> 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……
<!-- 学名 -->
<p>红喉北蜂鸟（学名：<i>Archilocus colubris</i>）是北美东部最常见的蜂鸟品种。
</p><!-- 舶来词 -->
<p>菜单上有好多舶来词汇，比如 <i lang="uk-latn">vatrushka</i>（东欧乳酪面包）,<i lang="id">nasi goreng</i>（印尼炒饭）以及<i lang="fr">soupe à l'oignon</i>（法式洋葱汤）。
</p><!-- 已知的错误书写 -->
<p>总有一天我会改掉写<u>措字</u>的毛病。
</p><!-- 系列说明文字中需要突出的文字 -->
<ol><li><b>切</b>下两片面包，</li><li>在两片面包中间<b>夹入</b>一片西红柿和一片生菜叶。</li>
</ol>
红喉北蜂鸟（学名：Archilocus colubris） 是北美东部最常见的蜂鸟品种。
菜单上有好多舶来词汇，比如 vatrushka（东欧乳酪面包）, nasi goreng（印尼炒饭）以及soupe à l'oignon（法式洋葱汤）。
总有一天我会改掉写措字的毛病。
- 切下两片面包，
- 在两片面包中间夹入一片西红柿和一片生菜叶。
<img>图片标签
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
<a>超链接
href属性 声明超链接的web地址
title属性: 为超链接声明额外的信息
target属性 target="_blank"在新标签页中显示链接
<a href="https://www.mozilla.org">web doc</a>
<a href="https://www.mozilla.org/en-US/" title="The best place to find more information about Mozilla's mission and how to contribute">the Mozilla homepage</a>.web doc
the Mozilla homepage.
- download 下载属性
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US" download="firefox-latest-64bit-installer.exe"> Download Latest Firefox for Windows (64-bit) (English, US)</a>Download Latest Firefox for Windows (64-bit) (English, US)
- 文档与片断
链接到指定页面的指定位置
<h2 id="Mailing_address">Mailing address</h2><p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
Want to write us a letter? Use our mailing address.
- 电子邮件链接
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
Send email to nowhere
- 图片容器
当你需要在文字下面添加说明时，可以使用<p>等标签，但是更好的做法是使用 HTML5 的 <figure> 和 <figcaption> 元素，它正是为此而被创造出来的：为图片提供一个语义容器，在标题和图片之间建立清晰的关联
<figure><img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"width="150"height="130"><figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>
- 自适应图片
<picture>素包含了一些<source>元素，它使浏览器在不同资源间做出选择，紧跟着的是最重要的<img>元素
<picture><source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"><source media="(min-width: 800px)" srcset="elva-800w.jpg"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
<head>
head 里面的内容不会在浏览器中显示，它的作用是包含一些页面的元数据
<head><meta charset="utf-8"><title>My test page</title>
</head>
<h1>网页标题
元素 <h1> 通常它应该在一个页面中只被使用一次，用来标记你的页面内容的标题
<h1>element</h1>
<h2>网页标题
每个标题（Heading）是通过“标题标签”进行定义的：
一共有六个， <h1>、<h2>、<h3>、<h4>、<h5>、<h6>
<h1> 表示主标题（the main heading），<h2> 表示二级子标题（subheadings），<h3> 表示三级子标题（sub-subheadings）等等
<h1>三国演义</h1><p>罗贯中</p><h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2><p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……</p><h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2><p>且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……</p><h3>却说张飞</h3><p>却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰：……</p>
<meta>元素
1.指定你的文档字符的编码
<meta charset="utf-8">
<meta charset="gbk">
2.添加作者和描述
name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息。(如description 用于搜索引擎)
content 指定了实际的元数据内容。
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">
<span>
<span>它是行内元素，它没有语义
<span style="font-size: 32px; margin: 21px 0;">这是标题吗？</span>
<div>
块级无语义元素，应仅用于找不到更好的块级元素时，如购物车组件
<div class="shopping-cart"><h2>购物车</h2><ul><li><p><a href=""><strong>银耳环</strong></a>：$99.95.</p><img src="../products/3333-0985/" alt="Silver earrings"></li><li>...</li></ul><p>售价：$237.89</p>
</div>
<link>
添加自定义图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
引入css文件
rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径
<link rel="stylesheet" href="index.css">
列表
<ul>Unordered 无序标签
<ul><li>豆浆</li><li>油条</li><li>豆汁</li><li>焦圈</li>
</ul>
- 豆浆 油条 豆汁 焦圈
<ol> Ordered 有序标签
有序标签和无序标签可相互嵌套，且通常嵌套在
- 标签内
-
<ol><li>沿着条路走到头</li><li>右转</li><li>直行穿过第一个十字路口</li><li>在第三个十字路口处左转</li><li>继续走 300 米，学校就在你的右手边</li> </ol>- 沿着条路走到头
- 右转
- 直行穿过第一个十字路口
- 在第三个十字路口处左转
- 继续走 300 米，学校就在你的右手边
<dl>description list 描述列表
这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等
<dl><dt>内心独白</dt><dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd><dt>语言独白</dt><dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd><dt>旁白</dt><dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd> </dl>- 内心独白
- 戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。 语言独白
- 戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。 旁白
- 戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。
<blockquote>块级引用
用于一个段落、多个段落、一个列表等，
而cite属性里用URL来指向引用的资源<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"><p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML BlockQuotation Element</em>) indicates that the enclosed text is an extended quotation.</p> </blockquote>The HTML
<blockquote>Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.<q>行内引用
<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended for short quotations that don't require paragraph breaks.</q>-- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"> <cite>MDN q page</cite></a>. </p>The quote element —
<q>— isintended for short quotations that don't require paragraph breaks.
-- MDN q page.<abbr>缩略语
<p>第 28 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 于 2018 年 8 月在北京举行。</p>第 28 届 奥运会 于 2018 年 8 月在北京举行。
<address>标记联系方式
<address><p>Chris Mills, Manchester, The Grim North, UK</p> </address>Chris Mills, Manchester, The Grim North, UK
<sub>下标
<p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p>咖啡因的化学方程式是 C8H10N4O2。
<sup>上标
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>如果 x2 的值为 9，那么 x 的值必为 3 或 -3。
展示计算机代码
<code>
用于标记计算机通用代码。
<pre>
对保留的空格（通常是代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var>
用于标记具体变量名。
<kbd>
用于标记输入电脑的键盘（或其他类型）输入。
<samp>
用于标记计算机程序的输出。
一个示例
<pre><code>const para = document.querySelector('p');para.onclick = function() {alert('噢，噢，噢，别点我了。'); }</code></pre><p>请不要使用 <code><font></code> 、 <code><center></code> 等表象元素。</p><p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p><p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p><pre>$ <kbd>ping mozilla.org</kbd> <samp>PING mozilla.org (63.245.215.20): 56 data bytes 64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>const para = document.querySelector('p');para.onclick = function() {alert('噢，噢，噢，别点我了。'); }请不要使用
<font>、<center>等表象元素。在上述的 JavaScript 示例中，para 表示一个段落元素。
按 Ctrl/Cmd + A 选择全部内容。
$ ping mozilla.org PING mozilla.org (63.245.215.20): 56 data bytes 64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms
<time >标记时间和日期
<time> 元素允许你附上清晰的、可被机器识别的 时间/日期
<time datetime="2016-01-20">2016年1月20日</time>html表单
<form >
所有HTML表单都以一个元素开始：
<form action="/my-handling-form-page" method="post"></form><label> <input > <textarea > <button >
label元素，点击label内文字会自动选中输入框
<label> 标签与 <input> 通过他们各自的for 属性和 id 属性正确相关联<form action="/my-handling-form-page" method="post"><div><label for="name">Name:</label><input type="text" id="name"></div><div><label for="msg">Message:</label><textarea id="msg"></textarea></div><div class="button"><button type="submit">Send your message</button> </div> </form>表单通用属性
autofocus 自动焦点输入框
disabled 这个布尔属性表示用户不能与元素交互，输入值永远不会与表单数据的其余部分
readonly 用户不能修改输入值
placeholder; 在文本框内展示简略描述表单类型
邮箱、密码、搜索、url栏、多行文本框、数字、滑块、隐藏内容
复选框、单选框
提交、重置、按钮
日期选择器、拾色器、文件选择器、图像按钮、进度条// 邮箱、密码、搜索、url栏、多行文本框 <input type="email" id="email" name="email" multiple> <input type="password" id="pwd" name="pwd"> <input type="search" id="search" name="search"> <input type="url" id="url" name="url"> <textarea cols="30" rows="10"></textarea> <input type="number" name="age" id="age" min="1" max="10" step="2"> <input type="range" name="beans" id="beans" min="0" max="500" step="10"> <input type="hidden" id="timestamp" name="timestamp" value="1286705410">//复选框、单选框 <input type="checkbox" checked id="carrots" name="carrots" value="carrots"> <input type="radio" checked id="soup" name="meal">//提交、重置、按钮 不管使用button还是 input元素，按钮的行为都是一样的 <button type="submit">This a <br><strong>submit button</strong> </button> <input type="submit" value="This is a submit button"><button type="reset">This a <br><strong>reset button</strong> </button> <input type="reset" value="This is a reset button"><button type="button">This an <br><strong>anonymous button</strong> </button> <input type="button" value="This is an anonymous button">//本地时间、月、时间、星期，所有时间控制都可用min和max属性来约束 <input type="datetime-local" name="datetime" id="datetime"> <input type="month" name="month" id="month"> <input type="time" name="time" id="time"> <input type="week" name="week" id="week"><input type="color" name="color" id="color"> <input type="file" name="file" id="file" accept="image/*" multiple> <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /> <progress max="100" value="75">75/100</progress><fieldset> <legend> 表单分组
每当您有一组单选按钮时，您应该将它们嵌套在<fieldset>元素中
对于长表单，也可以用来 fieldset 进行分段<form><fieldset><legend>Fruit juice size</legend><p><input type="radio" name="size" id="size_1" value="small"><label for="size_1">Small</label></p></fieldset> </form><optgroup> 下拉列表分组
selected 属性 默认选中
multiple 属性 展示多个
<optgroup> 下拉列表分组<select multiple id="simple" name="simple"><option>Banana</option><option selected >Cherry</option><option>Lemon</option> </select><select id="groups" name="groups"><optgroup label="fruits"><option>Banana</option><option selected>Cherry</option><option>Lemon</option></optgroup><optgroup label="vegetables"><option>Carrot</option><option>Eggplant</option><option>Potato</option></optgroup> </select><datalist>自动实例输入框（下拉+搜索框）
注意：不同的浏览器在不同的情况下会有不同的表现，所以除了文本字段以外，要小心使用这个特性
为了处理不支持下拉搜索的浏览器，提供另一种备用方式 datalist + select<label for="myFruit">What's your favorite fruit?</label> <input type="text" name="myFruit" id="myFruit" list="mySuggestion"> <datalist id="mySuggestion"><option>Apple</option><option>Banana</option> </datalist><label for="myFruit">What is your favorite fruit? (With fallback)</label> <input type="text" id="myFruit" name="fruit" list="fruitList"><datalist id="fruitList"><label for="suggestion">or pick a fruit</label><select id="suggestion" name="altFruit"><option>Apple</option><option>Banana</option></select> </datalist>内置表单数据校验
required 属性 必填项
pattern 属性 正则匹配
min max属性 限制输入长度
<form><label for="choose">Would you prefer a banana or cherry?</label><input id="choose" name="i_like" required><input id="choose" name="i_like" required pattern="banana|cherry"><input type="number" id="number" name="amount" value="1" min="1" max="10"><button>Submit</button> </form>使用CSS控制表单校验样式
input:invalid {border: 2px dashed red; } input:valid {border: 2px solid black; }<video>视频标签
- 属性
src 指定视频资源
controls 提供控制视频和音频的回放功能
标签内的段落，后备内容，当浏览器不支持 video，它会显示出来<video src="rabbit320.webm" controls><p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p> </video>- 多格式支持
type属性，浏览器也会通过检查这个属性迅速跳过不支持的格式，如果你没有添加type属性，浏览器会尝试加载每一个文件，直到找到能播放的格式，这样做会消耗掉大量时间和资源。
<video controls><source src="rabbit320.mp4" type="video/mp4"><source src="rabbit320.webm" type="video/webm"><p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p> </video>- 其它特性
autoplay 属性 ，这个属性公使音频和视频内容立即播放
loop属性，这个属性可以让音频或者视频文件循环播放
muted属性，默认关闭声音
poster属性，这个属性指向一个图像URL，这个图像会在视频播放前显示。
preload属性，这个属性用来缓冲较大的文件，有3个值可选： "none"不缓冲，"auto"页面加载后缓存媒体文件,“metadata” 仅缓冲文件的元数据track 标签 ，字幕文件
<video controls width="400" height="400"autoplay loop mutedposter="poster.png"><source src="rabbit320.mp4" type="video/mp4"><source src="rabbit320.webm" type="video/webm"><track kind="subtitles" src="subtitles_en.vtt" srclang="en"><p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p> </video><audio>音频标签
audio与video差异如下： 不支持 width/height属性，也不支持poster属性，同样没有视觉部件。除此之外audio标签支持所有video标签拥有的特性
<audio controls><source src="viper.mp3" type="audio/mp3"><source src="viper.ogg" type="audio/ogg"><p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p> </audio>杂项
实体引用
字符引用以&开始以分号(;)结束原义字符 等价字符引用 < < > > " " ’ ' & & 注释
<p>我在注释外！</p><!-- <p>我在注释内！</p> -->网站构建 - 完整的HTML文档
<!DOCTYPE html>: 声明文档类型
<html>: 包裹了整个完整的页面，是根元素。
<head>: 这个元素是一个容器，包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等但不想在HTML页面中显示的内容
<meta charset=“utf-8”>: 这个元素设置文档使用utf-8字符集编码
<title>: 设置页面标题
<body>: 包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等
<main>: 存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其它元素。
<article>: 包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。
<section>: section 与 article 类似，但 section 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的**最佳用法是：以 标题 作为开头；也可以把一篇 article 分成若干部分并分别置于不同的 section 中，也可以把一个区段 section 分成若干部分并分别置于不同的 article 中，取决于上下文。
<aside>: 包含一些间接信息（术语条目、作者简介、相关链接，等等）。
<header>: 是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉（此 <header> 非彼 标题）。
<nav>: 包含页面主导航功能。其中不应包含二级链接等内容。
<footer>: 包含了页面的页脚部分。
研究示例代码
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>二次元俱乐部</title><link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet"><link href="style.css" rel="stylesheet"></head><body><header> <!-- 本站所有网页的统一主标题 --><h1>聆听电子天籁之音</h1></header><nav> <!-- 本站统一的导航栏 --><ul><li><a href="#">主页</a></li><!-- 共n个导航栏项目，省略…… --></ul><form> <!-- 搜索栏是站点内导航的一个非线性的方式。 --><input type="search" name="q" placeholder="要搜索的内容"><input type="submit" value="搜索"></form></nav><main> <!-- 网页主体内容 --><article><!-- 此处包含一个 article（一篇文章），内容略…… --></article><aside> <!-- 侧边栏在主内容右侧 --><h2>相关链接</h2><ul><li><a href="#">这是一个超链接</a></li><!-- 侧边栏有n个超链接，略略略…… --></ul></aside></main><footer> <!-- 本站所有网页的统一页脚 --><p>© 2050 某某保留所有权利</p></footer></body> </html>
这篇关于Mozilla 笔记- HTML5常用标签有哪些？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
