互聯(lián)網(wǎng)高速發(fā)展的今天，我們通過瀏覽器可以看到各種各樣的網(wǎng)站，包含了各式不同的領域還有內(nèi)容，通過點擊網(wǎng)站上的標簽和欄目我們就能夠很方便地看到網(wǎng)站上顯示的各種數(shù)據(jù)，而這些都是建立在HTML這種標記語言的基礎上做到的。

HTML的英文全稱為Hyper Text Markup Language，中文稱作超文本標記語言，是一種專門用來建立網(wǎng)站的標識語言。其中包括了許多標簽將分散的網(wǎng)絡數(shù)據(jù)連接到一起，聚合同一之后形成了我們現(xiàn)在所看到的網(wǎng)頁。

看到這里是不是有許多朋友想要知道這個HTML語言該怎么去學習呢？是需要找老師統(tǒng)一學，還是去圖書館找專業(yè)書籍自己學好呢？不用擔心，因為今天要給大家推薦的就是一個專門為大家提供各種編程語言教程的學習網(wǎng)站。

這個網(wǎng)站名叫 runoob，直接在瀏覽器上搜索即可找到。

在首頁可以看到該欄目的第二個就是關于HTML的學習教程，點擊左邊的方框可以調(diào)整你的課程進度，在第一章節(jié)的教程中很清晰地講解了什么是HTML，以及告訴了你一些關于網(wǎng)站建立的小知識。

下方的提示框會給你提供一些對HTML零基礎新手的科普，關于這種標記語言應該如何進行保存，如何查看文件后輟名，如何打開代碼文件等等，還會提供一些專用工具供你學習使用。同時網(wǎng)站會給你簡單介紹一些網(wǎng)頁編程語言的區(qū)別，還有各種用途上的區(qū)分，非常地詳細。

在第三章節(jié)的編輯器一欄里，會提供給你一些HTML的專用編輯器，例如VS Code，還有sublime text 等實用工具，在后面會教你如何將這些HTML必備編輯器下載并安裝，然后在瀏覽器上面運行。

通過插件還有語言編程的格式我們就能夠?qū)W會如何制作第一步的標題了，剛開始的一步比較簡單，相信大家很快就能學會如何在網(wǎng)頁上顯示自己打入的文字了。之后進一步的學習就是關于如何調(diào)整文字段落，還有各種標識的使用。

在如何進行文字排版編輯的方面，教程中也講述得很詳細，包括一些用戶們常犯的錯誤，還有一些網(wǎng)頁的實例，甚至是這個教學網(wǎng)站上的排版示范都會進行一一講解。

更深入的章節(jié)會對如何進行圖像排列，傳輸?shù)确矫孢M行細講，教程中把大部分網(wǎng)站會使用到的技巧還有排版方式都分成了許多個小片段，方便大家能夠?qū)γ總€方面針對性地學習。這些內(nèi)容并不多，幾乎每一個片段都是用很直白的語言進行講解，方便所有人都能夠看懂，并且在下方都會有更詳細的術(shù)語解析，還有一些比較難懂的點會舉例解釋。

經(jīng)過十幾章節(jié)的教學之后，基本上能夠掌握HTML語言的基本用法，還有一些簡單的操作了，這個時候如果想要進階學習的話還可以在網(wǎng)站上查找其他的進階語言用法，例如CSS, JavaScript等等復雜一些的語言，相應的你也會學到更多如何運營網(wǎng)頁的方法。

當然如果想要自己建立一個網(wǎng)站的話，還需要更多資源還有設備，例如高速的網(wǎng)絡連接保持網(wǎng)頁的穩(wěn)定性，以及穩(wěn)定的服務器，用來保證自己的網(wǎng)頁24小時都能保持流暢可用。不過這些都是在學會了如何建立網(wǎng)頁之后才考慮的事了。

現(xiàn)在網(wǎng)上也有許多編程教學，在網(wǎng)上自學一門知識一門語言變得非常方便，但是僅僅是擁有資源還是不夠的。學習如何建立自己的網(wǎng)站還需要大量的努力以及知識的積累，通過不斷的練習還有實踐才能自如地使用，只有基礎扎實，建立出來的網(wǎng)站才能夠長久。但還需要大家能夠行動起來，只有去學習去實踐才能夠真正學會東西，希望這個教學網(wǎng)站推薦能夠幫到更多人！

