zoukankan      html  css  js  c++  java

  • 妙味课堂——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. 内联元素不能嵌套块
  • 相关阅读:
    第八章 采样
    第七章 优化算法
    第六章 概率图模型
    第五章 非监督学习
    第四章 降维
    第三章 经典算法
    第二章 模型评估
    第一章 特征工程-------------《百面机器学习》
    中等-102，107-二叉树的层序遍历
    字符串单模式匹配 暴力+哈希
  • 原文地址：https://www.cnblogs.com/yerenyuan/p/5349204.html
Copyright © 2011-2022 走看看