页面title

选择能简要概括文档内容的文字作为title文字，title核心内容放在前60个字符

分级标题

1.创建分级标题时，避免跳过级别，如h3直接跳到h5，但允许从低级别跳到高级别。

2.不用h1~h6标记副标题、标语，应该用段落或其他非标题元素

  1. <h1>Hello World</h1>//标题
  2. <p class="subhead">This is a html .</p>//副标题，class命名为subhead

页面构成

1.页眉

header:介绍性或导航性内容的区域。用来包括内容区块的标题，还有数据表格、搜素表单、相关logo

可选的属性role=“banner”显示地指出该页眉为页面级的，提高可访问性

  1. <body>
  2. <header role="banner">  //页面级的header
  3.     <nav>
  4.         <ul>
  5.             <li><a href="#">首页</a></li>
  6.             <li><a href="#">登录</a></li>
  7.         </ul>
  8.     </nav>
  9. </header>
  10. </body>
  1. <main role="main">
  2. <article>
  3.     <header>    //页面深处介绍性或导航性的内容
  4.         <h1>js介绍</h1>
  5.         <a href="#">js文档</a>
  6.         <nav>
  7.             <ul>
  8.                 <li><a href="#">语法</a></li>
  9.                 <li><a href="#">结构</a></li>
  10.             </ul>
  11.         </nav>
  12.     </header>
  13. </article>
  14. </mian>

注意1：不能在header里嵌套footer或另外的header，不能在footer或address嵌套header

注意2：只在必要时用header，header与h1~h6不能互换

2.标记导航

nav：仅标记文档主要的、基本的、重要链接群

可选的role=“navigation”提高可访问性，能帮助阅读器识别页面的主导航

应用情景：

  1. 传统导航栏
  2. 侧边导航栏
  3. 页内导航
  4. 翻页操作
  1. <nav role="navigation">
  2.     <ul>
  3.         <li><a href="#">主页</a></li>
  4.         <li><a href="#">文档</a></li>
  5.     </ul>
  6. </nav>
  8. <article>
  9.     <header>
  10.         <h1>Html5和css3</h1>
  11.         <nav>
  12.             <ul>
  13.                 <li><a href="#">Html5</a></li>
  14.                 <li><a href="#">css3</a></li>
  15.             </ul>
  16.         </nav>
  17.     </header>
  18.     <section>
  19.         <h1>Html5</h1>
  20.         <p>This is  a Html5 section.</p>
  21.     </section>
  22.     <section>
  23.         <h1>Css3</h1>
  24.         <p>This is  a Css3 section.</p>
  25.     </section>
  26.     <footer>
  27.         <a href="#">删除</a>
  28.         <a href="#">修改</a>
  29.     </footer>
  30. </article>
  32. <footer>
  33.         <p><small>版权</small></p>
  34. </footer>

注意1：不建议对辅助性页脚连接使用，若包含“商店位置”、“招聘信息”等重要链接可以用nav

注意2：不允许address嵌套nav

注意3:Html5不要用menu元素（用于发出一些命令的菜单，交互性的，用于与web应用程序中）代替nav元素

3.页面主要区域

main：主要内容，在一个页面仅使用一次

最好加上的属性role=”main”，代表页面主题

注意1：不能将mian放置在article、asiide、footer、header、nav中

注意2：role=”main”与ARIA地标有关，帮助阅读器定位页面的主要区域

4.创建文章

article:表示文档、页面、应用甚至是独立容器。一篇帖子、一则评论，甚至是一个交互性的小部件或小工具以及插件。

注意1：article可以嵌套article,原则上要内容相关联。也可以有非页面级的footer

注意2：一个页面可以有多个article

注意3：一个article可以包括多个section,section里可以嵌套article,可以包含独立的h1~h6

  1.  <article><!--外层article开始-->
  2.      <header>
  3.          <h1>My article</h1>
  4.          <p>Hello World </p>
  5.      </header>
  7.      <article><!--内层article开始-->
  8.          <header>
  9.              <h2>用户</h2>
  10.              <p>评论 </p>
  11.          </header>
  12.          <footer>
  13.              <p>发布时间</p>
  14.          </footer>
  15.     </article><!--内层article结束-->
  17.      <footer>
  18.          <p>This is my footer</p>
  19.      </footer>
  20. </article><!--外层article结束-->
  1. //表示插件
  2. <article>
  3.     <h1>这是一个内嵌页面</h1>
  4.     <object>
  5.         <embed src="#"  wigth="100" height="200"></embed>
  6.     </object>
  7. </article>

