网页制作中注意应用HTML标签问题

2016-02-19 14:57 7 1 收藏

今天图老师小编给大家精心推荐个网页制作中注意应用HTML标签问题教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

HTML已经尝试去除表现和朝向内容发展,导致这样一个基本原理:从表现(CSS)中分离出内容意义(HTML)。这将会给网页减肥,因为一个表现指令集合(以外部CSS文档的形式)可以应用到多个页面。这也会使网站更易于管理因为全局变动可以从修改一个单独的文件得到。
  
  部分不良标签基本上是表现标签(比如
  
  small
  
  ),它们可以用更有意义和更简单的CSS规则取代。其他的不仅用于表现,而且还是不必要的庞大(比如
  
  font
  
  标签)或者对可用性有害的可恶的(比如
  
  blink
  
  )。
  
  标签
  
  下面这些是你可能会经常碰到的可以有更好选择的标签:
  
  b
  
  可以用来产生粗体元素。使用
  
  strong
  
  (意味着强烈强调)代替更有意义,或者用CSS来完成这项工作,增加
  
  font-weight:bold
  
  的规则,用来表明粗体元素。
  
  i
  
  可以用来产生斜体元素。使用
  
  em
  
  (表示强调),这也更有意义。或者可以用CSS来表现斜体:
  
  font-style:italic
  
  big
  
  可以产生更大字体。使用标题(如
  
  h1
  
  ,
  
  h2
  
  等,当文本本来就是一个标题时)代替,增加了意义,或简单地在CSS中使用
  
  font-size
  
  属性,获取更多的控制权。
  
  small
  
  可以产生小字体。CSS(
  
  font-size
  
  )再一次取得更多的控制权。
  
  hr
  
  可用用来展现一条水平线。在CSS中用
  
  hr
  
  设计很少见,CSS的
  
  border-top
  
  ,
  
  border-bottom
  
  属性或者朴素的图像做这个效果会更好。
  
  上述的标签与最新的HTML标准尽管都兼容,但对内容却没有任何好标签应有的意义。Theycouldbemoreusefulbuttheyaren'tparticularlyharmful,andmighteasilybemistakenforinnocentbutter-wouldn't-melt-in-their-mouthnuggetsofpuregoodnesswhenstandingnexttothefollowingfilthytags.
  
  u
  
  可以为元素产生下划线。它提醒着下划线文本还很多连接关联。这就是这个标签死了很久的原因——你不必给非连接文本下划线。
  
  center
  
  可以用来居中在元素内部的元素。CSS属性
  
  text-align
  
  允许不仅仅是
  
  center
  
  ,还有
  
  left
  
  、
  
  right
  
  和
  
  justify
  
  。
  
  menu
  
  用来创建菜单列表。它并没有
  
  ul
  
  做的完美,在因为无序列表更通用,
  
  ul
  
  高高地站在menu的尸体上。
  
  layer
  
  和
  
  div
  
  元素相似,都由CSS绝顶位置。这仅仅能在老版本的Netscape中工作,所以再也没有什么用。
  
  blink
  
  或者
  
  marquee
  
  。大声说不!它们应该像本身意义一样被期待,但有着十分有限的支持,和,只会产生非常,非常恶心的笑话。
  
  font
  
  ,可以用来定义元素的字体名称,尺寸和颜色,在标签世界中理所当然地获得了臭名昭著标签之王荣誉称号。旧的网站(甚至新的也有)像满世界的瘟疫之蚁一样布满整个页面。大部分的
  
  font
  
  标签激增是从网页制作软件带来的,把
  
  font
  
  标签包括颜色和尺寸用在每一个元素。
  
  font
  
  标签被滥用到出现在当前的每一个重复元素的(如,每次你使用
  
  p
  
  元素),而CSS,则可以用一条简短的代码来应用重复元素,甚至控制整个网站。使用CSS方法,不仅可以使页面比被大量
  
  font
  
  标签寄生的更苗条,而且更容易维护因为你所需要做得只是改变CSS文件中的一行,而不是逐一修改每一个
  
  font
  
  标签。这也增加了维护一个一直保持设计风格一致的网站的可能性。
  
  font
  
  标签和不恰当的表格使用是两个产生网页不必要臃肿的主要原因。
  
  属性
  
  可能你认为你正在使用良好的标签,但还是有一些麻烦的寄生虫属性潜伏,它们随时会冒出来。
  
  name
  
  用来为一个元素指定一个名字,它在如
  
  input
  
  的表单元素中完全被接受,但在其它地方,
  
  name
  
  的工作已经被
  
  id
  
  属性取代。
  
  text
  
  和
  
  bgcolor
  
  可以在
  
  body
  
  起始标签中定义页面的基本文本颜色和背景颜色。CSS的
  
  color
  
  和
  
  background-color
  
  属性在应用到
  
  body
  
  选择符时也可以做到。
  
  background
  
  可以在body标签中指定一个背景图画。CSS会做得更好,用如background-image的属性来处理背景图片。
  
  link
  
  、
  
  alink
  
  、
  
  vlink
  
  在
  
  body
  
  标签中用来指定连接(未访问,激活和已访问)。CSS宝贝──
  
  :link
  
  、
  
  :active
  
  和
  
  :visited
  
  会做这项工作。
  
  align
  
  可以用来对齐某个元素的内容(比如
  
  divalign="center"Stuff/div
  
  ),但是,像
  
  center
  
  标签,CSS的
  
  text-align
  
  属性是新的老板。
  
  target
  
  可以用不同的方式打开一个连接,最常用的是打开新窗口(比如
  
  ahref="wherever.html"target="_blank"Helpme/a
  
  )。看起来不错,但你不要对你的网站这样做。用户并不预期不可思议的东西(比如新窗口)出现,而且最常用的浏览工具是浏览器的后退按钮,如果你打开新窗口,这将不可用。它是非法和不易用的。
  
  注意
  
  保留标签的表现属性如图像的
  
  width
  
  和
  
  height
  
  ,表格的
  
  cellpadding
  
  和
  
  cellspacing
  
  ,是由于这些元素经常使用不同的值。这不是完美的解决方案,但如果你的网页有大量的图像和表格,你没有其他的明智选择,只好使用它们。
  
  最让人难以理解的表现属性是
  
  textarea
  
  标签,它仅有
  
  cols
  
  和
  
  rows
  
  两个合法属性,在最新的HTML版本中也是必须的。
  
  良好标签,不良使用
  
  要进入你的卧室你可以弯腰通过一个狗洞,但等等,还有一扇有把手的为人类准备的门!哇,看——刚好适合一个进入。
  
  使用HTML标签(好标签),无论相信与否(相信它!),有一个很好的的理由:你使用它们有一个好前提,你就会有一个更好的结果。
  
  网页本身对用户来说,比起HTML标签语法语义更易用,屏幕阅读器常会在遇到一个
  
  ul
  
  标签或者有着
  
  h1
  
  或
  
  h2
  
  的标题标签时强调突出它们。
  
  在HTML标签世界中最被滥用的就是表格了。表格常常用来布局,但表格应该仅仅只用来展示表格式数据,就如它们本身的设计意图。不用表格的布局方法不是追求开悟的某种禅,它不仅可以显著地为网页减肥,而且更易于维护和重新设计。
  
  注意
  
  有时侯设计者还会用在这里提到的这些标签和属性(特别是用表格来布局)来做过渡型的设计──既可以工作在老版本的浏览器上(尤其是Netscape4),也可以工作在现代浏览器上。表格确实可以在CSS不称职的Netscape4上有更强的表现控制。很不幸,这些用户很少而且越来越少了,而展现表格布局的缺点一览无遗的移动设备用户越来越多。上述的无表格设计可以预防这些缺点,尽管对一小部分的用户有些许的表现改变,但还能在所有的浏览其中保持着完全的功能。
  
  框架
  
  Goldilocks认为喝上一杯麦片粥是一个不错的注意,但三个硕大的肉食哺乳动物突然出现,把她丢出窗户。框架就是装麦片粥的杯子。它们看起来似乎不错,但已经到了濒危阶段而且很快就会消失。
  
  大部分的网站并不是用框架,而一般用户也会把一个文档当作一页。
  
  有些情况,如你要防止用户不能把特定的网页添加到书签,又如你希望用户用Email或即时聊天软件推荐特定的网页,又或你想把整个网站变得十分复杂,让使用屏幕阅读器的用户在框架之间频繁操作,还或者你想迷惑搜索引擎,够了够了,你使用框架吧!
  
  总之,框架只会增加复杂性和丧失可用性。
  
  注意
  
  只要你遵循下列规则,你不会在犯错上有前途:
  
  1)一个标签或者属性就算只有一点点的跟表现搭上,都不要使用。那是CSS的事。并且CSS做得更好。
  
  2)把标签使用在如它的名字所暗示的用途上。表格标签是用在表格式数据上的。标题标签是用在标题上的。等等等等。
  
  3)特定的内容用恰当的标签。列表用
  
  list
  
  ,标题用hx(x=1-7)等等等等。
  
  延伸阅读
  
  HTML高级指南的标准要点:戒掉坏习惯和转向标准──兼容XHMTL
  

