【轉載】HTML語法介紹

阿新 • • 發佈：2018-12-20

https://www.cnblogs.com/wj-1314/articles/9221044.html

HTML語法介紹

一基本標籤（塊級標籤和內聯標籤）

<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.

<p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.

<b> <strong>: 加粗標籤.

<strike>: 為文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角標和下角表.

<br>:換行.

<hr>:水平線

<div><span>

塊級標籤：<p><h1><table><ol><ul><form><div>

內聯標籤：<a><input><img><sub><sup><textarea><span>

block（塊）元素的特點

總是在新行上開始；
寬度預設是它的容器的100%，除非設定一個寬度。
它可以容納內聯元素和其他塊元素

inline元素的特點

和其他元素都在一行上；
寬度就是它的文字或圖片的寬度，不可改變
內聯元素只能容納文字或者其他內聯元素

特殊字元

&lt; &gt; &quot; &copy; &reg;

<br>標籤

　　<br>可插入一個簡單的換行符。

　　<br>標籤是空標籤（意味著它沒有結束符，因此下面的這個是錯誤的：<br></br>）

1.1 HTML中塊級標籤和內聯標籤的區別

塊級元素	行內元素
獨佔一行,預設情況下，其寬度自動填滿其父元素寬度	相鄰的行內元素會排列在同一行裡，直到一行排不下，才會換行，其寬度隨元素的內容而變化
可以設定width，height屬性	行內元素設定width，height屬性無效
可以設定margin和padding屬性	行內元素起邊距作用的只有margin-left、margin-right、padding-left、padding-right，其它屬性不會起邊距效果。
對應於display:block	對應於display:inline；

二，head標籤

　　我們首先來介紹一下head標籤的主要內容和作用，文件的頭部描述了文件的各種屬性和資訊，包括文件的標題、編碼方式及URL等資訊,這些資訊大部分是用於提供索引,辯認或其他方面的應用（移動端）的等。以下標籤是可以用在head標籤中的：

<head lang='en'>

<title>標題資訊</title>

<meta charset='utf-8'>

<link>

<style type='text/css'></style>

<script type='text/javascript'></script>

</head>

三，title標籤

　　在<title>和</title>標籤之間的文字內容是網頁的標題資訊，它會顯示在瀏覽器標籤頁的標題欄中。可以把它看成是一個網頁的標題。主要用來告訴使用者和搜尋引擎這個網頁的主要內容是什麼，搜尋引擎可以通過網頁標題，迅速的判斷出當前網頁的主題。

　　下面做一個小練習，建立一個帶有我們自定義標題內容的網頁：

<!DOCTYPE HTML>

<html>

<head>

<title>戰爭熱誠</title>

</head>

<body></body>

</html>

　　將上面的檔案另存為a.html，然後用瀏覽器開啟，就可以看到下面的內容。

上面我們介紹了title標籤的用法，接下來我們繼續看一下head標籤中可以使用的其他標籤：

四，meta標籤

Meta標籤介紹：

　　元素可提供有關頁面的原資訊（mata-information）,針對搜尋引擎和更新頻度的描述和關鍵詞。

　　標籤位於文件的頭部，不包含任何內容。

　　提供的資訊是使用者不可見的。 meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的引數值，這些不同的引數值就實現了不同的網頁功能。

常用的meta標籤：

http-equiv屬性

它用來向瀏覽器傳達一些有用的資訊，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個引數的變數值。

<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<meta http-equiv="x-ua-compatible" content="IE=edge">

2. name屬性

　　主要用於頁面的關鍵字和描述，是寫給搜尋引擎看的，關鍵字可以有多個用 ‘,’號隔開，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人查詢資訊和分類資訊用的。

1 2	`<meta name="keywords"` `content="meta總結,html meta,meta屬性,meta跳轉">` `<meta name="description"` `content="戰爭熱誠">`

五，body標籤

　　想要在網頁上展示出來的內容一定要放在body標籤中。把我們之前海燕那一段HTML程式碼貼過來，儲存到一個HTML格式的檔案中。

<!DOCTYPE HTML>
<html>
    <head>
        <title>戰爭熱誠</title>
    </head>
    <body>
        <h1>海燕</h1>
        <p>在蒼茫的大海上，</p>
        <p>狂風捲集著烏雲。</p>
        <p>在烏雲和大海之間，</p>
        <p>海燕像黑色的閃電，</p>
        <p>在高傲地飛翔。</p>
    </body>
