HTML-3.1-HTML结构详解

最新推荐文章于 2023-04-12 17:38:20 发布

原创最新推荐文章于 2023-04-12 17:38:20 发布 · 351 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML结构 #文档声明头 #head #body

WEB前端同时被 2 个专栏收录

61 篇文章

订阅专栏

HTML

11 篇文章

订阅专栏

本文深入讲解HTML文档结构，包括文档声明、头标签如字符集、关键字、页面描述、title及base标签的使用，以及body标签的属性介绍，帮助读者掌握HTML页面搭建的基础。

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

HTML-3.1-HTML结构详解

一：文档声明头
二：头标签
三：<body> 标签的属性

所有的浏览器默认情况下都会忽略空格和空行
每个标签都有私有属性和共有属性
HTML表示长度单位都是像素
使用Emmet插件快速生成html骨架
新建html，输入 html:5 ，按 Tab 键，自动生成代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

一：文档声明头

任何一个标准的HTML页面，第一行是 <！DOCTYPE> 开头的语句
DocType Declaration,简称DTD
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范

二：头标签

头标签都放在头部分之间
- <title>、<base>、<meta>、<link>
<title> ：指定整个网页的标题，在浏览器最上方显示
<base> ：为页面上的所有链接标题栏显示的内容规定默认地址或默认目标
<meta>：提供有关页面的基本信息
- content-type:定义文件MIME类型
- charset:定义网页的编码信息
- content-language:定义页面的语言
- refresh:刷新与跳转（重定向）页面
- expires:网页缓存过期时间
- pragma no-cache:页面缓存
- keywords:网页的关键词
- description:网页的简短描述
- author:网页作者
- copyright:网页版权
- date:网页生成时间
- robots:搜索引擎索引方式
<body>：用于定义HTML文档所要显示的内容，也称主体标签，将代码写入此标签
<link>：定义文档与外部资源的关系

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>

 </body>
</html>

1、字符集 charset

字符集用meta标签中的 charset 定义，meta 表示“元”
- “元”配置，就是表示基本的配置项目
charset就是charactor set,字符集

2、定义“关键字”

告诉搜索引擎这个网页是干什么的，能提高搜索命中率

•<meta name="keywords" content="网易，邮箱，新闻，体育" />

3、定义“页面描述”

meta 除了可以设置字符集，还可以设置关键字和页面描述
只要设置 Description 页面描述，那么百度搜索结果，就能够显示这些语句
- 这个技术叫做SEO（search engine optimization,搜索引擎优化）

<meta name="Description" content="4399是领先的小游戏专业网站，
免费为你提供小游戏大全,4399洛克王国小游戏，双人小游戏，连连看小游戏，
赛尔号，奥拉星，奥奇传说小游戏等最新小游戏" />

4、title标签

title也是有助于SEO搜索引擎优化的

<title>网页的标题</title>

5、<base>标签

当页面中的A超链接标签没有设置hrel属性的值和没有设置target属性的值时，默认使用base标签中的href属性的值和target属性的值

<!DOCTYPE html>
<html lang="en">
<head>
	<base href="http://www.4399.com">
	<base target="_blank">
	<meta charset="UTF-8">
	<title>text</title>
</head>
<body>
	<a href="" target="">点击跳转页面</a>
</body>
</html>

三：<body> 标签的属性

bgcolor：设置整个网页得到背景颜色
background：设置整个网页的背景图
text：设置网页中的文本颜色
leftmargin：网页的左边距，IE浏览器默认是8个像素
topmargin：网页的上边距
rightmargin：网页的右边距
bootommargin：网页的下边距

<!-- 使用超链接时，link 属性默认显示的颜色
    alink 属性表示鼠标点击但是没有松开时的颜色
    vlink 属性表示点击完成之后显示的颜色
-->
<body link="red" alink="blue" vlink="green">
    <a href="http://www.baidu.com">点击跳转</a>
</body>