. block(區(qū)塊)

block面板主要是設置對象文本的文字間距、對齊方式、上標、下標、排列方式、首行縮進等。

(1)word-spacing：設置單詞之間的間距?？梢栽O置負值。

默認值:normal

(2)letter-spacing：設置字符之間的間距?？梢灾付ㄘ撝怠Ｒ驗橹形囊彩亲址? 這個參數(shù)可以設置文字間的間距。

默認值:normal

(3)vertical-align：指定元素的垂直對齊方式。針對<td>表格設置垂直對齊方法,但是對<div>設置無效,可以將display屬性設置為table-cell值;

可以指定sub(下標)、super(上標)、top(與頂端對齊)、middle(居中)、bottom(與底端對齊)等。適用于行內(nèi)塊元素 img、input、td等

baseline 默認。元素放置在父元素的基線上。

sub 垂直對齊文本的下標。

super 垂直對齊文本的上標

top 把元素的頂端與行中最高元素的頂端對齊

text-top 把元素的頂端與父元素字體的頂端對齊

middle 把此元素放置在父元素的中部。

bottom 把元素的頂端與行中最低的元素的頂端對齊。

text-bottom 把元素的底端與父元素字體的底端對齊。

% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。

inherit 規(guī)定應該從父元素繼承 vertical-align 屬性的值。

默認值: baseline

(4)text-align：設置文本的排列方式(適用于行內(nèi)元素和行內(nèi)塊元素, 如 a、span、input、img、label等元素)。left(左對齊)、right(右對齊)、center(居中)、justify(兩端對齊)。也可用于<hr/>下劃線對齊方式

默認值： 如果 direction 屬性是 ltr, 則默認值是 left；如果 direction 是 rtl，則為 right。(關于CSS direction 屬性看下面的內(nèi)容介紹)

text-align 和margin auto 區(qū)別

text-align 可以讓塊級元素里面的文字內(nèi)容居中對齊.

文字內(nèi)容 == (圖片 input 行內(nèi)元素 行內(nèi)塊元素)

但是對于里面的塊級元素無效

讓一個塊級元素居中對齊 ： margin:0 auto;

(5)text-indent：設置文本第一行的縮進值。負值用于將文本第一行向外拉, 主要給<p>設置首行。

要在每段前空兩格,可設置為2em，因為em是當前字體尺寸，2em就是兩個字的大小。

默認值： not specified(沒有規(guī)定的)

p{font-size:12px;text-indent:2em;}

上述代碼就是可以實現(xiàn)段落首行縮進24px(也就是兩個字體大小的距離)。

(6)white-space：設置如何處理元素內(nèi)的空白符。有三個選項可選：

normal 會將空白符全部壓縮；

pre 則會如同處理pre標簽內(nèi)的文本一樣處理這些空白符,也就是說，所有的空白符，包括空格，標簽，回車，等都會得以保留；

nowrap 指定文本只有遇到br標簽時才換行。

默認值: normal

(7)display: none 此元素不會被顯示。

block 此元素將顯示為塊級元素，此元素前后會帶有換行符。

inline 默認值。此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。

inline-block 行內(nèi)塊元素。(CSS2.1 新增的值)

list-item 此元素會作為列表顯示。

run-in 此元素會根據(jù)上下文作為塊級元素或內(nèi)聯(lián)元素顯示。

compact CSS 中有值 compact，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。

marker CSS 中有值 marker，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。

table 此元素會作為塊級表格來顯示(類似 <table>)，表格前后帶有換行符。

inline-table 此元素會作為內(nèi)聯(lián)表格來顯示(類似 <table>)，表格前后沒有換行符。

table-row-group 此元素會作為一個或多個行的分組來顯示(類似 <tbody>)。

table-header-group 此元素會作為一個或多個行的分組來顯示(類似 <thead>)。

table-footer-group 此元素會作為一個或多個行的分組來顯示(類似 <tfoot>)。

table-row 此元素會作為一個表格行顯示(類似 <tr>)。

table-column-group 此元素會作為一個或多個列的分組來顯示(類似 <colgroup>)。

table-column 此元素會作為一個單元格列顯示(類似 <col>)

table-cell 此元素會作為一個表格單元格顯示(類似 <td> 和 <th>)

table-caption 此元素會作為一個表格標題顯示(類似 <caption>)

inherit 規(guī)定應該從父元素繼承 display 屬性的值。

默認值： inline

常用的屬性:

display:none; //隱藏
display:block //顯示(將行內(nèi)元素轉(zhuǎn)換為塊元素)
dispaly:inline //將塊元素轉(zhuǎn)換行內(nèi)元素
dispaly:inline-block //將塊元素轉(zhuǎn)換為行內(nèi)塊元素
display:table-cell; //此元素會作為一個表格單元格顯示(類似 <td> 和 <th>) 用于多行文本、塊元素垂直居中

以上轉(zhuǎn)換涉及行內(nèi)塊元素(img、input)轉(zhuǎn)換;

經(jīng)過大量的測試證明：屬性display是不能用于轉(zhuǎn)換行內(nèi)塊元素(img、input)

同義詞: 內(nèi)聯(lián)元素(行內(nèi)元素)

4. box(方框或盒子) 主要針對圖片、表格、層、段落(p)、標題(h1-h6)等

box面板主要設置對象的邊界、間距、高度、寬度、和漂浮方式等。

(1)width：定義元素的寬。

默認值:auto

(2)height：定義元素的高。

默認值:auto

以上width、height屬性如果是針對div標簽設置css樣式，則與定位設置窗口width、height屬性一致(Dreamweaver會自動填充數(shù)據(jù))

在父元素和子元素都設置了高度和寬度的情況下：

如果子元素的寬度超出了它的父元素的寬度, 則會父元素不會限制其顯示寬度;

如果子元素的高度超出了它的父元素的高度, 則會父元素不會限制其顯示高度;

(3)float：定義元素的漂浮方式。left 表示對象浮在左邊、right表示對象浮在右邊、none 表示對象不浮動。

默認值:none

一個span標簽不需要轉(zhuǎn)成塊級元素, 就能夠設置寬度、高度了。所以能夠證明一件事兒, 就是所有標簽已經(jīng)不區(qū)分行內(nèi)、塊了。

也就是說, 一旦一個元素浮動了, 那么, 將能夠并排了, 并且能夠設置寬高了。無論它原來是個div還是個span。

span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}

(4)clear：不允許元素的漂浮，相對于前一個<div>設置浮動時，下一個有清除設置的元素就會移到它的下面。

left表示不允許左邊有浮動對象 right表示不允許右邊有浮動對象

none 表示允許兩邊都可以有浮動對象 both 不允許有浮動對象。

默認值:none

浮動的主要作用是將塊元素排在同一行(span也可以設置浮動);

浮動元素它會向左或者向右進行浮動, 所謂浮動可以理解"飄";

浮動元素向它遇到父元素的邊框就停止浮動;

浮動元素的層級會比普通元素要高, 并且它不會再占用原有的高度;

浮動元素只會影響后面的元素, 不會影響前面的元素：

浮動元素的后面的元素(可能是一個也可能是多個元素受到影響)也會繼承浮動元素的特性, 它也會浮動了要解決這個問題有兩辦法;

第一個：需要清除浮動

第二個：給父元素設置一個高度(子元素都設置了height高度條件下), 不建議使用

清除浮動后它不會影響到它后面的元素, 父元素會將所有的浮動元素包圍者

當然浮動元素對后面的元素的影響可以做首字母方法, 圖文混排(文字環(huán)繞圖片)等特效；

(5)padding：定義元素內(nèi)容與其邊框的空距(如果元素沒有邊框就是指頁邊的空白)。

可以分別設置分別設置上、右、下、左內(nèi)邊距。

padding-top

padding-right

padding-bottom

padding-left

p {padding:20px} 設置設置上、右、下、左內(nèi)邊距都為20px

p {margin: 20px 30px 30px 20px;} 設置padding-top padding-right padding-bottom padding-left分別為20px 30px 30px 20px

默認值：0。

要懂得, 用小屬性層疊大屬性：

padding: 20px;

padding-left: 30px;

注意：大屬性要寫在前面, 小屬性寫在后面;

比如：

div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding:40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}

padding-left:10px和padding-right:20px沒用, 因為后面的padding大屬性, 層疊覆蓋了。

(6)margin：定義元素的邊框與其他元素之間的距離(如果沒有邊框就是指內(nèi)容之間的距離)。

可以分別設置上邊界、右邊界、下邊界、左邊界的值。

margin-top

margin-right

margin-bottom

margin-left

p {margin:20px}

p {margin:10px 0px 15px 5px;}

默認值：0

marign：上邊界值 右邊界值 下邊界值 左邊界值

margin屬性值必須按照上面順序進行排列,以空格分開。如果僅輸入一個值,則4個邊界值會同時設置為此值。

如果僅輸入兩個的值,則缺少的值會以對邊的設置值進行替代。例如：

div{margin:5px 10px 15px 20px} /*上=5px,右=10px,下=15px,左=20px*/
div{margin:5px} /*上=5px,右=5px,下=5px,左=5px*/
div{margin:5px 10px} /*上=5px,右=10px,下=5px,左=10px*/
div{margin:5px 10px 15px} /*上=5px,右=10px,下=15px,左=10px*/

5. border(邊框) 針對段落(p標簽)、圖片、表格、標題(h1-h6)、form、input等(幾乎所有的元素都可以設置邊框)

border面板可以設置對象邊框的寬度、顏色及樣式。

(1)border-width：設置元素邊的寬度?？梢苑謩e設定top(上邊寬)、right(右邊寬)、bottom(下邊寬)、left(左邊寬)的值。

border-top-width border-right-width border-bottom-width border-left-width

thin 定義細的邊框。

medium 默認。定義中等的邊框。

thick 定義粗的邊框。

length 允許您自定義邊框的寬度。

inherit 規(guī)定應該從父元素繼承邊框?qū)挾取?/p>

默認值: medium

(2)border-color：設置邊框的顏色。你可以分別對每條邊設置顏色。

注意：我們可以通過設置不同的顏色做出亮邊和暗邊的效果，這樣元素看起來是立體的。

border-top-color border-right-color border-bottom-color border-left-color

默認值: not specified(未規(guī)定的)

(3)border-style：設置邊框樣式。

border-top-style border-right-style border-bottom-style border-left-style

可以設置為none(無邊框)、dotted(點線)、dashed(虛線)、solid(實線)、double(雙線)、

groove(凹槽,3D凹線)、ridge(凸槽,3D凸線)、inset(凹邊,3D嵌入線)、outset(凸邊,3D浮出線)等邊框樣式。

默認值:none(無邊框)

推薦：表單輸入框：inset(凹邊) 按鈕：outset(凸邊)

兼容性問題

比如, border:10px ridge red; 在chrome和firefox、IE中有細微差別：

如果公司里面的設計師, 處女座的, 追求極高的頁面還原度, 那么不能使用css來制作邊框。

就要用到圖片, 就要切圖了。所以, 比較穩(wěn)定的就幾個：solid、dashed、dotted, 其他的邊框樣式盡量不要用。

border可以沒有： border: none;

某一條邊沒有： border-left: none;

也可以調(diào)整左邊邊框的寬度為0px： border-left-width: 0px;

注意：border-bottom-style：可以修改a鏈接的"下劃線"的風格

border-bottom-width：可以修改a鏈接的"下劃線"的寬度(粗細)

border-bottom-color：可以修改a鏈接的"下劃線"的顏色

.HTML 介紹

是網(wǎng)頁的后綴，txt 后綴是文本 ，py 后綴是 python ，html 后綴就是網(wǎng)頁的意思。我們?nèi)绻雱?chuàng)建一個網(wǎng)頁的話，可以直接將文本的后綴改為 html 。HTMLSHI 超文本標記語言，是一種標識性的語言。它包括一系列標記標簽，通過這些標記標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。

1.html 的介紹

頁面整體分為兩部分：

一部分是head部分，主要是頁面的整體信息和配置，內(nèi)容不會出現(xiàn)在瀏覽器內(nèi)部。

一部分是body部分，這部分內(nèi)容則會在瀏覽器中展示出來

我們使用 pycharm 創(chuàng)建一個 html ，打開后就是下圖模樣。

（1）文檔類型聲明（默認的可以不用設置）

<!DOCTYPE html>

（2）開始標簽和結(jié)束標簽

一般的標簽是成對出現(xiàn)的，一般稱第一個標簽是開始標簽，第二個是結(jié)束標簽。開始和結(jié)束標簽也稱為開放標簽和閉合標簽。

開始標簽：

<html lang="en">

其中的 html 為根元素，是所有元素的基礎。lang 表示語言，en 表示英文。

結(jié)束標簽：

</html>

（3）頭部標簽

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

其中 utf-8 表示字符編碼格式，如果沒有寫這個就會發(fā)生亂碼。Title 表示文檔的標題。

（4）身體標簽

<body>

</body>

身體標簽是文檔的主題，可視化區(qū)域，所有的音頻，視頻，圖片，文字都可在其中搭建，相當于我們打開網(wǎng)頁時所看到內(nèi)容。

（5）標簽的特點

標簽是由一對尖括號包裹單詞構(gòu)成的，標簽要使用小寫。 一般的標簽是成對出現(xiàn)的，一般稱第一個標簽是開始標簽，第二個是結(jié)束標簽。開始和結(jié)束標簽也稱為開放標簽和閉合標簽。

二.標簽

標簽分為塊級標簽和內(nèi)聯(lián)標簽（運行時點擊右上角的谷歌模式的小圓圈就可以）

1.內(nèi)容的書寫

（1）塊級標簽（p）

兩個 p 中間可隨意書寫內(nèi)容

<p>故事和酒，淘寶都有</p>

（2）內(nèi)聯(lián)標簽（span）

<span>故事和酒，淘寶都有</span>

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 塊級標簽--> 
<p>故事和酒，淘寶都有</p>
<!--內(nèi)聯(lián)標簽-->
<span>故事和酒，淘寶都有</span>
</body>
</html>

運行后：

運行后看不出塊級標簽和內(nèi)聯(lián)標簽的區(qū)別，所有我們使用檢查。右擊后點擊檢查

在點擊下圖中左上角的方框箭頭，變成藍色說明正在運行，之后就可以查看有關的數(shù)據(jù)了

無需點擊，只要將箭頭放在文字上就會出現(xiàn)相關內(nèi)容

上面兩圖可以明顯看出兩句話的寬度不相同。

塊級標簽：在不設置寬度的情況下，寬度始終和瀏覽器寬度保持一致。

內(nèi)聯(lián)標簽：寬度和內(nèi)容有關

2.設置高度寬度

<p style="width: 500px;height: 50px;">故事和酒，淘寶都有</p>

<span style="width: 500px;height: 50px;">故事和酒，淘寶都有</span>

如圖所示，只有塊級標簽寬高改變了，內(nèi)聯(lián)標簽不改變。由此可得，塊級標簽設置寬高有效，內(nèi)聯(lián)標簽設置寬高無效。

3.多個標簽同時存在

<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有</p>
<p>故事和酒，淘寶都有</p>
<!--內(nèi)聯(lián)標簽-->
<span>故事和酒，淘寶都有22</span>
<span>故事和酒，淘寶都有22</span>
</body>

多個塊級標簽同時存在的情況下，排列方式從上往下
多個內(nèi)聯(lián)標簽同時存在的情況下，排列方式從左往右

4.是否包含

<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有
    <span>故事和酒，淘寶都有22</span>
</p>

<!--內(nèi)聯(lián)標簽-->
<span>故事和酒，淘寶都有22
    <p>故事和酒，淘寶都有</p>
</span>

</body>

由此可知，塊級標簽可以包含內(nèi)聯(lián)標簽，但內(nèi)聯(lián)標簽不可以包含塊級標簽，只可以包含內(nèi)聯(lián)標簽。

5.塊級標簽與內(nèi)聯(lián)標簽相互轉(zhuǎn)換

（1）塊級轉(zhuǎn)內(nèi)聯(lián)

<body>
<!--將塊級標簽轉(zhuǎn)化成內(nèi)聯(lián)標簽-->
<p style="display: inline">故事和酒，淘寶都有</p>
<p style="display: inline">故事和酒，淘寶都有</p>

</body>

（2）內(nèi)聯(lián)轉(zhuǎn)塊級（display: block）

內(nèi)聯(lián)轉(zhuǎn)為塊級之后，具有了塊級的性質(zhì)。

<span style="display: block">故事和酒，淘寶都有222</span>
<span style="display: block">故事和酒，淘寶都有222</span>

（3）內(nèi)聯(lián)塊元素（display: inline-block）

內(nèi)聯(lián)塊元素包含了內(nèi)聯(lián)標簽和塊級標簽的部分特性。

<span style="display: inline-block">故事和酒，淘寶都有333</span>
<span style="display: inline-block;height: 50px">故事和酒，淘寶都有333</span>

（4）段落標簽（p）

<!--段落標簽-->
<p></p>

（5）標題標簽（h）