妙味课堂——HTML+CSS(第三课)

   常见标签我已经在上一篇文章中提及，我们做前端设计时，主要也是用这些标签(最常用的)。

   然而有一个问题，就是有的标签都有自己的默认样式。试通过如下代码来说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="#">a标签（链接、下载、锚点）</a>
    <img src="1.png" alt="" />
    <a href="#"><img src="1.png" alt="" /></a>
    <span>区分样式</span>
    <strong>强调(粗体)</strong>
    <em>强调(斜体)</em>
   
    <p>段落</p>
    <div>块</div>
    <h1>标题1</h1>
    <h6>标题6</h6>
    <ol>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>
    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    <dl>
        <dt>定义列表标题</dt>
        <dd>定义列表项</dd>
        <dd>定义列表项</dd>
        <dd>定义列表项</dd>
    </dl>
</body>
</html>

   我们在chrome浏览器中运行时，可以通过开发者工具(快捷键Ctrl+Shift+I)来一个个审查元素，来看看它们的默认样式：

<body></body>

   　

   发现<body>标签的margin为8px。

<p>段落</p>

   　

   发现<p>标签的上下外边距为16px。相反，<div>块</div>没有margin或padding。

<h1>标题1</h1>

   

   发现<h1>标签的上下外边距为21.440px。

<h6>标题6</h6>　

   

   发现<h6>标签的上下外边距为27.960px。

<ol></ol>

   

   发现<ol>标签的上下外边距为16px，左内边距为40px。

<ul></ul>

   　　

   同上，发现<ul>标签的上下外边距也为16px，左内边距也为40px。

<dl></dl>

   

   发现<dl>标签的上下外边距为16px。

<dd>定义列表项</dd>

   　

   发现<dd>标签的左外边距为40px。

   至此所有有默认样式的标签，我们已分析完了。注意一点：上下外边距会叠压。

   那么为了兼容性，凡是浏览默认的样式，都不要使用，所以重置默认样式，引出——默认样式重置(css reset)。css reset后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*默认样式重置(css reset)*/
        body,p,h1,h2,h3,h4,h5,h6,dl,dd{
            margin: 0;
            font-size: 12px; /* 中文字体大小的最小值 */
            /* font-family: xx; 也可以设置字体 */
        }
        ol,ul {
            list-style: none; /* 去除列表样式 */
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        img {
            border: none; /* 在IE6中<a>标签包裹的<img>标签显示时有边框，故清除 */
        }
        /*
        *代表所有页面中的标签，也可以如下重置默认样式，但一般不这样做，
        依然一个一个标签重置
        * {
            margin: 0;
            padding: 0;
        }
        */
    </style>
</head>
<body>
    <a href="#">a标签（链接、下载、锚点）</a>
    <img src="1.png" alt="" />
    <a href="#"><img src="1.png" alt="" /></a>
    <span>区分样式</span>
    <strong>强调(粗体)</strong>
    <em>强调(斜体)</em>
   
    <p>段落</p>
    <div>块</div>
    <h1>标题1</h1>
    <h6>标题6</h6>
    <ol>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>
    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    <dl>
        <dt>定义列表标题</dt>
        <dd>定义列表项</dd>
        <dd>定义列表项</dd>
        <dd>定义列表项</dd>
    </dl>
</body>
</html>

 

   块元素和内嵌元素

   内嵌，又叫内联、行内属性标签。常用的一般有以下几种：

  1. <a>
  2. <span>
  3. <strong>
  4. <em> 

   内嵌元素的特性：

  1. 默认同行可以继续跟同类型标签
  2. 内容撑开宽度
  3. 不支持宽高
  4. 不支持上下的margin和padding
  5. 代码换行被解析   

   块属性标签。常用的一般有以下几种：

  1. <p>
  2. <div>
  3. <h1>~<h6>
  4. <ol>-<li>
  5. <ul>-<li>
  6. <dl>-<dt>-<dd>

   块元素的特性：

  1. 默认独占一行显示
  2. 没有宽度时，默认撑满一排
  3. 支持所有css命令

   例，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*默认样式重置(css reset)*/
        body,p,h1,h2,h3,h4,h5,h6,dl,dd{
            margin: 0;
            font-size: 12px;
            /*font-family: xx;*/
        }
        ol,ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        img {
            border: none;
        }
        span,div {
            background: blue;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <span>区分样式</span>
    <span>区分样式</span>
    <span>区分样式</span>
    <div>块</div>

    <div>块</div>
    <div>块</div>
</body>
</html>

   图示：

   接下来验证内嵌元素不支持上下的margin和padding！！！ 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*默认样式重置(css reset)*/
        body,p,h1,h2,h3,h4,h5,h6,dl,dd{
            margin: 0;
            font-size: 12px;
            /*font-family: xx;*/
        }
        ol,ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        img {
            border: none;
        }
        span,div {
            background: blue;
            width: 100px;
            height: 100px;
        }
        span {
            margin: 100px;
        }
    </style>
</head>
<body>
    <span>区分样式</span>
    <span>区分样式</span>
    <span>区分样式</span>
    <div>块</div>

    <div>块</div>
    <div>块</div>
</body>
</html>

   

   从上图明显可见内嵌元素是不支持margin的上下边距的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*默认样式重置(css reset)*/
        body,p,h1,h2,h3,h4,h5,h6,dl,dd{
            margin: 0;
            font-size: 12px;
            /*font-family: xx;*/
        }
        ol,ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        img {
            border: none;
        }
        span,div {
            background: blue;
            width: 100px;
            height: 100px;
        }
        span {
            padding: 100px;
            background: none;
        }
    </style>
</head>
<body>
    <span>区分样式</span>
    <span>区分样式</span>
    <span>区分样式</span>
    <div>块</div>

    <div>块</div>
    <div>块</div>
</body>
</html>

   

   从上图明显可见内嵌元素是不支持padding的上下边距的。

   最后验证内嵌元素代码换行被解析！！！注意：页面中空格(间隙)的大小为页面中文字大小的一半。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*默认样式重置(css reset)*/
        body,p,h1,h2,h3,h4,h5,h6,dl,dd{
            margin: 0;
            font-size: 12px;
            /*font-family: xx;*/
        }
        ol,ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        img {
            border: none;
        }
        span,div {
            background: blue;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <span>区分样式</span><!-- 换行 -->    
    <span>区分样式</span>
    <span>区分样式</span>
    <div>块</div>
    <!-- 换行 -->
    <div>块</div><!-- 换行 -->
    <div>块</div>
</body>
</html>

   

   

   块和内嵌的转换

   使内联元素具备块属性标签的特性

display：block        显示为块

　使行块属性标签具备内联元素的特性

display：inline        显示为内嵌

   例，块和内嵌的转换用的不是特别多。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*默认样式重置(css reset)*/
        body,p,h1,h2,h3,h4,h5,h6,dl,dd{
            margin: 0;
            font-size: 12px;
            /*font-family: xx;*/
        }
        ol,ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        img {
            border: none;
        }

        span,div {
            background: blue;
            width: 100px;
            height: 100px;
        }
        /*
        用的不是特别多！！！
        display: block; 显示为块
        display: inline; 显示为内嵌
        */
        span {
            display: block;
        }
        div {
            display: inline;
        }
    </style>
</head>
<body>
    <span>区分样式</span>
    <span>区分样式</span>
    <span>区分样式</span>
    <div>块</div>

    <div>块</div>
    <div>块</div>
</body>
</html>

   

　

   <img>标签非常特殊，要单独拿出来说，它既不是内嵌，也不是块，它是一行内的块(inline-block)。

   例，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*默认样式重置(css reset)*/
        body,p,h1,h2,h3,h4,h5,h6,dl,dd{
            margin: 0;
            font-size: 12px;
            /*font-family: xx;*/
        }
        ol,ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        img {
            border: none;
        }
    </style>
</head>
<body>
    <!-- 
    inline-block
    一行内的块
     -->
    <img src="1.png" alt="" />
    <img src="1.png" alt="" />
</body>
</html>

   

   可见，<img>标签有内嵌的特性：同排可以继续跟同类的标签。

   例，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*默认样式重置(css reset)*/
        body,p,h1,h2,h3,h4,h5,h6,dl,dd{
            margin: 0;
            font-size: 12px;
            /*font-family: xx;*/
        }
        ol,ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        img {
            border: none;
        }
        
        img {
            width: 60px;
            height: 200px;
        }
    </style>
</head>
<body>
    <!-- 
    inline-block
    一行内的块
     -->
    <img src="1.png" alt="" />
    <img src="1.png" alt="" />
</body>
</html>

   

   从上图可见，它又支持宽和高，即块的特性：支持所有css命令。

   inline-block的特点：

  1. 块在一行显示
  2. 行内属性标签支持宽高
  3. 没有宽度的时候内容撑开宽度   

   例，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*默认样式重置(css reset)*/
        body,p,h1,h2,h3,h4,h5,h6,dl,dd{
            margin: 0;
            font-size: 12px;
            /*font-family: xx;*/
        }
        ol,ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        img {
            border: none;
        }

        span,div {
            background: blue;
            width: 100px;
            height: 100px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <span>区分样式</span><!-- 页面中空格(间隙)的大小为页面中文字大小的一半 -->
    <span>区分样式</span>
    <span>区分样式</span>
    <div>块</div>

    <div>块</div>
    <div>块</div>
</body>
</html>

   

   练习：做出如下图所示的效果。

   

   分析：

  1. 分析结构（div 包一排a）

  2. a标签支持宽高，并且在一排显示

  3. 有hover效果

  4. 当前状态不能点！

   代码如下：(有关line-height的深入知识请移步我的《CSS深入理解之line-height》)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*默认样式重置(css reset)*/
        body,p,h1,h2,h3,h4,h5,h6,dl,dd{
            margin: 0;
            font-size: 12px;
        }
        ol,ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        img {
            border: none;
        }
        .pages {
            width: 600px;
            height: 60px;
            background: #e8e8e8;
            margin: 90px auto;
            text-align: center;
        }
        .pages a {
            background: #fff;
            border: 1px solid #cdcdcd;
            color: #333333;
            padding: 0 8px 0 9px;
            /*height: 28px;*/
            line-height: 28px;/* line-height的值跟height的值一样，字体就会垂直居中 */
            display: inline-block;
        }
        .pages a:hover {
            border-color: red;
            color: red;
        }
        .pages .activied {
            font-weight: bold;
            background: #fcf9ea;
            cursor: text;
        }
        .pages .activied:hover {
            border-color: #cdcdcd;
            color: #333333;
        }
    </style>
</head>
<body>
    <div class="pages">
        <a href="#">上一页</a>
        <a href="#" class="activied">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#">10</a>
        <a href="#">...87</a>
        <a href="#">下一页</a>
    </div>
</body>
</html>

   height与line-height在一起时，其实是多余的，尽管line-height的值跟height的值一样，字体就会垂直居中。

   cursor：指针样式 （规定要显示的光标的类型）

   cursor：pointer(默认类型) | text | move ……

   cursor:url(hand.cur),pointer;(如果图片不存在，则光标使用默认类型)，例：

body {
    height: 1500px;
    cursor: url(hand.cur),pointer;
}

   一道雅虎面试题：

   这么一段HTML，请挑毛病：

<P>&nbsp;&nbsp;哥写的不是HTML，是寂寞。<br><br>&nbsp;&nbsp;我说：<br>不要迷恋哥，哥只是一个传说

   答：

   标准：

<p>哥写的不是HTML，是寂寞。</p>
<p>我说：<br/>不要迷恋哥，哥只是一个传说</p>

   最佳：

<p>哥写的不是<abbr title="Hypertext Markup Language">HTML</abbr>，是寂寞。</p>
<p><cite>我</cite>说：<br/><q>不要迷恋哥，哥只是一个传说</q></p>

   <abbr>：定义缩写。

   title：元素的额外信息，可用于任何标签上。

   <q>：定义短的引用。

   <cite>：定义引用(citation)。详情请参看http://www.w3school.com.cn/tags/index.asp。

   

   前端规范：

  1. 所有书写均在英文半角状态下的小写
  2. id、class必须以字母开头
  3. 所有标签必须闭合
  4. html标签用tab键缩进
  5. 属性值必须带引号
  6. <!-- html注释 --> 
  7. /* css注释 */
  8. ul/li，ol/li，dl/dt/dd拥有父子级关系的标签
  9. p，dt，h标签里面不能嵌套块属性标签
  10. a标签不能嵌套a
  11. 内联元素不能嵌套块

 

posted @ 2016-04-03 09:49  叶十一少  阅读(540)  评论(0)  编辑  收藏  举报