</html>

　　使用瀏覽器開啟，看一下效果：

上面也出現了字型的大小，這是什麼呢？這裡就簡單介紹一下。

六，標題標籤h1~h6

　　<h1> - <h6> 標籤可定義標題。<h1> 定義最大的標題。<h6> 定義最小的標題。由於 h 元素擁有確切的語義，因此請您慎重地選擇恰當的標籤層級來構建文件的結構。因此，請不要利用標題標籤來改變同一行中的字型大小。相反，我們應當使用css來定義來達到漂亮的顯示效果。標題標籤通常用來製作文章或網站的標題。

h1~h6標籤的預設樣式：

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>戰爭熱誠</title>
    </head>
    <body>
        <h1>一級標題</h1><h2>二級標題</h2>
        <h3>三級標題</h3>
        <h4>四級標題</h4>
        <h5>五級標題</h5>
        <h6>六級標題</h6>
    </body>
</html>

　　請看上面程式碼 <h1>和<h2>書寫在一行上展示，但是在瀏覽器的效果卻是換行了，如下：

文字樣式標籤主要用來對HTML頁面中的文字進行修飾，比如加粗，斜體，線條樣式等等，，，，

1. `<b></b>`：加粗

2. `<i></i>`：斜體

3. `<u></u>`：下劃線

4. `<s></s>`：刪除線

5. `<sup></sup>`：上標

6. `<sub></sub>`：下標

　　現在如果想在一段文字中特別強調某幾個字，這時候就可以用到`<em>`或`<strong>`標籤。

這兩個標籤都是表示強調，但是兩者在強調的語氣上有區別:`<em>`表示強調，`<strong>`表示更強烈的強調。

在瀏覽器中`<em>`預設會用斜體表示，`<strong>`會用粗體來表示。兩個標籤相比，我們通常會推薦大家使用`<strong>`表示強調。

七，段落標籤p

<p>,paragraph的簡寫。定義段落

<body>
        <p>我們大多數都是想法太多實踐太少，或者簡單點說就是想不勞而獲</p>
        <p>為了改變自己，我決定好好學習，多做事情，少說話</p>

</body>

瀏覽器展示特點：

跟普通文字一樣，但我們可以通過css來設定當前段落的樣式
是否又獨佔一行呢？答案是的塊級元素

超連結標籤a

href:要連線的資源路徑格式如下: href="http://www.baidu.com"

target: _blank : 在新的視窗開啟超連結. 框架名稱: 在指定框架中開啟連線內容.

name: 定義一個頁面的書籤.

用於跳轉 href : #id.（錨）

　　超級連結<a>標記代表一個連結點，是英文anchor（錨點）的簡寫。它的作用是把當前位置的文字或圖片連線到其他的頁面、文字或影象

<body>

<h1>

<!-- a連結超連結

target:_blank 在新的網站開啟連結的資源地址

_self 在當前網站開啟連結的資源地址

title: 滑鼠懸停時顯示的標題

-->

<a href="http://www.baidu.com" target="_blank" title="百度">百度</a>

<a href="a.zip">下載包</a>

<a href="mailto:[email protected]">聯絡我們</a>

<a href="#">跳轉到頂部</a>

<a href="#p1">跳轉到p1</a>

<!-- javascript:是表示在觸發<a>預設動作時，執行一段JavaScript程式碼，

而 javascript:; 表示什麼都不執行，這樣點選<a>時就沒有任何反應。 -->

<a href="javascript:alert(1)">內容</a>

<a href="javascript:;">內容</a>

</h1>

</body>

　　target:_blank 在新的網站開啟連結的資源地址
　　target：_self 在當前網站開啟連結的資源地址
　　title: 表示滑鼠懸停時顯示的標題

連結其他表現形式：

目標文件為下載資源例如：href屬性值，指定的檔名稱，就是下載操作(rar、zip等)
電子郵件連結前提：計算機中必須安裝郵件客戶端，並且配置好了郵件相關資訊。例如：<ahref="mailto:[email protected]">聯絡我們</a>
返回頁面頂部的空連結或具體id值的標籤例如：<a href="#">內容</a>或<a href="#id值">內容</a>
javascript:是表示在觸發<a>預設動作時，執行一段JavaScript程式碼。例如：<ahref="javascript:alert()">內容</a>
javascript:;表示什麼都不執行，這樣點選<a>時就沒有任何反應例如：<a href="javascrip:;">內容</a

