HTML的基本結構與標簽的初步瞭解

一、初步瞭解HTML HTML是一種超文本標簽語言，瀏覽器則是用來“解釋和執行”HTML源碼的工具。 HTML的基本結構其中<!DOCTYPE html>是文檔類型聲明，聲明這個文件必須是HTML5文件，讓瀏覽器按照HTML5準備進行解析，必須在HTML5中，必須要有，且是一定要寫在文件的最上方滴 ...

一、初步瞭解HTML

HTML是一種超文本標簽語言，瀏覽器則是用來“解釋和執行”HTML源碼的工具。

HTML的基本結構

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

其中<!DOCTYPE html>是文檔類型聲明，聲明這個文件必須是HTML5文件，讓瀏覽器按照HTML5準備進行解析，必須在HTML5中，必須要有，且是一定要寫在文件的最上方滴。

<title></title>是網頁的標題，顯示在最上方的文字：

<head> </head>是用來描述網頁的一些關鍵信息。例如網頁的配置、設置、關鍵字等等。。。這些信息，大多在瀏覽器看不到，但是對網頁的解析至關重要！

 <body> </body>則是所有的代碼都寫在其中。
二、初步瞭解標簽

1、<head>頭部部分

1）link：網頁標題的圖標

鏈接網頁的小圖標，網頁選項卡上面的小圖片

其中rel="icon"表示當前link的作用是鏈接網頁圖標

href="img/ss.gif"表示圖標的地址所在的位置

<link rel="icon" href="img/sss.gif" />

2)meta:用於描述網頁的各種信息

①其中<meta charset="utf-8" />設置網頁的編碼格式為utf-8格式
常見的中文編碼格式：GB2312：國標碼，簡體中文；GBK：擴展國標碼，簡體中文
utf-8：萬國碼，相容各種語言編碼，常用！

<meta charset="utf-8" />

②可以設置網頁的關鍵字有助於搜索引擎的搜索，多個關鍵字用英文逗號分開

<meta name="keywords"content="傑睿教育,網頁開發" />

③設置網頁的詳細信息，搜索引擎時標題下麵的一段文字！

name="description" 表示這個meta標簽設置的是網頁的描述信息；
content="" 表示描述信息的詳細內容！！

<meta name="description"content="這是我在，，，，"/>

2、<body>主體部分

1）標簽的分類

①塊級標簽：顯示為塊狀，獨占一行，自動換行。
②行級標簽：在一行中，從左往右依次排列，不會自動換行。

2）塊級標簽

常見的塊級標簽有：

a.標題標簽：<h1></h1>......<h6></h6> 特點:h1最大，h6最小且自動加粗。

b.水平線標簽：<hr/>

c.段落標簽：<p></p>

d.換行標簽：<br/>

e.引用標簽：<blockquote></blockquote>
要的cite屬性表明引用的來源，一般為網址，且網址不會在網頁中展示，瀏覽器一般顯示為首行縮進

f.預格式標簽：<pre></pre>
瀏覽器預設顯示樣式：①顯示為等寬字體

②代碼中的換行，空格等元素可在瀏覽器中直接顯示。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML基本塊級標簽</title>
    </head>
    
    
    <body>
        <h1>這是h1標簽</h1>
        <h2>這是h2標簽</h2>
        <h3>這是h3標簽</h3>
        <h4>這是h4標簽</h4>
        <h5>這是h5標簽</h5>
        <h6>這是h6標簽</h6>
                <hr/>
        <p>這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！
            
            哈哈啊哈哈哈啊哈哈哈哈啊哈！<br/>這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！</p>
        <p>這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！</p>
        
        <pre>
if(entity != null){  
    tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity轉為字元串類型  
    jsonObject = JSONObject.fromObject(result);//字元串類型轉為JSON類型  
}  
        </pre>
        
        <blockquote cite="http://www.jredu100.com">
            光明正大的不要臉！這段話就是抄的！你能咋地！
        </blockquote>
        
    </body>
    
</html>

