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

日期:2021-03-12 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

上1讲我关键解读了1下网页页面的基础构造与网页页面行为主体一部分的基础构造,和常见的html标识。

十分谢谢网友对我的全力适用,感谢你们给我的激励!

我再次上1讲:又刚开始实战演练了,编码敲起来!

拷贝编码
编码以下:

<div id=”logo”>
<a href=”http://online.cumt.edu.cn”><img src=”logo.jpg” title=”Welcome!” alt=”logo” /></a>
</div>

So easy !

标识4img

应用指数值:****

作用:导入照片

种类:内联元素

常见特性:idclasstitle

非常特性:1.src:导入照片总要了解照片在哪儿并不是,src就处理这个难题。他的值便是照片储放的相对路径啦。

      2.alt:title作用相近,全是提醒作用,大家了解有的情况下1个网页页面的照片不1定立即(或便是不可以取得成功)载入,那末以便给客户1个友善的表明,故用此特性

事例:1.E盘新建两个文档夹,取名为html,和images。在html文档夹中建1个html文档取名为:index.html,拷贝1张你较为喜爱的照片到images文档夹中(比如images.jpg),ok,编码刚开始了:

index.html

拷贝编码
编码以下:

<body>
<img alt="我是照片" title="Hello!" src="../images/images.jpg" />
</body>

So easy ! 

