【前端】HTML標籤

時間 2019-11-08

標籤前端 html 標籤欄目 HTML 简体版

原文原文鏈接

前言

本文主要在初學HTML時，對經常使用標籤作一些記錄。主要是標籤的使用，以及效果展現。目的在於有個大概的認識：有什麼標籤？能作什麼？css

固然，這方面有runoob、w3school等很是出色的網站，若是想看更加全面的信息，能夠直接去這些網站。（我也是在那學習的）html

介紹

HTML標籤也叫HTML元素，是HTML語言中的基本單位，一個HTML頁面（網頁）由多個 HTML標籤構成。瀏覽器

也就是說，咱們能夠用HTML來編寫一個網頁。緩存

一個例子

在開始介紹標籤以前，先看一個栗子。網絡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>這是個人第一個頁面</p>
    <span>Gavin是真的帥</span>
    <span>Gavin是真的帥</span>
</body>
</html>
複製代碼

這是隻有兩個元素的頁面，運行後是這樣的：（看中的內容，會發現跟Android中的佈局有點像。）框架

來看看上面內容，其中包涵了<!DOCTYPE html>、<html>、<head>、<body>等標籤。下面看看他們都有什麼做用ide

爲頁面上的全部連接規定默認地址或默認目標。 瀏覽器隨後將再也不使用當前文檔的 URL，而使用指定的基本 URL 來解析全部的相對 URL。這其中包括<a>、<img>、<link>、<form>標籤中的 URL。(絕對路徑的不受影響，本地路徑卻受到波及？)

`<link>`

標籤訂義了文檔與外部資源之間的關係。 標籤一般用於連接到樣式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
複製代碼

屬性

href：被連接文檔的位置
hreflang：被連接文檔中文本的語言
media：被連接文檔將被顯示在什麼設備上
rel：當前文檔與被連接文檔之間的關係（alternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag）
type：規定被連接文檔的 MIME 類型 H5
sizes：被連接資源的尺寸。僅適用於 rel="icon"

`<style>`

標籤訂義了HTML文檔的樣式文件引用地址，也能夠直接添加樣式來渲染 HTML 文檔。 例：當前的body中的<p>顏色改成#BBBBBB

