2. 程式人生 > >HTML程式設計快速入門教程

HTML程式設計快速入門教程

阿新 • • 發佈：2019-01-20

一、什麼是HTML

HTML是英文Hyper Text Mark-up Language(超文字標記語言)的縮寫，它規定了HTML的語法規則，用來表示比“文字”更豐富的意義，比如圖片，表格，連結等。瀏覽器（IE，火狐等）軟體知道HTML語言的語法，可以用來檢視HTML文件。目前為止網際網路上的絕大多數網頁都是使用HTML語言來編寫的。

html程式設計入門

二、HTML是什麼樣的

簡而言之，HTML的語法就是給文字加上描述標籤(Tag)，讓使用者（人或程式）能更好的理解該文字。

下面來看一個最簡單的HTML文件：

<html>
      <head>
        <
 
title>第一個Html文件</title>
      </head>
      <body>
        歡迎訪問<ahref="http://www.w3cschool.cn">W3Cschool官網</a>!
      </body>
</html>

效果截圖


所有的HTML文件都會有一個<html>標籤，<html>標籤可以包含兩個部分:<head>和<body>。

<head> 元素包含了所有的頭部標籤元素。在 <head>元素中你可以插入指令碼（scripts）, 樣式檔案（CSS），及各種meta資訊。

可以新增在頭部區域的元素標籤有: <title>, <style>, <meta>, <link>, <script>, <noscript>, 和<base>.

HTML使用標籤 <a>來設定超文字連結。

超連結可以是一個字，一個詞，或者一組詞，也可以是一幅影象，您可以點選這些內容來跳轉到新的文件或者當前文件中的某個部分。

當您把滑鼠指標移動到網頁中的某個連結上時，箭頭會變為一隻小手。

在標籤<a> 中使用了href屬性來描述連結的地址。

預設情況下，連結將以以下形式出現在瀏覽器中：

  • 一個未訪問過的連結顯示為藍色字型並帶有下劃線
  • 訪問過的連結顯示為紫色並帶上下劃線
  • 點選連結時，連結顯示為紅色並帶上下劃線

三、HTML 連結語法

連結的 HTML 程式碼很簡單。它類似這樣：:

<a href="http://www.w3cschool.cn">Link text</a>

href 屬性描述了連結的目標。.

上面的<a href="http://www.w3cschool.cn">中，href屬性的值就是http://www.w3cschool.cn。

三、HTML文件可以包含的內容

通過不同的標籤，HTML文件可以包含不同的內容，比如文字，連結，圖片，列表，表格，表單，框架等。

  • 文字：HTML對文字的支援是最豐富的，你可以設定不同級別的標題，分段和換行，可以指定文字的語義和外觀，可以說明文字是引用自其它的地方，等等等等。
  • 連結：連結用來指出內容與另一個頁面或當前頁面某個地方有關。
  • 圖片：圖片用於使頁面更加美觀，或提供更多的資訊。
  • 列表：列表用於說明一系列條目是彼此相關的。
  • 表格：表格是按行與列將資料組織在一起的形式。也有不少人使用表格進行頁面佈局。
  • 表單：表單通常由文字輸入框，按鈕，多選框，單選框，下拉列表等組成，使HTML頁面更有互動性。
  • 框架：框架使頁面裡能包含其它的頁面。

四、HTML文件格式詳細說明

前面介紹了HTML文件的基本格式，下面再做一個詳細說明。

HTML文件可以用任何文字編輯器（比如記事本，UltraEdit等）建立，編輯，因為它的內容在本質也只是一些文字。

在HTML文字中，用尖括號括起來的部分稱為標籤。如果想在正文裡使用尖括號（或者大與號小與號，總之是同一個東西），必須使用字元轉義，也就是說轉換字元的原有意義。<應該使用&lt;代替，>則使用&gt;，至於&符號本身,則應該使用&amp;替代（不得不說的是有很多HTML文件沒有遵循這個規則，常用的瀏覽器也都能夠分析出&到底是一個轉義的開始，還是一個符號，但是這樣做是不推薦的）。

標籤本質上是對它所包含的內容的說明，可能會有屬性，來給出更多的資訊。比如<img>（圖片）標籤有src屬性（用於指明圖片的地址），width和height屬性（用於說明圖片的寬度和高度）。HTML裡能使用哪些標籤，這些標籤分別可以擁有哪些屬性，這些都是有規定的，知道了這裡說的基本知識之後，學習HTML其實也就是學習這些標籤了。本文後面會對常用的HTML標籤做出簡短的介紹。

