HTML快速入門

一、概述

HTML是超文本標(biāo)記語言（Hyper Text Markup Language）的縮寫。它不是一種編程語言，而是一種標(biāo)記語言，HTML通過使用標(biāo)記標(biāo)簽來描述網(wǎng)頁。Web瀏覽器讀取HTML文檔，并以網(wǎng)頁的形式顯示出來。瀏覽器不會顯示HTML標(biāo)簽，而是使用標(biāo)簽來解釋頁面的內(nèi)容。

二、概念

1、標(biāo)簽

HTML文檔和HTML元素是通過HTML標(biāo)簽進行標(biāo)記的。HTML標(biāo)簽由開始標(biāo)簽和結(jié)束標(biāo)簽組成，某些HTML元素沒有結(jié)束標(biāo)簽。

2、元素

HTML元素是從開始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼，開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容被稱為元素的內(nèi)容。大多數(shù)HTML元素可以擁有屬性，并且可以嵌套。

3、屬性

HTML標(biāo)簽可以擁有屬性，屬性提供了有關(guān)HTML元素的更多信息。屬性總是以名稱-值對的形式出現(xiàn)，并且總是在HTML元素的開始標(biāo)簽中定義。屬性值應(yīng)該始終被包括在引號內(nèi)，通常使用雙引號，如果屬性值本身包含雙引號，則必須使用單引號。

三、用法

1、標(biāo)題

標(biāo)題通過<h1>至<h6>等標(biāo)簽進行定義，其中<h1>定義最大的一級標(biāo)題，<h6>定義最小的六級標(biāo)題。在同一文檔中，<h1>只能出現(xiàn)一次，其他標(biāo)題標(biāo)簽可以出現(xiàn)多次。默認(rèn)情況下，HTML會自動在塊級元素前后添加一個空行，如標(biāo)題、段落等。搜索引擎會使用標(biāo)題為網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引。

<h1>This is a heading</h1>

2、段落

段落是通過<p>標(biāo)簽定義的，用于HTML文檔的分割。在段落中進行換行，可以使用<br />標(biāo)簽。顯示頁面時，瀏覽器會移除HTML文檔中多余的空格和空行，所有連續(xù)的空格或空行會被當(dāng)成一個空格。

<p>This is<br />a para<br />graph with line breaks</p>

3、元素容器

<div>元素是塊級元素，它是可用于組合其他HTML元素的容器。與CSS一同使用，<div>元素可用于對大的內(nèi)容塊設(shè)置樣式屬性。另一個常見的用途是文檔布局。

<div style="color:#0000FF">
  <h3>title in div</h3>
  <p>text in div</p>
</div>

4、文本容器

<span>元素是內(nèi)聯(lián)元素，可用作文本的容器。與CSS一同使用時，<span>元素可用于為部分文本設(shè)置樣式屬性。

<p>Please click the <span style="color:blue">blue</span> text.</p>

5、樣式

通過使用style屬性直接將樣式添加到HTML元素，或者間接地在CSS文件中進行定義。樣式包括背景顏色、字體、顏色、尺寸、文本對齊等。

6、鏈接

使用<a>標(biāo)簽來創(chuàng)建連接到另一個文檔的鏈接。<a>用來創(chuàng)建錨，錨可以指向網(wǎng)絡(luò)上的任何資源，如HTML頁面、圖像、多媒體文件等。開始標(biāo)簽和結(jié)束標(biāo)簽之間的文字作為超級鏈接顯示。

<a  target="_blank">Google!</a>
  • href屬性用于定位需要鏈接的文檔
  • target屬性可以定義被鏈接的文檔在何處顯示
  • name屬性用于創(chuàng)建命名錨，將#號和錨名稱添加到URL的尾部，可以直接鏈接到命名錨

tips：總是將正斜杠添加到地址的尾部，否則服務(wù)器會產(chǎn)生兩次HTTP請求。

7、表格

表格由<table>標(biāo)簽來定義，表格的表頭由<th>標(biāo)簽進行定義，表格的行由<tr>標(biāo)簽定義，單元格由<td>標(biāo)簽定義。單元格可以包含文本、圖片、列表、段落、表單、表格、水平線等元素。部分瀏覽器，空單元格不會顯示邊框，可以使用空格占位符來顯示邊框。

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td> </td>
    </tr>
</table>
  • border屬性定義表格的邊框

8、列表

HTML支持有序、無序、自定義列表。

無序列表使用<ul>標(biāo)簽，列表項使用<li>標(biāo)簽，每個項目使用粗體原點進行標(biāo)記。

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

有序列表使用<ol>標(biāo)簽，列表項使用<li>標(biāo)簽，每個項目使用數(shù)字進行標(biāo)記。列表項內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等元素。

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