g.有序列表
<ol> （order list）
　　<li>...</li> 列表項可以有n多個
　　<li>...</li>
　　<li>...</li>
</ol>

h.無序列表
<ul> (unorder list)
　　<li>...</li> n多個
　　<li>...</li>
　　<li>...</li>
</ul>

i.定義描述列表
<dl>
　　<dt>一般只有一項</dt> （列表標題）
　　<dd>可以有很多項</dd> （列表描述項）
　　<dd>132</dd>
　　<dd>123</dd>
</dl>

g.組合標簽顯示效果：上面是圖片，下麵是圖片的標題，同時圖片和標題前代縮進。
<figure>
　　<img/> 圖片
　　<figcaption></figcaption> 圖片的標題。
</figure>

k.分區標簽

<div></div> 可以包裹任何標簽，也可以被包裹進任何標簽。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML基本塊級標簽</title>
    </head>
    
    
    <body>
        <ul>
            <li>這是無序列表第一項</li>
            <li>這是無序列表第二項</li>
            <li>這是無序列表第三項</li>
            <li>這是無序列表第四項</li>
        </ul>
        
        
        <ol>
            <li>這是無序列表第一項</li>
            <li>這是無序列表第二項</li>
            <li>這是無序列表第三項</li>
            <li>這是無序列表第四項</li>
        </ol>
        
        
        <dl>
            <dt>這是dl列表的標題</dt>
            <dd>這是dl列表的描述項1</dd>
            <dd>這是dl列表的描述項2</dd>
            <dd>這是dl列表的描述項3</dd>
        </dl>
        
        
        <figure>
            <img src="img/icon.jpg" />
            <figcaption>圖片的描述標題</figcaption>
        </figure>
        
        
        <div style="width: 500px; height: 100px; background-color: yellow;">
            這是div裡面的文字！！！
            <p>11111</p>
        </div>
        
                
        <div style="height: 500px;"></div>
        
    </body>
    
</html>

3)行級標簽

常見的行級標簽：

（1）文本標簽span

① span標簽只是包裹作用，沒有任何其他含義；
② span作用與div類似，需配合CSS使用。只不過div是塊級標簽、span是行級標簽

（2）強調標簽em與strong；傾斜標簽i；加粗標簽b；四個之間的區別

① em和i都能傾斜。strong和b都能加粗！但是，i和b僅僅是單純的傾斜加粗，而em和Strong多了強調的語義。
② em和strong都表示強調，但是strong強調的級別更高！！
註意：
1、強調的目的：讓搜索引擎知道網頁重點強調的內容！便於搜索引擎顯示！
2、Strong和em都可以多層嵌套，表示強調程度的遞增！

（3）短引用標簽q：表示短引用。 cite屬性：用於聲明引用的來源。

【常用的引用標簽】
<blockquote>用於引用一段內容</blockquote>
<q>用於引用一句話</q>
<cite>常用於引用作品名、書畫名等</cite>

相同點：三個引用標簽，都用cite屬性表示引用來源
不同點：① 引用的內容不同。 blockquote->一段話，q->一句話，cite->作品名
② 顯示的預設效果不同。 blockquote->預設整段向右縮進； q->預設加引號； cite->預設傾斜！

（4）縮小標簽small：將字體縮小一號；big標簽：將字體放大一號。

註意：
① small和big可以多層嵌套，直到字體達到最小或最大為止；
② 這倆標簽已經被淘汰，並不建議使用。

（5）圖片標簽img

① src屬性：表示圖片的路徑
[圖片路徑的合法方式]
A.網路鏈接：由於圖片在其他網站，如果其他網站刪除圖片，我們也不能訪問，所以不建議使用這種方式；
<img src="https://www.baidu.com/img/bd_logo1.png" />

B.絕對路徑：使用絕對路徑的圖片，只有在本機使用file協議才能訪問！所以，嚴禁使用這種方式！
<img src="file:///E:/icon.jpg" />