5.定义区块

section：用于对应用程序页面上的内容进行分块。具有像似主题的一组内容，通常包含标题和内容

注意：若只是为了添加样式或脚本行为，则用div而不是section

  1. <section>
  2.     <h1>this is an apple</h1>
  3.     <p>We can eat it!</p>
  4. </section>
  6. <article>
  7.     <h1>this is an apple</h1>
  8.     <p>We can eat it!</p>
  9.     <section>
  10.         <h2>Brand 1</h2>
  11.         <p>It is red</p>
  12.     </section>
  13.     <section>
  14.         <h2>Brand 2<</h2>
  15.         <p>It is red</p>
  16.     </section>
  17. </article>
  19. /*互换嵌套
  20. *article可以看成特殊的section元素，更加强调独立性
  21. *section元素强调分段或分块
  22. *如果一块内容相对比较独立，则用article；如果想将内容分为几段，则用section
  23. *不要将section作为设置页面样式的容器，那是div的工作
  24. *如果article、aside、nav元素更符合使用条件，不用section
  25. *没有标题内容，不要使用section元素
  26. */
  28. <section>
  29.     <h1>fruit</h1>
  30.     <article>
  31.         <h2>Apple</h2>
  32.         <p>Taste good!</p>
  33.     </article>
  34.     <article>
  35.         <h2>Banana</h2>
  36.         <p>Taste good!</p>
  37.     </article>
  38. </section>

6.指定附注栏

aside：内容与主题相关性不是很强的。引述、广告、相关产品列表等

可选的属性role=“complementary”,可表示侧栏附属信息

注意1：一般放在main内容之后

注意2：不允许将aside嵌套在address内

  1. /*第一种用法：在article以内*/
  2. <header/>
  3.     <h1>js入门</h1>
  4. <header>
  6. <article>
  7.     <h1>语法</h1>
  8.     <p>综述</p>
  9.     <aside>
  10.         <h1>名词解释</h1>
  11.         <p>语法：对一种语言来说很重要的内容体</p>
  12.     </aside>
  13. </article>
  15. /*第二种用法：侧边栏评论，附属信息，广告单元弹出框*/
  16. <aside>
  17.     <nav>
  18.         <h2>评论</h2>
  19.         <ul>
  20.             <li><a href="#">2017-7-7</a></li>
  21.             <li><a href="#">Adeline：我在学习</a></li>
  22.         </ul>
  23.     </nav>
  24. </aside>

7.页脚

footer：内容的底部。包括作者、 版权申明、隐私政策；附录、索引、许可协议

属性role=”contentinfo”,可表示页面的页脚。

注意1：不能在footer里嵌套header或者另一个footer，也不能将footer嵌套在header或address里

8.通用容器

div：没有语义

注意1：div对js实现特定的交互行为有帮助，主要是为便于css分配样式

9.地标角色ARIA改善可访问性

role：无障碍访问。

  1. role="banner"           //横幅，在页面级header中，只用一次
  2. role="navigation"       //导航，应添加到每个nav中
  3. role="main"             //主体，最好添加到main中，也可加到div中，只用一次
  4. role="complementary"    //补充，添加到aside或div中
  5. role="contentinfo"      //内容，在页面级页脚中，只用一次

10.为元素指定类别和ID名称

class:推荐使用为元素添加样式

id：唯一标识符，便于js访问

11.title属性

title属性：可以有声阅读，提升无障碍访问功能。可以为任何元素添加title元素，不过多为链接。

鼠标显示。IE7的alt属性也有相同功能，但如果同时出现，显示的是title的内容

12.分组元素

hgroup：将标题及其子标题按h1~h6进行分组。

  1. <article>
  2.     <header>
  3.         <hgroup>
  4.             <h1>主标题</h1>
  5.             <h2>子标题</h2>
  6.         </hgroup>
  7.         <p><time datetime="2017-07-07">2017-07-07</time></p>
  8.     </header>
  9.     <div>内容</div>
  10.     <footer>
  11.         <p>作者</p>
  12.     </footer>
  13. </article>