八，列表標籤ul，ol

<ul>: 無序列表

<ol>: 有序列表

<li>:列表中的每一項.

<dl> 定義列表

<dt> 列表標題

<dd> 列表項

　　網站頁面上一些列表相關的內容比如說物品列表、人名列表等等都可以使用列表標籤來展示。通常後面跟<li>標籤一起用，每條li表示列表的內容

　　<ul>:unordered lists的縮寫無序列表 <ol>:ordered listsde的縮寫有序列表

<!-- 無序列表 type可以定義無序列表的樣式-->
    <ul type="circle">
        <li>我的賬戶</li>
        <li>我的訂單</li>
        <li>我的優惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ul>
    <!-- 有序列表 type可以定義有序列表的樣式 -->
    <ol type="a">
        <li>我的賬戶</li>
        <li>我的訂單</li>
        <li>我的優惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ol>

ol標籤的屬性：

type：列表標識的型別

1：數字
a：小寫字母
A：大寫字母
i：小寫羅馬字元
I：大寫羅馬字元

列表標識的起始編號

預設為1

ul標籤的屬性： type：列表標識的型別

disc：實心圓(預設值)
circle：空心圓
square：實心矩形
none：不顯示標識

九，盒子標籤div

　　<div>可定義文件的分割槽 division的縮寫譯：區 <div> 標籤可以把文件分割為獨立的、不同的部分,請看下面程式碼我們將他們進行分割槽

+ View Code

　　分析上面程式碼可以下面的層次結構

<div id='wrap'>
    <div class='para'></div>
    <div class='anchor'></div>
    <div class='para'></div>
    <div class='lists'></div>    
</div>

　　我們將文件放在一個父級的區（div）中，它裡面包含四塊區（div）域，瀏覽器檢視效果,你會發現每小塊區域都是獨佔一行的，所以div是塊級元素。另外，每塊區域表示獨立的一塊，id屬性和class屬性其實很簡單，你可以看成給這個區域起個名字。id是唯一的，一個頁面中不能有兩個重複的id，跟身份證號碼一樣，class可以設定同樣的屬性值，並且可以設定多個，例如class=’para n1‘

十，圖片標籤<img>

src: 要顯示圖片的路徑.

alt: 圖片沒有載入成功時的提示.

title: 滑鼠懸浮時的提示資訊.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

一個網頁除了有文字，還會有圖片。我們使用<img/>標籤在網頁中插入圖片。

語法：

1	`<img` `src="圖片地址" alt="圖片載入失敗時顯示的內容" title = "提示資訊" />`

注意：

src設定的圖片地址可以是本地的地址也可以是一個網路地址。
圖片的格式可以是png、jpg和gif。
alt屬性的值會在圖片載入失敗時顯示在網頁上。
還可以為圖片設定寬度(width)和高度(height)，不設定就顯示圖片預設的寬度和高度

<div>
     <span>與行內元素展示的標籤<span>
     <span>與行內元素展示的標籤<span>
     <img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px">
     <img src="./finance-right.png" alt="人工智慧實戰"  style="width: 200px;height: 200px">
 </div>

瀏覽器檢視效果：行內塊元素
5. 與行內元素在一行內顯示
6. 可以設定寬度和高度
7. span標籤可以單獨摘出某塊內容，結合css設定相應的樣式

十一，表格標籤table

　　表格由<table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割為若干單元格（由<td>標籤定義）。字母 td 指表格資料（table data），即資料單元格的內容。資料單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等等。

border: 表格邊框.

cellpadding: 內邊距

cellspacing: 外邊距.

width: 畫素百分比.（最好通過css來設定長寬）

<tr>: table row

<th>: table head cell

<td>: table data cell

rowspan: 單元格豎跨多少行

colspan: 單元格橫跨多少列（即合併單元格）

<th>: table header <tbody>(不常用): 為表格進行分割槽.

<div class="table">
        <table>
            <!--表格頭-->
            <thead>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】這裡使用的是th-->
                    <th></th>
                </tr>
            </thead>
            <!--表格主體-->
            <tbody>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】這裡使用的是td-->
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </tbody>
            <!--表格底部-->
            <tfoot>
                <tr>
                    <td></td>
                </tr>
            </tfoot>
        </table>
