當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

从零开始HTML

發布時間：2025/4/14 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了从零开始HTML 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?

1、屬性

HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。屬性總是以名稱/值對的形式出現，比如：name="value"。

屬性總是在 HTML 元素的開始標簽中規定。

屬性例子 1:

<h1> 定義標題的開始。

<h1 align="center"> 擁有關于對齊方式的附加信息。

屬性例子 2:

<body> 定義 HTML 文檔的主體。

<body bgcolor="yellow"> 擁有關于背景顏色的附加信息。

屬性例子 3:

<table> 定義 HTML 表格。

<table border="1"> 擁有關于表格邊框的附加信息。

完整的 HTML 參考手冊提供了每個 HTML 元素可使用的合法屬性的完整列表：

HTML參考手冊：http://www.w3school.com.cn/tags/index.asp

2.標題

標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。<h1> 定義最大的標題。<h6> 定義最小的標題。

<hr /> 標簽在 HTML 頁面中創建水平線。可用于分割元素

3.段落

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

① 使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。用 <br /> 標簽代替它。

② 如果希望在不產生一個新段落的情況下進行換行（新行），使用 <br /> 標簽

4.樣式

style 屬性用于改變 HTML 元素的樣式。

style 屬性的作用是提供了一種改變所有 HTML 元素的樣式的通用方法。通過 HTML 樣式，能夠通過使用 style 屬性直接將樣式添加到 HTML 元素，或者間接地在獨立的樣式表中（CSS 文件）進行定義。

background-color 屬性為元素定義了背景顏色，如：<body style="

font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸。

text-align 屬性規定了元素中文本的水平對齊方式：<h1 style="text-align:center">This is a heading</h1>,可將center改為left,rght實現不同的效果。

5.引用

① HTML?<q>?元素定義短的引用。瀏覽器通常會為 <q> 元素包圍引號。

<p>WWF 的目標是：<q>構建人與自然和諧共存的世界。</q></p>

② 用于長引用的 HTML <blockquote>，HTML?<blockquote>?元素定義被引用的節。瀏覽器通常會對 <blockquote> 元素進行縮進處理。

<p>以下內容引用自 WWF 的網站：</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> 五十年來，WWF 一直致力于保護自然界的未來。世界領先的環保組織，WWF 工作于 100 個國家，并得到美國一百二十萬會員及全球近五百萬會員的支持。 </blockquote>

③ 用于縮略詞的 HTML <abbr> HTML?<abbr>?元素定義縮寫或首字母縮略語。對縮寫進行標記能夠為瀏覽器、翻譯系統以及搜索引擎提供有用的信息。

6.CSS樣式引入方式

有以下三種方式來插入樣式表：

① 外部：當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。

② 內部：當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style> 標簽定義內部樣式表。

<head><style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>

③ 內聯：當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。

<p style="color: red; margin-left: 20px"> This is a paragraph </p>

7.鏈接

HTML 使用超級鏈接與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。

我們通過使用 <a> 標簽在 HTML 中創建鏈接。

有兩種使用 <a> 標簽的方式：

通過使用 href 屬性 - 創建指向另一個文檔的鏈接

通過使用 name 屬性 - 創建文檔內的書簽

①? 使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。如果把鏈接的 target 屬性設置為 "_blank"，該鏈接會在新窗口中打開。

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

② 鏈接到同一個頁面的不同位置：給該位置的標題加name屬性，然后添加鏈接，注意在添加鏈接時要在name的值前面添加"#",如：

<html><body><p> <a href="#C4">查看 Chapter 4。</a> </p><h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p><h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p><h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 10</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 16</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 17</h2> <p>This chapter explains ba bla bla</p></body> </html>

?8.圖像

圖像標簽（<img>）和源屬性（Src）。在 HTML 中，圖像由 <img> 標簽定義。<img> 是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。

語法：

瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。

① 替換文本屬性（Alt）

alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。

在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。

② 設置圖片背景

③? ?align屬性可以設置圖片的位置，如：

<p> <img src ="/i/eg_cute.gif" align ="left"> 帶有圖像的一個段落。圖像的 align 屬性設置為 "left"。圖像將浮動到文本的左側。 </p>

④ height,width屬性設置圖片大小，如：

⑤ 圖像鏈接：

⑥<area>使圖片不同區域鏈接不同網址：

map定義圖像地圖，將不同的區域量化

9.表格

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

下面是一個兩行兩列的表格：

① 如果不定義邊框屬性，表格將不顯示邊框。使用屬性border來定義邊框，如：

②表格的表頭使用 <th> 標簽進行定義。大多數瀏覽器會把表頭顯示為粗體居中的文本。

<html><body><h4>表頭：</h4> <table border="1"> <tr><th>姓名</th><th>電話</th><th>電話</th> </tr> <tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td> </tr> </table><h4>垂直的表頭：</h4> <table border="1"> <tr><th>姓名</th><td>Bill Gates</td> </tr> <tr><th>電話</th><td>555 77 854</td> </tr> <tr><th>電話</th><td>555 77 855</td> </tr> </table></body> </html>

③空單元格問題：在一些瀏覽器中，沒有內容的表格單元顯示得不太好。如果某個單元格是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框。為了避免這種情況，在空單元格中添加一個空格占位符，就可以將邊框顯示出來，如：

10.列表

HTML 支持無序、由序和定義列表

① 無序列表：

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表始于 <ul> 標簽。每個列表項始于 <li>。

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

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

② 有序列表：

同樣，有序列表也是一列項目，列表項目使用數字進行標記。

有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。

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

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

③ 定義列表：

自定義列表不僅僅是一列項目，而是項目及其注釋的組合。

自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

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

④ 可以用type來改變每個列表項前面的標記：

<ul type="disc"> 實心圓點 <ul type="circle"> 空心圓點 <ol type="A"> A,B,C... <ol type="i"> 小寫羅馬

11.塊

大多數 HTML 元素被定義為塊級元素或內聯元素。塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束），內聯元素在顯示時通常不會以新行開始。

① <div>

HTML <div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器。

<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。

如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。

<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。

② <span>

HTML <span> 元素是內聯元素，可用作文本的容器。

<span> 元素也沒有特定的含義。

當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性。

12.類

對 HTML 進行分類（設置類），使我們能夠為元素的類定義 CSS 樣式。

為相同的類設置相同的樣式，或者為不同的類設置不同的樣式。

① 分類塊級元素

HTML <div> 元素是塊級元素。它能夠用作其他 HTML 元素的容器。

設置 <div> 元素的類，使我們能夠為相同的 <div> 元素設置相同的類：

實例：

<!DOCTYPE html> <html> <head> <style> .cities {background-color:black;color:white;margin:20px;padding:20px; } </style> </head><body><div class="cities"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div><div class="cities"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div><div class="cities"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div></body> </html>

② 分類行內元素，HTML <span> 元素是行內元素，能夠用作文本的容器。設置 <span> 元素的類，能夠為相同的 <span> 元素設置相同的樣式。

實例：

<!DOCTYPE html> <html> <head> <style>span.red {color:red;} </style> </head> <body><h1>My <span class="red">Important</span> Heading</h1></body> </html>

轉載于:https://www.cnblogs.com/UstimdanKulma/p/5887135.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的从零开始HTML的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。