C.相對路徑：
a、圖片與當前文檔在同一層文件夾：直接寫圖片名
<img src="icon.jpg" />
b、圖片在當前文檔的下一層文件夾：文件夾名/圖片名
<img src="img/icon.jpg" />
c、圖片在當前文檔的上一層文件夾： ../圖片名 (../表示後退一層)
<img src="../icon.jpg" />
但是，一定要註意：圖片必須包含在項目裡面，不能訪問項目外的圖片。

② height:圖片的高度 width：圖片的寬度
<img src="img/icon.jpg" height="500" width="10" />

③ title：圖片的標題，也就是滑鼠指上後看到的提示文字
<img src="img/icon.jpg" title="滑鼠指上後看到的提示文字" />

④ alt: 圖片無法載入時顯示的文字
<img src="img/icon.jpg" alt="圖片無法載入時顯示的文字" />

⑤ align：圖片周圍的文字相對於圖片如何對齊。
可選值：top->圖片頂部 center->圖片中部 bottom->圖片底部
<img src="img/icon.jpg" align="top" />12345

（6）超鏈接標簽a

A、href屬性：表示超鏈接跳轉的頁面。
① 可以寫網路地址：
<a href="http://www.baidu.com">這是一個超鏈接</a>

② 可以打開本地的html文件：
採用相對路徑確定文件地址。與img標簽確定方式相同。
<a href="01-HTMLhead部分index.html">這是一個超鏈接</a>

B、title屬性：滑鼠指上後顯示的提示文字
<a href="01-HTMLhead部分index.html"title="ttt">這是一個超鏈接</a>

C、target屬性：設置新頁面打開的視窗位置
可選值：_self自身頁面打開（預設）
_blank 新視窗打開
<a href="01-HTMLhead部分index.html"target"_blank">這是一個超鏈接</a>

【超鏈接的特殊應用】
1、功能性鏈接：（瞭解）
mailto:// 點擊鏈接給指定郵箱發送郵件
<a href="mailto://[email protected]"target"_blank">點擊發送郵件</a>
tencent://message/?uin=1105093212"
還有：tell://手機端點擊打電話
message://手機端點擊發送簡訊
ftp://使用ftp協議進行文件的上傳下載
2、錨點鏈接：
>>>本頁面錨鏈接
① 在頁面的指定位置中設置一個錨點，用那麼屬性表示錨點名字：
a name="top"></a>
<div style="background-color: aqua;height: 1000px"></div>
② 將超鏈接的href屬性，設置為#加錨點名字
<a href="#top">點擊鏈接，跳轉到top錨點位置</a>
>>>頁面間錨鏈接
① 在新頁面的指定位置中設置一個錨點，用那麼屬性表示錨點名字：
a name="top"></a>
<div style="background-color: aqua;height: 1000px"></div>
② 將超鏈接的href屬性，設置為“新頁面地址#加錨點名字”：
<a href="錨點.html#3">點擊鏈接，跳轉到錨地.html的top錨點位置</a>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML基本行級標簽</title>
    </head>
    
    <body>
        <a name="e"></a>
        
        
        糖糖<span style="color: red; font-size: 48px;">真帥</span>！！！
        <br />
        
        
        <em>這是em標簽</em><br />
        <strong>這是strong標簽</strong><br />
        <i>這是i標簽</i><br />
        <b>這是b標簽</b><br />
        <u>這是b標簽</u><br />
        
        
        <q cite="http://www.jianghaozhenshuai.com">我是q標簽引用</q>
        <blockquote>我是blockqoute的引用！！！！！</blockquote>
        <cite cite="">我是cite標簽的引用！！</cite><br />
        
        
        <small><small>我比正常小兩號</small></small><br />
        <big>我比正常大一號</big><br />
        
        
              <img src="img/icon.jpg" align="top" />12345
        -->
        <img src="img/icon.jpg" align="bottom" />12345
        
        <a href="tencent://message/?uin=1105093212"target"_blank">點擊發送郵件</a>
        <div style="background-color: aqua;height: 1000px"></div>
        <a href="#e">點擊</a>
        <a href="錨點.html#1">1</a>
        <a href="錨點.html#2">2</a>
        <a href="錨點.html#3">3</a>
    </body>
