python走起之第十四話

時間  2019-11-16
標籤 python 走起 第十四 欄目 Python 简体版
原文   原文鏈接

HTML 標題

HTML 標題（Heading）是經過<h1> - <h6> 標籤來定義的.css

實例

<h1>這是一個標題</h1> <h2>這是一個標題</h2> <h3>這是一個標題</h3>

HTML 連接

HTML 連接是經過標籤 <a> 來定義的.html

實例

<a href="http://www.runoob.com">這是一個連接</a>

HTML 圖像

HTML 圖像是經過標籤 <img> 來定義的.瀏覽器

實例

<img src="w3cschool.png" width="104" height="142">

 

HTML 元素

HTML 文檔由 HTML 元素定義。編輯器

HTML 元素

開始標籤 * 元素內容 結束標籤 *
<p> 這是一個段落 </p>
<a href="default.htm"> 這是一個連接 </a>
<br>    

*開始標籤常被稱爲起始標籤（opening tag），結束標籤常稱爲閉合標籤（closing tag）。工具

HTML 元素語法

  • HTML 元素以開始標籤起始
  • HTML 元素以結束標籤終止
  • 元素的內容是開始標籤與結束標籤之間的內容
  • 某些 HTML 元素具備空內容（empty content）
  • 空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
  • 大多數 HTML 元素可擁有屬性

註釋: 您將在本教程的下一章中學習更多有關屬性的內容。佈局

嵌套的 HTML 元素

<p大多數 html="" 元素能夠嵌套（能夠包含其餘="" 元素）。<="" p="">學習

HTML 文檔由嵌套的 HTML 元素構成。字體

HTML 文檔實例

<!DOCTYPE html>
<html>

<body>
<p>這是第一個段落。</p>
</body>

</html>

以上實例包含了三個 HTML 元素。url

HTML 實例解析

<p> 元素:spa

<p>這是第一個段落。</p>

這個 <p> 元素定義了 HTML 文檔中的一個段落。
這個元素擁有一個開始標籤 <p> 以及一個結束標籤 </p>.
元素內容是: This is my first paragraph.

<body> 元素:

<body>
<p>這是第一個段落。</p>
</body>

The <body> 元素定義了 HTML 文檔的主體。
這個元素擁有一個開始標籤 <body> 以及一個結束標籤 </body>。
元素內容是另外一個 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>
<p>這是第一個段落。</p>
</body>

</html>

The <html> 元素定義了整個 HTML 文檔。
這個元素擁有一個開始標籤 <html> ，以及一個結束標籤 </html>.
元素內容是另外一個 HTML 元素（body 元素）。

不要忘記結束標籤

即便您忘記了使用結束標籤，大多數瀏覽器也會正確地顯示 HTML：

<p>這是一個段落
<p>這是一個段落

以上實例在瀏覽器中也能正常顯示，由於關閉標籤是可選的。

但不要依賴這種作法。忘記使用結束標籤會產生不可預料的結果或錯誤。

HTML 空元素

沒有內容的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。

<br> 就是沒有關閉標籤的空元素（<br> 標籤訂義換行）。

在 XHTML、XML 以及將來版本的 HTML 中，全部元素都必須被關閉。

在開始標籤中添加斜槓，好比 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。

即便 <br> 在全部瀏覽器中都是有效的，但使用 <br /> 實際上是更長遠的保障。

HTML 屬性

屬性是 HTML 元素提供的附加信息。

HTML 屬性

  • HTML 元素能夠設置屬性
  • 屬性能夠在元素中添加附加信息
  • 屬性通常描述於開始標籤
  • 屬性老是以名稱/值對的形式出現，好比：name="value"。

屬性實例

HTML 連接由 <a> 標籤訂義。連接的地址在 href 屬性中指定：

實例

<a href="http://www.runoob.com">這是一個連接</a>

HTML 屬性經常使用引用屬性值

屬性值應該始終被包括在引號內。

雙引號是最經常使用的，不過使用單引號也沒有問題。

Remark提示: 在某些個別的狀況下，好比屬性值自己就含有雙引號，那麼您必須使用單引號，例如：name='John "ShotGun" Nelson'

HTML 提示：使用小寫屬性

屬性和屬性值對大小寫不敏感。

不過，萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。

而新版本的 (X)HTML 要求使用小寫屬性。

HTML 屬性參考手冊

查看完整的HTML屬性列表: HTML 標籤參考手冊。

下面列出了適用於大多數 HTML 元素的屬性：

屬性 描述
class 爲html元素定義一個或多個類名（classname）(類名從樣式文件引入)
id 定義元素的惟一id
style 規定元素的行內樣式（inline style）
title 描述了元素的額外信息 (做爲工具條使用)

更多標準屬性說明： HTML 標準屬性參考手冊.

什麼是 CSS?

  • CSS 指層疊樣式表 (Cascading Style Sheets)
  • 樣式定義如何顯示 HTML 元素
  • 樣式一般存儲在樣式表中
  • 把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題
  • 外部樣式表能夠極大提升工做效率
  • 外部樣式表一般存儲在 CSS 文件中
  • 多個樣式定義可層疊爲一

