码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习笔记2——HTML 组成结构

时间:2016-07-06 23:22:52      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:

  一、HTML可分为3个部分:1.<DOCTYPE ……>

                <html>

                  2.<head>

                  ……

                   </head>

                  3.<body>

                  ……

                   </body>

              </html>

  二、关于DOCTYPE:

    之前是分了3种:1,严格:……strict.dtd

             2.兼容:……transitional.dtd

             3.……framset.dtd

    严格可使得浏览器之间不兼容的情况少一些,更加规范~

    貌似HTML5的比较简单,就直接写<!DOCTYPE html>

嗯,后续再去了解看看。

  三、DIV占块,CSS布局

    CSS引入的四种方式:行内样式、内嵌样式、链接样式、导入样式

      1.行内样式:最直接、最简单的一种,直接对HTML标签使用style="",缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便。

        <p style="color:#F00; "></p>

      2.内嵌样式:将CSS代码写在<head></head>之间,并且用<style></style>进行声明

       优缺点:页面使用公共CSS代码,也是每个页面都要定义的,如果一个网站有很多页面,每个文件都会变大,后期维护难度也大,如果文件很少,CSS代码也不多,这种样式还是很不错的。

      <DOCTYPE ……>

        <html>

           <head>

              <style>……</style>     <!--css控制语句写在style标签中-->

           </head>

           <body>

              <div>……</div>

           </body>

       </html>

      3.链接样式:使用频率最高、最实用的样式:在<head></head>之间加上<link…/>

        优缺点:实现了页面框架代码与表现CSS代码的完全分离,使得前期制作和后期维护都十分方便

        <link type="text/css" rel="stylesheet" href="style.css" />

      4.导入外部样式表:采用@import样式导入CSS样式表。HTML初始化时,会被导入到HTML或者CSS文件中,成为文件的一部分,类似第二种内嵌样式。

        @import在html中使用:

          <style type="text/css">
          @import url(style.css);
          </style>

        @import在CSS中使用,如下:

        @import url(style.css);

      3与4的区别:link是在html加载前就使用,

            import是在html加载后才引用;

    四种CSS引入方式的优先级

      1.就近原则

      2.理论上:行内>内嵌>链接>导入

      3.实际上:内嵌、链接、导入在同一个文件头部,谁离相应的代码近,谁的优先级高

文章参照:http://www.cnblogs.com/seostyle/p/4951460.html

HTML学习笔记2——HTML 组成结构

标签:

原文地址:http://www.cnblogs.com/Christeen/p/5648344.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!