HTML之初級入門

一、簡介

編輯器

  • 學習 HTML 最好的方式就是邊學邊實踐；

  • 最簡單的方式：在本地電腦上創(chuàng)建一個txt文件，保存成html格式，通過瀏覽器打開，沒修改一下txt文件，刷新一下瀏覽器即可同步效果；

  • 推薦使用文本編輯器來學習 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。

什么是 HTML？

HTML 是用來描述網頁的一種語言

  • HTML 指的是超文本標記語言 (Hyper Text Markup Language)；

  • HTML 不是一種編程語言，而是一種標記語言 (markup language)；

  • 標記語言是一套標記標簽 (markup tag)；

  • HTML 使用標記標簽來描述網頁。

HTML 文檔

HTML 文檔也被稱為網頁

  • HTML 文檔描述網頁；

  • HTML 文檔包含 HTML 標簽和純文本；

  • Web 瀏覽器的作用是讀取 HTML 文檔，并以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容。

HTML 標簽

HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)

  • HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>；

  • HTML 標簽通常是成對出現(xiàn)的，比如 <b> 和 </b>；

  • 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽；

  • 開始和結束標簽也被稱為開放標簽和閉合標簽。

HTML 元素語法

  • HTML 元素以開始標簽起始，以結束標簽終止；

  • 元素的內容是開始標簽與結束標簽之間的內容；

  • 某些 HTML 元素具有空內容(empty content)，空元素在開始標簽中進行關閉，以開始標簽的結束而結束；

  • 大多數(shù) HTML 標簽元素擁有一系列的屬性；

  • HTML 標簽對大小寫不敏感，屬性和屬性值對大小寫也不敏感。推薦都用小寫。

HTML 屬性

  • HTML 標簽可以擁有屬性，提供了有關 HTML 元素的更多信息；

  • 屬性總是以 名稱/值對 的形式出現(xiàn)，比如：name="value"；

  • 屬性總是在 HTML 元素的開始標簽中規(guī)定；

  • 屬性值應該始終被包括在引號內。雙引號是最常用的，在某些個別的情況下，比如屬性值本身就含有雙引號，那么必須使用單引號。

HTML 樣式

  • style 屬性提供了一種改變所有 HTML 元素樣式的通用方法；

  • 在 HTML 4 中，請避免使用這些被廢棄的標簽和屬性，未來版本的HTML和XHTML中將不再提供支持，推薦使用CSS樣式代替。

標簽 描述 備注：替換的均為屬性
<center> 定義居中的內容
<font> 和 <basefont> 定義 HTML 字體 font-family
font-size
color
<s> 和 <strike> 定義刪除線文本
<u> 定義下劃線文本
屬性 描述 備注：替換的均為屬性
align 定義文本的對齊方式 text-align
bgcolor 定義背景顏色 background-color
color 定義文本顏色
示例Demo
<html>
<body bgcolor="yellow">

<h1 style="text-align:center; color:blue;">我的第一個標題，在頁面中進行了居中排列</h1>
<p>我的第一個段落。</p>

</body>
</html>

  • <html> 與 </html> 之間的文本描述網頁；

  • <body> 與 </body> 之間的文本是可見的頁面內容；

  • <h1> 與 </h1> 之間的文本被顯示為標題；

  • <p> 與 </p> 之間的文本被顯示為段落；

  • 通過 style 屬性進行一系列的樣式設置。

二、常用標簽

HTML 標題

  • 標題(Heading)是通過 <h1> - <h6> 等標簽進行定義的。<h1> 定義最大的標題；<h6> 定義最小的標題；

  • 默認情況下，HTML 會自動地在塊級元素前后添加一個額外的空行，比如標題、段落等元素前后；

  • 請確保將 HTML heading 標簽只用于標題。不要僅僅是為了產生粗體或大號的文本而使用標題，因為搜索引擎會使用標題，為網頁的結構和內容編制索引；

  • <hr /> 標簽：在 HTML 頁面中創(chuàng)建水平線，可用于分隔內容。

HTML 段落

  • 段落是通過 <p> 標簽定義的；

  • 瀏覽器會自動地在段落的前后添加空行( <p> 是塊級元素)；

  • 使用空的段落標記 <p></p> 去插入一個空行是個壞習慣，推薦使用 <br /> 標簽代替它；

  • HTML 代碼中的所有連續(xù)的空行(換行)，都會被顯示為一個空格；

  • 如果希望在不產生一個新段落的情況下進行換行 (新行)，請使用 <br /> 標簽。

