HTML常用的一些标签（推荐）
前言
提示：这篇文章主要向大家介绍一些html5中的一些常用的标签及应用（内容有点长，大家耐心看完O ∩_∩)，也可以接上文一些知识点进行阅读，效果更佳
上篇文章 附上链接：
https://blog.csdn.net/Jinmuyan_/article/details/124614031?spm=1001.2014.3001.5502
HTML常用标签及内部属性的使用
1.基础标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 定义一个注释（在此标签里写的内容不会显示在浏览器中）-->
<p>我的第一个段落</p>
<br>
<!-- 实现换行 -->
<hr>
<!-- 生成一条水平线 -->
<p>我的第二个段落</p>
<hr>
<p>我的第三个段落</p>
<hr>
</body>
</html>
效果如下：
2.格式标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<b>粗体文字</b>
<br>
<i>斜体文字</i>
<br>
<u>下划线文字</u>
<br>
<em>强调文字</em>
<br>
<del>被删除的文字</del>
<hr>
<p>y<sub>1</sub></p>
<!-- 下标文字 一般用于数学 -->
<hr>
<p>x<sup>2</sup></p>
<!-- 上标文字 一般用于数学 -->
<hr>
</body>
</html>
效果如下：
3.链接标签
< a > 标签
< a > 标签定义超链接，用于从一个页面链接到另一个页面。
< a > 元素最重要的属性是 href 属性，它指定链接的目标。
还有一个仅在 href 属性存在时才能够使用的target属性，它规定在何处打开目标 URL。
- _blank：新窗口打开。
- _parent：在父窗口中打开链接。
- _self：默认，当前页面跳转。
- _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
在所有浏览器中，链接的默认外观如下：
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" target='_blank'>访问百度</a>
</body>
</html>
效果如下：
当我们点击超链接 时会在新窗口打开一个百度首页
< link >标签
< link > 标签定义文档与外部资源的关系。
< link > 标签最常见的用途是链接样式表(也就是我们常说的css)。
注意： link 元素是空元素，它仅包含属性。
注意： 此元素只能存在于 head 部分，不过它可出现任何次数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<a href="http://www.baidu.com"target="_blank">访问百度</a>
</body>
</html>
上面代码我通过使用< link >标签，引入了外部css样式==>与html文件同级目录下的名为theme.css的文件。
4.图像标签
< img >标签
< img > 标签定义 HTML 页面中的图像。
< img > 标签有两个必需的属性：src 和 alt。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="image.png" alt="YourNames" width="360" height="180">
</body>
</html>
运行结果如下：
因为我在这里设置了图片 宽高(width和height)属性，所以图片有一定的变化，如不设置宽高图片会以原图大小显示，接下来给大家讲解一下另外两个属性的意思
- src属性 可以规定显示图像的 URL（图片所在的路径）
- alt属性 可以规定图像的替代文本（当图片无法正常显示或填写的路径位置有错时,这时它的作用就是替代文本）
5.列表标签
< ul >标签和< ol >标签
< ul >标签和< ol >标签，这里博主就不给大家过多解释了 我相信大家也能看懂
无非就两点：
- < ul > 标签定义无序列表。
- < ol > 标签定义了一个有序列表. 列表排序以***数字*** 来显示。
那他们显示的内容呢 = =》 都是在< li >标签里面定义的
6.表单
注意：表单这一块博主会详细讲解，大家不用担心听不懂，有任何问题都可以私信我。
————————————————————————
1.表单的作用
- HTML 表单用于收集用户的输入信息。
- HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
————————————————————————
2.表单的简单实现
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。（后面会给大家依依讲 ~）
首先使用 < form > 标签来创建表单（大致的一个表单结构）:
<form>
.
input 元素
.
</form>
————————————————————————
HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签 < input>。
输入类型是由 type 属性定义。
接下来我们介绍几种常用的输入类型。
————————————————————————
- 文本域（Text Fields）
文本域通过 < input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
示例如下：
————————————————————————
- 下拉列表（select）
下拉列表是网页中一种最节省页面空间的选择方式，默认状态下只显示一个选项，只有单击下拉按钮后才能看到全部的选项。
例如，淘宝网首页的我的淘宝一栏，用到的就是下拉列表，我们来看一下：
其中，< select> 标签用来创建一个下拉列表，< option> 标签表示下拉列表中的每一项（条目）。接下来我们看一个示例：
<form action="">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
运行结果如图所示：
我们先来看一下 < select> 标签的有哪些属性。
————————————————————————
< select>标签属性
- name属性
同所有其它表单元素相同，下拉列表要想被正确提交，也需要设置 name 属性。代码如下：
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
大家可以通过运行结果发现，name 属性并不会显示在页面上。下拉列表的 name 属性同 < input> 标签的 name 属性作用相同，主要用来提交数据。
- size属性
在开始讲表单的时候我们提到过，下拉列表默认状态下只显示一个选项。如果需要让页面显示多个选项，就要使用 size 属性。我们来看一下具体的使用方法：
<form action="">
<select name="cars" size="4">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
谷歌浏览器的运行结果（不同浏览器可能因为兼容性问题导致运行结果不一样）：
- multiple属性
下拉列表默认只允许选择一个选项，如果允许用户选择多个，就要用到 multiple 属性。当 multiple 属性值等于 multiple 时，表示允许用户选择多个选项。我们来看一下具体使用方法：
<form action="">
<select name="cars" multiple="multiple" size="4">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
运行结果如图所示（谷歌浏览器）：
此时只需按住ctrl+鼠标左键就可以选择多个选项。multiple="multiple" 可以简写为 multiple。
- disabled属性
disabled 属性可以禁用下拉列表，使其不能再获得焦点或被修改。被禁用后，它的值不会提交。具体使用方法如下：
<form action="">
<select name="cars" multiple="multiple" size="4" disabled="disabled">
CARS
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
运行结果如图所示：
disabled="disabled" 可以简写为 disabled。
通过运行结果可以发现，下拉列表的每一项都被“灰化”（gray-out）了，而且不可以被选择。
上述为 < select> 标签的属性，接下来我们看一下 < option> 标签的属性。
————————————————————————————————
< option>标签属性
- selected属性
在前面为 < select> 标签设置了 multiple 属性后，就可以通过 < option> 标签的selected="selected"实现某一项的预先选中。具体使用方法如下：
<form action="">
<select name="cars" multiple size="4" >
<option value="volvo">Volvo</option>
<option selected="selected" value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
运行结果如下：
通过运行结果可以发现，设置了selected="selected"属性的项被预先选中，呈深灰色。如果我们这时候选中其他选项会怎样呢？
他会将我们设置了selected="selected"属性的项也一起选上，这就是我们select属性的作用。
- value属性
< option> 标签的 value 属性用来定义当下拉列表在提交时，是发送给服务器的值。使用方法如下：
<form action="http://www/login.php" method="post">
<select name="cars" multiple size="4" >
<option value="volvo">Volvo</option>
<option selected="selected" value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
运行结果如下（value 值并不会显示在页面上）：
- disabled属性
< option> 标签也有 disabled 属性，不同于 < selected> 标签的 disabled 属性，它只能禁用列表中的某一项。
————————————————————————————————————————————————
- 单选框（radio-buttons）
我们通过< input type=“radio”> 标签 可以定义表单的单选框选项。
单选框只能选取一个选项：
<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>
运行结果如下：
——————————————————————————————————
- 复选框（Checkboxes）
再通过使用< input type=“checkbox”> 可以定义复选框。
复选框可以选取一个或多个选项：
<form>
<input type="checkbox" name="vehicle" value="basketball">我喜欢打篮球<br>
<input type="checkbox" name="vehicle" value="badminton">我喜欢打羽毛球<br>
<input type="checkbox" name="vehicle" value="pingpong">我喜欢打乒乓球<br>
</form>
运行结果如下：
——————————————————————————————
- 提交按钮(Submit)
通过使用 < input type=“submit”> 可以定义提交按钮。
当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
action 属性会对接收到的用户输入数据进行相关的处理:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="pwd"><br>
<input type="submit" value="Submit">
</form>
运行结果如图：
这里我们的密码字段是通过标签 < input type=“password”> 来定义的
总结
以上就是今天要讲的内容，本文仅仅简单介绍了HTML5常用的一些标签及属性的使用，下次博主还会给大家实现一些简单且又好看实用的页面，请尽请期待(*❦ω❦)。