標籤通常有開始部分和結束部分（也被稱為開始標籤和結束標籤），它們一起限定了這個標籤所包含的內容。屬性只能在開始標籤中指定，屬性值可以用單引號或雙引號括起來。結束標籤都以/加上標籤名來表示。有時候，有些標籤並不包含其它內容（只包括自己的屬性，甚至連屬性都沒有），這種情況下，可以寫成類似這樣：<img src="http://statics.w3cschool.cn/images/w3c/index-logo.png" />。注意最後的一個空格和一個反斜槓，它說明這個標籤已經結束，不需要單獨的結束標籤了。

某些標籤包含的內容中還可以有新的標籤，新的標籤名甚至可能還可以與包含它的標籤的名稱相同（哪些標籤可以包含標籤，可以包含哪些標籤也是有規定的）。比如：

<div>
  <div>分類目錄...</div>
  <div>當前分類內容列表...</div>
</div>

在這種情況下，最後出現的標籤應該最先結束。

HTML文件裡所有的空白符（空格，Tab，換行，回車）會被瀏覽器忽略，唯一的例外是空格，對空格的處理方式是所有連續的空格被當成一個空格，不管有一個，還是兩個，還是100個。之所以有這樣的規則是因為忽略空白符能讓使用HTML的作者以他覺得最方便的格式來排列內容，比如可以在每個標籤開始後增加縮排，標籤結束後減少縮排。由於英語文字中空格用得很普遍（用於分隔單詞），所以對空格做了這樣的特殊處理。如果要顯示連續的空格（比如為了縮排），應該用&nbsp;來代表空格。

五、常用標籤介紹

文字

最常用的標籤可能是<font>了，它用於改變字型，字號，文字顏色。

<font size="6">6</font>
<font size="4">4</font>
<font color="red" size="5">紅色的5</font>
<font face="黑體">黑體的字</font>

加粗，下劃線，斜體字也是常用的文字效果，它們分別用<b>,<u>,<i>表示：

<b>Bold</b>
<i>italic</i>
<u>underline</u>

還有一些標籤，用來指出包含的文字有特殊的意義，比如<abbr>（表示縮寫），<em>（表示強調），<strong>（表示更強地強調）,<cite>（表示引用），<address>（表示地址）等等。這些標籤不是為了定義顯示效果而存在的，所以從瀏覽器裡看它們可能沒有任何效果，也可能不同的瀏覽器對這些標籤的顯示效果完全不同。

一篇很長的文章，如果有合適的小標題的話，就可以快速地對它的內容進行大致的瞭解。在HTML裡，用來表示標題的標籤有：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>，它們分別表示一級標題，二級標題，三級標題...

<h1>HTML 程式設計入門 -W3Cschool.cn</h1>
<h2>什麼是HTML</h2>
...
<h2>HTML是什麼樣的</h2>
...

效果截圖


圖片

<hr>標籤用於在頁面上新增橫線。可以通過指定width和color屬性來控制橫線的長度和顏色。


<hr width="90%" color="red" />

<img>標籤用於在頁面上新增圖片，src屬性指定圖片的地址，如果無法開啟src指定的圖片，瀏覽器通常會在頁面上需要顯示圖片的地方顯示alt屬性定義的文字。


<img src="http://statics.w3cschool.cn/images/w3c/index-logo.png" alt="W3Cschool官網 LOGO" />

連結

超級連結用<a>標籤表示，href屬性指定了連結到的地址。<a>標籤可以包含文字，也可以包含圖片。


<a href="http://www.w3cschool.cn">W3Cschool官網</a>
<a href="http://statics.w3cschool.cn/images/w3c/index-logo.png"><img src="http://statics.w3cschool.cn/images/w3c/index-logo.png" alt="開啟檢視W3Cschoollogo" /></a>

分段與換行

由於HTML文件會忽略空白符，所以要想保證正常的分段換行的話，必須指出哪些文字是屬於同一段落的，這就用到了標籤<p>。


<p>這是第一段。</p>
<p>這是第二段。</p>

也有人不用<p>，而用<br>。<br>只表示換行，不表示段落的開始或結束，所以通常沒有結束標籤。


這是第一段。<br>
這是第二段。<br />
這是第三段。

有時，要把文件看作不同的部分組合起來的，比如一個典型的頁面可能包括三個部分：頁頭，主體，頁尾。<div>標籤專門用於標明不同的部分：


<div>頁頭內容</div>
<div>主體內容</div>
<div>頁尾內容</div>

表格

HTML文件在瀏覽器裡通常是從左到右，從上到下地顯示的，到了視窗右邊就自動換行。為了實現分欄的效果，很多人使用表格（<table>）進行頁面排版（雖然HTML裡提供表格的本意不是為了排版）。

<table>標籤裡通常會包含幾個<tr>標籤，<tr>代表表格裡的一行。<tr>標籤又會包含<td>標籤，每個<td>代表一個單元格。