CSS 實例

一個HTML文檔能夠顯示不一樣的樣式: 查看CSS是如何工做的

樣式解決了一個很大的問題

HTML 標籤本來被設計爲用於定義文檔內容，以下實例：

<h1>這是一個標題</h1>

<p>這是一個段落.</p>

樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標籤和顏色屬性所起的做用那樣。樣式一般保存在外部的 .css 文件中。經過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中全部頁面的佈局和外觀。

爲了解決這個問題，萬維網聯盟（W3C），這個非營利的標準化聯盟，肩負起了 HTML 標準化的使命，並在 HTML 4.0 以外創造出樣式（Style）。

當代瀏覽器都支持 CSS .

CSS 樣式表極大地提升了工做效率

樣式表定義如何顯示 HTML 元素

樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標籤和顏色屬性所起的做用那樣。樣式一般保存在外部的 .css 文件中。經過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中全部頁面的佈局和外觀。

CSS 實例

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明:

選擇器一般是您須要改變樣式的 HTML 元素。

每條聲明由一個屬性和一個值組成。

屬性（property）是您但願設置的樣式屬性（style attribute）。每一個屬性有一個值。屬性和值被冒號分開。

CSS 實例

CSS聲明老是以分號(;)結束，聲明組以大括號({})括起來:

p {color:red;text-align:center;}

爲了讓CSS可讀性更強，你能夠每行只描述一個屬性:

實例

p
{
color:red;
text-align:center;
}
 

CSS 註釋

註釋是用來解釋你的代碼，而且能夠隨意編輯它，瀏覽器會忽略它。

CSS註釋以 "/*" 開始, 以 "*/" 結束, 實例以下:

/*這是個註釋*/
p
{
text-align:center;
/*這是另外一個註釋*/
color:black;
font-family:arial;
}
 

CSS Id 和 Class

id 和 class 選擇器

若是你要在HTML元素中設置CSS樣式，你須要在元素中設置"id" 和 "class"選擇器。

id 選擇器

id 選擇器能夠爲標有特定 id 的 HTML 元素指定特定的樣式。

HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。

如下的樣式規則應用於元素屬性 id="para1":

實例

#para1
{
text-align:center;
color:red;
}
 

class 選擇器

class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class能夠在多個元素中使用。

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：

在如下的例子中，全部擁有 center 類的 HTML 元素均爲居中。

實例

.center {text-align:center;}

你也能夠指定特定的HTML元素使用class。

在如下實例中, 全部的 p 元素使用 class="center" 讓該元素的文本居中:

實例

p.center {text-align:center;}
 

CSS 建立

當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文檔。

如何插入樣式表

插入樣式表的方法有三種:

  • 外部樣式表
  • 內部樣式表
  • 內聯樣式

外部樣式表

當樣式須要應用於不少頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的狀況下，你能夠經過改變一個文件來改變整個站點的外觀。每一個頁面使用 <link> 標籤連接到樣式表。 <link> 標籤在（文檔的）頭部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

瀏覽器會從文件 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。

外部樣式表能夠在任何文本編輯器中進行編輯。文件不能包含任何的 html 標籤。樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

Remark 不要在屬性值與單位之間留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，它僅在 IE 6 中有效，可是在 Mozilla/Firefox 或 Netscape 中卻沒法正常工做。

內部樣式表

當單個文檔須要特殊的樣式時，就應該使用內部樣式表。你可使用 <style> 標籤在文檔頭部定義內部樣式表，就像這樣:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

內聯樣式

因爲要將表現和內容混雜在一塊兒，內聯樣式會損失掉樣式表的許多優點。請慎用這種方法，例如當樣式僅須要在一個元素上應用一次時。

要使用內聯樣式，你須要在相關的標籤內使用樣式（style）屬性。Style 屬性能夠包含任何 CSS 屬性。本例展現如何改變段落的顏色和左外邊距：

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

多重樣式

若是某些屬性在不一樣的樣式表中被一樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。 

例如，外部樣式表擁有針對 h3 選擇器的三個屬性：

h3
{
color:red;
text-align:left;
font-size:8pt;
}

而內部樣式表擁有針對 h3 選擇器的兩個屬性：

h3
{
text-align:right;
font-size:20pt;
}

假如擁有內部樣式表的這個頁面同時與外部樣式表連接，那麼 h3 獲得的樣式是：

color:red;
text-align:right;
font-size:20pt;

即顏色屬性將被繼承於外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內部樣式表中的規則取代。

多重樣式將層疊爲一個

樣式表容許以多種方式規定樣式信息。樣式能夠規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至能夠在同一個 HTML 文檔內部引用多個外部樣式表。

層疊次序

當同一個 HTML 元素被不止一個樣式定義時，會使用哪一個樣式呢？

通常而言，全部的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。

  1. 瀏覽器缺省設置
  2. 外部樣式表
  3. 內部樣式表（位於 <head> 標籤內部）
  4. 內聯樣式（在 HTML 元素內部）

所以，內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味着它將優先於如下的樣式聲明： 標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程