搜索
首页web前端html教程网页制作中注意应用HTML标签的问题_HTML/Xhtml_网页制作

网页制作中注意应用HTML标签的问题_HTML/Xhtml_网页制作

May 16, 2016 pm 04:45 PM
css使用可以属性应用标签注意网页制作问题


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

延伸阅读 HTML高级指南的标准要点:戒掉坏习惯和转向标准──兼容XHMTL

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!