我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。
今日学习目标
昨天了解了<hr>，<br>元素和<a>具体含义，学习的不多，今天准备对于所有标签有一个整体了解，又是适合学习的一天，加油，小又又！！！！
今日学习概要
看了好几个小伙伴说小又又这边学习进度比较慢，小又又这边查看了一下网站中的标签参考手册，然后整理了一份小又又手册呢。
一共是 118 个 HTML 标签，除去 16 个 HTML 标签不建议的标签，还有 102 个 HTML 标签，小又又这边按照主观理解进行分了 7 类。
整体控制相关
这些标签内部的内容，都不会实际显示在页面中，所以放在这个分类中~~~
| 标签 | 描述 |
|---|---|
<!--...--> |
定义注释 |
<!DOCTYPE> |
定义文档类型 |
<base> |
定义页面中所有链接的默认地址或默认目标 |
<body> |
定义文档的主体 |
<link> |
定义文档与外部资源的关系 |
<head> |
定义关于文档的信息 |
<html> |
定义 HTML 文档 |
<meta> |
定义关于 HTML 文档的元信息 |
<noscript> |
定义针对不支持客户端脚本的用户的替代内容 |
<script> |
定义客户端脚本 |
<style> |
定义文档的样式信息 |
<title> |
定义文档的标题 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="https://juejin.cn/user/2365804756345320" target="_blank">
<title>小又又 学习 前端 </title>
<meta name="keywords" content="小又又,学前端">
<meta name="description" content="小又又的描述测试~~~~~~">
<meta name="author" content="小又又">
<link rel="stylesheet" type="text/css" href="theme.css">
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。</p>
</body>
</html>
这个分类中的
<link>,<script>,<noscript>和<style>标签内部内容有些不太理解，感觉需要进一步学习呢~~~
页面结构相关
这些好像都是用于页面整体结构相关的，就主要来说是让我们更好理解页面结构组成的呢~~
| 标签 | 描述 |
|---|---|
<aside> New |
定义页面的侧边栏内容 |
<footer> New |
定义 section 或 document 的页脚 |
<frame> |
定义框架集的窗口或框架 |
<header> New |
定义了文档的头部区域 |
<iframe> |
定义内联框架 |
<main> |
定义文档的主体部分 |
<nav> New |
定义导航链接的部分 |
<section> New |
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分 |
<header>头部区域</header>
<aside>侧边栏内容</aside>
<main>主体部分</main>
<footer>页脚区域</footer>
<iframe src="https://juejin.cn/user/2365804756345320">内联框架</iframe>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<section>小又又的章节</section>
这个分类中的
<frame>和<nav>标签有些不太理解，不太清楚这两个标签的使用场景。
感觉人体整体结构一样，先区分头，脚和躯干，再细分具体器官之类。
不过这边一般页面结构是怎样还是不太了解~~
文字效果相关
不看不知道，一看吓一跳，发现这边标签中有很多都是和文字效果相关，还有些默认了很多效果，感觉种类好丰富~~~
字体相关
| 标签 | 描述 |
|---|---|
<b> |
定义文本粗体 |
<del> |
定义被删除文本 |
<em> |
定义强调文本 |
<i> |
定义斜体字 |
<ins> |
定义被插入文本 |
<mark> New |
定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签 |
<small> |
定义小号文本 |
<strong> |
定义强调文本 |
<h1>字体相关</h1>
<p>
<b>粗体文本</b><br/>
<del>被删除文本</del><br/>
<em>强调文本</em><br/>
<i>斜体文本</i><br/>
<ins>被插入文本</ins><br/>
<mark>记号文本</mark><br/>
<small>小号文本</small><br/>
<strong>强调文本</strong><br/>
</p>
这个分类中的
<em>，和<i>标签有些不太理解，这两个效果看上去差不多。
文字方向相关
| 标签 | 描述 |
|---|---|
<bdo> |
定义文字方向 |
<bdi> New |
允许设置一段文本，使其脱离其父元素的文本方向设置 |
<h1>字体相关</h1>
<bdo dir="rtl">该段落文字从右到左显示。</bdo>
<p>
在下面的示例中,显示着每个用户比赛的分数。将用户名从周围的文本方向设置中隔离出来。
</p>
<ul>
<li>用户 <bdi>hrefs</bdi>: 60 分</li>
<li>用户 <bdi>jdoe</bdi>: 80 分</li>
<li>用户 <bdi>إيان</bdi>: 90 分</li>
</ul>
感觉这个比较方便呢，
<bdo>可以直接定义文字方向。<bdi>标签不太清楚使用场景。
带有默认格式相关
| 标签 | 描述 |
|---|---|
<code> |
定义计算机代码文本 |
<dfn> |
定义项目 |
<kbd> |
定义键盘文本 |
<pre> |
定义预格式文本 |
<q> |
定义短的引用 |
<rp> New |
<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容 |
<rt> New |
<rt> 标签定义字符（中文注音或字符）的解释或发音 |
<ruby> New |
<ruby> 标签定义 ruby 注释（中文注音或字符） |
<samp> |
定义计算机代码样本 |
<sub> |
定义下标文本 |
<sup> |
定义上标文本 |
<var> |
定义文本的变量部分 |
<h1>带有默认格式相关</h1>
<code>一段电脑代码</code><br/>
<dfn>定义项目</dfn><br/>
<kbd>键盘输入</kbd><br/>
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre><br/>
<q>引用</q>
<ruby>
漢 <rp>(</rp><rt>han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby><br/>
<samp>计算机样本</samp><br/>
这个文本包含 <sub>下标</sub>文本。<br/>
这个文本包含 <sup>上标</sup>文本。<br/>
<tt>打字机文本</tt><br/>
<var>变量</var><br/>
这个分类中的
<em>，<mark>和<strong>标签有些不太理解，不太清楚为何这么多用于强调的标签。<dfn>，<kbd>和<samp>的实际使用场景，我也不太清楚。
文档内容相关
这里主要是写文章中的标题，段落相关的 HTML 标签~~~
文档结构相关
| 标签 | 描述 |
|---|---|
<article> New |
定义一个文章区域 |
<br> |
定义换行 |
<div> |
定义文档中的节 |
<h1> to <h6> |
定义 HTML 标题 |
<hr> |
定义水平线 |
<span> |
定义文档中的节 |
<p> |
定义段落 |
<wbr> New |
规定在文本中的何处适合添加换行符 |
<div>
<h1>文档结构相关</h1>
<article>
<h1>Internet Explorer 9</h1>
<p> Windows Internet Explorer 9(缩写为 IE9 )<br/>在2011年3月14日21:00 发布。</p>
</article>
<hr/>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<hr/>
<p> 小又又<span>学习HTML标签~~</span></p>
<p>尝试缩小浏览器窗口，以下段落的 "XMLHttpRequest" 单词会被分行：</p>
<p>学习 AJAX ,必须熟悉 <wbr>Http<wbr>Request 对象。</p>
<p><b>注意：</b> IE 浏览器不支持 wbr 标签。</p>
</div>
这个分类中的
<wbr>标签有些不太理解，从页面上也没看到很明显效果。
文档信息相关
| 标签 | 描述 |
|---|---|
<a> |
定义超文本链接 |
<abbr> |
定义缩写 |
<address> |
定义文档作者或拥有者的联系信息 |
<blockquote> |
定义长的引用 |
<cite> |
标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题 |
<img> |
定义图像 |
<time> New |
定义日期或时间，或者两者 |
<figure> New |
规定独立的流内容（图像、图表、照片、代码等等） |
<figcaption> New |
定义<figure> 元素的标题 |
<div>
<h1>文档信息相关</h1>
<a href="https://juejin.cn/user/2365804756345320">小又又</a>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<address>
<a href="mailto:xxx@example.com">小又又</a>写的呢~~<br/>
小又又大街小又又大道<br>
</address>
<blockquote cite="https://juejin.cn/user/2365804756345320">
小又又的引用~~~
</blockquote>
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream" crossorigin="anonymous">
<p><cite>小又又</cite> 2020</p>
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
</div>
注意事项 ！！！
在 HTML5 中，<cite> 标签定义作品的标题。
在 HTML 4.01 中，<cite> 标签定义一个引用。
文档列表相关
| 标签 | 描述 |
|---|---|
<dd> |
定义定义列表中项目的描述 |
<dl> |
定义列表详情 |
<dt> |
定义列表中的项目 |
<li> |
定义列表的项目 |
<ol> |
定义有序列表 |
<ul> |
定义无序列表 |
<div>
<h1>文档列表相关</h1>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
表格相关
| 标签 | 描述 |
|---|---|
<caption> |
定义表格标题 |
<col> |
定义表格中一个或多个列的属性值 |
<colgroup> |
定义表格中供格式化的列组 |
<table> |
定义表格 |
<tbody> |
定义表格中的主体内容 |
<td> |
定义表格中的单元 |
<tfoot> |
定义表格中的表注内容（脚注） |
<th> |
定义表格中的表头单元格 |
<thead> |
定义表格中的表头内容 |
<tr> |
定义表格中的行 |
<h1>表格相关</h1>
<table>
<caption>Monthly savings</caption>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
注意事项！！！
thead, tbody, 和tfoot 元素默认不会影响表格的布局。
不过，可以使用CSS 来为这些元素定义样式，从而改变表格的外观。
交互相关
交互相关分类中，大部分标签我暂时都不太理解，大致理解是可以用于交互的标签，之前的大部分标签感觉都是呈现在页面上就好了的样子，这个里面的标签好像可以点击交互啥的。
图像映射相关
| 标签 | 描述 |
|---|---|
<area> |
定义图像映射内部的区域 |
<map> |
定义图像映射 |
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
form 相关
| 标签 | 描述 |
|---|---|
<datalist> New |
定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值 |
<form> |
定义了 HTML 文档的表单 |
<fieldset> |
定义围绕表单中元素的边框 |
<legend> |
定义 fieldset 元素的标题 |
<input> |
定义输入控件 |
<label> |
定义 input 元素的标注 |
<select> |
定义选择列表（下拉列表） |
<textarea> |
定义多行的文本输入控件 |
<meter> New |
定义度量衡。仅用于已知最大和最小值的度量 |
<output> New |
定义不同类型的输出，比如脚本的输出 |
<optgroup> |
定义选择列表中相关选项的组合 |
<option> |
定义选择列表中的选项 |
<progress> New |
定义运行中的进度（进程） |
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
<label for="male">Male</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>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
<progress value="22" max="100">
</progress>
<input type="submit" value="提交">
</form>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x"></output>
</form>
有反馈的相关
| 标签 | 描述 |
|---|---|
<button> |
定义一个点击按钮 |
<dialog> New |
定义对话框，比如提示框 |
<button type="button" onclick="alert('你好，世界!')">点我!</button>
<dialog open>This is an open dialog window</dialog>
<canvas> 标签
通过脚本（通常是JavaScript）来绘制图形（比如图表和其他图像），必须使用脚本来绘制图形。
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
看着有点麻烦
摘要相关
| 标签 | 描述 |
|---|---|
<summary> New |
<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。 |
<details> New |
用于描述文档或文档某个部分的细节 |
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
嵌入对象相关
| 标签 | 描述 |
|---|---|
<object> |
定义内嵌对象 |
<embed> New |
定义嵌入的内容，比如插件 |
<object width="400" height="400" data="helloworld.swf">
<param name="autoplay" value="true">
</object>
<embed src="helloworld.swf"/>
音频相关
| 标签 | 描述 |
|---|---|
<audio> New |
定义音频内容 |
<source> New |
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源 |
<track> New |
<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道 |
<video> New |
<video> 标签定义视频，比如电影片段或其他视频流 |
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
不支持 & 不赞成
| 标签 | 描述 |
|---|---|
<acronym> |
定义只取首字母的缩写 |
<applet> |
HTML5 中不赞成使用。定义嵌入的 applet |
<basefont> |
HTML5 不支持，不赞成使用。定义页面中文本的默认字体、颜色或尺寸 |
<big> |
定义大号文本，HTML5 不支持 |
<command> New |
定义命令按钮，比如单选按钮、复选框或按钮，目前，主流浏览器都不支持 <command> 标签 |
<center> |
HTML5 不支持，不赞成使用。定义居中文本 |
<dir> |
HTML5 不支持，不赞成使用。定义目录列表 |
<frameset> |
定义框架集 |
<font> |
HTML5 不支持，不赞成使用。定义文字的字体、尺寸和颜色 |
<tt> |
HTML5 不赞成使用，定义打字机文本 |
<menu> |
不赞成使用。定义菜单列表 |
<noframes> |
定义针对不支持框架的用户的替代内容。HTML5 不支持 |
<s> |
不赞成使用。定义加删除线的文本 |
<strike> |
HTML5 不支持，不赞成使用。定义加删除线文本 |
<u> |
不赞成使用。定义下划线文本 |
<keygen> New |
规定用于表单的密钥对生成器字段。该标签在新的 Web 标准中已废弃 |
偷懒啦，这边既然说不支持，不赞成我就不试了~~~
今日学习名词
| 名称 | 名词解析 |
|---|---|
| JavaScript | 一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 |
| php | PHP 即“超文本预处理器”，是一种通用开源脚本语言。PHP 是在服务器端执行的脚本语言，与 C 语言类似，是常用的网站编程语言。PHP 独特的语法混合了 C、Java、Perl 以及 PHP 自创的语法。利于学习，使用广泛，主要适用于 Web 开发领域。 |
今日学习总结
今日心情
今天对于 118 个标签做了一个整体了解，有个大致分类理解，还有些标签属性和具体使用场景不太理解，希望明天能更系统的学习一下~~~
本文使用 mdnice 排版
