HTML基础 head和body

最新推荐文章于 2024-04-09 00:19:38 发布

嘿哈哈哈哈哈哈

最新推荐文章于 2024-04-09 00:19:38 发布

阅读量5.4k

点赞数 7

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

本文链接：https://blog.csdn.net/m0_46698362/article/details/115590989

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.HTML文档结构

1.1基本结构

HTML文档由头部head和主体body两个部分组成。在头部head标记中，可定义标题、样式等，头部信息不显示在网页上；在主体body标记中，可定义段落、标题字、超链接、脚本、表格、表单等元素，主体内容是网页要显示的信息。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

HTML文档以<html>标记开始，以</html>标记结束。所有的HTML代码都位于这两个标记之间。

1.2头部head

HTML文档的头部标记主要包含页面标题标记、元信息标记、样式标记等。头部标记所包含的信息一般不会显示在网页上。

1.2.1 标题title标记

基本语法:
<title>标题信息显示在浏览器的标题栏上</title>
语法说明:
title标记是双标记，是开始标记，是结束标记，两者之间的内容为显示在浏览器的标题栏上的信息。

1.2.2 元信息meta标记

meta标记用来描述一个HTML网页文档的属性，也称为元信息（meta-information），这些信息并不会显示在浏览器的页面中。例如作者、日期和时间、网页描述、关键词、页面刷新等。meta标记是单标记，位于文档的头部，其属性定义了与文档相关联的“名称/值”对。
1.<meta>标记
基本语法:
<meta name="" content="">
<meta http-equiv="" content="">
属性说明:
meta属性主要分为两组:
(1)name属性与content属性
name属性用于描述网页，它是以“名称/值”形式的名称，name属性的值所描述的内容(值)通过content属性表示，便于搜索引擎机器人查找、分类。其中最重要的是description、keywords和robots。
(2)http-equiv属性与content属性
http-equiv属性用于提供HTTP协议的响应头报文，它是以“名称/值”形式的名称，http-equiv属性的值所描述的内容(值)通过content属性表示，通常为网页加载前提供给浏览器等设备使用。其中最重要的是content-type charset提供编码信息，refresh刷新与跳转页面，no-cache页面缓存，expires网页缓存过期时间。

属性	值	描述
name	author	定义网页作者
name	description	定义网页简短描述
name	keywords	定义网页关键词
name	generator	定义编辑器
http-equiv	content-type	内容类型
http-equiv	expires	网页缓存过期时间
http-equiv	refresh	刷新与跳转(重定向)页面
http-equiv	set-cookie	如果网页过期，那么存盘的cookie将被删除
content	some_text	定义与http-equiv或name属性相关的元信息

2.meta标记的使用方法

<meta name="keywords" content="信息参数" />
<meta name="description" content="信息参数" /> 
<meta name=“generator” content=“信息参数” />
<meta name="author" content="信息参数">
<meta name=“robots” contect=“信息参数”>
<meta http-equiv="refresh" content="时间;url=网址参数">

1.3主体body

主体body是一个Web页面的主要部分，其设置内容是用户实际看到的信息。所有WWW文档的主体部分都是由body标记定义的。在主体body标记中可以放置的是页面中所有的内容，如图片、图像、表格、文字、超链接等元素。

1.3.1body标记

基本语法：
<body>… </body>
语法说明:
＜body＞是开始标记，＜/body＞是结束标记。两者之间所包括的内容为网页上显示的信息。

1.3.2body标记属性

设置body标记属性可以改变Web页面显示效果。body标记主要属性有text、bgcolor、background、link、alink、vlink、topmargin、leftmargin。

属性	值	描述
text	●rgb(r,g,b) ●rgb(r%,g%,b%) ●#rrggbb或#rgb ●colorname	rgb函数（整数），r、g、b的取值范围为0-255 rgb函数（百分比），r、g、b的取值范围为0-100 十六进制数据（6位或3位）如#rrggbb或#rgb，r、g、b为十六进制数，取值范围0~9，A~F。例如#3F0,#33FF00。颜色的英文名称，red，blue等。
bgcolor	●同上	规定文档的背景颜色。不赞成使用。
alink	●同上	规定文档中活动链接的颜色。不赞成使用。
link	●同上	规定文档中未访问链接的默认颜色。不赞成使用。
vlink	●同上	规定文档中已被访问链接的颜色。不赞成使用。
background	URL	规定文档的背景图像。不赞成使用。
topmargin	pixel	规定文档中上边距的大小
leftmargin	pixel	规定文档中左边距的大小

2.HTML基本语法

2.1标记语法

HTML标记是由尖括号包围的关键词，用于说明指定内容的外貌和特征，也称为标签（Tag）。<html>、<head>、<body>等都是标记。标记通常分为单个标记和成对标记两种类型。
1.单个标记
单个标记仅单独使用就可以表达完整的意思。
基本语法:
<标记名称>或<标记名称/>
语法说明:
最常用的单标记有<br>、<hr>。<br>或<br/>表示换行；<hr>或<hr/>表示水平分隔线。
2.成对标记
成对标记由开始标记和结束标记两部分组成，必须成对使用。开始标记也称为首标记，告诉Web浏览器从此处开始执行该标记所表示的功能；结束标记也称为尾标记，告诉Web浏览器在这里结束该标记。
基本语法:
<标记名称>内容</标记名称>
语法说明:
其中“内容”部分就是要被这对标记施加作用的部分。

 <h3><i>这是错误的交叉嵌套的代码</h3></i>   ×
 <h3><i>这是正确嵌套不交叉的代码</i></h3>   √

2.2 属性语法

基本语法：
<标记名称属性1=“属性值1” 属性2=“属性值2” … 属性n=“属性值n”>
语法说明：
属性应在开始标记（首标记）内定义，并且和标记名之间有一个空格分隔。例如，下面hr标记中，align为属性，center为属性值，属性值可以直接书写，也可以使用双引号“”括起来。建议用“”括起来。
多个属性/值对之间至少留有一个空格。

<hr size="3" color="red" align="center">

3.HTML文档类型

3.1<!DOCTYPE>标记

基本语法:
<!DOCTYPE element-name DTD-type DTD-name DTD-url>
语法说明:
<!DOCTYPE >表示开始声明Document Type Definition文档类型定义，其中DOCTYPE是关键字。
<!DOCTYPE>声明位于文档最前面，处于<html>标记之前
HTML5的DTD定义：<!doctype html>

嘿哈哈哈哈哈哈

关注

7
点赞
踩
29

收藏

觉得还不错? 一键收藏
2
评论
HTML基础 head和body

1.HTML文档结构1.1基本结构HTML文档由头部head和主体body两个部分组成。在头部head标记中，可定义标题、样式等，头部信息不显示在网页上；在主体body标记中，可定义段落、标题字、超链接、脚本、表格、表单等元素，主体内容是网页要显示的信息。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head>
复制链接

扫一扫