HTML的基本标记

最新推荐文章于 2024-04-20 20:25:59 发布

两条咸鱼儿

最新推荐文章于 2024-04-20 20:25:59 发布

阅读量3.2k

点赞数 2

分类专栏： Html 文章标签： html

本文链接：https://blog.csdn.net/qq_51049931/article/details/117791582

版权

Html 专栏收录该内容

8 篇文章 4 订阅

订阅专栏

一、HTML页面主体的常用设置

在<body>和</body>之间放置的是页面中的所有内容，包含图片、文字、表格、表单、超链接等等。<body>标记也有自己的属性，包括网页的背景设置、文字属性设置和链接设置等。设置<body>标记内的属性，可以控制整个页面的显示方式。

1.定义网页的背景色（bgcolor）

我们在浏览网页时会发现，大部分网页背景都是白色或者灰色,所以我们利用bgcolor属性来标记整个网页的背景色。

基本语法：

<body bgcolor="背景颜色">.....</body>

语法说明：

背景颜色的俩种表现形式：（1）使用颜色指定。如红色就要red，绿色就要green

（2）使用十六进制格式数据值#RRGGBB来表示（RR:红色、GG:绿色、BB:蓝色）

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!--或者用
		<body bgcolor=yellow></body>
	-->
	<body bgcolor="#f0f000">	
	</body>
</html>

效果为：

2.设置背景图片（background）

网页背景图片不仅要好看，而且要不影响网页内容的阅读，通常使用深色的背景图片搭配浅色的文本，或者反过来。一个合格的背景图片可以衬托网页的显示效果，从而使用户喜欢浏览这个网页。

基本语法：

<body background="图片地址"></body>

语法说明：

background属性值就是背景图片的路径和文件名。（图片路径可以是相对地址，也可以是绝对地址。）在一般情况下，图片会按照水平和垂直的方向不断重复出现，直到铺满整个页面。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body background="images/09.jpg">
	</body>
</html>

效果为：

绝对地址可以说是一种物理路径，也就是一条完整额路径；

相对地址就是说地址是相对存在的，他往往只表现一个网址后面的部分，域名不需要带，

3.设置文字颜色（text）

用text设置body内所有文本颜色：如果不对某些文字修饰或者单独定义时，text属性可以对网页中的所有文字起作用。

基本语法：

<body text="文字的颜色"></body>

语法说明：

text属性值与设置页面背景色的方法一样。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body text="#ff0000">
	中国传统节日:
		腊月末晚除夕节；
		正月初一是春节；
		正月十五元宵节；
		四月四六清明节；
		五月初五端午节；
		七月初七七夕节；
		七月十五中元节；
		八月十五中秋节；
		九月初九重阳节；
		腊月初八腊八节；
		立春后五春社日；
		正月25填仓节；
		二月初二龙抬头；
		三月初三上巳节；
		清明前两寒食节；
		四月初八浴佛节；
		五月九毒日最多；
		六月初六姑姑节；
		七月甘二财神节；
		十月初一寒衣节；
		立秋后五秋社日；
		十月十五下元节。
	中国现代节日:
		一月一日元旦节；
		三月12植树节；
		五月一日劳动节；
		五月四日青年节；
		六月一日儿童节；
		七月一日建党节；
		八月一日建军节；
		九月10号教师节；
		十月一日国庆节。

	</body>
	<!--或者用
		<body text=red></body>
	-->
</html>

效果为：

4.设置链接文字属性

超链接文字通常采用与其他文字不同的颜色，被超链接的文字底部还会家一条横线。网页的超链接文字有默认的颜色（蓝色），被访问过后被超链接的文字将会变成暗红色。

基本语法：

<body link="颜色"></body>

语法说明：

和前面几个的方法类似，

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body link="#993300">
	<a href="#">中国人中国魂中国心</a>
		

	</body>
	<!--或者用
		<body link=red></body>
	-->
</html>

效果为：

补充：使用以下代码可以设置鼠标单击超链接时的颜色

<body alink="文字颜色"></body>

使用以下代码可以设置已经访问过的超链接颜色

<body vlink="文字颜色"></body>

5.设置页面边距

这个标记是设置文本内容与网页之间的距离。一般的HTML语言默认的都是topmargin、leftmargin的值等于12，将俩个的值设置为0，那么文本内容与网页之间的距离为零。

基本语法：

<body topmargin=value leftmargin=value rightmargin=value bottommargin=value></body>

语法说明：

topmargin:设置文本内容到网页的顶边的距离；

leftmargin:设置文本内容到网页的左边的距离；

rightmargin:设置文本内容到网页的右边的距离；

bottommargin:设置文本内容到网页的底边的距离；

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body topmargin="80" leftmargin="80">
	<p>设置文本内容到网页的顶边的距离；</p>
	<p>设置文本内容到网页的左边的距离；</p>

	</body>
</html>

效果为：

二、页面头部元素<head>和<!DOCTYPE>

HTML语言的头部元素中，一般需要包括标题、基础信息和一些元信息。

基本语法：

<head>.........</head>

语法说明：

头部的内容不会在网页上直接显示，而是通过另外的方式起作用。

示例代码：

<!DOCTYPE html>
<html>
   <head>
       文档头部
   </head>
   <body>
   身体部分

   </body>
</html>

<!DOCTYPE>不是HTML标签，它只是声明HTML是什么版本写的,它位于文档中顶部位置，这个标签可以告诉浏览器文档使用哪种HTML或XHTML规范。（声明三种DTD类型：严格版本、过渡版本、基于框架的HTML文档）

<!DOCTYPE html>

