第2天【HTML基本元素】

主要內容

標題標簽

段落標簽

強制換行

水平線

圖片

超鏈接

文本格式化標簽

列表

表格

學習目標

一、標題

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

<h1> 定義最大的標題。 <h6> 定義最小的標題。

標題很重要

請確保將 HTML 標題 標簽只用于標題。不要僅僅是為了生成粗體或大號的文本而使用標題。

搜索引擎使用標題為您的網頁的結構和內容編制索引。

因為用戶可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文檔結構是很重要的。

應該將 h1 用作主標題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。

二、段落

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

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

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

三、換行

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

<br /> 元素是一個空的 HTML 元素。

<p>這個<br>段落<br>演示了分行的效果</p>

四、水平線

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

<

屬性：

color：設置水平線的顏色

width：設置水平線的長度

size：設置水平線的高度

align：設置水平線的對齊方式（默認居中），可取值left|right

<

五、圖片

<img> 標簽定義 HTML 頁面中的圖像。

<

屬性：

Src：路徑（相對路徑、絕對路徑）

Alt：規定圖像的替代文本。

Width：規定圖像的寬度。

Height：規定圖像的高度

Title：鼠標懸停在圖片上給予提示

六、超鏈接

HTML使用標簽 <a>來設置超文本鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

在標簽<a> 中使用了href屬性來描述鏈接的地址。

默認情況下，鏈接將以以下形式出現在瀏覽器中：

（1）一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。

（2）訪問過的鏈接顯示為紫色并帶有下劃線。

（3）點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

注意：如果為這些超鏈接設置了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。

<a href="url">鏈接文本</a>

七、文本格式化標簽

<p>這是一個普通的文本- <b>這是一個加粗文本</b>。</p>

<p><em>強調文本</em></p>

<p>He named his car <i>The lightning</i>, because it was very fast.</p>

<p><small> Copyright 1999-2050 by Refsnes Data.</small></p>

<p><strong>加粗文本</strong></p>

<p>這個文本包含 _下標文本。</p>

<p>這個文本包含 ^上標 文本。</p>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

效果如下：

八、列表

8.1無序列表

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

無序列表使用 <ul> 標簽

<

瀏覽器顯示如下：

<ul><li>的屬性type 擁有的選項

disc 默認實心圓

circle 空心圓

square 小方塊

none 不顯示

<!--無序-->

8.2有序列表

同樣，有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。

列表項使用數字來標記。

<

瀏覽器中顯示如下：

<ol><li>的屬性type 擁有的選項

1 表示列表項目用數字標號（1,2,3...）

a 表示列表項目用小寫字母標號（a,b,c...）

A 表示列表項目用大寫字母標號（A,B,C...）

i 表示列表項目用小寫羅馬數字標號（i,ii,iii...）

I 表示列表項目用大寫羅馬數字標號（I,II,III...）

<

8.3自定義列表

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

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

<

瀏覽器顯示如下：

8.4本節作業

久、表格

表格在數據展示方面非常簡單，并且表現優秀，通過與CSS的結合，可以讓數據變得更加美觀和整齊。

行、列、單元格 單元格特點：同行等高、同列等寬。

表格的基本語法：

創建一個3行3列的表格：

<

設置單元格的填充間距為10，單元格之間的間距為0，紅色邊框

<

一般表格的第一行是標題，并且是文本居中、加粗，將td換成th。

而某些數據需要居中，但不希望加粗，可以給td添加align="center"

<

表格的跨行跨列

有時，表格的結構并沒有那么簡單，可能會存在跨行和跨列的情況：

跨行：

跨列：

跨行、跨列并存：

這個問題看似很復雜，其實很簡單，在制作跨行和跨列的表格時，只需按照如下步驟就可以輕松搞定！：

首先做一個完整的表格：注意虛線部分，最終去掉這些虛線就是我們要的效果

找出最左上角那個“侵占”其他單元格的單元格，如下圖標注數字的位置

觀察這個單元格“侵占”的是行還是列，算上自己總共是幾個？(行數用r表示，列數用c表示)：

如果是行：在這個單元格上添加 rowspan="r"

如果是列：在這個單元格上添加 colspan="c"

如果既有行又有列：在這個單元格上添加 rowspan="r" colspan="c"

把“被侵占”的單元格刪掉，刪除順序：從右向左，從上至下，否則很容易出錯！

按以上步驟完成一個跨行跨列的表格：

<

本節作業

總結

以上是生活随笔為你收集整理的html a标签去掉下划线_如何用HTML基本元素制作表格的全部內容，希望文章能夠幫你解決所遇到的問題。

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