第2天【HTML基本元素】

主要內(nèi)容

標(biāo)題標(biāo)簽

段落標(biāo)簽

強(qiáng)制換行

水平線

圖片

超鏈接

文本格式化標(biāo)簽

列表

表格

學(xué)習(xí)目標(biāo)

一、標(biāo)題

標(biāo)題（Heading）是通過(guò) <h1> - <h6> 標(biāo)簽進(jìn)行定義的。

<h1> 定義最大的標(biāo)題。 <h6> 定義最小的標(biāo)題。

標(biāo)題很重要

請(qǐng)確保將 HTML 標(biāo)題 標(biāo)簽只用于標(biāo)題。不要僅僅是為了生成粗體或大號(hào)的文本而使用標(biāo)題。

搜索引擎使用標(biāo)題為您的網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容編制索引。

因?yàn)橛脩艨梢酝ㄟ^(guò)標(biāo)題來(lái)快速瀏覽您的網(wǎng)頁(yè)，所以用標(biāo)題來(lái)呈現(xiàn)文檔結(jié)構(gòu)是很重要的。

應(yīng)該將 h1 用作主標(biāo)題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。

二、段落

段落是通過(guò) <p> 標(biāo)簽定義的。

<p>這是一個(gè)段落 </p>

<p>這是另一個(gè)段落</p>

三、換行

如果您希望在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行（新行），請(qǐng)使用 <br> 標(biāo)簽：

<br /> 元素是一個(gè)空的 HTML 元素。

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

四、水平線

<hr/> 標(biāo)簽在 HTML 頁(yè)面中創(chuàng)建水平線。
hr 元素可用于分隔內(nèi)容。

<

屬性：

color：設(shè)置水平線的顏色

width：設(shè)置水平線的長(zhǎng)度

size：設(shè)置水平線的高度

align：設(shè)置水平線的對(duì)齊方式（默認(rèn)居中），可取值left|right

<

五、圖片

<img> 標(biāo)簽定義 HTML 頁(yè)面中的圖像。

<

屬性：

Src：路徑（相對(duì)路徑、絕對(duì)路徑）

Alt：規(guī)定圖像的替代文本。

Width：規(guī)定圖像的寬度。

Height：規(guī)定圖像的高度

Title：鼠標(biāo)懸停在圖片上給予提示

六、超鏈接

HTML使用標(biāo)簽 <a>來(lái)設(shè)置超文本鏈接。

超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來(lái)跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。

當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?/p>

在標(biāo)簽<a> 中使用了href屬性來(lái)描述鏈接的地址。

默認(rèn)情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：

（1）一個(gè)未訪問(wèn)過(guò)的鏈接顯示為藍(lán)色字體并帶有下劃線。

（2）訪問(wèn)過(guò)的鏈接顯示為紫色并帶有下劃線。

（3）點(diǎn)擊鏈接時(shí)，鏈接顯示為紅色并帶有下劃線。

注意：如果為這些超鏈接設(shè)置了 CSS 樣式，展示樣式會(huì)根據(jù) CSS 的設(shè)定而顯示。

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

七、文本格式化標(biāo)簽

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

<p><em>強(qiáng)調(diào)文本</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>這個(gè)文本包含 _{下標(biāo)}文本。</p>

<p>這個(gè)文本包含 ^{上標(biāo)} 文本。</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無(wú)序列表

無(wú)序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。

無(wú)序列表使用 <ul> 標(biāo)簽

<

瀏覽器顯示如下：

<ul><li>的屬性type 擁有的選項(xiàng)

disc 默認(rèn)實(shí)心圓

circle 空心圓

square 小方塊

none 不顯示

<!--無(wú)序-->

8.2有序列表

同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。 有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。

列表項(xiàng)使用數(shù)字來(lái)標(biāo)記。

<

瀏覽器中顯示如下：

<ol><li>的屬性type 擁有的選項(xiàng)

1 表示列表項(xiàng)目用數(shù)字標(biāo)號(hào)（1,2,3...）

a 表示列表項(xiàng)目用小寫字母標(biāo)號(hào)（a,b,c...）

A 表示列表項(xiàng)目用大寫字母標(biāo)號(hào)（A,B,C...）

i 表示列表項(xiàng)目用小寫羅馬數(shù)字標(biāo)號(hào)（i,ii,iii...）

I 表示列表項(xiàng)目用大寫羅馬數(shù)字標(biāo)號(hào)（I,II,III...）

<

8.3自定義列表

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

自定義列表以 <dl> 標(biāo)簽開(kāi)始。每個(gè)自定義列表項(xiàng)以 <dt> 開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開(kāi)始。

<

瀏覽器顯示如下：

8.4本節(jié)作業(yè)

久、表格

表格在數(shù)據(jù)展示方面非常簡(jiǎn)單，并且表現(xiàn)優(yōu)秀，通過(guò)與CSS的結(jié)合，可以讓數(shù)據(jù)變得更加美觀和整齊。

行、列、單元格 單元格特點(diǎn)：同行等高、同列等寬。

表格的基本語(yǔ)法：

創(chuàng)建一個(gè)3行3列的表格：

<

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

<

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

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

<

表格的跨行跨列

有時(shí)，表格的結(jié)構(gòu)并沒(méi)有那么簡(jiǎn)單，可能會(huì)存在跨行和跨列的情況：

跨行：

跨列：

跨行、跨列并存：

這個(gè)問(wèn)題看似很復(fù)雜，其實(shí)很簡(jiǎn)單，在制作跨行和跨列的表格時(shí)，只需按照如下步驟就可以輕松搞定！：

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

找出最左上角那個(gè)“侵占”其他單元格的單元格，如下圖標(biāo)注數(shù)字的位置

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

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

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

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

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

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

<

本節(jié)作業(yè)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。