<head>
    <style type="text/css"> p { color: #BBBBBB; } </style>
</head>
複製代碼

提供有關頁面的元信息，提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。

META 元素一般用於指定網頁的描述，關鍵詞，文件的最後修改時間，做者，和其餘元數據。

元素定義了 HTML 文檔的主體，包含文檔的全部內容。 如下列舉的標籤都寫在<body></body>中

以上是一個HTML頁面所包含的標準結構，這些標籤在頁面中是看不見的（除了title），接下來看看那些頁面中能夠看到的標籤

在介紹前先了解下內聯元素、塊級元素。上面例子中有兩個標籤上面沒有提到，就是

和。

就是個典型塊級元素，而是個典型的內聯元素。

內聯元素、塊級元素

回到上面的例子，細心的同窗可能會奇怪，爲何代碼寫了三行文字，頁面上卻只有兩行？並且後面的兩行是連在一塊兒的？這就要說到塊級元素和內聯元素了。

<p>這是個人第一個頁面</p>
<span>Gavin是真的帥</span>
<span>Gavin是真的帥</span>
複製代碼

塊級元素

老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示; 寬度、高度、內邊距和外邊距都可控制。 <p>就是個塊元素。經常使用的塊級元素：<h1>、<p>、<ul>、<table>、<div>。

內聯元素

和相鄰的內聯元素在同一行; 寬度、高度、內邊距的top/bottom和外邊距的top/bottom都不可改變。上面用到的<span>就是個內聯元素，因此，兩個<span>中的內容出如今同一行上。經常使用的內聯元素：<span>、<b>、<td>、<a>、<img>。

<hr/>

除了上面提到的，還有一些經常使用的其餘標籤

標題 `<h1>` - `<h6>`

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

<h1>標題 1</h1>
<h2>標題 2</h2>
<h3>標題 3</h3>
<h4>標題 4</h4>
<h5>標題 5</h5>
<h6>標題 6</h6>
複製代碼

效果：

一、搜索引擎使用標題爲網頁的結構和內容編制索引。二、用戶能夠經過標題來快速瀏覽您的網頁，因此用標題來呈現文檔結構是很重要的。

段落 `<p>`

<p>表示一個段落，是個塊級元素

例：

<p>段落1</p>
<p>段落2</p>
複製代碼

效果：

tips：瀏覽器會自動地在段落的先後添加空行

水平線 `< hr/>`

在 HTML 頁面中建立水平線。 效果：

換行 `< br/>`

一個簡單的換行符，是空標籤（意味着它沒有結束標籤，所以這是錯誤的：< br></br>）

例：能夠測穿插在標籤中

<p>段落2-1< br/>段落2-2</p>
複製代碼

效果：

注：全部連續的空行（換行）也被顯示爲一個空格。

超連接

有兩個做用一、超文本連接：跳轉到指定目標二、錨點：跳轉到指定位置

屬性

href：規定連接的目標
target：標籤的 target 屬性規定在何處打開連接文檔，規定已下：
- _blank：瀏覽器總在一個新打開、未命名的窗口中載入目標文檔
- _self：當前相同的框架或者窗口打開（默認）
- _parent：使得文檔載入父窗口或者包含來超連接引用的框架的框架集。若是這個引用是在窗口或者在頂級框架中，那麼它與目標 _self 等效
- _top：文檔載入包含這個超連接的窗口

做爲連接

超連接能夠是一個字，一個詞，或者一組詞，也能夠是一幅圖像

例：

<a href="https://www.jianshu.com/u/769d3d3a9d4b">連接</a>
複製代碼

效果： 連接

做爲錨點

跳轉到指定位置

**例：**在<h1>中定義id（title1），<a>的href屬性指向title1。點擊<a>標籤後將跳轉到<h1>的位置（或到指定頁面對應id的標籤位置）。

<h1 id="title1">標題 1</h1>
<a href="#title1">跳轉標題1</a><br/>
複製代碼

圖像

展現一張圖片，能夠是本地或網絡圖片。屬性

src：顯示圖像的 URL
alt：圖像的替代文本。

例：

<img src="image/image1.png">
<!--圖片大小限制-->
<img src="image/image1.png" height="300" width="300">
<!--網絡圖片-->
<img src="http://g.hiphotos.baidu.com/image/pic/item/0dd7912397dda1443b5c9090bfb7d0a20cf486bf.jpg" height="300" width="500">
複製代碼

附：圖片image1.png路徑和index.html層級關係

表格

用於繪製表格，須要用到一下內部標籤： <tr>：表格分割若干行數 <td>：每行被分割爲若干單元格 <th>：表格頭

屬性

border：表格邊框的寬度（pixels）
cellpadding：單元邊沿與其內容之間的空白（pixels、%）
cellspacing：規定單元格之間的空白（pixels、%）
frame：外側邊框的哪一個部分是可見的（void、above、below、hsides、lhs、rhs、vsides、box、border）
rules：內側邊框的哪一個部分是可見的（none、groups、rows、cols、all）
summary：規定表格的摘要

例：

<table border="1" cellpadding="5" cellspacing="10" frame="above" rules="all" summary="summary">
    <tr>
        <th>top1</th>
        <th>top2</th>
        <th>top3</th>
    </tr>
    <tr>
        <td>行1列1</td>
        <td>行1列2</td>
        <td>行1列3</td>
    </tr>
    <tr>
        <td>行2列1</td>
        <td>行2列2</td>
        <td>行2列3</td>
    </tr>
</table>
複製代碼

數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。

列表

列表包含無序列表和有序列表

無序列表

例：

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
複製代碼

效果：

有序列表

例：

<ol start="D" type="A">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ol>
複製代碼

效果：

結語

標籤的介紹到這裏就結束了，本文主要介紹一下經常使用的標籤，並展現其實際效果，對其有個大體的認識。學完標籤，你可能會有新的疑問：內容是寫上去了，想改變一個內容的**顏色、背景...**該怎麼辦？這裏就要說到CSS了（參考CSS入門）

參考

相關閱讀

有錯誤之處，感謝指出，接收批評

相關標籤/搜索

每日一句

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

【前端】HTML標籤

前言

介紹

一個例子

標籤

<!DOCTYPE>

`<html>`

`<head>`

`<title>`

`<base>`

`<link>`

`<style>`

內聯元素、塊級元素

塊級元素

內聯元素

標題 `<h1>` - `<h6>`

段落 `<p>`

水平線 `< hr/>`

換行 `< br/>`

超連接

屬性

做爲連接

做爲錨點

圖像

列表

無序列表

有序列表

結語

參考

【前端】HTML標籤

前言

介紹

一個例子

標籤

<!DOCTYPE>

<html>

<head>

<title>

<base>

<link>

<style>

內聯元素、塊級元素

塊級元素

內聯元素

標題 <h1> - <h6>

段落 <p>

水平線 < hr/>

換行 < br/>

超連接

屬性

做爲連接

做爲錨點

圖像

列表

無序列表

有序列表

結語

參考

`<html>`

`<head>`

`<title>`

`<base>`

`<link>`

`<style>`

標題 `<h1>` - `<h6>`

段落 `<p>`

水平線 `< hr/>`

換行 `< br/>`