Home Web Front-end HTML Tutorial 网页制作中注意应用HTML标签的问题_HTML/Xhtml_网页制作

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

May 16, 2016 pm 04:45 PM
css use Can Attributes application Label Notice Web page production question


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

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to insert pictures on bootstrap How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to set up the framework for bootstrap How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

How to use bootstrap button How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

How to resize bootstrap How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

How to write split lines on bootstrap How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

How to view the date of bootstrap How to view the date of bootstrap Apr 07, 2025 pm 03:03 PM

Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

How to use bootstrap in vue How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

See all articles