CrazyWing：Python自動化運維開發實戰十9、html基礎入門

時間 2019-11-07

標籤 crazywing python 自動化開發實戰 html 基礎入門欄目 Python 简体版

原文原文鏈接

導語:

立刻要學習到python的web框架,可是若是一點都不懂web前端知識的話會步履維艱,那麼接下來幾天就知道該幹什麼了,先弄點基礎知識來鋪墊一下:)html

What is HTML？

HTML 是用來描述網頁的一種語言。前端

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

HTML 標籤

HTML 標記標籤一般被稱爲 HTML 標籤 (HTML tag)。python

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

HTML 文檔 = 網頁

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

Web 瀏覽器

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

HTML 輸出

咱們沒法肯定 HTML 被顯示的確切效果。屏幕的大小，以及對窗口的調整均可能致使不一樣的結果。
對於 HTML，沒法經過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當顯示頁面時，瀏覽器會移除源代碼中多餘的空格和空行。全部連續的空格或空行都會被算做一個空格。
HTML 代碼中的全部連續的空行（換行）也被顯示爲一個空格。

HTML輸出空格

這裏macdown輸出有問題,請先跳過空格這個小節
在html網頁中單個空格咱們直接鍵入空格鍵便可實現空格排版. web

若是要實現多個空格排版，就須要 空格字符來實現

    HTML提供了5種空格實體（space entity），它們擁有不一樣的寬度，非斷行空格（ ）是常規空格的寬度，可運行於全部主流瀏覽器。其餘幾種空格（       ‌‍）在不一樣瀏覽器中寬度各異。

                  
    它叫不換行空格，全稱No-Break Space，它是最多見和咱們使用最多的空格，大多數的人可能只接觸了 ，它是按下space鍵產生的空格。在HTML中，若是你用空格鍵產生此空格，空格是不會累加的（只算1個）。要使用html實體表示纔可累加，該空格佔據寬度受字體影響明顯而強烈。

            
    它叫「半角空格」，全稱是En Space，en是字體排印學的計量單位，爲em寬度的一半。根據定義，它等同於字體度的一半（如16px字體中就是8px）。名義上是小寫字母n的寬度。此空格傳承空格家族一向的特性：透明的，此空格有個至關穩健的特性，就是其佔據的寬度正好是1/2箇中文寬度，並且基本上不受字體影響。

          
    它叫「全角空格」，全稱是Em Space，em是字體排印學的計量單位，至關於當前指定的點數。例如，1 em在16px的字體中就是16px。此空格也傳承空格家族一向的特性：透明的，此空格也有個至關穩健的特性，就是其佔據的寬度正好是1箇中文寬度，並且基本上不受字體影響。

          
    它叫窄空格，全稱是Thin Space。咱們不妨稱之爲「瘦弱空格」，就是該空格長得比較瘦弱，身體單薄，佔據的寬度比較小。它是em之六分之一寬。

    ‌ 
    它叫零寬不連字，全稱是Zero Width Non Joiner，簡稱「ZWNJ」，是一個不打印字符，放在電子文本的兩個字符之間，抑制原本會發生的連字，而是以這兩個字符本來的字形來繪製。Unicode中的零寬不連字字符映射爲「」（zero width non-joiner，U+200C），HTML字符值引用爲： ‌

    ‍     
    它叫零寬連字，全稱是Zero Width Joiner，簡稱「ZWJ」，是一個不打印字符，放在某些須要複雜排版語言（如阿拉伯語、印地語）的兩個字符之間，使得這兩個本不會發生連字的字符產生了連字效果。零寬連字符的Unicode碼位是U+200D (HTML: ‍ ‍）。

    此外，瀏覽器還會把如下字符看成空白進行解析：空格（ ）、製表位（    ）、換行（
）和回車（）還有（　）等等

html文檔類型

<!DOCTYPE> 聲明幫助瀏覽器正確地顯示網頁。
Web 世界中存在許多不一樣的文檔。只有瞭解文檔的類型，瀏覽器才能正確地顯示文檔。
HTML 也有多個不一樣的版本，只有徹底明白頁面中使用的確切 HTML 版本，瀏覽器才能徹底正確地顯示出 HTML 頁面。這就是 <!DOCTYPE> 的用處。
<!DOCTYPE> 不是 HTML 標籤。它爲瀏覽器提供一項聲明信息，即 HTML 是用什麼版本編寫的。編程

例: 帶有 HTML5 DOCTYPE 的 HTML 文檔
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>瀏覽器

<body>
The content of the document......
</body>框架

</html>編程語言

HTML 版本

從 Web 誕生早期至今，已經發展出多個 HTML 版本：
版本年份
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013ide

經常使用的聲明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">;

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;

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 元素具備空內容（empty content）
• 空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
• 大多數 HTML 元素可擁有屬性
• HTML 標籤對大小寫不敏感：<P> 等同於 <p>。許多網站都使用大寫的 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 元素的更多的信息。
屬性是以名稱/值對的形式出現，好比：name="value"。
屬性老是在 HTML 元素的開始標籤中規定。
屬性和屬性值對大小寫不敏感,不過新版本的 (X)HTML 要求使用小寫屬性。
屬性值應該始終被包括在引號(單雙均可)內。

實例1：
    HTML 連接由 <a> 標籤訂義。連接的地址在 href 屬性中指定：
    <a href="http://fklinux.blog.51cto.com">This is a link</a>

    標籤<a>的全稱是anchor['æŋkə]  基本解釋n. 錨, 鐵錨的。
實例2：
    <h1 align="center">  擁有關於對齊方式的附加信息，這裏是居中排列標題。

實例3：
    <body bgcolor="yellow"> 擁有關於背景顏色的附加信息。

實例4：:
    <table> 定義 HTML 表格
    <table border="1"> 擁有關於表格邊框的附加信息。

下面是適用於大多數 HTML 元素的屬性(後面有屬性手冊)：

屬性          值                           描述
class         classname           規定元素的類名（classname）
id              id                          規定元素的惟一 id
style           style_definition        規定元素的行內樣式（inline style）
title             text                         規定元素的額外信息（可在工具提示中顯示）

空的 HTML 元素

沒有內容的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。
<br> 就是沒有關閉標籤的空元素（<br> 標籤訂義換行）。
在 XHTML、XML 以及將來版本的 HTML 中，全部元素都必須被關閉。
在開始標籤中添加斜槓，好比 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即便 <br> 在全部瀏覽器中都是有效的，但使用 <br /> 實際上是更長遠的保障。

HTML元素分類:

標籤元素分爲三種不一樣的類型：塊級元素、內聯元素(又叫行內元素)和內聯塊級元素。

塊級元素特色：

一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行,即一個塊級元素獨佔一行.
二、元素的高度、寬度、行高以及頂和底邊距均可設置。
三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致）
經常使用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

設置display:block能夠將元素轉換塊級元素
好比:
<a href="http://fklinux.blog.51cto.com" style="display:block">這是一個51blog的連接</a>
<a></a>是一個內聯元素,可是用style="display:block"將其設置成了塊級元素

內聯元素特色：

一、和其餘元素都在一行上；
二、元素的高度、寬度及頂部和底部邊距不可設置；
三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
經常使用的內聯元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>
設置display:inline;能夠將塊狀元素轉換爲內聯元素