<table>
  <tr>
    <td>2000</td><td>悉尼</td>
  </tr>
  <tr>
    <td>2004</td><td>雅典</td>
  </tr>
  <tr>
    <td>2008</td><td>北京</td>
  </tr>
</table>

<tr>標籤還可以被<table>裡的<thead>或<tbody>或<tfoot>包含。它們分別代表表頭，表正文，表腳。在列印網頁的時候，如果表格很大，一頁列印不完，<thead>和<tfoot>將在每一頁出現。

<th>和<td>非常相似，也用在<tr>裡邊，不同的是<th>代表這個單元格是它所在的行或列的標題。


<table>
  <thead>
    <tr><th>時間</th><th>地點</th></tr>
  </thead>
  <tbody>
    <tr><td>2000</td><td>悉尼</td></tr>
    <tr><td>2004</td><td>雅典</td></tr>
    <tr><td>2008</td><td>北京</td></tr>
  </tbody>
</table>

列表

表格用於表示二維資料（行，列），一維資料則用列表表示。列表可以分為無序列表（<ul>），有序列表（<ol>）和定義列表（<dl>）。前兩種列表更常見一些，都用<li>標籤包含列表專案。

無序列表表示一系列類似的專案，它們之間沒有先後順序。


<ul>
  <li>牛奶</li>
  <li>開啡</li>
  <li>綠茶</li>
</ul>

有序列表中各個專案間的順序是很重要的，瀏覽器通常會自動給它們產生編號。


<ol>
  <li>開啟瀏覽器</li>
  <li>輸入www.w3cschool.cn</li>
  <li>敲下回車</li>
</ol>

框架

最後談一下框架，曾經非常流行的技術，框架使一個窗口裡能同時顯示多個文件。主框架頁裡面沒有<body>標籤，取代它的是<frameset>。

<frameset>標籤的屬性Rows和Cols用於指定框架集(frameset)裡有多少行（列），以及每行（列）的高度（寬度）。

<frameset>標籤可以包含<frame>標籤，每個<frame>標籤代表一個文件（src屬性指定文件的地址）。

如果覺得這樣的頁面還不夠複雜的話，還可以在<frameset>標籤裡包含<frameset>標籤。


<frameset rows="15%,*">
     <frame src="top.html" name=title scrolling=no>
     <frameset cols="20%,*">
          <frame src="left.html" name=sidebar>
          <frame src="right.html" name=recipes>
     </frameset>
</frameset>

七、程式設計實戰訓練

W3Cschool還為各位初學者提供了像玩遊戲一樣學習程式設計的程式設計實戰訓練工具。


八、入門以後該學什麼

這篇文章只是讓從沒有接觸過HTML的人對HTML有個初步的印象，還有很多東西需要學習。本文並沒有列出HTML中所有的標籤，對於列出的標籤也沒有介紹它們的全部屬性。另外，沒有提到的東西里還包括我覺得非常重要的CSS, JavaScript, XHTML, XML, Web Standards，以及它們與HTML的關係。不過這些也不太可能在一篇文章內學會，好在只要入了門，就能利用W3Cschool上很多資源和工具繼續學習。

九、最後

學習中如果遇到什麼問題可以W3Cschool問答模組HTML問答中向各位大牛求教哦~

推薦閱讀

相關推薦

HTML程式設計快速入門教程

一、什麼是HTML HTML是英文Hyper Text Mark-up Language(超文字標記語言)的縮寫，它規定了HTML的語法規則，用來表示比“文字”更豐富的意義，比如圖片，表格，連結等。瀏覽器（IE，火狐等）軟體知道HTML語言的語法，可以用來檢視HTML文

Java程式設計零基礎快速入門教程索引

Java入門到精通java零起點程式設計教程.精心挑選了java中含金量高的知識點.Window安裝JDK圖文教程.windows搭建java開發環境,配置java環境變數圖文教程.java程式Hell

Django REST framework 的快速入門教程

ret turn ads 使用 blog 所有 定義 想去 cti CRM-API項目搭建 序列器（Serializers） 首先，我們來定義一些序列器。我們來創建一個新的模塊（module）叫做 crm/rest_searializer.py ，這是我們用來描述數據是如何

ThinkPHP3.1快速入門教程

pan html manual thinkphp 教程 font 入門教程 入門 href ThinkPHP3.1快速入門教程 http://www.thinkphp.cn/info/155.html -----------------------

AngularJS [ 快速入門教程 ]

空數組 spa put bold [ ] 地址 替換 個人 傳遞 前 序 S N AngularJS是什麽? 我想既然大家查找AngularJS就證明大家多多少少對AngularJS都會有了解。 AngularJS就是，使用JavaScript編寫的客戶端

小程序開發快速入門教程（附源碼）