插播广告宣传:../images/images.jpg..意味着回到到上1级文档,甚么意思呢,大家的目地是寻找html文档夹外面的images文档夹中的images.jpg文档,那大家就1步1步的开展,最先从html文档夹跳出来来(..),这是大家早已指向E盘了,随后找E盘中的images文档夹(/images;最终寻找文档(/ images.jpg;光听我讲是不好的,要多实践活动哦!

自然img标识也有两个常见特性widthheight,各自来限定显示信息照片的宽度和高宽比;默认设置为照片的具体规格,何不试试这段编码,你就搞清楚啦:

拷贝编码
编码以下:

<body>
<img alt="我是照片" title="Hello!" src="../images/images.jpg" />
<img alt="我是照片" title="Hello!" src="../images/images.jpg" width="20" height="20" />
<img alt="我是照片" title="Hello!" src="../images/images.jpg" width="200" height="200" />
</body>

So easy !
好,大家再次头顶部解读,导航栏的检索框一部分编码被我省略了,表模块素提前准备独立开展将解读。


拷贝编码
编码以下:

<div id="nav">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">采访部</a></li>
<li><a href="#">資源免费下载</a></li>
<li><a href="#">论坛</a></li>
</ul>
<ul>
<li><a href="#">本人室内空间</a></li>
<li><a href="#">博雅园</a></li>
<li><a href="#">跳蚤销售市场</a></li>
<li><a href="#">歌曲站 </a></li>
</ul>
</div>

So easy !
有人将会疑惑这编码的运作結果与所给的照片差的太多了,哈哈,这是一切正常的,但到现阶段为止最少文本還是对的,假如感兴趣爱好能够提早去学习培训1下css;
好标识再次:
标识5:ul
应用指数值:*****
作用:结构1个无编码序列表,务必相互配合li来应用
种类:块级元素
常见特性:id,class
标识6:ol
应用指数值:*****
作用:结构1个井然有序目录,务必相互配合li来应用
种类:块级元素
常见特性:id,class
作甚无序?作甚井然有序?运作1下编码便知分晓:


拷贝编码
编码以下:

<div id="nav">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">采访部</a></li>
<li><a href="#">資源免费下载</a></li>
<li><a href="#">论坛</a></li>
</ul>
<ol>
<li><a href="#">本人室内空间</a></li>
<li><a href="#">博雅园</a></li>
<li><a href="#">跳蚤销售市场</a></li>
<li><a href="#">歌曲站 </a></li>
</ol>
</div>

So easy !
感兴趣爱好的能够提早去看看她们的list-style特性,你会感觉很成心思,这里就不详细介绍了,这一部分還是在解读css的情况下再说吧。到这里header就进行了。
梳理:


拷贝编码
编码以下:

<div id="header">
<div id="banner">
<span>你都还没登陆,请登陆</span>
<a target="_blank" href="#" title=”申请注册只必须5分钟!”>登录</a><a href="#">申请注册</a>
</div>
<div id="logo">
<img src="../images/images.jpg" alt="logo" title="实际上这并不是logo" />
</div>
<div id="nav">
<ul style="list-style:">
<li><a href="#">主页</a></li>
<li><a href="#">采访部</a></li>
<li><a href="#">資源免费下载</a></li>
<li><a href="#">论坛</a></li>
</ul>
<ul>
<li><a href="#">本人室内空间</a></li>
<li><a href="#">博雅园</a></li>
<li><a href="#">跳蚤销售市场</a></li>
<li><a href="#">歌曲站 </a></li>
</ul>
</div>
</div>

So easy !
实际效果好不好看。。。
至于content一部分我只讲3小块,不必诧异,由于别的的大致全是1样的啊,目地還是以便让大伙儿了解1些常见的标识,ok,Begin!Right now!

编码:

拷贝编码
编码以下:

<div>
<a title="全国性高校百佳网站互联网评选主题活动将要进到网络投票环节" href="#">
<img alt="全国性高校百佳网站" src="tempImg/nschool_pic.jpg"/>
</a>
<h3>
<a href="#">全国性高校百佳网站</a>
</h3>
<p>
由文化教育部观念政冶工作中司具体指导、我国大学员线上网站举办...
<a href="#">【详细信息点一下】</a>
</p>
</div>

So easy !
标识7:h1,h2,h3,h4,h5,h6
应用指数值:***
作用:结构1个题目,一般用于显示信息1块的题目一部分,或文章内容的题目一部分,默认设置的字体样式是加粗的,不一样级別的题目标识只是字体样式尺寸不一样罢了
种类:块级元素
常见特性:id,class
标识8:p
应用指数值:*****
作用:结构1个段落
种类:块级元素(可是不一样与div)
常见特性:id,class
事例(这里我引入了w3cSchool的事例):

拷贝编码
编码以下:

<body>
<p>
这个段落
在源码中
包括很多行
可是访问器
忽视了它们。
</p>
<p>
这个段落
在源码 中
包括 很多行
可是 访问器
忽视了 它们。
</p>
<p>
段落的行数依靠于访问器对话框的尺寸。假如调整访问器对话框的尺寸,将更改段落中的行数。
</p>
</body>


看这个构造明显是1个沒有次序的目录:大家借此来推进学习培训1下ul,终究他很关键,此外的目地便是为下文铺垫:
编码:

拷贝编码
编码以下:

<ul>
   <li>
    <a href="#">老师对文法学校2010届...</a>
  </li>
  <li>
    <a href="#">外文学校举办2010届毕...</a>
  </li>
  <li>
    <a href="#">我校举办校领导与2010...</a>
  </li>
  <li>
    <a href="#">校领导情深寄语2010届大学毕业生</a>
  </li>
</ul>

So easy !
像这类文本以目录方式存在,并且沒有次序性,也沒有题目,大家一般可使用ul和li的组成来叙述

这个与上面1个唯1的不一样点便是多了1个题目(“求购信息内容”),将会有人会想起用这样的组成进行:

拷贝编码
编码以下:

<h4>求购信息内容</h4>
<ul>
<li>…</li>
  <li>…</li>
</ul>

自然是很好的,但是这里我要详细介绍里1个标识组成来完成这个构架:

拷贝编码
编码以下:

<dl>
<dt>求购信息内容</dt>
<dd>
<a href="#">求个2手手机上给老爹用</a>
</dd>
<dd>
<a href="#">求购2手显示信息器</a>
</dd>
<dd>
<a href="#">找寻自主车钥匙</a>
</dd>
<dd>
<a href="#">求购挪动手机上(简易功...</a>
</dd>
<dd>
<a href="#">求购天翼电信手机上</a>
</dd>
</dl>

好乱啊,但实际上你细心1点就很非常容易了。
标识9:dl
应用指数值:*****
作用:结构1个目录,与dt,dd相互配合应用
种类:块级元素
常见特性:id,class
事例:

拷贝编码
编码以下:

<body>
<h4>1个界定目录:</h4>
<dl>
<dt>咖啡</dt>//非常于1个副标题
<dd>黑色的热饮料</dd>//该题目下面的內容
 <dd>黑色的热饮料</dd>
<dd>黑色的热饮料</dd>
<dt>Milk</dt>//1个dl中能够有好几个dt
<dd>白色的冷饮料</dd>//1个dt中能够有好几个dd
<dd>白色的冷饮料</dd>
<dd>白色的冷饮料</dd>
</dl>
</body>

至于尾部我就不讲了,坚信你早已能够写出他的html一部分了
下1讲我将为大伙儿关键解读表模块素和table元素。