学习Html5元素

�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适合包含块级内容。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义。(即使我们用css样式的id和c...
    浪漫歌阅读 376评论 0 0
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,511评论 32 459
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,097评论 2 19
  • 撑着伞,背个背包,走在被冲洗一新的天地里,看着绿油油的树,听着雨滴答滴答的声音,越发觉得神清气爽了,连脚步声都是欢...
    随喜_阅读 346评论 0 0