day39-20180712筆記

時間 2019-11-09

標籤 day39 day 筆記简体版

原文原文鏈接

筆記：Python3 前端htmlhtml

1、前端html
前端

HTML簡介編程

什麼是 HTML？

HTML 是用來描述網頁的一種語言。瀏覽器

HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁

HTML 標籤

HTML 標記標籤一般被稱爲 HTML 標籤 (HTML tag)。編程語言

HTML 標籤是由尖括號包圍的關鍵詞，好比 <html>
HTML 標籤一般是成對出現的，好比 <b> 和 </b>
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱爲開放標籤和閉合標籤

HTML 文檔 = 網頁

HTML 文檔描述網頁
HTML 文檔包含 HTML 標籤和純文本
HTML 文檔也被稱爲網頁

Web 瀏覽器的做用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容：編輯器

<html>
<body>

<h1>個人第一個標題</h1>

<p>個人第一個段落。</p>

</body>
</html>

例子解釋

<html> 與 </html> 之間的文本描述網頁
<body> 與 </body> 之間的文本是可見的頁面內容
<h1> 與 </h1> 之間的文本被顯示爲標題
<p> 與 </p> 之間的文本被顯示爲段落

HTML編譯器學習

使用 Notepad 或 TextEdit 來編寫 HTML

可使用專業的 HTML 編輯器來編輯 HTML：網站

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor

不過，咱們同時推薦使用文本編輯器來學習 HTML，好比 Notepad (PC) 或 TextEdit (Mac)。咱們相信，使用一款簡單的文本編輯器是學習 HTML 的好方法。搜索引擎

經過記事本，依照如下四步來建立您的第一張網頁。spa

步驟一：啓動記事本

如何啓動記事本：

開始
    全部程序
        附件
            記事本

步驟二：用記事原本編輯 HTML

在記事本中鍵入 HTML 代碼：

步驟三：保存 HTML

在記事本的文件菜單選擇「另存爲」。

當您保存 HTML 文件時，既可使用 .htm 也可使用 .html 擴展名。二者沒有區別，徹底根據您的喜愛。

在一個容易記憶的文件夾中保存這個文件，好比 w3school。

步驟四：在瀏覽器中運行這個 HTML 文件

啓動您的瀏覽器，而後選擇「文件」菜單的「打開文件」命令，或者直接在文件夾中雙擊您的 HTML 文件。

結果應該相似這樣：

HTML基礎

HTML 標題

HTML 標題（Heading）是經過 <h1> - <h6> 等標籤進行定義的。

實例

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落

HTML 段落是經過 <p> 標籤進行定義的。

實例

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 連接

HTML 連接是經過 <a> 標籤進行定義的。

實例

<a href="http://www.w3school.com.cn">This is a link</a>

註釋：在 href 屬性中指定連接的地址。

HTML 圖像

HTML 圖像是經過 <img> 標籤進行定義的。

實例

<img src="w3school.jpg" width="104" height="142" />

註釋：圖像的名稱和尺寸是以屬性的形式提供的。

HTML元素

HTML 元素

HTML 元素指的是從開始標籤（start tag）到結束標籤（end tag）的全部代碼。

開始標籤	元素內容	結束標籤
<p>	This is a paragraph	</p>
<a href="default.htm" >	This is a link	</a>
<br />

註釋：開始標籤常被稱爲開放標籤（opening tag），結束標籤常稱爲閉合標籤（closing tag）。

HTML 元素語法

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

嵌套的 HTML 元素

大多數 HTML 元素能夠嵌套（能夠包含其餘 HTML 元素）。

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

HTML 文檔實例

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

HTML 實例解釋

<p> 元素：

<p>This is my first paragraph.</p>

這個 <p> 元素定義了 HTML 文檔中的一個段落。

這個元素擁有一個開始標籤 <p>，以及一個結束標籤 </p>。

元素內容是：This is my first paragraph。

