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

2022-07-24 11:23:43

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

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

<!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>

块元素和内嵌元素

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

<a>
<span>
<strong>
<em>

内嵌元素的特性：

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

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

<p>
<div>
<h1>~<h6>
<ol>-<li>
<ul>-<li>
<dl>-<dt>-<dd>

块元素的特性：

默认独占一行显示
没有宽度时，默认撑满一排
支持所有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的特点：

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

例，

<!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>

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

分析：

分析结构（div 包一排a）
a标签支持宽高，并且在一排显示
有hover效果
当前状态不能点！

代码如下：(有关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。

前端规范：

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

码农公寓

相关文章