web规范实例教程,帮你走进web规范设计方案的全

2021-03-12 19:05 jianzhan

1个网页页面的构架:申明,头顶部,行为主体,完毕

拷贝编码
编码以下:

<!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">
//申明的1些标准,初学者无须去理睬,该一部分会全自动转化成
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
/**
*http-equiv="Content-Type" 表明叙述文本文档种类
*content="text/HTML; 文本文档种类mime种类,这里为html,假如JS便是*text/javascript,
*charset=utf⑻ 网页页面标识符集,编号,eg:gb2312,iso⑻859⑴,utf⑻
*提议统1选用utf⑻
*/
<title>无题目文本文档</title>
//1个网页页面的题目
</head>
<body>
</body>
</html>

我要关键解读的是行为主体一部分,在这全过程成中会对别的一部分有1定的解读和拓宽。
在讲body以前,我先讲1下html标识的大致归类。关键是为接下来说解网页页面的基础构造做铺垫。
html标识大致分成:块级元素和内联元素,那末作甚块级元素作甚内联元素呢?
块级元素:直白的说便是1块地区,单独占有1行室内空间的元素,如:div,p。
内联元素:与块级元素不一样,便是不可以占有1行室内空间的元素,如a,span。
我说的将会并不是很技术专业,目地只是初学者便于了解。

举个事例,大伙儿就懂啦(这里我只写了body中的內容,别的的內容大伙儿自身填补):

拷贝编码
编码以下:

<body>
<div>我是块级元素,我占有1块室内空间</div>
<div>我是块级元素,我占有1块室内空间</div>
<span>我是内联元素元素,我不占有1块室内空间</span>*****
<span>我是内联元素元素,我不占有1块室内空间</span>
</body>

运作結果:

<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

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

 

1  </div>
2     
3     <div id="content">
4         //我是內容!

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

 

1 </div>
3 </div>

万事沒有肯定,我说的是个流行

事情2

下面对于每块我将细细为大伙儿解读,根据这类方法来说解html流行标识的运用。OkbeginRight now

最先:header一部分

 

大家能够把他分成3个一部分:

banner

logologo便是1个网站或企业的标志)

nav(导航栏条):

申明:这里我最先只讲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下她们的几个常见的共有特性:

1.       id便是1个标识的姓名,在1张网页页面中id不容许反复,反映了唯1性,独有性,假如1张网页页面便是1个大家族,自然我指的是传统式的我国大家族,不必叫真哦,那末每个标识便是1个家中组员,id便是该组员的姓名,自然1个大家族的组员姓名還是不必反复的好,是吧?

2.       class自然1个大伙儿族有若干个家中构成,假如只用id区别那末时就一些繁琐了,例如说某某家的人应当如何时,那末这1类人大家如何来区划呢?class便是为这个而生的,哈哈。class指1个标识隶属的种别,就好像说这本人是哪家的1样,自然1张网页页面大家能够无尽的反复应用了(这里就不考虑到方案生育啦)。

3.       title这个含意很简易,便是当电脑鼠标放在该标识身上的情况下所给的提醒。不信你把电脑鼠标放在申请注册两个子上招聘面试试。。。

标识1div

应用指数值:*****

作用:关键用来合理布局,估算根据事1大伙儿应当有一定的掌握了

种类:块级元素

常见特性:idclass title

标识2span

应用指数值:***

作用:关键用来提取1小段文字来设定非常的款式

种类:内联元素

常见特性:idclasstitle

标识3a

应用指数值:****

作用:关键用来表明1个连接

种类:内联元素

常见特性:idclasstitle

非常特性:1.href:指的是该连接指向的url(连接详细地址)

比如下面的编码,点一下学员线上4个字就会连接到学员线上主页了,试一试哦!

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

       2.target: 常见值:_blank,_self(默认设置值)


留意:撰写html标识的情况下1定要有标准:

1.       有刚开始就有完毕:<div>XXX</div>,除某些沒有完毕标示的:<img  />…

2.       块级元素不可以被内联元素包裹:<span><div>这是好笑的写法!</div></span>