<body> 元素：

<body>
<p>This is my first paragraph.</p>
</body>

<body> 元素定義了 HTML 文檔的主體。

這個元素擁有一個開始標籤 <body>，以及一個結束標籤 </body>。

元素內容是另外一個 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

<html> 元素定義了整個 HTML 文檔。

這個元素擁有一個開始標籤 <html>，以及一個結束標籤 </html>。

元素內容是另外一個 HTML 元素（body 元素）。

不要忘記結束標籤

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

<p>This is a paragraph
<p>This is a paragraph

註釋：將來的 HTML 版本不容許省略結束標籤。

空的 HTML 元素

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

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

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

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

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

HTML 提示：使用小寫標籤

HTML 標籤對大小寫不敏感：<P> 等同於 <p>。許多網站都使用大寫的 HTML 標籤。

W3School 使用的是小寫標籤，由於萬維網聯盟（W3C）在 HTML 4 中推薦使用小寫，而在將來 (X)HTML 版本中強制使用小寫。

HTML屬性

HTML 屬性

HTML 標籤能夠擁有屬性。屬性提供了有關 HTML 元素的更多的信息。

屬性老是以名稱/值對的形式出現，好比：name="value"。

屬性老是在 HTML 元素的開始標籤中規定。

屬性實例

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

<a href="http://www.w3school.com.cn">This is a link</a>

HTML 提示：使用小寫屬性

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

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

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

始終爲屬性值加引號

屬性值應該始終被包括在引號內。雙引號是最經常使用的，不過使用單引號也沒有問題。

在某些個別的狀況下，好比屬性值自己就含有雙引號，那麼您必須使用單引號，例如：

HTML標題

標題（Heading）是經過 <h1> - <h6> 等標籤進行定義的。

<h1> 定義最大的標題。<h6> 定義最小的標題。

實例

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

註釋：瀏覽器會自動地在標題的先後添加空行。

註釋：默認狀況下，HTML 會自動地在塊級元素先後添加一個額外的空行，好比段落、標題元素先後。

標題很重要

請確保將 HTML heading 標籤只用於標題。不要僅僅是爲了產生粗體或大號的文本而使用標題。

搜索引擎使用標題爲您的網頁的結構和內容編制索引。

由於用戶能夠經過標題來快速瀏覽您的網頁，因此用標題來呈現文檔結構是很重要的。

應該將 h1 用做主標題（最重要的），其後是 h2（次重要的），再其次是 h3，以此類推。

HTML 水平線

<hr /> 標籤在 HTML 頁面中建立水平線。

hr 元素可用於分隔內容。

實例

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

提示：使用水平線 (<hr> 標籤) 來分隔文章中的小節是一個辦法（但並非惟一的辦法）

HTML 註釋

能夠將註釋插入 HTML 代碼中，這樣能夠提升其可讀性，使代碼更易被人理解。瀏覽器會忽略註釋，也不會顯示它們。

註釋是這樣寫的：

實例

<!-- This is a comment -->

註釋：開始括號以後（左邊的括號）須要緊跟一個歎號，結束括號以前（右邊的括號）不須要。

HTML 提示 - 如何查看源代碼

您必定曾經在看到某個網頁時驚歎道「WOW! 這是如何實現的？」

若是您想找到其中的奧祕，只須要單擊右鍵，而後選擇「查看源文件」（IE）或「查看頁面源代碼」（Firefox），其餘瀏覽器的作法也是相似的。這麼作會打開一個包含頁面 HTML 代碼的窗口。

HTML 標籤參考手冊

W3School 的標籤參考手冊提供了有關這些標題及其屬性的更多信息。

標籤	描述
<html>	定義 HTML 文檔。
<body>	定義文檔的主體。
<h1> to <h6>	定義 HTML 標題
<hr>	定義水平線。
<!-->	定義註釋。

更多html學習，可百度查找資料，會點基礎的HTML就好了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。