Html5与Css3知识点拾遗（二）的更多相关文章

  1. Html5与Css3知识点拾遗（八）

    css5新增的元素与属性 表单内元素的属性 1. form属性 之前必须书写在表单内部.而在Html5中,可以放在任何位置,为元素指定一个form属性,属性值为该表单的id,就可以声明该元素属于指定表 ...

  2. Html5与Css3知识点拾遗（七）

    布局 实例:规范的命名和编排 <body> <div class="page"><!--page开始--> <header class=& ...

  3. Html5与Css3知识点拾遗（六）

    web字号 px() 百分比(较常用) em(最常用):一般1em=16px,相对单位.以父元素作参照系,父元素大小是不确定的 body{ font-size:100%; /*父元素默认为16px*/ ...

  4. Html5与Css3知识点拾遗（五）

    css3更新的颜色 RGBA:红.绿.蓝.不透明度 rgba(89,0,127,0.4); HSL和HSLA:色相.饱和度.亮度.不透明度 hsl(282,100%,25%); hsl(282,100 ...

  5. Html5与Css3知识点拾遗（九）

    css布局 控制元素的显示类型和可见性 块级元素 dispaly:block: 行内元素(不能设置宽度) display:inline: 不接受padding设置,但padding-top和paddi ...

  6. Html5与Css3知识点拾遗（四）

    web图像 JPEG:适用于大多数照片,颜色较多,可接受质量损失的图像 PNG-8:适用标识.重复的图案以及其他颜色较少的图像或具有连续颜色的图像 PNG-24:不支持颜色更多的图像,适用与颜色丰富且 ...

  7. Html5与Css3知识点拾遗（三）

    文本 small:包括免责申明.注意事项.法律限制.版权信息,只适用于短于,常包含在页面级的footer里 H5对i和b的重新定义 b:提醒文字.不传达任何额外的语气.文档摘要关键词.评论中的产品名. ...

  8. Html5与Css3知识点拾遗（一）

    1.元素 空元素: 可选的空格空格和斜杠 <img src="x.jpg" width="300" alt="pic" /> & ...

  9. HTML5与CSS3知识点总结

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 原文链接:https://blog.csdn.net/we ...

随机推荐

  1. vue（ajax：axios中文文档）

    axios 基于http客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 监听请求和返回 ...

  2. C# devexpress gridcontrol 分页 控件制作

    这个小小的功能实现起来还是有一点点复杂, 分页单独一个usercontrol 出来,导致查询换页 与gridcontrol页面分离,  一般通过换页事件通知girdcontrol 做出查询 查询来说有 ...

  3. linux 使用笔记3

    解决linux下打开txt乱码问题 在Linux下要阅读windows生成的txt文件,需要通过iconv进行字符转化 iconv -f gb2312 -t utf8 ./读书笔记.txt > ...

  4. 使用Loadrunner对IBM MQ进行性能测试

    一.概述         使用Loadrunner对IBM MQ进行性能测试,需要用到java vuser以及java编码知识.此次先介绍什么是IBM MQ,然后java vuser的使用与配置细节, ...

  5. 把一行数字(readline)读进List并以科学计数法输出(write)到文件

    主要过程是读取的时候是一行字符串,需要Strip去除空格等,然后split变成一个List. 注意这时候数据结构是List但是每一个元素是Str性质的. 所以需要map(float,List)  把这 ...

  6. [规则原则定理]规则原则定理章１CAP原则

    CAP原则又称CAP定理,指的是在一个分布式系统中,Consistency(一致性). Availability(可用性).Partition tolerance(分区容错性),三者不可兼得 分布式系 ...

  7. Windows server 2008 被ntlmssp安装攻击 解决

    进行NTLM策略控制,彻底阻止LM响应

  8. H.264, MPEG4之间的关系

    百度百科搜索 H.264 H.264是国际标准化组织(ISO)和国际电信联盟(ITU)共同提出的继MPEG4之后的新一代数字视频压缩格式.H.264是ITU-T以H.26x系列为名称命名的视频编解码技 ...

  9. 【Linux】开机自动启动脚本

    Linux下(以RedHat为范本)添加开机开机自动启动脚本有两种方式; 本例系统:Linux(CentOS 7.2) 方法一 使用 /etc/rc.d/rc.local,自动启动脚本 #!/bin/ ...

  10. 哈希与字典树与KMP

    hash讲解 主要记录hash的公式: ; i<=len; i++) { Hash[i]=(Hash[i-]*)%mod)%mod; } 求hash的公式是这个,怎么求一小段的hash值呢? ; ...