�1、html元素(包含lang属性,该属性不是必需的,但推荐加上)、�head元素、�说明字符编码的meta元素 、title元素 、body元素,以下为Html的基本格式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初学Html5</title>
</head>
<body>
</body>
</html>
初学Html5
2、<main 元素>大多数网页都有一些不同的区块,如页眉、页脚、包含额外信息的附注栏、指向其他网站的链接,等等。不过,一个页面只有一个部分代表其主要内容。可以将这样的内容包在main元素中,该元素在一个页面仅使用一次。
3、<article 元素>article元素表示文档、页面、应用或网站中一个独立的容器,原则上是可独立分配或可再用的,就像聚合内容中的各部分。它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客条目、一则用户提交的评论、一个交互式的小部件或小工具,或者任何其他独立的内容项。
4、<section 元素>section元素代表文档或应用的一个一般的区块。在这里,section是具有相似主题的一组内容,通常包含一个标题。section的例子包含章节、标签式对话框中的各种标签页、论文中带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。
5、<aside 元素>使用aside的例子还包括重要引述、侧栏、指向相关文章的一组链接(通常针对新闻网站)、广告、nav元素组(如博客的友情链接),Twitter源、相关产品列表(通常针对电子商务网站),等等。
6、<footer 元素>当你想到页脚的时候,你大概想的是页面底部的页脚(通常包括版权声明,可能还包括指向隐私政策页面的链接以及其他类似的内容)。HTML5的footer元素可以用在这样的地方,但它同header一样,还可以用在其他的地方。footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body时,它才是整个页面的页脚。 <提 示:不能在footer里嵌套header或另一个footer。同时,也不能将footer嵌套在header或address元素里。注意只有页面级页脚有role="contentinfo">
7、<div 元素>有时需要在一段内容外围包一个容器,从而可以为其应用CSS样式或JavaScript效果。如果没有这个容器,页面就会不一样。在评估内容的时候,考虑使用article、section、aside、nav等元素,却发现它们从语义上讲都不合适。这时,你真正需要的是一个通用容器,一个完全没有任何语义含义的容器。这个容器就是div(来自division一词)元素,有了div,就可以为其添加样式或JavaScript效果了。(div是块级内容的无语义容器)
8、一些可用的地标角色
<1>role="banner"(横幅) 面向全站的内容,通常包含网站标志、网站赞助者标志、全站搜索工具等。横幅通常显示在页面的顶端,而且通常横跨整个页面的宽度 <将其添加到页面级的header元素,每个页面只用一次>
<2>role="navigation"(导航) 文档内不同部分或相关文档的导航性元素(通常为链接)的集合 <与nav元素是对应关系,应将其添加到每个nav元素或其他包含导航性链接的容器。这个角色可在每个页面上使用多次,但是同nav一样,不要过度使用该属性>
<3>role="main"(主体)文档的主要内容 <与main元素是对应关系。最好将其添加到main元素,也可以添加到其他表示主体内容的元素(可能是div)。在每个页面仅使用一次>
<4>role="complementary"(补充性内容)文档中作为主体内容补充的支撑部分。它对区分主体内容是有意义的 <与aside元素是对应关系。应将其添加到aside或div元素(前提是该div仅包含补充性内容)。可以在一个页面里包含多个complementary角色,但不要过度使用>
<5>role="contentinfo"(内容信息)包含关于文档的信息的大块可感知区域这类信息的例子包括版权声明和指向隐私权声明的链接等 <将其添加至整个页面的页(通常为footer元素)。每个页面仅使用一次>
9、<small 元素>根据HTML5,small表示细则一类的旁注(side comment),“通常包括免责声明、注意事项、法律限制、版权信息等。有时我们还可以用它来表示署名,或者满足许可要求。”small通常是行内文本中的一小块,而不是包含多个段落或其他元素的大块文本。
10、标记重要和强调的文本-<strong 元素 em 元素>strong元素表示内容的重要性,而em则表示内容的着重点。根据内容需要,这两个元素既可以单独使用,也可以一起使用。 <HTML5中重新定义的b和i元素HTML5强调元素的语义,而非表现。b和i元素是早期HTML遗留下来的产物,它们分别用于将文本变为粗体和斜体(那时CSS还未出现)。HTML 4和XHTML 1当然抛弃了它们,因为它们本质上是用于表现的。当时的规范建议编码人员用strong替代b,用em替代i。不过,事实证明,em和strong有时在语义上并不合适。为此,HTML5重新定义了b和i。传统出版业里的某些排版规则在现有的HTML语义中还找不到对应物,其中就包括用斜体表示植物学名(如“Ulmus americanais the Massachusetts state tree.”)、具体的交通工具名称(如“We rode theOrient Express.”)及外来语(如“The couple exhibited ajoie de vivrethat was infectious.”)。这些词语不是为了强调而加上斜体的,只是样式上的惯例。为了应对这些情况,HTML5没有创建一些新的语义化元素(进一步把事情搞复杂),而是采取了一种很实际的做法,直接利用现有元素:em用于所有层次的强调,strong用于表示重要性,而其他情况则使用b和i。这意味着,尽管b和i并不包含任何明显的语义,但读者仍能发现它们与周边文字的差别。而且你还可以通过CSS改变它们粗体或斜体的样式。HTML5强调,b和i应该是其他元素(如strong、em、cite等)都不适用时的最后选择。>
11、<b 元素>b元素表示出于实用目的提醒读者注意的一块文字,不传达任何额外的重要性,也不表示其他的语态和语气,用于如文档摘要里的关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语等。------b元素默认显示为粗体。
12、<i 元素>i元素表示一块不同于其他文字的文字,具有不同的语态或语气,或其他不同于常规之处,用于如分类名称、技术术语、外语里的惯用语、翻译的散文、西方文字中的船舶名称等。------i元素默认显示为斜体。
13、<figure 元素 figcaption 元素>你一定在报纸、杂志、报告等其他媒介上看到过图。通常,图是由页面上的文本引述出来的。通过引入figure和figcaption,HTML5可以表示图可以是图表、照片、图形、插图、代码片段,以及其他类似的独立内容。figcaption是figure的标题,可选,出现在figure内容的开头或结尾处。
14、<cite 元素>使用cite元素可以指明对某内容源的引用或参考。例如,戏剧、脚本或图书的标题,歌曲、电影、照片或雕塑的名称,演唱会或音乐会,规范、报纸或法律文件等----cite元素默认以斜体显示
15、<blockquote 元素 q 元素> 引述文本--有两个特殊的元素用以标记引述的文本。blockquote元素表示单独存在的引述(通常更长,但也可能不是),它默认显示在新的一行。而q元素则用于短的引述,如句子里面的引述。
16、<address 元素>address元素是用以定义与HTML页面或页面一部分(如一篇报告或新文章)有关的作者、相关人士或组织的联系信息,通常位于页面底部或相关部分内。
17、<ins 元素 del 元素 s 元素>有时可能需要将在前一个版本之后对页面内容的编辑标出来,或者对不再准确、不再相关的文本进行标记。有两种用于标注编辑的元素:代表添加内容的ins元素和标记已删除内容的del元素。这两个元素既可以单独使用,也可以一起使用。s元素表示不在准确的内容。
18、<mark 元素>我们都在某些时候用过荧光笔——也许是在复习考试,抑或是在审查合同。无论是哪种情况,荧光笔标记的都是一些与任务有关的关键字词。HTML5使用新的mark元素实现同样的目的。试着将mark想象成荧光笔的语义化对照物。换句话说,重要的是对特定的词语进行标注,与它们如何显示无关。
19、<br 元素>插入换行的方法在需要换行的地方输入<br/>。没有单独的br结束标签,因为它是所谓的空元素,没有任何内容。
20、<span 元素>同div一样,span元素是没有任何语义的。不同的是,span只适合包围字词或短语内容,而div适合包含块级内容。