Amoniaa


千帆过尽，归来仍是少年

HTML5笔记

2020-11-01 分类于 前端 作者 Amoniaa ~7.59K 字 阅读 次

一、HTML5的基本元素

1. <meta> 元素

属性

  • charset: HTML编码方式
  • http-equiv: refresh: 设定几秒后重新读取页面，或重定向至另一个页面
1
2
<meta http-equiv="refresh" content="5"> <!--5秒后重新加载页面-->
<meta http-equiv="refresh" content="5;url"> <!--5秒后重定向至url-->

2. <pre> 元素

其内容与编辑html文件所看到的格式相同，即可以保留原始文件样式

3. <section> 元素

用于在文件中标记某一区域，是html的区块级元素，这种层级元素内的标题会被降一级输出，如h1->h2

4. 引用 <cite>/<q>/<blockquote> 元素

  • <cite>: 内容以斜体方式显示，用于引用源标题
  • <q>: 内容前后自动加上引号，用于引用短篇文章或段落元素
  • <blockquote>: 内容有缩排效果，用于引用长篇文章

    5. 底纹 <mark> 元素

    内容会高亮显示

    6. 小型字 <small> 元素

    用于批注信息，如脚注，尾注等

    7. <kbd>/<samp>/<var>/<code> 元素

  • <kbd>: 用于显示键盘或语音输入的内容
  • <samp>: 用于显示计算机程序结果
  • <var>: 用于显示变量
  • <code>: 用于显示代码

    8. <abbr> 元素

    用于定义缩写

    9. <dfn> 元素

    用于定义用语，结果以斜体输出

    8. <sup>/<sub> 元素

  • <sup>: 上标元素
  • <sub>: 下标元素

    9. 常用特殊元素

    描述 实体名称 编码
    空格 &nbsp; &#160;
    小于 &lt; &#60;
    大于 &gt; &#62;
    引号 &quot; &#34;
    和号 &amp; &#38;

    10. <a> 元素

    属性
  • download: 指定下载链接
  • target: 规定在何处打开目标 URL。仅在 href 属性存在时使用。
    _blank：新窗口打开。
    _parent：在父窗口中打开链接。
    _self：默认，当前页面跳转。
    _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

同一个html中的超链接：

书签：

1
2
3
<a href="#mybookmark">书签</a>
...
<h3 id="mybookmark">内容</h3>

返回顶部：

1
2
3
<p id="top">页面顶部</p>
...
<a href="#top">返回顶部</a>

指定基准url：

使用<base>元素可指定url的基准，此后其他相对的url皆以此url为基准

<base>元素位于<head>元素内，且一个<head>元素只能有一个<base>元素

二、HTML5项目列表

1. 无编号项目列表 <ul> 元素

语法：

1
2
3
4
5
6
7
<ul><li> ... </li></ul>
<!--或-->
<ul>
	<li> ... </li>
	...
	<li> ... </li>
</ul>

2. 有编号项目列表 <ol> 元素

1 语法：

1
2
3
4
5
6
7
<ol><li> ... </li></ol>
<!--或-->
<ol>
	<li> ... </li>
	...
	<li> ... </li>
</ol>

2 设置起始编号为n：

1
2
3
4
5
<ol start="n">
	<li> ... </li>
	...
	<li> ... </li>
</ol>

3 在一组连续编号中指定某一项为n：

1
2
3
4
5
6
<ol>
	<li> ... </li>
	<li value="n"> ... </li>
	...
	<li> ... </li>
</ol>

4 更改项目编号种类（n可以取以下值）：

  • a: 编号是：a,b,c,…
  • A: 编号是：A,B,C,…
  • i: 编号是：i,ii,iii,…
  • I: 编号是：I,II,III,…
1
2
3
4
5
<ol type="n">
	<li> ... </li>
	...
	<li> ... </li>
</ol>

5 设置编号递减：

1
2
3
4
5
<ol reserved="">
	<li> ... </li>
	...
	<li> ... </li>
</ol>

3. 自定义列表 <dl> 元素

语法：

1
2
3
4
5
<dl>
	<dt> key </dt><dd> value </dd>
	...
	<dt> key </dt><dd> value </dd>
</dl>

三、HTML5表格

