HTML常见标签

阿浩的拔发历程

已于 2022-08-04 23:12:17 修改

阅读量229

点赞数 1

文章标签： html web 前端

于 2022-08-04 23:11:03 首次发布

本文链接：https://blog.csdn.net/chkdsk0826/article/details/126168107

版权

基础部分：

<a>-----------------------------锚点标签
<h1--h6>----------------------标题标签
<br>----------------------------换行标签
<hr>---------------------------定义一条水平线
<p>----------------------------段落标签
------------------------注释
<b>----------------------------加粗
<strong>---------------------强调/加粗
<i>-----------------------------斜体
<q>----------------------------短文本引用

*浏览器经常在引用的内容周围添加双引号。

<s>----------------------------删除线标签
<sup>------------------------上标
<sub>------------------------下标
<u>---------------------------下划线标签
<div>----------------------------标准块标签
<span>--------------------------定义文档
<header>-----------------------定义文档头部
<section>-----------------------定义文档内容
<footer>------------------------定义文档尾部
<style>--------------------------定义标签样式

表单部分：

1、<form>------------------------定义一个表单

target属性：

_block	在新窗口中打开。
_self	默认。在相同的框架中打开。
_parent	在父框架集中打开。
_top	在整个窗口中打开。
framename	在指定的框架中打开。

action属性：

提交表单时必需的属性，属性值为向该处发送表单数据的URL。

method属性：

浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法。

延伸：

如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。

在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值之前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。

另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method （方法）属性中指明表单处理服务器要用方法来处理数据，使 POST 还是 GET。

2、<input>-----------------------表单输入控件

|--相关属性--|

一般由type属性来决定input元素的类型 加粗的为type属性

button

按钮

submit

提交安扭

reset

重置按钮

file

文件上传按钮

image

图像形式的提交按钮

multiple

上传多个文件与file搭配使用

checkbox

复选框

radio

单选框

text

文本框

password

密码框

hidden

用于隐藏字段（用户不可见）

value

input元素的值

src

提交按钮图片的URL与<input type="image">配合使用

width

宽定义 input 字段的宽度。（适用于 type="image"）

height

高定义 input 字段的高度。（适用于 type="image"）

max

输入字段的最大值

min

输入字段的最小值

name

input元素的名称

用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

*注意*

name属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

size

规定输入字段长度

required

必填字段

readonly

将字段设置为只读

placeholder

提示输入字段信息

maxlength

输入字段最大长度

checked

默认选中。 checked 属性与 <input type="checkbox"> 或

<input type="radio"> 配合使用

list

引用数据列表，其中包含输入字段的预定义选项。

属性值与datalist的id属性一致（详见3.<datalist>）

autofocus

文本输入字段被设置为当页面加载时获得焦点

disabled

禁用一个input元素

3、<datalist>--------------------用于定义选项列表

*注意*

使用 input 元素的 list 属性来绑定 datalist

eg：

<input id="number" list="num"/>

<datalist id="num">

<option value="123">

<option value="456">

<option value="789">

</datalist>

4、<textarea>-------------------定义多行文本输入控件

eg：

<textarea rows="23"cols="45">

5、<button>--------------------按钮

6、<select>---------------------下拉列表

	size	表示显示下拉列表的可见选项个数。
	form	下拉列表所属的一个或多个表单。在表单之外的一个下拉列表仍然属于该表单的一部分

*** <select>标签可以创建一个或多个（multiple）菜单

<option>标签为定义下拉列表的选项

form属性：下拉列表所属的一个或多个表单。在表单之外的一个下拉列表仍然属于该表单的一部分

eg：

</form>

</select>

7、<optgroup>----------------下拉菜单分组

label

为选项分组规定描述。

eg:

</optgroup>

/optgroup>

</select>

运行结果：

8、<label>---------------------为input元素定义标记（无实际展示效果）

label

H5 新特性

属性	属性值	描述
for	id	规定 label 绑定到哪个表单元素。
form	form-id	规定 label 字段所属的一个或多个表单。在表单之外的一个单选按钮仍然属于该表单的一部分。点击这个 label，可以切换到 radio 控件。

eg：

<body>

        <form action=" "  method="get"  id="genderform">

                <label>

                        ABC<input type="radio"  name="sex" id="male"  value="male" />

                </label>

          <br />

                   <label>

                        123<input type="radio" name="sex" id="female"  value="female"  />

                   </label>

                 <input type="submit"  value="提交" />

   </form>

                   <label  for="male"  form="genderform">Male</label>

