`
leonzhx
  • 浏览: 796901 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

What Does It All Mean?

 
阅读更多

1.  In Activating Browser Modes with Doctype , Henri Sivonen summarizes the different modes browser will work in based on the doctype:

  Quirks Mode

In the Quirks mode, browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s.

  Standards Mode

In the Standards mode, browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser. HTML5 calls this mode the “no quirks mode.”

  Almost Standards Mode

Firefox, Safari, Chrome, Opera (since 7.5) and IE8 also have a mode known as “Almost Standards mode,” that implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification. HTML5 calls this mode the “limited quirks mode.”

 

2.  This is the HTML5 doctype:

<!DOCTYPE html>
 

which is shorter and sweeter and also triggers “standards mode” in all modern browsers.

 

 

3.  Elements in HTML5 are always in the XHTML namespace. You no longer need to declare xmlns=“http://www.w3.org/1999/xhtml” in <html> tag. lang and xml:lang attributes in <html> tag both define the language of this HTML page. This is a vestige of XHTML. Only the lang attribute has any effect in HTML5. You can keep the xml:lang attribute if you like, but if you do, you need to ensure that it contains the same value as the lang attribute.

 

4.  A n HTTP header like this:

Content-Type: text/html; charset="utf-8"

 says that the web server thinks it’s sending you an HTML document and the document uses the UTF-8 character encoding. However, few authors actually have control over their HTTP server. So HTML 4 provided a way to specify the character encoding in the HTML document itself:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 Both of these techniques still work in HTML5. The HTTP header is the preferred method, and it overrides the <meta> tag if present. And it got a little easier in HTML5:

<meta charset="utf-8" /> 

 Which itself should be encoded in ASCII( http://www.w3.org/TR/html4/charset.html#h-5.2.2 )

 

5.  Link relations are to explain why you’re pointing to another resource. They may tell browsers:

  a)   it’s a stylesheet containing CSS rules that your browser should apply to this document.

  b)   it’s a feed that contains the same content as this page, but in a standard subscribable format.

  c)   it’s a translation of this page into another language.

  d)   it’s the same content as this page, but in PDF format.

  e)   it’s the next chapter of an online book of which this page is also a part.

 

6.  HTML5 breaks link relations into two categories : Links to external resources are links to resources that are to be used to augment the current document, and hyperlink links are links to other documents. The exact behavior for links to external resources depends on the exact relationship, as defined for the relevant link type.

 

7.   Most often, link relations are seen on <link> elements within the <head> of a page. Some link relations can also be used on <a> elements , See the full chart of link relations to check where you can use specific rel values.

 

8.  One small optimization you can make in HTML5 is to drop the type attribute from the CSS LINK element. There’s only one stylesheet language for the web, CSS, so that’s the default value for the type attribute.

9.  The rel="alternate" link relation has always been a strange hybrid of use cases, In HTML5, its definition has been clarified and extended to more accurately describe existing web content. Using rel="alternate" in conjunction with type=application/atom+xml indicates an Atom feed for the current page: 

 

<link rel="alternate"

       type="application/atom+xml"

       title="My Weblog feed"

       href="/feed/" />

 But you can also use rel="alternate" in conjunction with other type attributes to indicate the same content in another format, like PDF.

10.   The correct way to link to translations of documents is to use rel="alternate" in conjunction with the hreflang attribute to specify the language of the linked document.

11. rel="author" is used to link to information about the author of the page. This can be a mailto: address , though it doesn’t have to be. It could simply link to a contact form or “about the author” page. 

 

12. HTML 4 defined rel="start" , rel="prev" , and rel="next" to define relations between pages that are part of a series. HTML5 includes rel="next" and rel="prev" , just like HTML 4, and supports rel="previous" for backward compatibility.

 

13.   rel="icon" is usually found together with shortcut , like so:

<link rel="shortcut icon" href="/favicon.ico">

All major browsers support this usage to associate a small icon with the page. Usually it’s displayed in the browser’s location bar next to the URL, or in the browser tab, or both.

 

14.   rel="license" indicates that the referenced document provides the copyright license terms under which the current document is provided.

 

15.  rel="nofollow" indicates that the link is not endorsed by the original author or publisher of the page, or that the link to the referenced document was included primarily because of a commercial relationship between people affiliated with the two pages. The thinking was that if “nofollow” links did not pass on PageRank, spammers would give up trying to post spam comments on weblogs. That didn’t happen, but rel="nofollow" persists.

16. rel="noreferrer" indicates that no referrer information is to be leaked when following the link.

 

17.  rel="search" indicates that the referenced document provides an interface specifically for searching the document and its related resources.” If you want rel="search" to do anything useful, it should point to an OpenSearch
 document that describes how a browser could construct a URL to search the current site for a given keyword.

18. rel="tag" indicates that the tag that the referenced document represents applies to the current document.” Browsers do not do anything special with them; they’re really designed for search engines to use as a signal of what the page is about.

 

19. HTML5 also defines new semantic elements:

  a)   The <section> element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, contact information.

 

  b)   The <nav> element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to common pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.

 

  c)   The <article> element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

 

  d)   The <aside> element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

 

  e)   The <hgroup> element represents the heading of a section. The element is used to group a set of h1 h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

 

  f)   The <header> element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1 h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

 

  g)   The <footer> element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Footers don’t necessarily have to appear at the end of a section, though they usually do. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

 

  h)  T he <time> element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.

 

  i)   The <mark> element represents a run of text in one document marked or highlighted for reference purposes.

 

20.   All browsers render unknown elements inline, as if they had a display:inline CSS rule. There are several new elements defined in HTML5 which are block-level elements. That is, they can contain other block-level elements. If you want to use these elements in older browsers, you will need to define the display style manually:

article,aside,details,figcaption,figure,

footer,header,hgroup,menu,nav,section {

    display:block;

}

 However, prior to version 9, Internet Explorer did not apply any styling on unknown elements.

 

 

21.   If IE 8 doesn’t explicitly recognize the element name, it will insert the element into the DOM as an empty node with no children . All the elements that you would expect to be direct children of the unknown element will actually be inserted as siblings instead. If you create a dummy  <article> element with JavaScript before you use it in your page, Internet Explorer will magically recognize the  <article> element and let you style it with CSS. There is no need to ever insert the dummy element into the DOM . Simply creating the element once (per page) is enough to teach IE to style the element it doesn’t recognize:

<!--[if lt IE 9]>

<script>

  var e = ("abbr,article,aside,audio,canvas,datalist,details," +

    "figure,footer,header,hgroup,mark,menu,meter,nav,output," +

    "progress,section,time,video").split(',');

  for (var i = 0; i < e.length; i++) {

    document.createElement(e[i]);

  }

</script>

<![endif]-->

 You can also reference a minified version:

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js
"></script>

<![endif]-->

 

22.   In HTML 4,  <h1> <h6> elements were the only way to create a document outline. However it does not provide a way to mark up a subheading without adding it to the document outline. The  <hgroup> element acts as a wrapper for two or more related heading elements. Headings in one group only create a single node in the document outline. Thus you can group your heading and its subheading(marked up as a smaller heading) into one group.

 

23.   The HTML5 specification defines an algorithm for generating a document outline that incorporates the new semantic elements in HTML5 . The HTML5 algorithm says that an <article> or <nav> element creates a new section, that is, a new node in the document outline. And in HTML5 , each section can have its own <h1> element. And the <article> element can have its own <header> element. You can test your own pages in the HTML5 Outliner to ensure that you’re using the heading elements properly.

 

24.   There are three parts to a <time> element:

  a)   A machine-readable timestamp

  b)   Human-readable text content

  c)   An optional pubdate flag 

<time datetime="2009-10-22T13:59:47-04:00" pubdate>

  October 22, 2009 1:59pm EDT

</time> 

 The pubdate attribute is a Boolean attribute. It means one of two things. If the <time> element is in an <article> element, it means that this timestamp is the publication date of the article. If the  <time> element is not in an <article> element, it means that this timestamp is the publication date of the entire document. 

 

25.   People with disabilities care about the semantics of site navigation. Once they get past the page title, the next important pieces of information about a page are the major navigation links. If they want to navigate quickly, they’ll tell their screenreader to jump to the navigation bar and start reading. Thus being able to determine navigation links programmatically is important. HTML5 provides a semantic way to mark up navigation sections: the  <nav> element.

 

26.   The HTML5 specification says, “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

分享到:
评论

相关推荐

    Scratch图形化编程语言入门与进阶指南

    内容概要:本文全面介绍了Scratch编程语言,包括其历史、发展、特点、主要组件以及如何进行基本和进阶编程操作。通过具体示例,展示了如何利用代码块制作动画、游戏和音乐艺术作品,并介绍了物理模拟、网络编程和扩展库等功能。 适合人群:编程初学者、教育工作者、青少年学生及对编程感兴趣的各年龄段用户。 使用场景及目标:①帮助初学者理解编程的基本概念和逻辑;②提高学生的创造力、逻辑思维能力和问题解决能力;③引导用户通过实践掌握Scratch的基本和高级功能,制作个性化作品。 其他说明:除了基础教学,文章还提供了丰富的学习资源和社区支持,帮助用户进一步提升技能。

    mmexport1734874094130.jpg

    mmexport1734874094130.jpg

    基于simulink的悬架仿真模型,有主动悬架被动悬架天棚控制半主动悬架 1基于pid控制的四自由度主被动悬架仿真模型 2基于模糊控制的二自由度仿真模型,对比pid控制对比被动控制,的比较说明

    基于simulink的悬架仿真模型,有主动悬架被动悬架天棚控制半主动悬架 [1]基于pid控制的四自由度主被动悬架仿真模型 [2]基于模糊控制的二自由度仿真模型,对比pid控制对比被动控制,的比较说明 [3]基于天棚控制的二自由度悬架仿真 以上模型,说明文档齐全,仿真效果明显

    【组合数学答案】组合数学-苏大李凡长版-课后习题答案

    内容概要:本文档是《组合数学答案-网络流传版.pdf》的内容,主要包含了排列组合的基础知识以及一些经典的组合数学题目。这些题目涵盖了从排列数计算、二项式定理的应用到容斥原理的实际应用等方面。通过对这些题目的解析,帮助读者加深对组合数学概念和技巧的理解。 适用人群:适合初学者和有一定基础的学习者。 使用场景及目标:可以在学习组合数学课程时作为练习题参考,也可以在复习考试或准备竞赛时使用,目的是提高解决组合数学问题的能力。 其他说明:文档中的题目覆盖了组合数学的基本知识点,适合逐步深入学习。每个题目都有详细的解答步骤,有助于读者掌握解题思路和方法。

    YOLO算法-雨水排放涵洞模型数据集-1000张图像带标签-.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    操作系统实验 Ucore lab5

    操作系统实验 Ucore lab5

    学生成绩管理系统软件界面

    基于matlab开发的学生成绩管理系统GUI界面,可以实现学生成绩载入,显示,处理及查询。

    NVR-K51-BL-CN-V4.50.010-210322

    老版本4.0固件,(.dav固件包),支持7700N-K4,7900N-K4等K51平台,升级后出现异常或变砖可使用此版本。请核对自己的机器信息,确认适用后在下载。

    YOLO算法-塑料数据集-7张图像带标签-塑料.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    YOLO算法-杂草检测项目数据集-3970张图像带标签-杂草.zip

    YOLO算法-杂草检测项目数据集-3970张图像带标签-杂草.zip

    E008 库洛米(3页).zip

    E008 库洛米(3页).zip

    基于西门子 PLC 的晶圆研磨机自动控制系统设计与实现-论文

    内容概要:本文详细阐述了基于西门子PLC的晶圆研磨机自动控制系统的设计与实现。该系统结合了传感器技术、电机驱动技术和人机界面技术,实现了晶圆研磨过程的高精度和高效率控制。文中详细介绍了控制系统的硬件选型与设计、软件编程与功能实现,通过实验测试和实际应用案例验证了系统的稳定性和可靠性。 适合人群:具备一定的自动化控制和机械设计基础的工程师、研究人员以及从事半导体制造的技术人员。 使用场景及目标:本研究为半导体制造企业提供了一种有效的自动化解决方案,旨在提高晶圆研磨的质量和生产效率,降低劳动强度和生产成本。系统适用于不同规格晶圆的研磨作业,可以实现高精度、高效率、自动化的晶圆研磨过程。 阅读建议:阅读本文时,重点关注晶圆研磨工艺流程和技术要求,控制系统的硬件和软件设计方法,以及实验测试和结果分析。这将有助于读者理解和掌握该自动控制系统的实现原理和应用价值。

    YOLO算法-禾本科杂草数据集-4760张图像带标签.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    深圳建筑安装公司“挖掘机安全操作规程”.docx

    深圳建筑安装公司“挖掘机安全操作规程”

    YOLO算法-汽车数据集-120张图像带标签-汽车.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    大题解题方法等4个文件.zip

    大题解题方法等4个文件.zip

    保障性安居工程考评内容和评价标准.docx

    保障性安居工程考评内容和评价标准.docx

    监督机构检查记录表.docx

    监督机构检查记录表.docx

    (177588850)基于java+mysql+swing的学生选课成绩信息系统

    该项目适合初学者进行学习,有效的掌握java、swing、mysql等技术的基础知识。资源包含源码、视频和文档 资源下载|如果你正在做毕业设计,需要源码和论文,各类课题都可以,私聊我。 商务合作|如果你是在校大学生,正好你又懂语言编程,或者你可以找来需要做毕设的伙伴,私聊我。。内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

    218) Leverage - 创意机构与作品集 WordPress 主题 2.2.7.zip

    218) Leverage - 创意机构与作品集 WordPress 主题 2.2.7.zip

Global site tag (gtag.js) - Google Analytics