HTML5笔记

最新推荐文章于 2021-04-22 15:53:51 发布

阿蓬2023

最新推荐文章于 2021-04-22 15:53:51 发布

阅读量392

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_43405938/article/details/109435298

版权

HTML 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

一、HTML5的基本元素

1. `<meta>` 元素

属性

charset: HTML编码方式
http-equiv: refresh: 设定几秒后重新读取页面，或重定向至另一个页面

<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. 常用特殊元素

描述	实体名称	编码
空格	` `	` `
小于	`<`	`<`
大于	`>`	`>`
引号	`"`	`"`
和号	`&`	`&`

10. `<a>` 元素

属性

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

同一个html中的超链接：

书签：

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

返回顶部：

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

指定基准url：

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

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

二、HTML5项目列表

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

语法：

<ul><li> ... </li></ul>
<!--或-->
<ul>
	<li> ... </li>
	...
	<li> ... </li>
</ul>

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

1 语法：

<ol><li> ... </li></ol>
<!--或-->
<ol>
	<li> ... </li>
	...
	<li> ... </li>
</ol>

2 设置起始编号为n：

<ol start="n">
	<li> ... </li>
	...
	<li> ... </li>
</ol>

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

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

<ol type="n">
	<li> ... </li>
	...
	<li> ... </li>
</ol>

5 设置编号递减：

<ol reserved="">
	<li> ... </li>
	...
	<li> ... </li>
</ol>

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

语法：

<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: 合并纵向单元格

 <tr><td colspan="n">...</td><td rowspan="n">...</td></tr> <!--n为合并单元格的个数-->

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

colgroup: 用于将单元格群组化
col: colgroup的子元素，用于定义colgroup每一列的属性

<colgroup>
	<col span="n"> <!--n为定义的列数，默认为1-->
	...
</colgroup>

四、HTML5图片

1. `<img>` 元素

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

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

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

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

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

用于标示图片标题

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

3. 响应图 `<map>` 元素

<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>` 元素

语法：

<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 属性相同。

语法：

<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. 网页布局

实例：

<body>
	<header> ... </header>
	<nav> ... </nav>
	<section> ... </section>
	<article> ... </article>
	<aside> ... </aside>
	<footer> ... </footer>
</body>

阿蓬2023

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML5笔记

一、HTML5的基本元素1. meta 元素charset: HTML编码方式http-equiv: refresh: 设定几秒后重新读取页面，或重定向至另一个页面<meta http-equiv="refresh" content="5"> <meta http-equiv="refresh" content="5;url"> 2. pre 元素其内容与编辑html文件所
复制链接

扫一扫