杰晶网络

web标准教程，帮你走进web标准设计的世界 第一讲
网页制作 2024/11/24 佚名
3 2

一个网页的架构：声明，头部，主体，结束

复制代码代码如下:
<!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" />
/**
*http-equiv="Content-Type" 表示描述文档类型
*content="text/HTML; 文档类型mime类型，这里为html,如果JS就是*text/javascript，
*charset=utf-8 页面字符集，编码，eg:gb2312,iso-8859-1,utf-8
*建议统一采用utf-8
*/
<title>无标题文档</title>
//一个网页的标题
</head>
<body>
</body>
</html>

我要主要讲解的是主体部分，在这过程成中会对其他部分有一定的讲解和延伸。 在讲body之前，我先讲一下html标签的大体分类。主要是为接下来讲解网页的基本结构做铺垫。 html标签大体分为：块级元素和内联元素，那么何为块级元素何为内联元素呢？ 块级元素：直白的说就是一块区域，独立占用一行空间的元素，如：div，p。 内联元素：与块级元素不同，就是不能占据一行空间的元素，如a，span。 我说的可能不是很专业，目的只是初学者便于理解。

举个例子，大家就懂啦（这里我只写了body中的内容，其他的内容大家自己补充）：

复制代码代码如下:
<body>
<div>我是块级元素，我独占一块空间</div>
<div>我是块级元素，我独占一块空间</div>
<span>我是内联元素元素，我不独占一块空间</span>*****
<span>我是内联元素元素，我不独占一块空间</span>
</body>

运行结果：
web标准教程，帮你走进web标准设计的世界 第一讲
<body>
 2 <div id="page">
 3 //我是最外层！包裹这整个网页的皮，也有人给我起名字为wrapper
 4 
 5     <div id="header">
 6         //我是头部！
 7 
 8     </div>
 9     
10     <div id="content">
11         //我是内容！
12 
13     </div>
14     
15     <div id="footer">
16         //我是尾部！
17 
18     </div>
19 
20 </div>
21 </body>

详解：

 

1 <body>
2 <div id="page">
3 //我是最外层！包裹这整个网页的皮，也有人给我起名字为wrapper

web标准教程，帮你走进web标准设计的世界 第一讲

1 <div id="header">
2         //我是头部！

 

web标准教程，帮你走进web标准设计的世界 第一讲

1  </div>
2     
3     <div id="content">
4         //我是内容！

web标准教程，帮你走进web标准设计的世界 第一讲

1 </div>
2     
3     <div id="footer">
4         //我是尾部！

 

web标准教程，帮你走进web标准设计的世界 第一讲

1 </div>
3 </div>

万事没有绝对，我说的是个主流

事儿二：

下面针对每一块我将细细为大家讲解，通过这种方式来讲解html主流标签的应用。Ok，begin！Right now！

首先：header部分

web标准教程，帮你走进web标准设计的世界 第一讲

 

我们可以把他分为3个部分：

banner：web标准教程，帮你走进web标准设计的世界 第一讲

logo：web标准教程，帮你走进web标准设计的世界 第一讲（logo就是一个网站或公司的标识）

nav（导航条）：web标准教程，帮你走进web标准设计的世界 第一讲

声明：这里我首先只讲html，至于样式（css）我将会在以后的教程中详细讲解；好吧，html开始写了，还等什么？

1 <div id="banner">
2     <span>你还没有登录，请登录</span><a target="_blank" href="#" title=”注册只需要5分钟！”>登陆</a><a href="#">注册</a>
3 </div>

So easy !

讲解标签之前，我先讲一下他们的几个常用的共有属性：

1.       id：就是一个标签的名字，在一张页面中id不允许重复，体现了唯一性，特有性，如果一张页面就是一个家族，当然我指的是传统的中国家族，不要较真哦，那么每一个标签就是一个家庭成员，id就是该成员的名字，当然一个家族的成员名字还是不要重复的好，是吧？

2.       class：当然一个大家族有若干个家庭组成，如果只用id区分那么时就有些繁琐了，比如说某某家的人应该怎么样时，那么这一类人我们怎么来划分呢？class就是为这个而生的，哈哈。class指一个标签所属的类别，就像是说这个人是哪家的一样，当然一张页面我们可以无限的重复使用了（这里就不考虑计划生育啦）。

3.       title：这个含义很简单，就是当鼠标放在该标签身上的时候所给的提示。不信你把鼠标放在注册两个子上面试试。。。

标签1：div

使用指数：*****

功能：主要用来布局，估计通过事一大家应该有所了解了

类型：块级元素

常用属性：id，class ，title

标签2：span

使用指数：***

功能：主要用来提取一小段文本来设置特别的样式

类型：内联元素

常用属性：id，class，title

标签3：a

使用指数：****

功能：主要用来表示一个链接

类型：内联元素

常用属性：id，class，title

特别属性：1.href:指的是该链接指向的url（链接地址）

例如下面的代码，点击学生在线四个字就会链接到学生在线首页了，试试看哦！

1 <a href=" http://online.cumt.edu.cn/">学生在线</a>

 　　　　  2.target: 常用值：_blank,_self(默认值)

web标准教程，帮你走进web标准设计的世界 第一讲

注意：书写html标签的时候一定要有规范：

1.       有开始就有结束:<div>XXX</div>,除了个别没有结束标志的:<img  />…

2.       块级元素不能被内联元素包裹：<span><div>这是可笑的写法！</div></span>

标签：
web,标准教程
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网