</body>

9、<fieldset>------------------定义围绕表单中元素的边框。

H5新特性：

属性	属性值	描述
disabled	disabled	规定应该禁用 fieldset。
form	form_id	规定 fieldset 所属的一个或多个表单。
name	value	规定 fieldset 的名称。

10、<legend>----------------------------为 fieldset 元素定义标题

<!DOCTYPE HTML>

<html>

    <body>

          <form>

                 <fieldset>

                          <legend>健康信息</legend>

                                  身高：<inputtype="text" />                                                         

                                  体重：<input type="text" />

                 </fieldset>

          </form>

     </body>

</html>

运行结果：

图像部分：1、<img>------------------------------用于网页中嵌入一幅图像

必需的属性：

属性	属性值	描述
alt	text	规定图像的替代文本。
src	URL	规定显示图像的 URL。
align	left--------------左对齐 right------------右对齐 top --------------上对齐 middle----------中对齐 bottom---------下对齐（默认对齐方式）	left 和 right 值会把图像周围的文本转移到相应的边界中；其余的三个值将图像与其相邻的文字在垂直方向上对齐。 H5后不再支持，不赞成使用，但基本所有浏览器都支持
height	px %	设置图片高
width	px %	设置图片宽
hspace	px	图像顶部和底部的留白。 H5后不再支持，不赞成使用，但基本所有浏览器都支持
vspace	px	图像左边和右边的留白。 H5后不再支持，不赞成使用，但基本所有浏览器都支持
usemap	URL	将图像定义为客户器端图像映射。

2、<map>--------------------------------------定义一个客户端图像映射

（注：图像映射指得是带有可点击区域的图像）

必需的属性：

属性	属性值	描述
id	unique_name	给 map 标签定义唯一的名称。

name属性：用于定义image-map的名字

语法：<map name="value">

3、<area>--------------------------------------图像映射中的区域。通常嵌套在<map>标签中

必需的属性：

属性	属性值	描述
alt	text	定义此区域的替换文本。

**alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。我建议在文档的每个图像中都使用这个属性。

shape 属性与 coords属性配合，可以规定区域的尺寸、形状和位置。

属性

属性值

描述

coords

坐标值

定义可点击区域（对鼠标敏感的区域）的坐标。

shape

见下表(shape属性的取值)

定义区域形状

href

URL

定义此区域的目标 URL

target

href指定的URL打开方式

属性值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

coords 属性规定区域的 x 和 y 坐标。coords 属性与shape属性配合使用，来规定区域的尺寸、形状和位置。图像左上角的坐标是 "0,0"。

圆形：shape="circ"，coords="x, y, z"

多边形：shape="poly"，coords="x1 , y1, x2, y2, x3, y3,..."

矩形：shape="rect"，coords="x1, y1, x2, y2"

属性值	描述
x1, y1, x2, y2	如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。
x, y, radius	如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。
x1, y1, x2, y2,.., xn, yn	如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

shape属性的取值：

属性值	描述
default	规定全部区域。
rect	定义矩形区域。
circ	定义圆形。
poly	定义多边形区域。

音频部分:

1、<audio>音频标签:

属性	值	描述
autoplay	autoplay	自动播放
controls	controls	向用户显示控件，比如播放按钮。
loop	loop	循环播放
muted	muted	音频输出静音。
preload	preload	音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

2、<video>视频标签：

属性	属性值	描述
autoplay	autoplay	自动播放
controls	controls	向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
width	pixels	设置视频播放器的宽度。
loop	loop	循环播放
muted	muted	视频的音频输出时静音。
poster	URL	视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。

链接部分：

<a>--------------------------------定义锚点（href属性为最重要属性）

<nav>-----------------------------定义导航链接

<link>-----------------------------常用链接样式表

列表部分：

<ol>	有序列表。
<ul>	无序列表。
<li>	列表内容。
<dl>	定义一个列表。
<dt>	列表头。
<dd>	列表内容。

表格部分：

<table>	定义一个表格
<caption>	表格标题。
<th>	表格表头
<tr>	定义表格中的行。
<td>	定义表格中的单元。
<thead>	语义化标签----表头。
<tbody>	语义化标签----主体内容
<tfoot>	表注内容（脚注）。