(二)HTML基本标记

本节将介绍HTML的几种基本标记。

一、页面主体的常用设置

<body>和</body>之间放的是页面中所有的内容,包括图片、文字、超链接等等,设置body的属性,可以控制整个页面的显示方式。

1.1设置网页背景色——bgcolor

浏览器背景颜色默认应该是白色或者灰白色。bgcolor属性可以标记整个背景颜色。

基本语法:

<body bgcolor="背景颜色">

颜色有两种表示方法,一种是用英文单词,如red、blue等;第二种是用#RRGGBB来表示,如#123456。

1.2设置背景图片——background

网页背景图片用于衬托显示效果。

基本语法:

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

地址应是图片及路径加文件名,地址可以是相对地址和绝对地址。

1.3设置文字颜色——text

text可以设置body内所有文本的颜色。

基本语法:

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

颜色的表示方法与背景颜色类似。

1.4设置链接文件属性

通常,浏览器中的超链接默认为蓝色,访问过后为暗红色,底部有一条横线。我们可以在<body>中自定义这些颜色。

基本语法:

<body link="颜色">超链接文字的颜色

<body alink="颜色">鼠标点击超链接时的颜色

<body vlink="颜色">访问过的超链接的颜色

1.5设置页面边距

页面边距用于设置内容与边界的距离。

基本语法:

<body topmargin=value leftmargin=value rightmargin=value bottlemargin=value>

一般网站的页面左边距和上边距都设置成0,这样看起来不会有太多的空白。

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

HTML的头部元素中,一般包括标题、基础信息和元信息等。以<head>开头,</head>结束。

基本语法:

<head>  </head>

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


对于<!DOCTYPE> ,因为HTML有多个版本,只有完全明白页面中使用的确切HTML版本,浏览器才能正确地显示出HTML页面。

代码示例:

<!DOCTYPE html>

<!DOCTYPE>位于文档的顶部位置,在<html>之前,告知浏览器使用哪种HTML或XHTML规范。

三、页面标题元素<title>

标题是一个网站对于用户来讲,最直观的信息。标题以<title>开始,以</title>结束。

基本语法:<head><title>......</title></head>

四、元信息元素<meta>

<meta>标记的主要功能是定义页面中的信息,这些信息不会显示在浏览器上。<meta>能提供文档的关键字、作者及描述等多种信息,HTML头部可以包含任意数量的<meta>。<meta>标记主要有两个属性。

name属性用于描述网页,他是以名称/值形式的名称,name属性的值所描述的内容(值)通过content表示,便于搜索引擎查找分类。

http-equiv属性用于提供HTTP协议的响应MIME文件头,它是以名称/值形式的名称,http-equiv属性的值所描述的内容通过content属性表示,通常为网页加载前提供给浏览器等设备使用。

4.1设置页面关键字

关键字是一个网站被搜索出来的关键,选择关键词的技巧是使用那些常常被人们搜索时用到的关键词。当用关键词搜索网页时,如果网页中包含该关键词,就可以在搜索结果中显示出来。

基本语法:

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

多个关键词用空格分开

避免使用过多的关键词,最好保持10个以内

可以根据不同的页面制定不同的关键词组合

代码示例:

<meta name="keywords" content="网页设计 关键字">

4.2设置页面主要内容

标签是description,该标签提供了这个页面的概括性描述。

基本语法:

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

网页的简短描述不要太长,一般140到200个字符或者100左右个汉字。

4.3定义页面的搜索方式

通过meta中的robots定义网页搜索引擎的索引方式。

基本语法:

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

content的取值有以下几种:

content="all"表示能搜索当前网页及链接的网页

content="nofollow"搜索引擎不继续通过此网页的链接搜索其他的网页

content="index"表示能搜索当前的网页

content="noindex"表示不能搜索当前网页

content="follow"搜索引擎继续通过此网页的链接搜索其他的网页

content="none"搜索引擎将忽略此网页

4.4定义编辑工具

可以在meta中设置网页编辑工具的名称。

基本语法:

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

4.5定义页面的作者信息

auther是网页的作者。

基本语法:

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

4.6定义网页文字及语言

设置编码方式,使浏览器正确地选择语言。

基本语法:

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

http-equiv是传送HTTP协议的标头,content中才是真正的属性值。charset往往设置为gb2312(简体中文)。

4.7定义页面的跳转

设置meta的http-equiv属性来实现页面的跳转。

基本语法:

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

4.8定义页面的版权信息

copyright用于定义网页授权

基本语法:

<meta name="copyright" content="© http://www.baidu.con" />

五、脚本元素

<script>标签用于定义客户端脚本,例如:JavaScript。

基本语法:

<script type="text/javascript" src="dru.js"></script>

script标签是成对出现的,以<script>开始,以</script>结束。script元素既可以包含脚本语句,也可以通过src属性指向外部脚本文件,type属性规定脚本的类型。

HTML中有三种加载JavaScript的方法,分别是内部引用JavaScript、外部引用JavaScript、内联引用JavaScript。

代码示例:

<script type="text/javascript">

document.write("<h1>Hello World!</h1>")

</script>

六、创建样式元素<style>

<style>标签用于HTML文档定义样式,规定浏览器如何显示HTML页面。

基本语法:

<style type="text/css">

......

</style>

style元素位于head部分中。

七、链接元素<link>

<link>标签定义文档与外部资源之间的关系。<link>最常用于链接样式表——链接的类型属性type、源文档与目标文档的关系属性rel、外部文件的路径href。

基本语法:

<head>

<link rel="styleheet" type="text/css" href="theme.css" />

</head>

<link>没有结束标签。


下面是本节所有代码:

<!doctype html>
<html>
	<head>
		<!style type="text/css">
		h1{color:white}
		p {color:blue}
		</style>
		<meta charset="utf-8">
		<meta name="keywords" content="关键词>
		<meta name="discription" content="主要内容">
		<meta name="robots" content="index">
		<meta name="generator" content="DreamWeaver">
		<meta name="author" content="Car">
		<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
		<meta http-equiv="refresh" content="15;URL=indexl.html">
		<meta name="copyright" content="© http://www.baidu.com"/>
		头
		<title>
		这是标题
		</title>
	</head>
	<body leftmargin="50">
		<body topmargin="50">
		<body bgcolor="red">
		<!body background="F:\心形流水\反面效果�?jpg">
		<body text="blue">
		<body link="245632">
		<body type="text/javascript">
		document.write("<h1>Hello World!</h1>")
		<a href="#"> 关键词 </a>
		我是内容
	</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值