1. 表格基本元素

  • <table>: 表格本体标记
  • <tr>: 行
  • <td>: 单元格
  • <th>: 表头
  • <tbody>: 表格本体
  • <tfoot>: 表尾
  • <caption>: 标题

    2. <td> 属性

  • colspan: 合并横向单元格
  • rowspan: 合并纵向单元格
    1
    <tr><td colspan="n">...</td><td rowspan="n">...</td></tr> <!--n为合并单元格的个数-->

    3. 单元格列群组化 <colgroup>/<col> 元素

  • colgroup: 用于将单元格群组化
  • col: colgroup的子元素，用于定义colgroup每一列的属性
    1
    2
    3
    4
    <colgroup>
    	<col span="n"> <!--n为定义的列数，默认为1-->
    	...
    </colgroup>

    四、HTML5图片

    1. <img> 元素

    <img> 标签定义 HTML 页面中的图像。

<img> 标签有两个必需的属性：src 和 alt。

注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。

提示：通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。

2. 标示文件标题 <figure>/<figcaption> 元素

用于标示图片标题

1
2
3
4
<figure>
	<img src="url" alt="图片加载失败">
	<figcaption>图片标题</figcaption>
</figure>

3. 响应图 <map> 元素

1
2
3
4
5
6
7
8
9
<p>点击太阳或其他行星，注意变化：</p>

<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>

五、HTML5多媒体元素

1. 视频 <video> 元素

目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg

属性

2. 音频 <audio> 元素

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg

属性

3. 指定多个播放文件 <source> 元素

<source> 标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源。

<source> 标签允许您规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择。

属性

4. 嵌入资源文件 <embed> 元素

<embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）。

注意：现在已经不建议使用 <embed> 标签了，可以使用 <img>、<iframe>、<video>、<audio> 等标签代替。

属性

5. 嵌入对象 <object> 元素

<object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

属性

6. 设定嵌入对象参数 <param> 元素

<param>元素允许您为插入 XHTML 文档的对象规定 run-time 设置，也就是说，此标签可为包含它的 <object> 或者 <applet> 标签提供参数。

属性

7. 嵌入浮动框架 <iframe> 元素

<iframe> 标签规定一个内联框架。

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

提示：

1.可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器。

2.可以使用 CSS 为 <iframe> （包括滚动条）定义样式。

属性

六、HTML5表单交互

1. <form> 元素

语法：

1
<form action="表单处理程序的url" method="数据传送方式" 其他属性> ...  </form>

属性

2. <input> 元素

输入字段可通过多种方式改变，取决于 type 属性。

属性


3. <textarea> 元素

<textarea> 标签定义一个多行的文本输入控件。

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

属性

4. 关联标记 <label> 元素

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。即当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

语法：

1
<label for="被关联组件的id"> ...  </label>

属性

5. 进度条 <progress> 元素

<progress> 标签定义运行中的任务进度（进程）

属性

6. 仪表值 <meter> 元素

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。

比如：磁盘使用情况，查询结果的相关性等。

属性

7. 下拉框 <select>/<option>/<optgroup> 元素

<select> 元素用来创建下拉列表。

<select> 元素中的 <option> 标签定义了列表中的可用选项。

<select> 属性

<option> 属性

<optgroup> 标签经常用于把相关的选项组合在一起。

如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。

<optgroup> 属性

8. 文本框候补选项 <datalist>/<option> 元素

<datalist> 标签规定了 <input> 元素可能的选项列表。

<datalist> 标签被用来在为 <input> 元素提供”自动完成”的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。

属性

id: 其内容应该和input元素的list属性值相同，以此建立关联。

9. 表单组件群组化 <fieldset>/<legend> 元素

<fieldset> 标签可以将表单内的相关元素分组。

<fieldset> 标签会在相关表单元素周围绘制边框。

<legend> 元素为 <fieldset>元素定义标题。

属性

10. 加密密钥 <keygen> 元素

<keygen> 标签规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。

属性

七、HTML5功能总结

1. 全局属性

2. 事件属性






3. <script> 元素

<script> 标签用于定义客户端脚本，比如 JavaScript。

<script> 元素既可包含脚本语句，也可以通过 “src” 属性指向外部脚本文件。

JavaScript 通常用于图像操作、表单验证以及动态内容更改。

4. 一般区块<div> 元素

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

<div> 标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

5. 一般范围<span> 元素

<span> 用于对文档中的行内元素进行组合。

<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

6. 区块层级与行内层级

  • **区块层级(block)**：在新的一行放置，常见元素：<div> <hn> <p> <pre>
  • **行内层级(inline)**：在同一行放置，常见元素：<a> <img> <span>

    7. 网页布局

    实例：
1
2
3
4
5
6
7
8
<body>
	<header> ... </header>
	<nav> ... </nav>
	<section> ... </section>
	<article> ... </article>
	<aside> ... </aside>
	<footer> ... </footer>
</body>
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
,
最后编辑：2021-03-12