目录
1 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Document</title> -->
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
<p>这是<abbr title="超文本标记语言">HTML</abbr></p>
<address>
<a href="https://www.baidu.com/">请联系百度</a>
</address>
<!-- 只能在 map 里边使用,用于选取某个区域并且能够点击跳转 -->
<area shape="" coords="" href="" alt="">
<!-- 独立分配 可以复用的结构 比如多个评论块 -->
<article>
<article style=" margin: .5rem;padding: .3rem;font-size: 1.2rem;">这是 1</article>
<article style=" margin: .5rem;padding: .3rem;font-size: 1.2rem;">这是 2</article>
<article style=" margin: .5rem;padding: .3rem;font-size: 1.2rem;">这是 3</article>
</article>
<!-- 与主体文章无关的内容,通常为侧边栏内容 -->
<p>这是文章的主体这是文章的主体这是文章的主体这是文章的主体这是文章的主体这是文章的主体</p>
<aside style="width: 40%;
padding-left: .5rem;
margin-left: .5rem;
float: right;
box-shadow: inset 5px 0 5px -5px #29627e;
font-style: italic;
color: #29627e">这不是文章主体内容</aside>
<!-- 添加音频组件,src 添加音频来源,也可以用 source -->
<audio src=""></audio>
<b>粗体</b>
<!-- 用于指定根 url 的值,一个文档中只能有一个 base ,如果有多个则只有第一个生效 -->
<base href="">
<!-- 双向隔离元素,用于与周围的文本隔离 -->
<bdi>这是 1</bdi>
<bdi>这是 2</bdi>
<bdi>这是 3</bdi>
<!-- 双向文本替代元素,用于覆盖原文本 -->
<bdo dir="ltr">这是双向文本替代元素</bdo>
<bdo dir="rtl">这是双向文本替代元素</bdo>
<!-- 块级引用程序,如果信息有出处可以用 cite 来储存 -->
<blockquote cite="https://www.baidu.com/">这是一个块级引用程序</blockquote>
<cite>来源百度</cite>
<!-- 文档主题元素,表示文档的内容 -->
<body></body>
<!-- 换行 -->
<br>
<!-- 按钮,可用于表单提交元素或者其他使用按钮的地方 -->
<button>按钮</button>
<!-- 通过 js 可以在 canvas 上进行画图 注意需要将 js 放在 canva 之后 -->
<canvas id="mycanvas" width="300px" height="300px">
这些内容在渲染不成功的时候出现。
</canvas>
<!-- 通常为 table 的第一个子元素,作为 table 的标题 -->
<caption>
表格标题元素
</caption>
<!-- 表示作品的引用 -->
<cite>
<a href="https://www.baidu.com/">作品引用</a>
</cite>
<!-- 表示计算机代码 显示默认是与浏览器等宽的字体 -->
<code>计算机代码</code>
<!-- col 可以将同一列的数据进行处理 只能在 table 和 colgroup -->
<table width = "100%">
<col style="background-color: brown;" />
<col style="background-color: burlywood;">
<col style="background-color: chartreuse;">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
<tr>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</table>
<!-- 用来储存列表 -->
<colgroup></colgroup>
<!-- 将数据( value 内绑定的内容,也被叫做机器可读的翻译,能够被机器所识别)绑定给内容 -->
<data value = "123">内容</data>
<!-- datalist 可用来作为一个储存数据的列表,与 option 一起成为表单控件的选项 -->
<input list="data" />
<datalist id="data">
<option value="1">
<option value="2">
<option value="3">
</datalist>
<!-- dd 作为概率的阐述,并且必须和 dt 一起使用 -->
<dt>概念名</dt>
<dd>概念解释</dd>
<!-- del 表示删除的内容,与 ins 的作用相反,ins 表示添加的内容 -->
<del>表示删除的内容</del>
<!-- details 表示隐藏的详细信息,summary 表示标题 -->
<details>
<summary>标题</summary>
这里是被隐藏的内容
</details>
<!-- dfn 表示摘要,是一个定义 -->
<p><dfn>术语</dfn>术语的定义</p>
<!-- 对话框 open 表示对话框激活能够互动 被看见 -->
<dialog open>
对话框
</dialog>
<!-- 用于将文档内容分区 是通用型的流内容容器 -->
<div>这里是 div </div>
<!-- dl 表示一个列表,dt 每一列内容,使用 dd 则字体加粗居中 -->
<dl>
<dt>1</dt>
<dt>2</dt>
<dd>3</dd>
</dl>
<!-- 着重元素 用于强调内容 -->
<em>我是着重元素</em>
<!-- 嵌入外部内容, type 为选择的 MIME 类型, src 为资源的 url 地址 -->
<embed type="video/quicktime" src="movie.mov" width="640" height="480">
<!-- 用于将表单控件分组 -->
<fieldset>用于表单控件的分组</fieldset>
<!-- figure 表示独立的一个元素 经常与 figcaption 一起使用,figcaption 可以用于描述图片的信息 -->
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg"
alt="Elephant at sunset">
<figcaption>这里是描述的文字</figcaption>
</figure>
<!-- 常用于表示文章、作品、作者等的相关信息 -->
<footer>我是页脚</footer>
<!-- 表单,交互控件包含在里边 action 表示交互的 url 可以被按钮等的相同属性覆盖 -->
<form action="">这里是表单控件</form>
<!-- 标题 h1 最重要,到 h6 递减,注意没有 h7 -->
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<!-- 包含文档的标题 配置等信息 -->
<head>文档的相关配置</head>
<!-- 常用于包裹 h1-h7 ,也包含图片等 -->
<header>我是 header </header>
<!-- 一条横线 -->
<hr>
<!-- 根元素 只能有一个 -->
<html>我是根元素</html>
<!-- 斜体 -->
<i>我是斜体</i>
<!-- 内联框架,可以引入另外一个 HTML -->
<iframe src=""></iframe>
<!-- 引入图片 -->
<img src="123" alt="src无效显示我">
<!-- 表单元素,用于接收用户的输入数据 -->
<input type="text">
<!-- 与 del 相反,显示插入的元素 -->
<ins>我是被插入的元素</ins>
<!-- 键盘输入元素 -->
<kbd>我是键盘输入元素</kbd>
<!-- label 为标签元素,常与 input 一起用,for 用来绑定对应的选择框 -->
<label for="test">我是标签</label>
<input type="checkbox" id="test">
<!-- 作为 fieldset(表单控件分组) 的标题 -->
<fieldset>
<legend>我是标题</legend>
</fieldset>
<!-- li 为列表条目,即每条列表内容,必须在 ol ul menu 中使用 -->
<!-- ol 为有序列表 -->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!-- ul 为无序列表,主要用于显示项目 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- menu 为无序列表,主要用于交互项目 -->
<menu>
<li>1</li>
<li>2</li>
<li>3</li>
</menu>
<!-- rel 为链接与被链接之间的关系,要使用官方定义的属性 -->
<link href="/media/examples/link-element-example.css" rel="stylesheet">
<!-- 包含主要内容,只能有一个 -->
<main>我是主要内容</main>
<!-- 用来定义映射(可点击的)区域 name 为地图的名称,方便对其引用 -->
<map name=""> area 标签的可引用区域</map>
<!-- 突出、标记元素 -->
<mark>我是被突出元素</mark>
<!-- 文档级元数据元素,不能由 base title link script style 表示的任何元数据内容,比如文档的字符编码 charset -->
<meta charset="">
<!-- 显示已知范围的标量值或分数值,类似与一个进度条 -->
<meter min="0" max="500" value="250"></meter>
<!-- nav 作为一个导航链接 -->
<nav>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</nav>
<!-- 当 script 不能够执行的时候的时候执行 noscript 的内容 -->
<noscript>执行失败时候的内容</noscript>
<!-- 嵌入对象元素,用于引入资源, data 为一个合法的 url 资源,type 资源表示的 MIME 类型 -->
<object data="" type=""></object>
<!-- 使用 optgroup 给选项 option 创建一个分组 -->
<optgroup>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</optgroup>
<!-- option 可作为 select 和 datalist 的选项 -->
<!-- select 为菜单选项控件 -->
<select>
<option>select选项一</option>
<option>select选项二</option>
<option>select选项三</option>
</select>
<datalist>
<option>datalist选项一</option>
<option>datalist选项二</option>
<option>datalist选项三</option>
</datalist>
<!-- output 表示计算或者用户操作后的结果,如果没有给 output 指定 form 的 id,则必需是 form 的后代才能使用 -->
<form oninput="result.value = a.value + b.value">
0<input type="range" name="a">100
+<input type="text" name="b">=
<output name="result"></output>
</form>
<form oninput="result.value = a.value + b.value" id="form_output">
0<input type="range" name="a">100
+<input type="text" name="b">=
</form>
<output form="form_output" name="result"></output>
<!-- p 是一个块级标签,能够表示一个文本的段落 -->
<p>我表示文本的一个段落</p>
<!-- param 为 object 定义元素参数,name 表示参数名字,value 表示参数值 -->
<object>
<param name="" value="">
</object>
<!-- 通过包含 source 和 img 来提供不同的图像版本,常用于浏览器不能支持特定格式时,提供不同的图像 -->
<picture>
<source>
<img src="" alt="">
</picture>
<!-- 预定义格式文本,直接将 pre 的内容按照原来的样子显示 -->
<pre>
我是
预定义
格式文本
</pre>
<!-- 进度条样式 -->
<progress value="70" max="100"></progress>
<!-- 用于引用短文本,cite 的值是 url ,blockquote 是用于长文本的引用 -->
<q cite="">引用短文本</q>
<!-- ruby 用来给展示发音或者注释,rt 里边是发音的内容,当浏览器不支持 rt 时,使用 rp 包裹,rtc 的内容是注释 -->
<ruby>
<!-- 单字写法 -->
汉 <rt>han</rt>
字 <rt>zi</rt>
<!-- 词写法 -->
汉字 <rt>han zi</rt>
汉 <rp>(</rp><rt>han</rt><rp>)</rp>
<rtc>我是注释</rtc>
</ruby>
<!-- 表示删除的文本 与 del 效果差不多 -->
<s>我有删除线</s>
<!-- 表示计算机的输出 -->
<sample>我是计算机程序输出结果</sample>
<!-- 用于包含标题等内容,比如 nav 用于包含导航菜单 -->
<section></section>
<!-- 插槽,类似于占位符,拥有 name 属性就叫具名插槽 -->
<slot>我是插槽</slot>
<!-- 将字体缩小一号 -->
<small>我是小一号字体</small>
<!-- source 是一个空元素,用于给 video picture audio 指定媒体资源 -->
<video>
<source>
</video>
<!-- 与 div 类似,但它是 行内元素 -->
<span>我是短语内容</span>
<!-- 粗体文字,用于强调 -->
<strong>我是粗体文字</strong>
<!-- 给 HTML 指定样式 -->
<style></style>
<!-- 文本区域,更低更小,记忆方法 b 的 o 在下面,更小-->
<p>正常<sub>更低</sub><sup>更高</sup></p>
<!-- table 表示表格,thead 表示表格头,tbody 表示表格身体, tr 表示表格的行, td 表示行里边的内容 -->
<!-- tfoot 表格的脚,表示汇总行 -->
<table>
<thead>
<td>我是表格头</td>
<tr>
<td>1</td>
<td>2</td>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5</td>
<td>6</td>
</tr>
</tfoot>
</table>
<!-- 内容模板元素 -->
<template>
这里的内容加载不会渲染在页面上,但是可以通过 js 来实例化
</template>
<!-- 多行文本控件, -->
<textarea cols="30" rows="10">
</textarea>
<!-- time 表示的时间能够被机器所识别读取 -->
<time>时间</time>
<!-- 浏览器标题 -->
<title>我是浏览器标题</title>
<!-- 作为 audio video 的子元素来使用,可以表示基于时间的东西,比如字幕 -->
<track />
<!-- 表意不清标注元素 -->
<u>我是表意不清元素</u>
<var>
我是数学表达式或者变量名称
</var>
<!-- video 是媒体播放器,用于视频播放,也可用于音频播放,但音频播放使用 audio 更好 -->
<video src=""></video>
<!-- wbr,使用它可以避免在错误的时机换行 -->
<p>
如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>
</body>
<!-- script 用于嵌入或者指向 js 代码 -->
<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
</script>
</html>
2 效果图