HTML复习

前端学习 评论

HTML基本内容

HTML基本文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文档标题</title>
        <style type="text/css">
            body {
                background-color:yellow;
            }
            p {
                color:blue
            }
        </style>
	</head>
    <base href="http://www.runoob.com/images/" target="_blank">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <body>
        页面内容
        <script>
        	document.write("Hello World!")
        </script>
    </body>
</html>

基本标签

1
2
3
4
5
6
7
8
9
10
11
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>

<p>段落</p>
<br>换行
<hr>水平线
<!-- 注释 -->

文本格式化

一般来说不用这些标签进行文本格式化，而是使用CSS控制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<b>粗体</b>
<strong>重要的文本</strong>
<!-- b单纯加粗，strong表示强调 -->
<code>计算机代码--等宽字体显示</code>
<em>强调文本</em>
<i>斜体文本</i>
<!-- em用于强调，i用于专有名词、书名等需要与正文语言区分的内容 -->
<kbd>键盘输入</kbd>
<pre>预格式化文本，中间内容原封不动输出，不被压缩为一行</pre>
<small>更小的文本</small>

<abbr>表示缩写，通常与title属性配合</abbr>
<adress>联系信息，块级元素</adress>
<bdo>文字方向，与dir属性配合</bdo>
<blockquote>从他处引用的内容，通常用cite属性说明引用源</blockquote>
<cite>书籍等名称的引用</cite>
<del>文本添加删除线</del>
<ins>新插入的文本</ins>
<!-- del、ins通常用来表示文档的修改 -->
<sub>下标文本</sub>
<sup>上表文本</sup>

链接

1
2
3
4
5
6
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img decoding="async" src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

图片

1
<img decoding="async" loading="lazy" src="URL" alt="替换文本" height="42" width="42">

标签的 decoding 属性用于告诉浏览器使用何种方式解析图像数据，取值包括：

sync: 同步解码图像，保证与其他内容一起显示。

async: 异步解码图像，加快显示其他内容。

auto: 默认模式，表示不偏好解码模式。由浏览器决定哪种方式更适合用户。

列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 无序列表 -->
<ul>
    <li>项目</li>
    <li>项目</li>
</ul>
<!-- 有序列表 -->
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>
<!-- 定义列表 -->
<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

表格

1
2
3
4
5
6
7
8
9
10
<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form action="demo_form.php" method="post/get">
内容：<input type="text" name="email" size="40" maxlength="50"><br>
密码：<input type="password"><br>
勾选：<input type="checkbox" checked="checked"><br>
选中：<input type="radio" checked="checked"><br>
隐藏输入框：<input type="hidden"><br>
多选：
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<br>
文本区域：
<textarea name="comment" rows="5" cols="30"></textarea><br>
提交：<input type="submit" value="Send"><br>
重置：<input type="reset">
</form>

实体

1
2
3
&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

HTML5新元素

图形绘制canvas

基于JavaScript绘制图形

1
2
3
4
5
6
7
<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>

新多媒体元素

<audio>

1
2
3
4
5
6
<!-- 定义音频内容 -->
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

<video>

1
2
3
4
5
6
<!-- 定义视频（video 或者 movie） -->
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

<source>

1
2
3
4
5
6
<!-- 定义多媒体资源 <video> 和 <audio> -->
<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

<embed>

1
2
3
4
5
6
7
<!-- 定义嵌入的内容 -->
<!-- 嵌入图片 -->
<embed type="image/jpg" src="https://static.runoob.com/images/runoob-logo.png" width="258" height="39">
<!-- 嵌入HTML页面 -->
<embed type="text/html" src="snippet.html" width="500" height="200">
<!-- 嵌入视频 -->
<embed type="video/webm" src="video.mp4" width="400" height="300">

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

<track>

1
2
3
4
5
6
7
8
9
<!-- 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道（字幕） -->
<video controls width="320" height="240"
       src="/video/php/friday.mp4">
    <track default
           kind="captions"
           srclang="en"
           src="/video/php/friday.vtt" />
    抱歉，您的浏览器不支持嵌入视频！
</video>

新表单元素

<datalist>

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 定义选项列表。与 input 元素配合使用，来定义 input 可能的值 -->
<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">
</form>

<output>

1
2
3
4
5
6
<!-- 定义不同类型的输出，比如脚本的输出 -->
<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" for="a b"></output>
</form>

新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构

标签 描述
<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<details> 用于描述文档或文档某个部分的细节
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 定义
元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<section> 定义文档中的节（section、区段）。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。

参考链接

HTML 速查列表 | 菜鸟教程 (runoob.com)

HTML 标签简写及全称 | 菜鸟教程 (runoob.com)

HTML5 新元素 | 菜鸟教程 (runoob.com)

枫与风