Html的相关标签

最新推荐文章于 2025-04-11 17:35:50 发布

QuietShake

最新推荐文章于 2025-04-11 17:35:50 发布

阅读量1k

点赞数

文章标签： html 标签

本文链接：https://blog.youkuaiyun.com/QuietShake/article/details/53056444

版权

本文介绍了HTML的基本概念、结构及常用标签，包括文档类型声明、基本语法、颜色与大小设置、字体和段落处理等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML超文本标记语言，是一种解释执行的文本类标记语言，是Internet上用于编写网页的主要语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。

分析简单的HTML结构必须包含以下部分

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

</head>

<body>

</body>

</html>

html

标识HTML文档

head

标识HTML文档的头部

可以包含该文档的标题，文档使用的脚本，样式定义，元数据等信息

body

标识HTML文档的体部

body中的内容可以显示到浏览器中

1.基本语法

1）特性

可以使用.html与.htm作为html文件的后缀名（扩展名）

可以使用任意文本编辑器创建HTML，推荐使用

windows操作系统

文件名.扩展名

linux操作系统

文件名

2）注释

3）基本概念

标签：

标签用来标记内容，也是用标签表名文本的意义。标签使用"<",">"包围。

标签分为成对标签和单标签

元素：

一个元素通常是由一个开始标签，内容，其他元素以及一个结束标签组成的

属性：

与元素相关的特性称为属性，属性由键值对组成。

<元素名属性1=值1 属性2=值2></元素名>

coreattrs属性

大多数元素都可以使用的属性。

id 唯一标识

class 标识一类元素

style 样式

title 描述信息

规范：

元素名和属性都不区分大小写

2. 文档结构

文档类型声明:

版本和文档类型声明，版本和文档类型声明是对应的，文档类型使用DTD来指定XML

1）严格的文档类型

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

2）宽松的文档类型

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

3）frameset

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">

4）H5文档类型

<!DOCTYPEhtml>

5）meta元素

定义文档元数据

1，定义元数据关键字

github 好资源

stackoverflow 提问

<metaname="Author" content="licy">

<metaname="Copyright" content="版权信息">

<metaname="Description" content="描述信息">

<metaname="keywords" lang="zh-cn" content="精品图书">

<metaname="keywords" lang="en-us" content="goodbook">

2，报头规范

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">

将会创建如下的消息头

Content-Type:text/html;charset=utf-8

<metahttp-equiv="Content-Languaga" content="zh-CN">

将会创建如下的消息头

Content-Language:zh-CN

<metahttp-equiv="Refresh" content="n;url=http://yourlink">

定时让网页在指定的时间n内跳转到页面http://yourlink

<metahttp-equiv="Pragma" content="no-cache">

设置网页禁用浏览器缓存

将会创建如下的消息头：

Pragma:no-cache

<metahttp-equiv="Cache-Control" content="no-cache">

设置网页禁用浏览器缓存

3. 颜色与大小

1）颜色

颜色由红(R)、绿(G)、蓝(B)组成，每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。十六进制值的写法为#号后跟三个或六个十六进制字符。

3位十六进制 6位16进制 rgb 颜色

#000 #000000 rgb(0,0,0) 黑色 black

#F00 #FF0000 rgb(255,0,0) 红色 red

#FFF #FFFFFF rgb(255,255,255) 白色 white

2）大小

px像素

4.标签介绍

<body>标签：网页上显示的内容放在这里

语法：

<em></em>斜体

<strong></strong>粗体

<span>来组合行内元素，以便通过样式来格式化它们。

注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

字体：

<font>字体标签

语法：

<p>标签：如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。

语法：

注:一段文字一个<p>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个<p>标签中。

<hx>标签：为网页添加标题

语法：

<hx>标题文本</hx> (x为1-6)

<q>标签：短文本引用

语法:

<blockquote>标签，长文本引用

语法:

浏览器对<blockquote>标签的解析是缩进样式。

<br>标签：分行显示文本

语法：

xhtml1.0写法： <br />

注：xhtml可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言(HTML)类似，不过语法上更加严格。

html4.01写法： <br>

在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<br />

 ：网页中添加空格 (要想输入空格，必须写入 。)

<：<

>：>

&：&

<address>标签：为网页加入地址信息

语法：

<address>联系地址信息</address>

一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址、电子邮件地址等

<address>不但斜体，且另起一段。

<em>只是斜体，没有另起一段。

<hr>标签：添加水平横线

语法：

html4.01版本： <hr>

xhtml1.0版本： <hr />

<code>标签：加入一行代码

语法：

注：如果是多行代码，可以使用<pre>标签。

<pre>标签：网页加入大段代码

语法：

<pre>语言代码段</pre>

<pre>标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

注意：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

列表标签

<dl>

</dl>

ul标签：添加类似新闻信息列表

语法：

<ul>

......

</ul>

ul-li是没有前后顺序的信息列表。

ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点

ol标签：添加类似图书销售排行榜

语法：

<oltype="" start="">

......

</ol>

<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始

div标签在排版中的作用

语法：

table标签，认识网页上的表格

创建表格的四个元素：

table、tbody、tr、th、td

(1)<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

(2)<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。

(3)<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

(4)<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

(5)<th>…</th>：表格的头部的一个单元格，表格表头。th标签中的文本默认为粗体并且居中显示

(6)表格中列的个数，取决于一行中数据单元格的个数。

table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

定义表格

属性：

border: 设置表格边框线条宽度

width: 设置表格宽度

align: 表格在页面中对齐

bgcolor:表格背景色

cellspacing: 单元格之间的间距

cellpadding: 单元格之间的衬距

frame: 表格中边框线的显示

