网站HTML文档结构

构造优越的HTML (或者XHTML)文档可能包括如下元素:

●HTML文档构造(<head>、 <body>、 <div>、 <span>)。

●文字内容。

●转达寄义和内容构造的语义标注(题目、段落文字、列表和引用)。

●让内容以一种特定的方法来显示的可视化展现(CSS)。

●与视昕内容相连的链接( gif jpeg或png图形,QuickTime或者其他序言文件)。

●交互行动(JavaScript、 Ajax 元素,或者其他编纂技法)。

1. 文档构造

在构造严厉的HTML中,所有的Web页面代码都要放在以下这两个基本元素之中:

●Head (<head>…</head>)
●Body (<body…</body>)

在曩昔,页面代码构造的这些根本请求是优越构造的基本:完整准确然则功效可选,且对于用户是可见的。在今天的更为庞杂和更具挑衅性的万维网中,庞杂的页面代码、许多分歧的显示可能、庞杂的样式表以及交互剧本已经异常常见,是以准确地构建朋分元素十分主要。

<head>区域是Web页向显示装备( Web阅读器、手机、iPod Touch)声明代码尺度和文档类型的区域,它也是所有主要的页面题目放置的处所。页面题目区域也可以包括那些与网站许多页共享的外部样式表和JavaScript代码相连的链接。

<body>区域包括所有页面内容,也是主要的对可视样式、编程和语义内容标注的CSS掌握。平日,位于页面body内的区域应用分区(<div>) 或规模(<span>)标签来进行功效朋分。例如,绝年夜多半Web页都有页眉、页脚、内容和导航区域,它们全体应用可以被寻址和应用css进行可视样式化处置的已定名的<div>标签来指定。

HTML文档类型声清楚明了HTML文档采取的是哪个版本和尺度,文档类型对于估算HTML标注和CSS的品德和技巧有用性至关主要。Web开辟技巧团队应当告知你将在页面编码中应用什么版本的HTML(例如,HTML4和XHTMLI),以及会在网站中应用哪种文档类型声明。HTML是Web页面标注的通用根本尺度。XhTML与HTML异常类似,然则XHTML是XML的子集,而且有更为严厉的请求。尽管HTML是应用最广的Web标注尺度,将XHTML用做页面标注有以下更为壮大的优势:

●与XML技巧、XML内容以及诸如Ajax之类的混杂JavaScript/XML技巧兼容。

●与非HTML Web标注尺度兼容,诸如用于科学文档Mathml、用于交互视听内容的同步化多媒体整合说话(Synchronized Multimedia Integration Language, SMIL) 以及可伸缩矢量图形(Scalable Vector Graphics, SVG)。

●与更新的XML内容技巧、内容治理系统和其他正在成长之中的Web技巧的将来兼容性,这些Web技巧可以从XHTML标注尺度更好的一致性和更年夜的构造中获益。

2.内容标注

语义标注是常见HTML应用的一种优质界标:假如你编写了一个题目,可以应用题目标签(<h1>, <h2>) 来标注;假如你编写的是根本的段落文字,可以将该文字放在段落标签之中(<>…</p >); 假如你愿望强调某个主要短语,可以应用加粗强调(<strong…</strong>) 来标注它:假如你引用了另一个作者的内容可以应用<blockquote>标签来标识该文本是引用的。永远不要依据Web阅读器中的显示方法来选择HTML标签。你可以在稍后应用CSS来调剂内容的可视化后果以制造幻想的题目、引用、强调文字以及其他排版后果的外不雅。

因为个体可能须要某些视觉后果的原因,例如,用斜体显示某个科学名称,如Homo sapiens (智人),HTML中还保存了少许诸如<b> (粗体)和<i> (斜体)的专用可视HTML标签。假如你应用相似<b>或<i>的语义寄义的标签,不妨思虑一下恰当的样式强调(<em>) 或者加粗强调(strong>) 可否表现出更多的寄义。HTML也包括不为阅读者所见的语义元素,然则它对于网站开辟团队的幕后工作异常有效。诸如lass ID、 division. span和met标签等元素都可以让团队成员更便利地舆解、应用、可视化样式和从法式上掌握页面元素。许多样式表和编程技巧都请求对页面元素进行过细的语义定名,以便让内容的拜访性和灵话性更为通用。