</div>

表格行和列的合併

1 2	`rowspan 合併行(豎著合併)` `colspan 合併列(橫著合併)`

　　小練習：

+ View Code

十二，表單標籤 form

表單是一個包含表單元素的區域
表單元素是允許使用者在表單中輸入內容，比如：文字域(textarea)、輸入框(input)、單選框（）

表單的作用

表單用於顯示、手機資訊，並將資訊提交給伺服器

1，語法

1	`<form>允許出現表單控制元件</form>`

表單標籤<form>

表單用於向伺服器傳輸資料。

表單能夠包含 input 元素，比如文字欄位、複選框、單選框、提交按鈕等等。

表單還可以包含textarea、select、fieldset和 label 元素。

1.表單屬性

　　HTML 表單用於接收不同型別的使用者輸入，使用者提交表單時向伺服器傳輸資料，從而實現使用者與Web伺服器的互動。表單標籤, 要提交的所有內容都應該在該標籤中.

action: 表單提交到哪. 一般指向伺服器端一個程式,程式接收到表單提交過來的資料（即表單元素值）作相應處理，比如https://www.sogou.com/web

method: 表單的提交方式 post/get 預設取值就是 get（信封）

get: 1.提交的鍵值對.放在位址列中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.

post:1.提交的鍵值對不在位址列. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

get/post是常見的兩種請求方式.

2.表單元素

<input> 標籤的屬性和對應值

type: text 文字輸入框

password 密碼輸入框

radio 單選框

checkbox 多選框

submit 提交按鈕

button 按鈕(需要配合js使用.) button和submit的區別？

file 提交檔案：form表單需要加上屬性enctype="multipart/form-data"

name: 表單提交項的鍵.注意和id屬性的區別：name屬性是和伺服器通訊時使用的名稱；

而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端程式設計，而在css和javascript中使用的

value: 表單提交項的值.對於不同的輸入型別，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文字

type="text", "password", "hidden" - 定義輸入欄位的初始值

type="checkbox", "radio", "image" - 定義與輸入相關聯的值　　

checked: radio 和 checkbox 預設被選中

readonly: 只讀. text 和 password

disabled: 對所用input都好使.

type:        text 文字輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 提交按鈕            

             button 按鈕(需要配合js使用.) button和submit的區別？

             file 提交檔案：form表單需要加上屬性enctype="multipart/form-data"   

 name:    表單提交項的鍵.注意和id屬性的區別：name屬性是和伺服器通訊時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客
          戶端程式設計，而在css和javascript中使用的

 value:   表單提交項的值.對於不同的輸入型別，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文字

type="text", "password", "hidden" - 定義輸入欄位的初始值

type="checkbox", "radio", "image" - 定義與輸入相關聯的值　　

 checked:  radio 和 checkbox 預設被選中

 readonly: 只讀. text 和 password

 disabled: 對所用input都好使.

上傳檔案注意兩點：

1 請求方式必須是post

2 enctype="multipart/form-data"

<select> 下拉選標籤屬性

name:表單提交項的鍵.

size：選項個數

multiple：multiple

<option> 下拉選中的每一項屬性：

value:表單提交項的值. selected: selected下拉選預設被選中

<optgroup>為每一項加上分組

<textarea> 文字域

name:    表單提交項的鍵.

cols:    文字域預設有多少列

rows:    文字域預設有多少行

<label>

1 2	`<label` `for="www">姓名</label>` `<input` `id="www" type="text">`

<fieldset>

<fieldset>

<legend>登入吧</legend>

<input type="text">

</fieldset>

屬性見下表：

表單控制元件分類，見下圖：

<form action="http://www.baidu.com" method="get">

<p>

使用者名稱稱：

<input type="text" name="txtUsename" value="請輸入使用者名稱稱" readonly>

</p>

<p>

使用者密碼：

<input type="password" name="txtUsepwd">

</p>

<p>

確認密碼：

<input type="password" name="txtcfmpwd" disabled>

</p>

<p>

使用者性別：

<input type="radio" name="sexrdo" value="男">男

<input type="radio" name="sexrdo" value="女" checked=''>女

</p>

<p>

使用者愛好：吃

<input type="checkbox" name="chkhobby" value="吃" checked> 喝

<input type="checkbox" name="chkhobby" value="喝"> 玩

<input type="checkbox" name="chkhobox" value="玩"> 樂

<input type="checkbox" name="chkhobox" value="樂" checked>

</p>

<p>

<input type="submit" name="btnsbt" value="提交">

<input type="reset" name="btnrst" value="重置">

<input type="button" name="btnbtn" value="普通按鈕">

</p>

<p>

請上傳檔案：

<input type="file" name="txtfile">

</p>

<p>

自我介紹：

<textarea name="txt" cols="20" rows="5"></textarea>

</p>

<p>籍貫：

<select name="sel" size="3" multiple>

<option value="深圳">深圳</option>

<option value="北京">北京</option>

<option value="上海">上海</option>

<option value="廣州" selected>廣州</option>

</select>

</p>

<p>意向工作城市：

<select name="sel">

<option value="深圳">深圳</option>

<option value="北京">北京</option>

<option value="上海">上海</option>

<option value="廣州" selected>廣州</option>

</select>

</p>

</form>

十三，其他標籤

換行標籤 <br>

<br>標籤用來將內容換行，其在HTML網頁上的效果相當於我們平時使用word編輯文件時使用回車換行。

分割線 <hr>

<hr>標籤用來在HTML頁面中建立水平分隔線，通常用來分隔內容

特殊符號

瀏覽器在顯示的時候會移除原始碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML程式碼中的所有連續的空行（換行）也被顯示為一個空格。

舉個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>戰爭熱誠的部落格</title>
</head>
<body>
    <p>
        好好學習

            我們會掙好多錢的
    </p>
</body>
</html>

　　上面的程式碼在瀏覽器中最終的顯示效果為：

　　所以HTML程式碼對縮排的要求並不嚴格，我們通常使用縮排來讓我們的程式碼結構更清晰，僅此而已。

特殊字元

　　在上一個例項中，我們演示了HTML中輸入空格、回車都是沒有作用的。要想輸入空格，需要用特殊符號 --  。

常用的特殊字元：

HTML特殊符號對照表：http://tool.chinaz.com/Tools/HtmlChar.aspx

【轉載】HTML語法介紹

HTML語法介紹

一基本標籤（塊級標籤和內聯標籤）

1.1 HTML中塊級標籤和內聯標籤的區別

二，head標籤

三，title標籤

四，meta標籤

五，body標籤

六，標題標籤h1~h6

七，段落標籤p

超連結標籤a

八，列表標籤ul，ol

九，盒子標籤div

十，圖片標籤<img>

十一，表格標籤table

十二，表單標籤 form

表單的作用

十三，其他標籤

特殊字元

【轉載】HTML語法介紹

【轉載】WEBRTC基本介紹

【轉載】Hadoop產品介紹

【轉載】CSS語法基礎

【轉載】CSS基本介紹

【轉載】HTML 中標籤的含義

【轉載】大牛很通俗地介紹《信號與系統》

【轉載】企業服務總線Enterprise service bus介紹

jenkins上展示html報告【轉載】

Linux中 /boot 目錄介紹【轉載】

【前端】html基礎——轉載

【轉載】動態生成html元素並為元素追加屬性

【轉載】介紹 Firefox 多開的方法

【轉載】Elasticsearch－基礎介紹及索引原理分析

【轉載】 ABAP SELECT-INTO用法 SELECT @ (AT) 新語法 SELECT * INTO DATA(@IT_ITAB)

【學習筆記】HTML語法筆記

【轉載】Qt入門與提高：K02-01通過簡單exe介紹pro基本配置

【轉載】什麼是HTML

【轉載】 ABAP SELECT-INTO用法 SELECT @ (AT) SELECT * INTO DATA(@IT_ITAB 新語法

【轉載】通過金礦模型介紹動態規劃 (動態規劃入門)

【轉載】HTML語法介紹

一 基本標籤（塊級標籤和內聯標籤）

1.1 HTML中塊級標籤和內聯標籤的區別

二，head標籤

三，title標籤

四，meta標籤

五，body標籤

六，標題標籤h1~h6

七，段落標籤p

超連結標籤a

八，列表標籤ul，ol

九，盒子標籤div

十，圖片標籤<img>

十一，表格標籤table

十二，表單標籤 form

表單的作用

十三，其他標籤

特殊字元

相關推薦

一基本標籤（塊級標籤和內聯標籤）