来源:https://www.tulaoshi.com/n/20160219/1608436.html

延伸阅读
标签: Web开发
这是我研究网页切片算法的一个汇总想法。 之前我写过:一种面向搜索引擎的网页分块、切片的原理,实现和演示,随着工作的深入,逐渐碰到以下问题: 网页切片的粒度问题: 网页切片算法的目的不是精确找到所需要的内容,而是识别划分网页的各种功能区域,导航区,链接区,内容,页脚区和广告区等。 网页切片的网页对象: ...
标签: Web开发
在用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,在HTML的input标记中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中的选项用户可以任意选择多项,甚至全选。请看下面的例子: 下面给出这个例子的源代码,结合代码来讲各参数的设置: form name="form1" 你是...
标签: Web开发
W3C 在 2008年 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性:嵌入音频、视频、图片的函数、客户端数据存储,以及交互式文档。其他特性包括新的页面元素,比如 header, section, footer, 以及 figure。 通过制...
链接 一、连结至其他文件 <a href="URL">说明文字或图片</a> 二、连结至文件内之某一处(外部连结)  《1》起点 <a href="档名#名称">..........</a>  《2》终点 <a name="名称"> 三、frame的超连结  【1】开启新的浏览器来显示连结文件 -- _blank <a href="URL" ...
表格 1.定义表格 <table>..........</table>  【1】设定边框的厚度 -- border <table border=点数>  【2】设定格线的宽度 -- cellspacing <table cellspacing=点数>  【3】设定资料与格线的距离 -- cellpadding <table cellpadding=点数>  【4】调整表格宽度&...

经验教程

599

收藏

52
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部