当前位置: 首页 > 网络学院 > 设计教程 > 设计理念 > HTML 元素

设计理念
图片设计
合理安排网站颜色
构建网站的6个步骤
保证网站的兼容性
网站中避免出现弹出框
适于打印的网页设计
成功解决图片问题
网站设计应该灵活
避免出现网站设计错误
网站设计十大错误
为网站添加声音内容
成功设计网站的50条建议
文本与图片,哪项内容更重要?
优化网站主页
网站中的图片设计
方便、快捷地制作404页面
FTP介绍
利用JavaScript更新网站
成功构建网站的方法
如何进行网站布局

设计理念 中的 HTML 元素


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 1986 ::
收藏到网摘: n/a

<DOCTYPE>, <title>, and <h1> are important tags to web page quality.
<DOCTYPE>、<title> 和 <h1> 是网页质量验证的重要标签。


The <DOCTYPE> Element
<DOCTYPE>元素

Doctype means a "document type declaration" (DTD).
Doctype意思是:“文档类型声明” (DTD)。

All HTML and XHTML pages should use a <Doctype> element to define which HTML version it conforms to.
所有的 HTML 和 XHTML 页面应该使用<Doctype>元素来定义页面需要遵循的HTML版本。

The doctype defines which version of HTML you are using, and gives important information to your browser so it can render your page faster and more consistently.
doctype定义了你使用的HTML版本,并且为你的浏览器提供了重要的信息,因此,它可以更加快捷、连续的提交你的页面。

The doctype declaration also allows validating software to check the syntax of your page:
doctype声明同样允许校验软件来检测页面语法。

HTML 4.01 Strict, Transitional, Frameset
HTML 4.01 精确的、传统的、框架

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset
XHTML 1.0 精确的、传统的、框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD
XHTML 1.1 文档类型声明 [ DTD ]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Read more about DTD, Doctype and Page Validation at W3Schools.
可以在RuanChen阅读更多关于DTDDoctype 页面验证 的知识。


The <title> Element
<title>元素

The <title> element is one of the most important HTML elements. Its main function is to describe the content of a web page.
<title>元素是HTML元素中最重要的元素之一。它的主要功能是描述页面的内容。

Even if the title is not a visible part of your web page, it is important to the quality of your web site because it will be visible in
即使你的网页标题不可见,但是它对于页面验证来说也非常重要,因为它会被下面这几样东西解析:

  • search engine lists
    搜索引擎列表

  • the windows title bar
    Windows 标题栏

  • users bookmarks
    用户书签

The title should be as short and descriptive as possible.
整个标题应该尽可能简短清晰。

When a user searches the internet for web sites, most search engines will display the title of your web site in the search result. Make sure the title match the content the user is looking for. Then it is more likely he will click on the link to visit your web site.
当一个用户搜索网站内容时,大多数搜索引擎将在搜索结果中显示网站标题。确保标题与用户搜索的内容相匹配。那么,用户就很可能点击这个链接访问你的网站。

When the user is visiting your website, the title will be visible in the windows title bar. Make sure the title describes your site even when the window is minimized.
当用户访问你的站点时,你便可以在Windows标题栏中看见这个标题。确保当Windows缩小时,该标题仍然能够描述你的站点。

After the user has visited your website, the title of your web pages will be stored in his history folder (or even in his favorites folder). Make sure the title clearly describes your pages for a future visit.
在用户访问你的站点之后,网页标题将会被存储到历史文件夹中(或者是收藏夹中)。确保能够在将来的访问中清晰描述你的页面。

Good title examples:
比较好的标题案例:

<title>HTML 教程</title>

<title>XML 简介</title>

Bad title examples:
不太好的标题案例

<title>简介</title>

<title>第一章</title>

<title>RuanChen 拥有很多互联网教程</title>


The <h1> Element
<h1> 元素

The <h1> element is used to describe the top level header of a web page.
<h1>元素用于描述网页的顶级抬头。

Because some web browsers display the <h1> element in a very large font by default, some web developers will use the <h2> element instead of the <h1> element for top level headers. This will not confuse the reader, if he is a person, but it will confuse most search engines and other software that will try to "understand" the structure of the web page.
因为很多网络浏览器会把<h1>元素默认显示得很大,所以很多网络开发者使用<h2>来代替<h1>元素描述顶级抬头。对一个人来说,这不会使他感到困惑;但是对于大多数搜索引擎和其它软件来说,它们就要尝试着理解整个网页的结构了。

Make sure you use <h1> for top level headers, <h2> and <h3> for lower levels.
确保使用<h1>来描述顶级标题,使用 <h2> 和 <h3> 来描述次级标题。

Try to structure your web page headers after this template:
通过学习下面这个模板来重筑网页的抬头:

This is the main header

Some initial text

This is a level 2 header

Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences.   

This is a level 3 header

Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences.

This is a level 3 header

Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences. Paragraph and sentences.

If you don't like the default size for headers, use styles or a style sheet to change it.
如果你不喜欢默认的标题尺寸,使用样式或样式表来改变它。

评论 (1) 1 All

登陆 | 还没注册?