自定義列表不只是一列項目，而是項目及其注釋的組合。自定義列表使用<dl>標(biāo)簽，每個列表項使用<dt>標(biāo)簽，每個列表項的定義使用<dd>標(biāo)簽。

<dl>
 <dt>Coffee</dt>
   <dd>Black hot drink</dd>
 <dt>Milk</dt>
   <dd>White cold drink</dd>
</dl>

9、表單

表單是一個包含表單元素的區(qū)域，使用<form>標(biāo)簽定義。表單元素是允許用戶在表單中輸入信息的元素，如文本框、下拉列表、單選框、復(fù)選框等。經(jīng)常被用到的表單標(biāo)簽是<input>輸入標(biāo)簽，輸入類型由該標(biāo)簽的type屬性定義。

<form name="input" action="form_action.jsp" method="get">
    Username: 
    <input type="text" name="user" />
    <input type="submit" value="Submit" />
</form>
  • action屬性定義表單的目標(biāo)文檔的文件名

由動作屬性定義的文檔通常會對接收到的輸入數(shù)據(jù)進行相關(guān)處理。

10、圖片

圖片資源由<img>標(biāo)簽定義。

  • src屬性的值指向圖片的URL地址
  • alt屬性用來為圖片定義可替換的文本，當(dāng)無法載入圖片時，使用該文本

11、頭部

文檔的頭部使用<head>標(biāo)簽定義，包含關(guān)于文檔的概要信息，也稱為元信息。頭部中的元素不會被瀏覽器顯示出來。只有幾個標(biāo)簽在HTML的頭部是合法的。

<head>
  <title>This is the title</title>
</head>
  • <base>作為文檔中所有鏈接標(biāo)簽的默認(rèn)鏈接
  • <link>定義了文檔與外部資源之間的關(guān)系，通常用來鏈接到樣式表
  • <meta>提供與瀏覽器或者搜索引擎相關(guān)的信息，比如描述文檔的內(nèi)容等
  • <title>定義了不同文檔的標(biāo)題，包括瀏覽器的標(biāo)題、搜索引擎結(jié)果頁面的標(biāo)題等，是必須項
  • <style>用來定義樣式
  • <script>用來加載腳本

12、主體

文檔的主體部分使用<body>標(biāo)簽定義。

<body bgcolor="black" background="clouds.gif">
  • bgcolor屬性用來設(shè)置背景顏色，屬性值可以是十六進制、RGB值或顏色名
  • background屬性用來將圖片設(shè)置為背景，屬性值為圖片的URL

tips：應(yīng)該使用CSS來定義HTML元素的布局和顯示屬性。

13、腳本

腳本使用<script>標(biāo)簽進行定義，可以使用type屬性來指定腳本語言。

<script type="text/javascript">

14、事件

瀏覽器內(nèi)置有大量的事件處理器，這些處理器會監(jiān)視特定的條件或用戶行為。將某些特定的事件處理器作為屬性添加給特定的標(biāo)簽，并在事件發(fā)生時執(zhí)行對應(yīng)的JS命令或函數(shù)。事件處理器的值是一系列以分號分隔的JS表達式、方法和函數(shù)調(diào)用，并用引號引起來。事件分為窗口事件、表單元素事件、圖像事件、鍵盤事件、鼠標(biāo)事件等。

<a href="/index.html" onmouseover="alert('Welcome');return false"></a>

15、URL

URL（統(tǒng)一資源定位器）用于對萬維網(wǎng)上的文檔或數(shù)據(jù)進行尋址。一個完整的網(wǎng)址，遵循一定的語法規(guī)則：scheme://host.domain:port/path/filename，各部分定義如下：

  • scheme定義因特網(wǎng)服務(wù)的類型，如http或https
  • host定義域中的主機，缺省為www
  • domain定義因特網(wǎng)域名，如google.com
  • port定義主機的端口號，缺省為80
  • path定義服務(wù)器上的路徑，如果路徑被省略，資源（文檔）會被定位到網(wǎng)站的根目錄
  • filename定義文檔的名稱
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,154評論 1贊 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,564評論 19贊 139
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,530評論 1贊 41
  • 前言： 1.HTML5的發(fā)展非常迅速，可以說已經(jīng)是前端開發(fā)人員的標(biāo)配，在電商類型的APP中更是運用廣泛，這個系列的...
    珍此良辰閱讀 1,993評論 2贊 15
  • 在日本你經(jīng)常會遇到那樣的畫面：獨自放學(xué)回家的小學(xué)生要通過沒有紅綠燈的斑馬線時，斑馬線前的汽車會自覺停下來，日...
    益源教育閱讀 924評論 0贊 0

友情鏈接更多精彩內(nèi)容