HTML网页设计文件的组成

一、标记及属性

1.标记

  • 单一标记:只要标记一个就能所需表示的内容。如:<hr>,<br>
  • 成对标记:需要两个标记组合才能才能完成所需功能。如:<body>和</body>,<html>和</heml>

标记:为了使所要显示的内容达到一定的效果,在内容中加入的特定标识。

<标记>被标记的内容<标记/>
  • 每个标记都用“<”(小于号)和“>”(大于号)围住。
    注意:“<”,“>”与标记之间不能留有空格或其他非标记字符
  • 在标记前加 ”/“ 是结束标记
  • 标记字母不区分大小写
  • 对同一段要标记的内容,可以使用多个标记来共同作用,各个标记间的顺序是任意的。

2.属性

  • 属性:标记通过属性来精确控制信息,仪表制作出各种效果。
 <标记 属性1=属性值 属性2=属性值……>内容</标记>
  • 并不是每个标记都有属性。
  • 可以根据需要使标记的所有属性或几个属性,属性之间没有顺序。
  • 属性和标记一样,也不区分大小写。

二、HTML文件结构

1.文件结构

<html>
	<head>
		<title>网页的标题</title>
	</head>
	<body>
		网页的内容
	</body>
</html>
  • <HTML>开头,以</HTML>结尾。
  • 包括头部(Head)和主题(Body)两部分。
  • <head>……</head>:网页的题头,说明文件命名与文件本身的相关信息。
  • <title>……</title>:网页标题,在浏览器的标题栏显示。
  • <body>……</body>:网页的正文。

三、页面属性标记

1.meta标记

<head>
	<meta http-equiv="Content-Type" content="text/html charset=gb2312">
</head>

主要属性有:

  • HTTP-EQUIV:类似于HTTP的头部协议,回应给浏览器一些有用的信息,以帮助正确和准确的显示网页内容。常用类型有:

expires(期限):设定网页的过期时间。

<meta http-equiv="expires" content="Wed,26 Feb 1977 08:09:33 GTM">

Pragma(cache模式):禁止浏览器从本地机的缓存中调阅网页。

<meta http-equiv="Pragma" content="no-cache">

Refrash(刷新):将网页定时自动链接到其他网页上

<meta http-equiv="refrash" content="5;url=http://www.xxx.com">

Content-Type(字符集设定):

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

NAME

<META NAME="keywords" content="life, universe, plants, relationships, science">
  • NAME:描述网页信息的,便于搜索引擎查找和分类。常用类型有:
    Keywords(关键字):设定页面的关键字
    description(简介):告诉搜索引擎页面的主要内容
    robots(机器人向导):告诉搜索引擎哪些页面需要索引,哪些页面不需要索引。
    author(作者):标注网页作者。

2.页面属性标记

<body 属性1=属性1 属性2=属性2…… >页面内容</body>

主要属性有:

  • bgcolor:设置页面背景色
  • backgruond:设置页面的背景图像
  • text:设置网页中文字的颜色
  • link:设置还没有被访问的超文本链接的颜色
  • vlink:设置已经被访问过的超文本链接的颜色
  • alink:这只超文本链接正在被访问时候的颜色

四、常用页面元素标记

1.段落标记

标题文字标记

<Hn align=水平对齐方式>标题</Hn>
  • Hn:表示标题文字的大小,n从1到6,H1最大,H6最小。

强行换行标记

本行文字<br>下一行文字

强制换段标记

上一段落文字<p>下一段落文字
<p align=水平对齐方式>段落文字</p>

显示预排格式标记

 <pre>已经拍好格式的段落文字</pre>

分区显示标记

<div align=水平对齐方式>多个段落文字或图像</div>

水平线标记

<hr align=水平对齐方式 size=粗细 width=长度 color=颜色 noshade>
  • align:标题文字的顺平对齐方式,取值有:
    Left:左对齐
    Center:居中对齐
    Right:右对齐

  • size:设定水平线粗细&#

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值