</html>

4）塊級標簽與行級標簽的區別

1、塊級標簽：預設寬度100%(占滿一行)；
塊級標簽自動換行(獨占一行，右邊不能有任何東西)；
塊級標簽可以使用CSS設置寬度高度！

2、行級標簽：預設寬度由內容撐開(內容多寬、寬度就占多寬)；
行級標簽不會自動換行(一行當中，從左往右依次排列)；
行級標簽的寬度高度不能設置！

5）表格

（1）表格table

表格用table表示，表格中的每一行tr表示，一行中的每一列用td表示

th表示的是：表頭。表頭中的文字，預設為加粗居中。th要放在tr中，用於替換掉td。

（2）table的常用屬性
A、border：給表格加邊框。預設給所有td加邊框，並且給整個table加外邊框。當增大border的值時，td上的邊框不變化，只有最外層大邊框變寬。

B、cellspacing：單元格與單元格之間的距離。
cellspacing="0" 表示單元格與單元格之間沒有距離，但是邊框線的寬度依然是兩條線的寬度。

[註意] 表格邊框合併的CSS寫法：
style="border-collapse: collapse;"

這條CSS與cellspacing="0"有什麼區別？
cellspacing="0"僅僅是將單元格之間的距離調整為0，實際上單元格之間依然還是兩條線；
border-collapse: collapse; 是將表格相鄰的兩條邊框進行合併處理，只有一條線存在。(一旦邊框合併，cellspace屬性將會失效。)

C、cellpadding：單元格中的文字與單元格邊框的距離。

D、 height：表格的高度
width：表格的寬度

使用表格寬、高屬性設置大小：
<table height="400" width="500"></table>

使用CSS樣式設置大小：
<table style="height:400px; width:500px;"></table>

E、align：設置表格在瀏覽器中的位置。不建議使用了。
可選值：left 表格居左 /center 表格居中/right 表格居右

F、bgcolor：背景色
bordercolor:邊框顏色
background:背景圖 background="img/computer.jpg"
背景色和背景圖同時存在時，背景圖會覆蓋背景色

（3）tr與td常用屬性
A、width：單元格寬度
height：單元格的高度

B、bgcolor：單元格的顏色

C、align:設置單元格中的文字，水平對齊方式。
left、center、right
valign:設置單元格中的文字，垂直對齊方式。
top、middle、bottom

D、 nowrap="nowrap" 當單元格文字過多時，設置單元格文字不斷行顯示。但是，會把表格的寬度撐大!!!

（4）表格的跨行與跨列

①跨列：在td上使用屬性colspan="n"進行跨列。如果一個單元格跨n列，則，單元格右邊的n-1個單元格需要去掉。

②跨行：在td上使用屬性rowspan="n"進行跨行。如果一個單元格跨n行，則，單元格下邊的n-1個單元格需要去掉。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
    </head>
    
    <body>
                
        <table border="1">
            <tr>
                <th >標題一</th>
                <th colspan="2">標題二</th>
            </tr>
            <tr>
                <td rowspan="2">1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>
                <td>2-2</td>
                <td>2-3</td>

        </table>
        
        
            
        <table border="10" width="500" height="400" bordercolor="#ff99cc" style="border-collapse: collapse;">
            <!--1-->
            <tr>
                <td rowspan="7"></td>
                <td rowspan="4"></td>
                <td rowspan="2"></td>
                <td ></td>
                
            </tr>
            <!--2-->
            <tr>
                <td ></td>
        
            </tr>
            <!--3-->
            <tr>
                <td rowspan="2"></td>
                <td></td>
                
            </tr>
            <!--4-->
            <tr>
                <td rowspan="4"></td>
                
                
            </tr>
            <!--5-->
            <tr>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                
            </tr>
            <!--6-->
            <tr>
                
                
                
            </tr>
            <!--7-->
            <tr>
                <td colspan="2"></td>
                
            
                
            </tr>
        </table>
        
        
    </body>
</html>