关闭

HTML5+CSS3-第一节(文档类型声明、新增标签)

619人阅读 评论(0) 收藏 举报
分类:

H5+CSS3

1、 约等于HTML+CSS3+javascript+api(接口)

2、 新认识:

兼容性、实用性和用户优先

化繁为简

3、 文档类型声明:

<!doctypehtml>-------大写也可以

<html>

<head>

<meta charset=”utf-8”>-----字符编码设置

<title>网站标题</title>

</head>

<body>

</body>

</html>

4、 新增标签:(结构标签、双标记)

(1)<article></article>定义文章,一块独立的内容

(2)<header></header>定义一个页面或者一块区域的头部

(3)<nav></nav>定义导航链接

(4)<section></section>定义一块区域(对内容进行分块)-通常和标题h1---h6结合使用

(5)<aside></aside>定义页面内部的侧边栏

注意:<article>和<section>区别:

<article>定义整块,<section>强调分块。这两者可以互相嵌套使用

 

5、 使用新标签的网站整体布局:

例子:

<!--整个-->

<section>

<!--banner-->

    <header>

             <imgsrc="image/bgheader.jpg">

       <div class="title">个人<span>的BLOG</span></div>

    </header>

    <!--导航-->

    <nav>

       <ul>

           <li class="aNow"><a href="">博客首页</a></li>

           <li><a href="">关于我</a></li>

       </ul>

    </nav>

 <div class="main">

         <!--左侧-->

         <article>

             <mark>晚上</mark>

             <p> 早上起来脑袋都昏沉,直到现在都是。</p>

    </article>

    <!--右侧-->

         <aside>

             <ul>

                <liclass="rNow"><a href="">日志</a></li>

           <li><a href="">相册</a></li>

       </ul>

    </aside>

 </div>

         <!--底部-->

         <footer>

    版权归小鱼儿所有

   <hr>

    法律条文 联系我们 客户意见 商户合作

    </footer>

</section>

 

6、 其他标签:

1<figqure></figqure>定义一组媒体内容及标题

2<figcaption></figcaption>定义figqure元素的标题(通常这两个联合使用)。例子:

<figqure>

          <figcaption>标题</figcaption>

       <dl>

           <dt>老师:做完了吗?</dt>

           <dd>学生:没有</dd>

        </dl>

     </figqure>

 

3<hgroup></hgroup>定义文件一个区块的信息(和h1—h6标题结合使用)。例子:

<hgroup>

       <h1>关于我们</h1>

       <h2>新闻中心</h2>

       <h3>通知公告</h3>

       <h4>案例分享</h4>

       <h5>联系我们</h5>

       </hgroup>

 

4<dialog></dialog>定义一对话框(和<dl><dt></dt><dd></dd></dl>一起使用)。例子:

<dialog>

             <dt>老师:做完了吗?</dt>

       <dd>学生:没有</dd>

   </dialog>

 

5<mark></mark>突出显示或高亮显示的文字(默认显示黄的背景)--和h4中<span></span>效果一样。例子:

<mark>老师与学生的对话</mark>

 

6<details></details>表示点击获取更多信息,在中间加上<summary>标题</summary>配合使用;(兼容性不好)例子:

<details>

    <summary>点击更多</summary>

            <p>如果您的计算机或网络受到防火墙或者代理服务器的保护,请确认 Firefox 已被授权访问网络。</p>

    </details>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:62780次
    • 积分:1503
    • 等级:
    • 排名:千里之外
    • 原创:88篇
    • 转载:18篇
    • 译文:0篇
    • 评论:2条