3.层叠样式表

层叠样式表(CsS)许可Web宣布者在赐与图形设计师对每个HTML元素可视化显,示细节完整掌握权的同时,保存应用语义htML传递逻辑文档构造和寄义的伟大优势。CSS的感化就像是诸如Microsoft Word之类的文档处置法式中的样式表。换而言之,就是你可以应用分级的题目和其他样式来结构文档,接着只经由过程更改样式便可全局更改所有的样式。css 的工作方法雷同,尤其是当你应用网站所有页面共享的外部样式表时。例如,假如所有页面都链接了同–主CSS文件,那么你只需更改主样式表中的<h1>样式即可更改所有<h1>题目的字体、字号和色彩。

4.视昕内容

Web页面文件不直接包括图形和视听素材,然则应用图像和其他指导链接在阅读器中将图形和序言归并到最终的Web页面组合中。它们包括的这些链接以及替代文字(“alt”文本)或者长描写性(longdesc) 链接对于通用可用性和搜刮引擎可视性而言异常主要。Web用户不只会搜刮文字。搜刮引擎会应用带症结字的标签图像所对应的替代文字描写,存在视障的用户会基于替代文字来描写图像内容。恰当的语义标往能确保你的视听序言为阅读者中的每小我以及搜刮引擎最年夜规模地应用。

5.交互剧本

JavaScript是平日用来创立交互行动的说话。JavaScript 也是诸如Ajax之类原Web页面内容交付策略中的症结技巧。所有的JavaScript代码都应归于Web页面的“头部”(head)区域,然则假如你的代码很庞杂而且异常长,“真实的”页面内容就被挤到了几十行代码的下方,无法被搜刮引擎找到。假如你应用页面级其余JavaScript剧本(也被称为客户端剧本),则应当将所有的代码以最短的字节数放在某个链接文件中。运用此种方法,当应用长而庞杂的JavaScript时就不会错掉搜刮页面排名。

6.其他文档格局

除了HTML外,Web还支撑许多文档格局。PDF、Flash 和Shockwave是经常用来供给基本HTML无法供给的功效的格局。PDF文件深受那些应用文字处置和页面市同法式制造的文档的爱好,它能坚持源文档的外见,Flash和Shockwave供给了应用尺度HTML无法供给的交互性。平日,最好的方法是以无格局的HTML情势供给文档,这是因为标注可以供给更年夜的灵巧性,井且被设计为支撑通用可用性,然而有时,在必质果用其他格局供给的附加特点和功效之时,要确保能m到软件的可拜访性功效,Adobe花了年夜力量经由过程支撑语义标注、文本等价和症结宇川拜访性,专门将可拜访性功效归并到它的Web格局之中。

留意阅读器的分歧

用于表格、表单、定位和分列的HTML及CSS有时在针对分歧品牌和版本的Web阅读器时,其应用会稍有差别。这些细微的分歧平日不会被留意到,然则在更为精准和庞杂的Web页面结构中,也有可能会造成意想不到的成果。不要过于信任HTML、CSS、JavaScript、 Java 或任何插件的后果,除非你应用每个主流Web阅读器而且跨平台查看过你的Web页面的显示。

查看Web日记,或者应用诸如Google Analytics 之类的办事,来懂得在读者群中最广泛应用的是什么阅读器品牌、阅读器版本以及操作体系(Mac、Windows 和移动)。并非每个阅读器都支撑CSS的所有的功效,尤其是假如谁人功效很少应用或者近期才添加到CSS代码的官方尺度中。例如,尽管带暗影的文字是有用的CSS选项,然则所有的阅读器都不支撑它。

关于语义标注的小结

基于语义标注技巧和尺度的网站扶植HTML文档类型细心设置标注和编纂尺度,井且在全部开辟进程中保持应用这些尺度。当今的Web情况远不止桌面盘算机上的Internet Explorer或者Firefox-成百 上千的移动盘算机装备在为人们应用,天天都有许多查看和应用Web内容的全新方法涌现。根本上,遵守说话Web标注的通例做法和谨慎应用已经验证的页面代码和样式表的做法,是确保Web内容最好策略,它们能确保你的Web内容在将来应用性最广、可见性更强。

相關文章: