HTML 學習筆記(塊 和 類)

來源:互聯網
上載者:User

標籤: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 學習筆記(塊 和 類)

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.