三、页面标题元素<title>

不管对用户还是搜索引擎来说，对一个网站的最直观印象往往都是网站的标题。

基本语法：

<head>

<title>.........</title>

</head>

语法说明：

一个网站页面的标题只有一个，位于头部标题里面。

示例代码：

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

效果为：

四、元信息元素<meta>

其中以：

name属性用于描述网页，它是以名称/值形式的名称，而name属性的值所描述的内容通过content属性表示，以便于搜索引擎的寻找。（包括：description、keywords、robots）；

http-equiv属性用于提供HTTP协议的响应MIME文档头，它是以名称/值形式的名称，而http-equiv属性的值所描述的内容通过content属性表示，通常为网页加载前提供给浏览器等设备使用。（包括：content-type charset提供编码信息、refresh刷新与跳转页面、no-cache页面缓存）

1.设置页面关键词

关键词：是描述网站的产品及服务的词语。

基本语法：

<meta name="keywords" content="输入具体的关键词">

语法说明：

name="keywords"用于定义网页的关键词，content中定义具体的关键词。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="keywords" content="旅游 一起旅游 旅游网站">
		<title>关键字</title>
	</head>
	<body>
	</body>
</html>

2.设置页面的主要内容

网页的描述标签description为搜索引擎提供了关于这个网页的概括性描述。

基本语法：

<meta name="description" content="设置页面描述">

语法说明：

description用于定义网页的简短描述。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="description" content="旅游网站的设计内容，完善旅游网站的设计，让用户完美浏览">
		<title>页面描述</title>
	</head>
	<body>
	</body>
</html>

3.定义页面的搜索方式

基本语法：

<meta name="robots" content="搜索方式">

语法说明：

搜索方式的取值
属性值	说明
all	表示能搜索当前网页及其链接网页
none	搜索引擎将忽略此网页
index	表示能搜索当前网页
noindex	表示不能搜索当前网页
follow	搜索引擎继续通过此网页的链接搜索其他的网页
nofollow	搜索引擎不继续通过此网页的链接搜索其他的网页

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="robots" content="index">
		<title>页面描述</title>
	</head>
	<body>
	</body>
</html>

4.定义编辑工具

基本语法：

<meta name="generator" content="编辑软件的名称">

语法说明：

name为属性名称，设置为generator，设置编辑工具

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="generator" content="FrontPage">
		<title>设置编辑工具</title>
	</head>
	<body>
	</body>
</html>

5.定义页面的作者信息

基本语法：

<meta name="author" content="作者的姓名">

语法说明：

name为属性名称，设置为author，设置作者信息

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="author" content="张三">
		<title>设置作者信息</title>
	</head>
	<body>
	</body>
</html>

6.定义网页文字及语言

基本语法：

<meta http-equiv="content-type" content="text/html；charset=字符集类型"/>

语法说明：

http-equiv用于传送HTTP通信协议的标头，charset用于设置网页的内码语系，国内常用的GB码，charset往往设置为gb2312（简体中文），英文是ISO-8859-1。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=euc-jp">
		<title></title>
	</head>
	<body>
	</body>
</html>

7.定义页面的跳转

基本语法：

<meta http-equiv="refresh" content="跳转时间；URL=跳转到的地址"/>

语法说明：

refresh表示页面刷新，一般情况下，跳转时间以秒为单位。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="refresh" content="10;url=index.html">
		<title>网页的跳转</title>
	</head>
	<body>
		10s后自动跳转
	</body>
</html>

跳转后的页面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跳转后的页面</title>
	</head>
	<body>
		欢迎来到首页
	</body>
</html>

效果为：

8.定义页面的版权信息

基本语法：

<meta name="copyright" content="@ http://www.baidu.com">

语法说明：

copyright在name属性中，使用content属性定义网页的版权

五、脚本元素<script>

基本语法：

<script type="text/javascript" src="外部脚本名称.js"></script>

语法说明：

script标签成对出现（<script>....</script>），必须以type属性规定脚本的类型,script元素既可以包含脚本语句，也可通过src属性指向外部脚本文件。

在HTML文档中，有三种方式可以加载JavaScript：内部引用、外部引用、内联引用

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>脚本元素</title>
	</head>
	<body>
		<script type="text/javascript">
			document.write("<h1>Hello Word</h1>")
		</script>
	</body>
</html>

效果为：

六、创建样式标签<style>

基本语法：

<style type="text/css">.........<style>

语法说明：

type属性是必需的，定义style元素的内容。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建样式元素</title>
		<style type="text/css">
			h1{
				color: red;
			}
			p{
				color: blue;
			}
			
		</style>
	</head>
	<body>
		<h1>创建样式标签</h1>
		<p>这是一段话</p>
	</body>
</html>

效果为：

七、链接元素<link>

基本语法：

<head>

<link rel="stylesheet" type="text/css" href="样式名称.css" />

</head>

语法说明：

示例代码：（代码只有部分）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<title>链接到外部样式表</title>
		<link rel="stylesheet" type="text/css" href="text/html" media="screen"/>
	</head>
	<body>
		<div id="main_container">
			<div id="header">
				<div id="logo">
					<a href="home.html">
						<img src="images/logo.jpg" 
						width="358" height="40" alt="" title="" border="0"/>
					</a>
				</div>
				<div id="menu">
					<ul>
						<li><a class="current" href="#" title="">首页</a></li>
						<li><a href="#" title="">关于我</a></li>
						<li><a href="#" title="">我的照片</a></li>
						<li><a href="#" title="">我的项目</a></li>
						<li><a href="#" title="">内容</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>