五分鐘上手-微信小程序 1：用沒有註冊過微信公眾平臺的郵箱註冊一個微信公眾號， 申請帳號 ,點擊 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根據指引填寫信息和提交相應的資料，就可以擁有自己的小程序帳號。註冊完成之後開始登

Linux快速入門教程-進程管理ipcs命令學習

Linux Linux入門 Linux運維 Linux命令 使用Linux系統必備的技能之一就是Linux進程管理，系統運行的過程正是無數進程在運行的過程。這些進程的運行需要占用系統的內存等資源，做好系統進程的管理，對於我們合理分配、使用系統資源有非常大的意義。今天我們來看進程管理命令中的ip

ubuntu快速入門教程：初次見面

切換 優化 第三方軟件 技術分享 計算 shu 做的 基本 移動設備 1 什麽是ubuntu? Ubuntu（友幫拓、優般圖、烏班圖）是一個以桌面應用為主的開源GNU/Linux操作系統，Ubuntu 是基於Debian GNU/Linux，支持x86、amd64（即x6

帶領新手快速開發Android App開發視頻課程 安卓快速入門教程

Android 第1章 課程介紹與項目準備如果你從事Android開發，那你一定要學習一些開發技巧和掌握一些開發邏輯，而很不巧，我這裏全部都有，最開始我們介紹一下我們這個應用的整體組織架構，通過對各個平臺的api進行一個簡單的分析，以及說明一下我們的RxVolley的網絡框架使用教程，在本章中，我們將分析整個

npm 與 package.json 快速入門教程

span out variable toc 管理器 gen 生產環境 格式 加載 npm 與 package.json 快速入門教程 2017年08月02日 19:16:20 閱讀數：33887 npm 是前端開發廣泛使用的包管理工具，之前使用 Weex 時看

hadoop快速入門教程：hadoop安裝包下載與監控參數說明

分布式 height tex region 集群 RoCE 發行版 store serve 前階段用了差不多兩周的時間把DKhadoop的運行環境搭建以及安裝的各個操作都介紹了一遍。關於DKhadoop安裝包下載也只是順帶說了一下，但好像大快搜索的服務器在更新，新的下載頁面

doodoo.js快速入門教程?

node Doodoo.js -- 中文最佳實踐Node.js Web快速開發框架。支持Koa.js, Express.js中間件，支持模塊化，插件，鉤子機制，可以直接在項目裏使用 ES6/7（Generator Function, Class, Async & Await）等特性 htt

doodoo.js快速入門教程

touch es6 odoo node 框架 創建 init fun http Doodoo.js -- 中文最佳實踐Node.js Web快速開發框架。支持Koa.js, Express.js中間件，支持模塊化，插件，鉤子機制，可以直接在項目裏使用 ES6/7（Gener

Koa快速入門教程（一）

Koa 是由 Express 原班人馬打造的，致力於成為一個更小、更富有表現力、更健壯的 Web 框架，採用了async和await的方式執行非同步操作。 Koa有v1.0與v2.0兩個版本，隨著node對async和await的支援，Koa2的正式釋出，本文Koa均

springBoot快速入門教程（第一篇）

Springboot是什麼？ 1、springboot是在spring的基礎上進一步封裝，讓以前繁雜的配置全部簡化，從而快速構建專案。 2、對主流框架無配置整合，提高開發效率。 3、內建tomcat無需先部署在執行 4、與雲端計算天然整合 快速搭建一個簡單的springboot

java多執行緒程式設計詳細入門教程

##1、概念      執行緒是jvm排程的最小單元，也叫做輕量級程序，程序是由執行緒組成，執行緒擁有私有的程式技術器以及棧，並且能夠訪問堆中的共享資源。這裡提出一個問題，為什麼要用多執行緒？有一下幾點，首先，隨著cpu核心數的增加，計算機硬

Redis快速入門-教程

目錄： Redis是什麼？ Redis 安裝 Redis 啟動 Redis支援的資料型別 Redis伺服器操作命令 伺服器客戶端操作命令 Redis string操作命令 Sorted set （Zset）型別資料的操作命令： Redis l

HTML學習日記 入門教程 知識點 ing

初學html，如有錯誤，歡迎指正謝謝。 這只是一些基礎的知識點，是學習後自己想到總結的，不適合資深者。 1、href是Hypertext Reference的縮寫。意思是指定超連結目標的URL。是css程式碼的一種。 可以用來加超連結： <htm

Spring MVC快速入門教程

必看！！！ 這篇文章講的很好很實用，應對Spring MVC基礎知識足夠了 文章轉載自：https://www.tianmaying.com/tutorial/spring-mvc-quickstart ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Apache Shiro 快速入門教程

第一部分 什麼是Apache Shiro 1、什麼是 apache shiro ： Apache Shiro是一個功能強大且易於使用的Java安全框架，提供了認證，授權，加密，和會話管理 如同 spring security 一樣