void 不显示边框

above 上边框

below 下边框

hsides 上下边框

vsides 左右边框

lhs 左边框

rhs 右边框

box 四个边框

border：四个边框

rules: 表格中分割线的显示

none 无分割线显示

groups 仅在列分组间和行分组间显示分割线

rows 仅在行间显示分割线

cols 仅在列间显示分割线

all 在所有行列间显示分割线

2）tr

定义表格行

3）th/td

th定义单元格

td定义内容单元格

属性：

colspan 跨列

rowspan 跨行

align 单元格水平对其

left,center,right,justify 两端对其

valign 单元格垂直对其

top,middle,bottom,baseline基准

对齐的继承

1）内容自身的设置具有最高优先级

2）th,td元素的对齐设置

3）tr,thead,tfoot,tbody元素的对齐设置

4）table元素的对齐设置具有全局性

5）默认的设置

4）caption

表格的标题

属性：

src : 图片的源地址

title : 对图片的文字说明，当用户把鼠标放在图片上稍作停留，

alt属性的值就会以浮动的形式显示出来。

width : 图片的宽度

height : 图片的高度

alt : 当图片文件找不到的时候显示的文本信息

border ：图片的边框

align ：图片和文字的对齐

当align值为left时，图片靠在最左方，周围的文字显示在右侧上方

当align值为right时，图片靠在最右方，周围的文字显示在左侧上方

当align值为top时，图片靠在最上方，周围的文字显示在上方

当align值为bottom时，图片靠在最上方，周围的文字显示在下方

hspace ：图片的水平间距

vspace ：图片的垂直间距

超链接

从一个web资源到另外一个web资源的连接

绝对路径：

每个网页都有一个唯一的地址，称为URI 统一资源定位符，也称为该网页的绝对路径。

http://ip:port/目录/文件名

相对路径：

相对于当前文档所在的路径

../imgs/a.jpg

./imgs/a.jpg

imgs/a.jpg

本地连接

file:///d:/html/index.html

超链接中不允许写本地连接

服务器路径

http://localhost:8888/test/index.html

<a>超链接

连接状态：

未访问

已选择

已访问

<ahref="">内容显示</a>

属性：

href 定义连接的目标URI

绝对路径：http://www.baidu.com

相对路径：b.html

锚点：#mao

邮件地址：mailto:zhangcg@briup.com

target 定义连接的目标窗口

_blank :在新窗口或者是标签页中打开文档

_self :在当前窗口打开

_parent :在父窗口(不常用)

_top :在顶层窗口打开(不常用)

关联邮件：<ahref="mailto:xxx@xx.com?subject=xxx">发送邮件</a>

关联迅雷：<ahref="thunder://xxxx" >迅雷下载</a>

锚点：

锚点可以让用户在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后创建到这些锚点的连接，指向网页中的特点位置。

表单

主要用于收集来自用户的信息，并将收集的信息发送给服务器端处理程序处理。

表单时客户端和服务器端传递数据的桥梁，是实现用于与服务器互动的最主要方式。

1）form

表单控件的容器

<formaction="">

</form>

属性

action 设定处理表单数据URI的地址

method 设定数据传送到服务器的方式

get 将输入的数据追加到action地址后面

post 将输入的数据保存到HTTP协议的报文中

name 设定表单的名称

accept-charset 设置服务器端可以处理的字符编码

2）input 基本表单控件

<inputtype="text">

属性：

type 控件类型

text 单行文本框

password 密码框

checkbox 复选框

radio 单选按钮

submit 提交按钮

reset 重置按钮

file 文件

hidden 隐藏域

image 图像按钮

button 普通按钮

name

控件名称，这个名称将与控件的当前值形参"名称/值"对一同随表单提交

value

用于设定初始化，可选。

checked

单选框，复选框默认选中属性

size

当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text,password，这时宽度是整数值，表示字符的数目

maxlength

指定可以输入的字符的最大值。适用于控件类型为text,password。

3）button 按钮控件

属性

name 控件名称

value 控件初始值

type 控件类型

button 普通按钮

submit 提交按钮

reset 重置按钮

图片按钮

select 下拉列表

<selectname="" id="">

<optionvalue=""></option>

</select>

属性

name: 控件名称

size: 列表框中行的显示数量

multiple: 是否允许多选

如果select元素不包含属性size和属性multiple时，表单类型显示为菜单（组合框）

如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框

selected: 默认选中

option 下拉列表选项

属性：

value: 定义控件的初始值。提交表单时，初始值会被提交给服务器。

optgroup 分组选项

4）textarea 多行文本框

属性

name: 控件名称

rows: 定义文本框行数

cols: 定义文本框列数

warp: 是否自动换行。

off 不自动换行

hard自动硬回车换行，换行元素一同被传送到服务器中

soft自动软回车换行，换行元素不会传到服务器中

5）label 为表单控件定义标签

一些表单控件内建有标签，当内建有标签时，一般使用value属性的值作为标签，

而另外一些表单控件没有标签，则直接使用文本作为标签来说明控件的意义。

每个label元素都要和表单控件关联到一起

6）fieldset 为表单添加结构

一般与legend元素配合使用，fieldset元素可以包含其他的表单控件，在这些表单控件周围画一个方框，而legend元素可以显示一个标签说明被包含的这些表单控件。

7）其他控件特性

disabled 禁用

支持该属性的控件：button,input,optgroup,option,select,textarea

1）禁止的元素不接受节点

2）禁止的控件的值不与表单一起被提交

readonly 只读

支持该属性的控件：input,textarea

1）可以接受焦点，但是不能被用户修改

2）只读元素的值可以与表单一起被提交。