HTML 鏈接

  1. HTML 使用超級鏈接與網絡上的另一個文檔相連，點擊鏈接可以從一張頁面跳轉到另一張頁面；

  2. 超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像。當把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈郑?/p>

  3. 開始標簽和結束標簽之間的文字被作為超級鏈接來顯示；

  4. 通過使用 <a> 標簽在 HTML 中創(chuàng)建鏈接，有2種方法：

  • href 屬性：創(chuàng)建指向另一個文檔的鏈接
  • name 屬性：創(chuàng)建文檔內的書簽
  1. 使用 name 屬性創(chuàng)建 HTML 頁面中的書簽，它不會以任何特殊方式顯示，對讀者是不可見的。實現(xiàn)步驟：
  • 命名錨(named anchors)，即頁面中某小節(jié)的位置，點擊鏈接時，會跳轉到該位置，實現(xiàn)頁面內容的快速導航
# 創(chuàng)建錨，name可以任意命名
<a name="tips">跳轉到目標位置的文字內容</a>
  • 創(chuàng)建頁面內鏈接
<a href="#tips">鏈接處的文字內容</a>
  • 如果需要從別的頁面跳轉到該頁面位置，鏈接的 href 屬性值：該頁面網址后加井號(#)和錨名稱；
  • 如果瀏覽器找不到已定義的錨名稱，那么就會定位到頁面的頂端，不會有錯誤發(fā)生。

  1. 特別地，設置target="_blank" 時，被鏈接的頁面，將在新的標簽頁中打開；

  2. 請始終將正斜杠添加到子文件夾，如：href="http://www.w3school.com.cn/html/"。假如鏈接忽略了最后的正斜杠：href="http://www.w3school.com.cn/html"，會向服務器產生兩次 HTTP 請求，因為服務器會添加正斜杠到這個地址，然后創(chuàng)建一個新的請求。

HTML 列表

  1. HTML 支持有序、無序和定義列表。三種不同類型的列表項目，可以進行各種嵌套；

  2. 列表項內部均可以使用段落、換行符、圖片、鏈接以及其他列表等；

  3. 無序列表

  • 無序列表是一個項目列表，項目使用粗體圓點進行標記；
  • 無序列表使用 <ul> 標簽，每個列表項使用 <li>；
  • <ul> 標簽的type屬性，可以設置不同類型的無序列表，為disc表示實心圓點、為circle表示空心圓點、為square時表示實心方框。
<ul>
    <li> python</li>
    <li> Java </li>
</ul>
  1. 有序列表
  • 有序列表也是一個項目列表，列表項目使用數(shù)字進行標記；
  • 有序列表使用 <ol> 標簽，每個列表項始于 <li> 標簽；
  • <ol> 標簽，默認情況下，序列號為1，2， 3。其type屬性可以設置不同類型的有序列表，為A時表示大寫英文字母、為a時表示小寫英文字母、為大寫 I 時表示羅馬字母、為小寫 i 時表示小寫羅馬字母。
<ol>
    <li> Window</li>
    <li> Mac </li>
</ol>
  1. 定義列表
  • 自定義列表不僅僅是一個項目列表，而是項目及其注釋的組合；
  • 自定義列表以 <dl> 標簽開始，每個自定義列表項以 <dt> 開始，而每個自定義列表項的定義以 <dd> 開始；
<dl>
    <dt>Coffee</dt>
        <dd>Black hot drink</dd>
    <dt>Milk</dt>
        <dd>White cold drink</dd>
</dl>
示例Demo
  • 代碼
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>

<p>這是一個段落</p>
<p>這是另外一個段落</p>

<a >這是一個鏈接</a>
<br><br />
<img src="/Users/******/image1.jpg" width="400" height="300" />

</body>
</html>

  • 效果圖


三、基礎知識

HTML <head> 元素

  • HTML <head> 元素是所有頭部元素的容器，可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息等；

  • <title>：定義文檔的標題，在所有 HTML/XHTML 文檔中都是必需的；

  • <base>：為頁面上的所有鏈接規(guī)定默認地址或默認目標(target)；

  • <link>：定義文檔與外部資源之間的關系；

  • <meta>：提供關于 HTML 文檔的元數(shù)據(jù)信息；

  • <script>：定義客戶端腳本，比如 JavaScript；

  • <style>：為 HTML 文檔定義樣式信息。

HTML 顏色名
  • 基于HTML 4.0 標準，大多數(shù)瀏覽器支持常用的顏色名；
  • 有16種：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow；
  • 如果使用其它顏色的話，可使用十六進制的顏色值。
HTML 文本格式化

HTML 可定義很多供格式化輸出的元素，比如粗體和斜體字等。

標簽 描述
<b> 定義粗體文本
<strong> 定義加重語氣
<em> 定義著重文字
<i> 定義斜體字
<big> 定義大號字
<small> 定義小號字
<sub> 定義下標字
<sup> 定義上標字
<code> 定義計算機代碼
<bdo> 定義文字方向，反向輸出顯示
<pre> 定義預格式文本，保留多個空格或空行
<address> 定義地址
HTML塊

  1. 通過標簽 <div> 和 <span>，可以將 HTML 元素組合起來，定義為塊級元素或內聯(lián)元素；

  2. HTML <div> 元素

  • HTML <div> 元素是塊級元素，是組合其他 HTML 元素的容器，沒有特定的含義，瀏覽器顯示時，通常會在其前后進行換行；
  • 與 CSS 一同使用時，<div> 元素用于對大的內容塊設置樣式屬性；
    <div> 元素也常用于文檔布局，它取代了使用表格(<table>元素)定義布局的老式方法。<table> 元素的主要作用是顯示表格化的數(shù)據(jù)；
  • 例子：<h1>, <p>, <ul>, <table>
  1. HTML <span> 元素
  • HTML <span> 元素是內聯(lián)元素，可用作文本的容器，沒有特定的含義，瀏覽器顯示時，通常不會進行換行；
  • 當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性；
  • 例子：<b>, <td>, <a>, <img>
HTML 框架
  • 通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面，并且每個框架都獨立于其他的框架。
  • 使用框架的壞處：開發(fā)人員必須同時跟蹤更多的HTML文檔；很難打印整張頁面；
  • 框架結構標簽(<frameset>)定義如何將窗口分割為框架，每個frameset 定義了一系列行或列，其rows/columns 的值規(guī)定了每行或每列占據(jù)屏幕的面積；其子標簽 <frame> 定義了放置在每個框架中的HTML 文檔；
  • 如果一個框架有可見邊框，用戶可以拖動邊框來改變它的大小。為了避免這種情況，可以在 <frame> 標簽中加入noresize="noresize"；
  • 特別地，不能將 <body></body> 標簽與 <frameset></frameset> 標簽同時使用！
  • HTML <iframe> 標簽，用于在網頁內顯示網頁，定義內聯(lián)的子窗口。其常用的4個屬性：src表示嵌入的網頁、height表示 iframe 的高度、width 表示 iframe 的寬度、frameborder 表示是否顯示 iframe 邊框。
HTML CSS

  • 使用 HTML4.0，所有的格式化代碼均可移出 HTML 文檔，移入一個獨立的樣式表；

  • 當瀏覽器讀到一個樣式表，它會按照這個樣式表，對文檔進行格式化；

  • 外部樣式表：當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，實現(xiàn)更改一個文件來改變整個站點的外觀；

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  • 內部樣式表：當單個文件需要特別樣式時，就可以使用內部樣式表。在 head 部分通過 <style> 標簽定義內部樣式表。
<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
  • 內聯(lián)樣式：當特殊的樣式需要應用到個別元素時，可以使用內聯(lián)樣式，即在相關的標簽中使用樣式屬性，可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>


四、其它

  • <!DOCTYPE> 聲明HTML版本，幫助瀏覽器正確地顯示網頁。Web 世界中存在許多不同的文檔，只有了解文檔的版本類型，瀏覽器才能正確地顯示文檔，需要注意：<!DOCTYPE> 并不是 HTML 標簽；

  • <! -- 注釋內容 --> 標簽：在HTML代碼中插入注釋，增強可讀性。開始括號之后(左邊的括號)需要緊跟一個嘆號，結束括號之前(右邊的括號)不需要；

  • HTML 中的文件路徑，推薦使用相對路徑。絕對文件路徑是指向一個因特網文件的完整 URL，相對路徑指向了相對于當前頁面的文件，不會與當前的 URL 進行綁定，便于后續(xù)更新和維護；

  • HTML <script> 標簽用于定義客戶端腳本，使 HTML 頁面具有更強的動態(tài)和交互性，比如 JavaScript。script 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件，必需的 type 屬性，用來聲明腳本的 MIME 類型。JavaScript 最常用于圖片操作、表單驗證以及內容動態(tài)更新等。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • HTML 5 HTML5概述 因特網上的信息是以網頁的形式展示給用戶的，因此網頁是網絡信息傳遞的載體。網頁文件是用...
    阿啊阿吖丁閱讀 4,948評論 0贊 0
  • HTML標簽解釋大全 一、HTML標記 標簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,527評論 1贊 41
  • ??DOM（文檔對象模型）是針對 HTML 和 XML 文檔的一個 API（應用程序編程接口）。 ??DOM 描繪...
    霜天曉閱讀 3,865評論 0贊 7
  • ??DOM 1 級主要定義的是 HTML 和 XML 文檔的底層結構。 ??DOM2 和 DOM3 級則在這個結構...
    霜天曉閱讀 1,599評論 1贊 3
  • 概要 64學時 3.5學分 章節(jié)安排 電子商務網站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,848評論 0贊 3

友情鏈接更多精彩內容