Html5与Css3页面构成（二）

最新推荐文章于 2020-05-20 16:26:52 发布

qq_34664510

最新推荐文章于 2020-05-20 16:26:52 发布

阅读量514

点赞数

分类专栏： html5 css3

本文链接：https://blog.csdn.net/qq_34664510/article/details/73850542

版权

css3 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

html5

17 篇文章 0 订阅

订阅专栏

页面title
选择能简要概括文档内容的文字作为title文字，title核心内容放在前60个字符
分级标题
1.创建分级标题时，避免跳过级别，如h3直接跳到h5，但允许从低级别跳到高级别。
2.不用h1~h6标记副标题、标语，应该用段落或其他非标题元素

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

页面构成

1.页眉
header:介绍性或导航性内容的区域。用来包括内容区块的标题，还有数据表格、搜素表单、相关logo
可选的属性role=“banner”显示地指出该页眉为页面级的，提高可访问性

<body>
<header role="banner">  //页面级的header
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">登录</a></li>
        </ul>
    </nav>
</header>
</body>

<main role="main">
<article>
    <header>    //页面深处介绍性或导航性的内容
        <h1>js介绍</h1>
        <a href="#">js文档</a>
        <nav>
            <ul>
                <li><a href="#">语法</a></li>
                <li><a href="#">结构</a></li>
            </ul>
        </nav>
    </header>
</article>
</mian>

注意1：不能在header里嵌套footer或另外的header，不能在footer或address嵌套header
注意2：只在必要时用header，header与h1~h6不能互换

2.标记导航
nav：仅标记文档主要的、基本的、重要链接群
可选的role=“navigation”提高可访问性，能帮助阅读器识别页面的主导航
应用情景：

传统导航栏
侧边导航栏
页内导航
翻页操作

<nav role="navigation">
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">文档</a></li>
    </ul>
</nav>

<article>
    <header>
        <h1>Html5和css3</h1>
        <nav>
            <ul>
                <li><a href="#">Html5</a></li>
                <li><a href="#">css3</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h1>Html5</h1>
        <p>This is  a Html5 section.</p>
    </section>
    <section>
        <h1>Css3</h1>
        <p>This is  a Css3 section.</p>
    </section>
    <footer>
        <a href="#">删除</a>
        <a href="#">修改</a>
    </footer>
</article>

<footer>
        <p><small>版权</small></p>
</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

 <article><!--外层article开始-->
     <header>
         <h1>My article</h1>
         <p>Hello World </p>
     </header>

     <article><!--内层article开始-->
         <header>
             <h2>用户</h2>
             <p>评论 </p>
         </header>
         <footer>
             <p>发布时间</p>
         </footer>
    </article><!--内层article结束-->

     <footer>
         <p>This is my footer</p>
     </footer>
</article><!--外层article结束-->

//表示插件
<article>
    <h1>这是一个内嵌页面</h1>
    <object>
        <embed src="#"  wigth="100" height="200"></embed>
    </object>
</article>

5.定义区块
section：用于对应用程序页面上的内容进行分块。具有像似主题的一组内容，通常包含标题和内容
注意：若只是为了添加样式或脚本行为，则用div而不是section

<section>
    <h1>this is an apple</h1>
    <p>We can eat it!</p>
</section>

<article>
    <h1>this is an apple</h1>
    <p>We can eat it!</p>
    <section>
        <h2>Brand 1</h2>
        <p>It is red</p>
    </section>
    <section>
        <h2>Brand 2<</h2>
        <p>It is red</p>
    </section>
</article>

/*互换嵌套
*article可以看成特殊的section元素，更加强调独立性
*section元素强调分段或分块
*如果一块内容相对比较独立，则用article；如果想将内容分为几段，则用section
*不要将section作为设置页面样式的容器，那是div的工作
*如果article、aside、nav元素更符合使用条件，不用section
*没有标题内容，不要使用section元素
*/

<section>
    <h1>fruit</h1>
    <article>
        <h2>Apple</h2>
        <p>Taste good!</p>
    </article>
    <article>
        <h2>Banana</h2>
        <p>Taste good!</p>
    </article>
</section>

6.指定附注栏
aside：内容与主题相关性不是很强的。引述、广告、相关产品列表等
可选的属性role=“complementary”,可表示侧栏附属信息
注意1：一般放在main内容之后
注意2：不允许将aside嵌套在address内

/*第一种用法：在article以内*/
<header/>
    <h1>js入门</h1>
<header>

<article>
    <h1>语法</h1>
    <p>综述</p>
    <aside>
        <h1>名词解释</h1>
        <p>语法：对一种语言来说很重要的内容体</p>
    </aside>
</article>

/*第二种用法：侧边栏评论，附属信息，广告单元弹出框*/
<aside>
    <nav>
        <h2>评论</h2>
        <ul>
            <li><a href="#">2017-7-7</a></li>
            <li><a href="#">Adeline：我在学习</a></li>
        </ul>
    </nav>
</aside>

7.页脚
footer：内容的底部。包括作者、版权申明、隐私政策；附录、索引、许可协议
属性role=”contentinfo”,可表示页面的页脚。
注意1：不能在footer里嵌套header或者另一个footer，也不能将footer嵌套在header或address里

8.通用容器
div：没有语义
注意1：div对js实现特定的交互行为有帮助，主要是为便于css分配样式

9.地标角色ARIA改善可访问性
role：无障碍访问。

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

10.为元素指定类别和ID名称
class:推荐使用为元素添加样式
id：唯一标识符，便于js访问

11.title属性
title属性：可以有声阅读，提升无障碍访问功能。可以为任何元素添加title元素，不过多为链接。
鼠标显示。IE7的alt属性也有相同功能，但如果同时出现，显示的是title的内容
12.分组元素
hgroup：将标题及其子标题按h1~h6进行分组。

<article>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>子标题</h2>
        </hgroup>
        <p><time datetime="2017-07-07">2017-07-07</time></p>
    </header>
    <div>内容</div>
    <footer>
        <p>作者</p>
    </footer>
</article>

qq_34664510

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Html5与Css3页面构成（二）

页面title 选择能简要概括文档内容的文字作为title文字，title核心内容放在前60个字符分级标题 1.创建分级标题时，避免跳过级别，如h3直接跳到h5，但允许从低级别跳到高级别。 2.不用h1~h6标记副标题、标语，应该用段落或其他非标题元素<h1>Hello World</h1>//标题<p class="subhead">This is a html .</p>//副标题，
复制链接

扫一扫