基本标签

最新推荐文章于 2025-04-07 11:18:24 发布

好事总会发生在下个转弯

最新推荐文章于 2025-04-07 11:18:24 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html

本文链接：https://blog.youkuaiyun.com/drawlessonsfrom/article/details/114868705

前端专栏收录该内容

73 篇文章

订阅专栏

基本标签

一、HTML结构
二、head标签
三、HTML注释

一、HTML结构

HTML的基本结构：

文档声明：<!DOCTYPE html>
html标签对：<html></html>
head标签对：<head></head>
body标签对：<body></body>

1、文档声明

<!DOCTYPE html>是一个文档声明，表示这是一个HTML页面。

2、HTML标签

HTML标签的作用是告诉浏览器这个页面是从<html>开始，然后到</html>结束的。

在实际的开发中，我们可能会看到这样一行代码：

<html xmlns = "http://www.w3.org/1999/xhtml">

这句代码的作用是告诉浏览器，当前页面使用的是W3C的XHTML标准。这个仅需要了解即可，一般情况下不需要添加这行代码。

3、head标签

<head></head>是网页的“头部”，用于定义一些特殊的内容，如页面标题、定时刷新、外部文件等。

4、body标签

<body></body>是网页的“身体”。对于一个网页来说，大部分代码都是在这个标签内部编写的。

二、head标签

在HTML中，一般来说，只有6个标签能放在head标签中：

title标签
meta标签
link标签
style标签
script标签
base标签

1、title标签

在HTML中，title标签唯一的作用就是定义网页的标题。

2、meta标签

在HTML中，meta标签一般用于定义页面的特殊信息，如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的。简单的说，meta标签就是告诉“搜索蜘蛛”这个页面是做什么的。

注：<meta>没有结束标签；<meta>标签永远位于head元素内部；元数据总是以名称/值得形式被成对传递。

必需的属性

属性	值	描述
content	some_text	定义与http-equiv或name属性相关的元信息。

注意：content属性提供了名称/值中的值，该值可以是任何有效的字符串；content属性始终要和name属性或http-equiv属性一起使用。

可选的属性

属性	值	描述
name	author ; description ; keywords ; copyright ; generator ; revised ; others	把content属性关联到一个名称
http_equiv	content-type ; expires ; refresh ; set-cookie	把content属性关联到HTTP头部
scheme	some_text	定义用于翻译content属性值的格式

（1）name属性

name属性取值

属性值	说明
keywords	网页的关键字，可以是多个
description	网页的描述
author	网页的作者
copyright	版权信息

（2）http-equiv属性

在HTML中，meta标签的http-equiv属性只有两个重要的作用：定义网页所使用的编码，定义网页自动刷新跳转。

定义网页所使用的编码
语法：

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

上面这段代码是告诉浏览器该页面所使用的编码是utf-8。不过在HTML5标准中，可以简写为：

<meta charset = "utf-8"/>

如果发现页面打开时乱码，很可能就是没有加上这一句代码。在实际开发中，为了确保不出现乱码，必须在每个页面中加上这句代码。

定义网页自动刷新跳转
语法：

<meta http-equiv = "refresh" content = "6; url = "http://www.baidu.com"/>

这段代码表示当前页面在6秒后会自动跳转到http://www.baidu.com这个页面。实际上很多“小广告”网站就是这样实现页面定时跳转的。

3、link标签

注意：link元素是空元素，它仅包含属性；此元素只能存在于head部分，不过它可出现任何次数。

属性

属性	值	描述
charset	char_encoding	HTML 5中不支持
href	URL	规定被链接文档的位置
hreflang	language_code	规定被链接文档中文本的语言
media	media_query	规定被链接文档将显示在什么设备上
rel	alternate ; author ; help ; icom ; licence ; next ; pingback ; prefetch ; prev ; search ; sidebar ; stylesheet ; tag	规定当前文档与被链接文档之间的关系
rev	reversed relationship	HTML5中不支持
sizes	heightxwidth ; any	规定被链接资源的尺寸。仅适用于rel = “icon”
target	_blank ; _self ; _top ; _parent ; frame_name	HTML5中不支持
type	MIME_type	规定被链接文档的MIME类型

4、style标签

style标签用于定义元素的CSS样式，规定在浏览器中如何呈现HTML文档。type属性是必须的，定义style元素的内容。唯一可能的值是“text/css"。

必需的属性

属性	值	描述
type	text/css	规定样式表的MIME类型

可选的属性

属性	值	描述
media	screen ; tty ; tv ; projection ; handheld ; print ; braille ; aural ; all	为样式表规定不同的媒介类型。

5、script标签

script标签用于定义客户端脚本，script元素既可以包含脚本语句，也可以通过src属性指向外部脚本文件。必需的type属性规定脚本的MIME类型。JavaScript的常见应用是图像操作、表单验证以及动态内容更新。

必选的属性

属性	值	描述
type	MIME-type	指示脚本的MIME类型

可选的属性

属性	值	描述
async	async	规定异步执行脚本（仅适用于外部脚本）
charset	charset	规定外部脚本文件中使用的字符编码
defer	defer	规定是否对脚本执行进行延迟，直到页面加载为止
language	script	不赞成使用。规定脚本语言。请使用type属性替代它
src	URL	规定脚本文件的URL
xml:space	preserve	规定是否保留代码中的空白

6、base标签

<base>标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。使用<base>标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有相对URL。这其中包括<a>、<img>、<link>、<form>标签中的URL。

必需的属性