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

HTML 学习笔记(块 和 类)

时间:2016-12-14 14:11:36      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:hit   文档   相同   文字   log   tab   table   笔记   har   

HTML <div> 和 <span>

可以通过<div>和<span>将HTML元素组合起来.


HTML块元素

大多数HTML元素被定义为块级元素或者内敛元素

块级元素在浏览器现实的额时候,通常会以新行来开始(和结束)

例子:<h1>,<p>,<ul>,<table>等。


HTML 内敛元素

内敛元素在显示的时候通常不会以新行开始

例子:<b>,<td>,<a>,<img>等


HTML <div>元素

HTML <div>元素是块级元素,他是可以用来组合其它HTML元素的额容器。

<div>元素没有特定的含义,除此之外,由于它属于块级元素 浏览器会在其前后显示折行。

如果与CSS(样式 后面的博客中将会具体介绍)一同使用,<div>元素可用于对大的内容设置样式属性。

<div>元素的另一个常见的应用就是文档布局,他取代了使用表格定义布局的老式方法,使用<table>元素进行布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。


HTML <span>元素

HTML <span>元素是内敛元素 可用作文本的容器。

<span>元素也没有特定的含义

当与CSS一起使用的时候 <span>元素可用于为部分文本设置样式属性。


HTML 类

对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式,或者为不同的类设置不同的样式。

分类块级元素
HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。
设置 <div> 元素的类,使我们能够为相同的 <div> 元素设置相同的类:

例子:

<head>
        <meta charset="UTF-8">
        <title>块和类</title>
        <style type="text/css">
            .cities {
                background-color: black;
                color: white;
                margin: 20px;
                padding: 20px;
            }
        </style>
    </head>
    
    <body>
        <div class="cities">
            <h2>London</h2>
            <p>伦敦是英国的首都 也是世界金融中心</p>
        </div>
        <div class="cities">
            <h2>Paris</h2>
            <p>巴黎是法国的手抖 也是世界浪漫之都</p>
        </div>
        <div class="cities">
            <p>东京是日本的首都,也是世界有色文化中心</p>
        </div>
    </body>

分类行内元素

HTML <span> 元素是行内元素,能够用作文本的容器。
设置 <span> 元素的类,能够为相同的 <span> 元素设置相同的样式。

例子:

<head>
        <meta charset="UTF-8">
        <title>块和类</title>
        <style type="text/css">
            span.spanC {
                color: blue;
            }
        </style>
    </head>
    
    <body>
        <h1>我的<span class="spanC">重要的</span>标题</h1>
    </body>

上个例子中span中包涵的文字 将会显示蓝色。可见span可以为部分文本设置样式。

HTML 学习笔记(块 和 类)

标签:hit   文档   相同   文字   log   tab   table   笔记   har   

原文地址:http://www.cnblogs.com/huanying2000/p/6178906.html

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