↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑上一篇看这里↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
一、基本用法
1.1 关于空标签
没有闭合的标签称为空标签(即有些标签，只有开始标签，却没有结束标签，我们把这些标签称之为空标签，说白了，开始标签和结束标签没有成对出现的这种标签就叫空标签)
HTML的空标签可以不闭合，即不写结束标签，或在开始标签后加一个斜杠（HTML5中可省略），如：
<p>这是一个段落</p>
<br><p>接下来我要换行</p>
这是一个段落
接下来我要换行
这里的<br>并没有结束标签，因为它是一个空标签。
常见的空标签有<br> <img> <hr> <input> <meta> <link>等。
1.2 关于属性
属性是 HTML 元素提供的附加信息。
- HTML 元素可以设置属性
- 性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"
- 属性值为"true"时可省略。
属性实例：
<a href="https://juejin.cn/post/7265627782712033334">这是一个链接</a>
二、常见语义化标签及用法
<dl>：自定义列表
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
浏览器显示如下
- Coffee
- - black hot drink
- Milk
- - white cold drink
- HTML
<a>属性target
target 属性规定在何处打开链接文档。
属性值
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
实例：
<a href="https://juejin.cn/post/7265627782712033334" target="_blank">在新窗口打开链接</a>
- HTML
<img>标签的alt属性
alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
假设由于一些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）用户无法查看图像，alt 属性可以为图像提供替代的信息。
实例：
<img src="http://www.zzu.edu.cn/images/fj/16.jpg" alt="郑州大学">
- HTML
<video>controls属性
controls 属性设置或返回浏览器应当显示标准的视频控件。
该属性反映了<video> controls 属性。
当使用该属性时，它指定了显示视频控件。
视频控件包含：
- 播放
- 暂停
- 进度条
- 音量
- 全屏切换（供视频）
- 字幕（当可用时）
- 轨道（当可用时）
实例：
document.getElementById("myVideo").controls=true;
- HTML
<input>placeholder属性
placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。
该提示会在用户输入值之前显示在输入字段中。
实例：
<form action="demo-form.php">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="提交">
</form>
- HTML
<input type="range">类型属性
<input type="range"> 定义了一个用于输入精确值不重要的数字的控件（如滑块控件）。
默认范围是 0 到 100。但是，您可以使用以下属性设置接受哪些数字的限制。
- max - 指定允许的最大值
- min - 指定允许的最小值
- step - 指定合法数字区间
- value - 指定默认值
实例：
<label for="points">Points (between 0 and 10):</label>
<input type="range" id="points" name="points" min="0" max="10">
<textarea>多行输入框
<textarea> 标签定义一个多行的文本输入控件。
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
实例：
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
<select>下拉选择
<select> 元素用来创建下拉列表。
<select>元素中的<option>标签定义了列表中的可用选项。
实例：
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
- HTML
<input>list属性
list 属性引用<datalist>元素，其中包含<input>元素的预定义选项。
实例：
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Google Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
- HTML引用
<blockquote>长引用
<blockquote> 标签定义摘自另一个源的块引用。
浏览器通常会对 <blockquote> 元素进行缩进。
实例：
<blockquote>
<p>这是一个长引用，这是一个长引用。</p>
</blockquote>
这是一个长引用，这是一个长引用。
<cite>短引用
<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。
实例：
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
The Scream by Edward Munch. Painted in 1893.
<q>短引用
<q> 标签定义一个短的引用。
浏览器经常会在这种引用的周围插入引号。
实例：
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
WWF's goal is to:
Build a future where people live in harmony with nature.
We hope they succeed.
<code>引用代码
<code> 标签是一个短语标签，用来定义计算机代码文本。
实例：
<code>一段电脑代码 print("Hello World")</code>
一段电脑代码 print("Hello World")
<pre>引用多行代码
<pre> 标签可定义预格式化的文本。
被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
实例：
<pre>
str = "hello"+\
"python"+\
"you are so cute."
</pre>
str = "hello"+\ "python"+\ "you are so cute."
- HTML强调
<strong> 标签是一个短语标签，用来定义计算机程序的样本重要的文本。
实例：
<strong>加粗文本</strong>
加粗文本
<em> 标签是一个短语标签，用来呈现为被强调的文本。
实例：
<em>强调文本</em>
强调文本
- HTML内容划分
html标签中的lang属性规定文档的语言。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body></body>
</html>
