整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML5基礎(chǔ)入門

          .標簽

          1.1meta標簽

          meta主要用于設(shè)置網(wǎng)頁中的一些元數(shù)據(jù),元數(shù)據(jù)不是給用戶看 charset 指定網(wǎng)頁的字符集 name 指定的數(shù)據(jù)的名稱 content 指定的數(shù)據(jù)的內(nèi)容

          keywords 表示網(wǎng)站的關(guān)鍵字,可以同時指定多個關(guān)鍵字,關(guān)鍵字間使用,隔開

          <meta name="Keywords" content="網(wǎng)上購物,網(wǎng)上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數(shù)碼,配件,手表,存儲卡,京東"/>

          description 用于指定網(wǎng)站的描述

          <meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城,銷售家電、數(shù)碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數(shù)萬個品牌優(yōu)質(zhì)商品.便捷、誠信的服務(wù),為您提供愉悅的網(wǎng)上購物體驗!"/>
          <meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

          將頁面重定向到另一個網(wǎng)站

          1.2title標簽

          title標簽的內(nèi)容會作為搜索結(jié)果的超鏈接上的文字顯示

          <title>Document</title>

          1.3標題

          • h1 ~ h6 一共有六級標題
          • 從h1~h6重要性遞減,h1最重要,h6最不重要
          • h1在網(wǎng)頁中的重要性僅次于title標簽,一般情況下一個頁面中只會有一個h1
          • 標題元素是塊元素
          • <h1>一級標題</h1>
            <h2>二級標題</h2>
            <h3>三級標題</h3>
            <h4>四級標題</h4>
            <h5>五級標題</h5>
            <h6>六級標題</h6>

          • hgroup標簽用來為標題分組,可以將一組相關(guān)的標題同時放入到hgroup
          • <hgroup>
            <h1>回鄉(xiāng)偶書二首</h1>
            <h2>其一</h2>
            </hgroup>
          • 其他標簽
            • p標簽表示頁面中的一個段落
            • <p>在p標簽中的內(nèi)容就表示一個段落</p>
            • em標簽用于表示語音語調(diào)的一個加重
            • <p>今天天氣<em></em>不錯!</p>
            • strong表示強調(diào),重要內(nèi)容!
            • <p>你今天必須要<strong>完成作業(yè)</strong>!</p>
            • blockquote 表示一個長引用
            • <blockquote>
              這句話我是從來沒有說過的!
              </blockquote>
            • q表示一個短引用
            • 子曰<q>學(xué)而時習(xí)之,樂呵樂呵!</q>
            • br標簽表示頁面中的換行
            • <br>

          1.4布局標簽

          header 表示網(wǎng)頁的頭部 main 表示網(wǎng)頁的主體部分(一個頁面中只會有一個main) footer 表示網(wǎng)頁的底部 nav 表示網(wǎng)頁中的導(dǎo)航 aside 和主體相關(guān)的其他內(nèi)容(側(cè)邊欄) article 表示一個獨立的文章 section 表示一個獨立的區(qū)塊,上邊的標簽都不能表示時使用section

          div 沒有語義,就用來表示一個區(qū)塊,目前來講div還是我們主要的布局元素

          span 行內(nèi)元素,沒有任何的語義,一般用于在網(wǎng)頁中選中文字

          <header></header>
              <main></main>
              <footer></footer>
          
              <nav></nav>
              <aside></aside>
              <article></article>
          
              <section></section>
          
              <div></div>
          
              <span></span>

          1.5列表

          1.1.1分類

          1.1.1.1有序列表

          使用ol標簽來創(chuàng)建無序列表,使用li表示列表項

          <ul>
                 <li>結(jié)構(gòu)</li>
                 <li>表現(xiàn)</li>
                 <li>行為</li>
             </ul>

          1.1.1.2 無序列表

          使用ul標簽來創(chuàng)建無序列表,使用li表示列表項

          <ol>
                 <li>結(jié)構(gòu)</li>
                 <li>表現(xiàn)</li>
                 <li>行為</li>
             </ol>

          1.1.1.3定義列表

          使用dl標簽來創(chuàng)建一個定義列表, 使用dt來表示定義的內(nèi)容,使用dd來對內(nèi)容進行解釋說明

          <dl>
                 <dt>結(jié)構(gòu)</dt>
                 <dd>結(jié)構(gòu)表示網(wǎng)頁的結(jié)構(gòu),結(jié)構(gòu)用來規(guī)定網(wǎng)頁中哪里是標題,哪里是段落</dd>
                 <dd>結(jié)構(gòu)表示網(wǎng)頁的結(jié)構(gòu),結(jié)構(gòu)用來規(guī)定網(wǎng)頁中哪里是標題,哪里是段落</dd>
                 <dd>結(jié)構(gòu)表示網(wǎng)頁的結(jié)構(gòu),結(jié)構(gòu)用來規(guī)定網(wǎng)頁中哪里是標題,哪里是段落</dd>
             </dl>

          1.1.1.4列表之間可以互相嵌套

          <ul>
                 <li>
                    aa
                     <ul>
                         <li>aa-1</li>
                         <li>aa-2
                             <ul>
                                 <li>aa-1</li>
                                 <li>aa-2</li>
                             </ul>
                         </li>
                     </ul>
                 </li>
             </ul>

          1.6超鏈接

          1.6.1 作用

          超鏈接可以讓我們從一個頁面跳轉(zhuǎn)到其他頁面, 或者是當(dāng)前頁面的其他的位置

          1.6.2 定義

          使用 a 標簽來定義超鏈接

          <a href="https://www.baidu.com">超鏈接</a>

          1.6.3 屬性

          1.6.3.1屬性1:href

          指定跳轉(zhuǎn)的目標路徑

          值可以是一個外部網(wǎng)站的地址

          也可以寫一個內(nèi)部頁面的地址

          超鏈接是也是一個行內(nèi)元素,在a標簽中可以嵌套除它自身外的任何元素

          1.6.3.2 屬性2:target

          用來指定超鏈接打開的位置

          _self 默認值 在當(dāng)前頁面中打開超鏈接

          _blank 在一個新的要么中打開超鏈接

          <a href="07.列表.html" target="_blank">超鏈接</a>

          1.6.4其他

          將#作為超鏈接的路徑的展位符使用

          javascript:; 來作為href的屬性,此時點擊這個超鏈接什么也不會發(fā)生

          將超鏈接的href屬性設(shè)置為#,這樣點擊超鏈接以后 頁面不會發(fā)生跳轉(zhuǎn),而是轉(zhuǎn)到當(dāng)前頁面的頂部的位置

          跳轉(zhuǎn)到頁面的指定位置,只需將href屬性設(shè)置 #目標元素的id屬性值

          <a href="#bottom">去底部</a>
             <br><br>
          <a href="#p3">去第三個自然段</a>
             <br><br>
          <p>
            內(nèi)容多一點
          </p>
          <a href="#">這是一個新的超鏈接</a>
             <br><br>
          <a href="javascript:;">這是一個新的超鏈接</a>
             <br><br>
          <a id="bottom" href="#">回到頂部</a>

          1.7圖片標簽

          img標簽來引入外部圖片,img標簽是一個自結(jié)束標簽

          屬性:src 屬性指定的是外部圖片的路徑(路徑規(guī)則和超鏈接是一樣的)

          alt 圖片的描述,這個描述默認情況下不會顯示,有些瀏覽器會圖片無法加載時顯示

          <img src="./img/1.gif" alt="松鼠">

          1.8內(nèi)聯(lián)框架

          用于向當(dāng)前頁面中引入一個其他頁面

          • src 指定要引入的網(wǎng)頁的路徑
          • frameborder 指定內(nèi)聯(lián)框架的邊框
          <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

          1.8 音視頻標簽

          1.8.1音頻

          audio 標簽用來向頁面中引入一個外部的音頻文件的

          1.8.1.1 屬性

          • controls 是否允許用戶控制播放
          • autoplay 音頻文件是否自動播放
            • 如果設(shè)置了autoplay 則音樂在打開頁面時會自動播放
          • loop 音樂是否循環(huán)播放
          <audio src="./source/audio.mp3" controls autoplay loop></audio>

          除了通過src來指定外部文件的路徑以外,還可以通過source來指定文件的路徑

          <audio controls>
                 <!-- 對不起,您的瀏覽器不支持播放音頻!請升級瀏覽器!-->
                 <source src="./source/audio.mp3">
                 <source src="./source/audio.ogg">
                 <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
             </audio>

          1.8.2視頻

          與 audio 相似

          <video controls>
                 <source src="./source/flower.webm">
                 <source src="./source/flower.mp4">
                 <embed src="./source/flower.mp4" type="video/mp4">
             </video>


          2.表格table

          • 在table中使用tr表示表格中的一行,有幾個tr就有幾行
          • 在tr中使用td表示一個單元格,有幾個td就有幾個單元格
          • rowspan 縱向的合并單元格
          • colspan 橫向的合并單元格
          <table border="1" width='50%' align="center">
                <tr>
                    <td>A1</td>
                    <td>B1</td>
                    <td>C1</td>
                    <td>D1</td>
                </tr>
                <tr>
                    <td>A2</td>
                    <td>B2</td>
                    <td>C2</td>
                    <td rowspan="2">D2</td>
                </tr>
                <tr>
                    <td>A3</td>
                    <td>B3</td>
                    <td>C3</td>
                </tr>
                <tr>
                    <td>A4</td>
                    <td>B4</td>
                    <td colspan="2">C4</td>
                </tr>
            </table>

          長表格

          • 可以將一個表格分成三個部分:
            • 頭部 thead
            • 主體 tbody
            • 底部 tfoot
          • th 表示頭部的單元格
          <table border="1" width='50%' align="center">  
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>收入</th>
                        <th>支出</th>
                        <th>合計</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>2000.1.1</td>
                        <td>500</td>
                        <td>200</td>
                        <td>300</td>
                    </tr>
                    <tr>
                        <td>2000.1.1</td>
                        <td>500</td>
                        <td>200</td>
                        <td>300</td>
                    </tr>
                    <tr>
                        <td>2000.1.1</td>
                        <td>500</td>
                        <td>200</td>
                        <td>300</td>
                    </tr>
                    <tr>
                        <td>2000.1.1</td>
                        <td>500</td>
                        <td>200</td>
                        <td>300</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>合計</td>
                        <td>300</td>
                    </tr>
                </tfoot>
          
            </table>

          表格樣式

          • border-spacing: 指定邊框之間的距離
          border-spacing: 0px;
          • border-collapse: collapse; 設(shè)置邊框的合并
          border-collapse: collapse;
          • 如果表格中沒有使用tbody而是直接使用tr,那么瀏覽器會自動創(chuàng)建一個tbody,并且將tr全都放到tbody中tr不是table的子元素

          3.表單(form)

          • 使用form標簽來創(chuàng)建一個表單
          • action 表單要提交的服務(wù)器的地址
          • 數(shù)據(jù)要提交到服務(wù)器中,必須要為元素指定一個name屬性值
          <input type="text" name="username">
          • 單選按鈕
            • 像這種選擇框,必須要指定一個value屬性,value屬性最終會作為用戶的填寫的值傳遞給服務(wù)器
            • checked 可以將單選按鈕設(shè)置為默認選中
          <input type="radio" name="hello" value="a">
          <input type="radio" name="hello" value="b" checked>
          • 多選框
          <input type="checkbox" name="test" value="1">
                <input type="checkbox" name="test" value="2">
                <input type="checkbox" name="test" value="3" checked>
          • 下拉列表
          <select name="haha">
                    <option value="i">選項一</option>
                    <option selected value="ii">選項二</option>
                    <option value="iii">選項三</option>
                </select>
          • 提交按鈕
          <input type="submit" value="注冊">

          屬性

          • autocomplete="off" 關(guān)閉自動補全
          • readonly 將表單項設(shè)置為只讀,數(shù)據(jù)會提交
          • disabled 將表單項設(shè)置為禁用,數(shù)據(jù)不會提交
          • autofocus 設(shè)置表單項自動獲取焦點
          <form action="target.html">
                <input type="text" name="username" value="hello" readonly>
                <br><br>
                <input type="text" name="username" autofocus>
                <br><br>
                <input type="text" name="b">
          
                <br><br>
          
                <!-- <input type="color"> -->
                <br><br>
                <!-- <input type="email"> -->
                <br><br>
          
                <input type="submit">
                <!-- 重置按鈕 -->
                <input type="reset">
                <!-- 普通的按鈕 -->
                <input type="button" value="按鈕">
          
                <br><br>
                 
          
                <button type="submit">提交</button>
                <button type="reset">重置</button>
                <button type="button">按鈕</button>
            </form>

          4.注釋

          <!--
          我是注釋中的注釋 注釋不能嵌套
          -->
          

          5.屬性

          • 屬性,在標簽中(開始標簽或自結(jié)束標簽)還可以設(shè)置屬性
          • 屬性是一個名值對(x=y)
          • 屬性用來設(shè)置標簽中的內(nèi)容如何顯示
          • 屬性和標簽名或其他屬性應(yīng)該使用空格隔開
          • 屬性不能瞎寫,應(yīng)該根據(jù)文檔中的規(guī)定來編寫,有些屬性有屬性值,有些沒有。如果有屬性值,屬性值應(yīng)該使用引號引起來

          6.文檔聲明

          <!doctype html>

          非下表中的所有實體都能在所有的瀏覽器中正確地顯示。

          目前,IE 11 是唯一一個能正確顯示所有 HTML5 實體的瀏覽器。

          字符實體名稱十六進制
          ?dagger02020
          &daleth;daleth02138
          &Darr;Darr021A1
          ?dArr021D3
          darr02193
          &dash;dash02010
          &Dashv;Dashv02AE4
          &dashv;dashv022A3
          &dbkarow;dbkarow0290F
          &dblac;dblac002DD
          &Dcaron;Dcaron0010E
          &dcaron;dcaron0010F
          &Dcy;Dcy00414
          &dcy;dcy00434
          &DD;DD02145
          &dd;dd02146
          &ddagger;ddagger02021
          &ddarr;ddarr021CA
          &DDotrahd;DDotrahd02911
          &ddotseq;ddotseq02A77
          °deg000B0
          &Del;Del02207
          ΔDelta00394
          δdelta003B4
          &demptyv;demptyv029B1
          &dfisht;dfisht0297F
          &Dfr;Dfr1D507
          &dfr;dfr1D521
          &dHar;dHar02965
          &dharl;dharl021C3
          &dharr;dharr021C2
          &DiacriticalAcute;DiacriticalAcute000B4
          &DiacriticalDot;DiacriticalDot002D9
          &DiacriticalDoubleAcute;DiacriticalDoubleAcute002DD
          &DiacriticalGrave;DiacriticalGrave00060
          &DiacriticalTilde;DiacriticalTilde002DC
          &diam;diam022C4
          &Diamond;Diamond022C4
          &diamond;diamond022C4
          &diamondsuit;diamondsuit02666
          ?diams02666
          &die;die000A8
          &DifferentialD;DifferentialD02146
          &gammad;digamma003DD
          &disin;disin022F2
          &div;div000F7
          ÷divide000F7
          ÷ontimes;divideontimes022C7
          &divonx;divonx022C7
          &DJcy;DJcy00402
          &djcy;djcy00452
          &dlcorn;dlcorn0231E
          &dlcrop;dlcrop0230D
          &dollar;dollar00024
          &Dopf;Dopf1D53B
          &dopf;dopf1D555
          &Dot;Dot000A8
          &dot;dot002D9
          &DotDot;DotDot020DC
          &doteq;doteq02250
          &doteqdot;doteqdot02251
          &DotEqual;DotEqual02250
          &dotminus;dotminus02238
          &dotplus;dotplus02214
          &dotsquare;dotsquare022A1
          &doublebarwedge;doublebarwedge02306
          &DoubleContourIntegral;DoubleContourIntegral0222F
          &DoubleDot;DoubleDot000A8
          &DoubleDownArrow;DoubleDownArrow021D3
          &DoubleLeftArrow;DoubleLeftArrow021D0
          &DoubleLeftRightArrow;DoubleLeftRightArrow021D4
          &DoubleLeftTee;DoubleLeftTee02AE4
          &DoubleLongLeftArrow;DoubleLongLeftArrow027F8
          &DoubleLongLeftRightArrow;DoubleLongLeftRightArrow027FA
          &DoubleLongRightArrow;DoubleLongRightArrow027F9
          &DoubleRightArrow;DoubleRightArrow021D2
          &DoubleRightTee;DoubleRightTee022A8
          &DoubleUpArrow;DoubleUpArrow021D1
          &DoubleUpDownArrow;DoubleUpDownArrow021D5
          &DoubleVerticalBar;DoubleVerticalBar02225
          &DownArrow;DownArrow02193
          &Downarrow;Downarrow021D3
          &downarrow;downarrow02193
          &DownArrowBar;DownArrowBar02913
          &DownArrowUpArrow;DownArrowUpArrow021F5
          &DownBreve;DownBreve00311
          &downdownarrows;downdownarrows021CA
          &downharpoonleft;downharpoonleft021C3
          &downharpoonright;downharpoonright021C2
          &DownLeftRightVector;DownLeftRightVector02950
          &DownLeftTeeVector;DownLeftTeeVector0295E
          &DownLeftVector;DownLeftVector021BD
          &DownLeftVectorBar;DownLeftVectorBar02956
          &DownRightTeeVector;DownRightTeeVector0295F
          &DownRightVector;DownRightVector021C1
          &DownRightVectorBar;DownRightVectorBar02957
          &DownTee;DownTee022A4
          &DownTeeArrow;DownTeeArrow021A7
          &drbkarow;drbkarow02910
          &drcorn;drcorn0231F
          &drcrop;drcrop0230C
          &Dscr;Dscr1D49F
          &dscr;dscr1D4B9
          &DScy;DScy00405
          &dscy;dscy00455
          &dsol;dsol029F6
          &Dstrok;Dstrok00110
          &dstrok;dstrok00111
          &dtdot;dtdot022F1
          &dtri;dtri025BF
          &dtrif;dtrif025BE
          &duarr;duarr021F5
          &duhar;duhar0296F
          &dwangle;dwangle029A6
          &DZcy;DZcy0040F
          &dzcy;dzcy0045F
          &dzigrarr;dzigrarr027FF

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          小伙伴們,感覺我的分享很不錯的別忘記“贊賞”我一下喲!

          章學(xué)習(xí)目標

          • 了解HTML語法的發(fā)展歷史
          • 了解HTML語義化
          • 掌握HTML常用標簽的基本使用

          第一章已經(jīng)介紹過HTML是一門超文本標記語言,通過HTML標記對網(wǎng)頁中的文本、圖片、聲音等信息進行描述。但是具體如何使用HTML標記對網(wǎng)頁中的信息進行控制,沒有介紹,本章就將從HTML的歷史、語義化、常用標簽三個方面詳細講解HTML。

          2.1 HTML歷史

          俗話說“了解歷史,才能明白當(dāng)下,進而展望未來”。所以了解HTML的歷史,有利于更好的掌握HTML這門語言。

          2.1.1 HTML歷史版本

          像大多數(shù)軟件、硬件一樣,HTML發(fā)展至今,經(jīng)歷了幾個版本,新增了許多HTML標記,同時也淘汰了一些標記,接下來介紹HTML在不同時期所對應(yīng)的一些重要版本,具體如下:

          • 超文本標記語言(第一版)——在1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布(并非標準)
          • HTML 2.0——1995年11月,IETF推薦標準。
          • HTML 3.2——1997年1月14日,W3C推薦標準。
          • HTML 4.0——1997年12月18日,W3C推薦標準。
          • HTML 4.01——1999年12月24日,W3C推薦標準。
          • HTML 5——2014年10月28日,W3C推薦標準。

          HTML沒有1.0版本,最早的HTML官方規(guī)范,是由IETF(Internet Engineering Task Force,因特網(wǎng)工程任務(wù)組)發(fā)布的HTML 2.0。之后W3C成為HTML語言標準的制定者,發(fā)布了3.2、4.0、4.01和5等多個后續(xù)重要版本。通常所說的HTML5指的就是5這個最新的版本。

          本教材涉及的所有規(guī)范及語法,都是嚴格按照HTML5標準進行講解的,在后面的章節(jié)中還會詳細的介紹HTML5及相關(guān)內(nèi)容。

          2.1.2 HTML與XHTML關(guān)系

          在HTML語法上很寬松,如標簽和屬性可以是大寫、小寫,或者任意大小寫字母的組合,標簽可以不閉合等。有些設(shè)備很難兼容這些松散的語法,如手機、打印機等,這并不符合標準的發(fā)展趨勢,因此1999年12月W3C推出了HTML4.01版本后解散了HTML工作組。轉(zhuǎn)而開發(fā)XHTML,2000年1月26日發(fā)布XHTML1.0。

          XHTML是更嚴謹純凈的HTML版本,XHTML比HTML語法更加規(guī)范和嚴謹,目的是為了實現(xiàn)HMTL向XML過渡,讓作者按照統(tǒng)一的風(fēng)格來編寫標簽,HTML中標簽和屬性不區(qū)分大小寫,而有效的XHTML 文檔則要求所有標簽和屬性必須一律小寫,當(dāng)然還有一些其他的規(guī)范和要求,這里不再贅述。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強,完全可以替代HTML,但是面對互聯(lián)網(wǎng)上大量基于HTML編寫的網(wǎng)站,直接采用XML還為時過早,因此在HTML4.0的基礎(chǔ)上,用XML的語法規(guī)則對其進行擴展,得到了XHTML。

          注:XML指可擴展標記語言(EXtensible Markup Language),用來傳輸和存儲數(shù)據(jù)。XML語言也可以做為很多語言的基礎(chǔ)語言,例如:XHTML、SVG等。

          HTML的不同版本對<!DOCTYPE>寫法也有不同,具體如下:

          HTML4.01中<!DOCTYPE>寫法:

          	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          	"http://www.w3.org/TR/html4/loose.dtd">
          

          XHTML1.01中<!DOCTYPE>寫法

          	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">		
          

          HTML5中<!DOCTYPE>寫法

          	<!DOCTYPE HTML>
          

          因為 HTML 4.01和XHTML1.0 基于 SGML,所以 DOCTYPE 需要對 DTD 進行引用。而 HTML 5 不基于 SGML,因此不需要對 DTD 進行引用,因此HTML5的DOCTYPE寫法相當(dāng)簡單。這里建議讀者都采用最新的HTML5版本<!DOCTYPE>寫法,第一章已經(jīng)介紹過在DW工具中默認設(shè)置不同類型的文檔聲明。

          2.2 什么是HTML語義化

          所謂HTML語義化指的是,根據(jù)網(wǎng)頁中內(nèi)容的結(jié)構(gòu),選擇適合的HTML標簽進行編寫。HTML語義化的意義主要有以下幾點:

          • 在沒有CSS的情況下,頁面也能呈現(xiàn)出很好的內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)。
          • 有利于SEO,讓搜索引擎爬蟲更好的理解網(wǎng)頁,從而獲取更多的有效信息,提升網(wǎng)頁的權(quán)重。
          • 方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動設(shè)備)以語義的方式來渲染網(wǎng)頁。
          • 便于團隊開發(fā)和維護,語義化的HTML可以讓開發(fā)者更容易的看明白,從而提高團隊的效率和協(xié)調(diào)能力。

          HTML標簽都具備語義化,根據(jù)網(wǎng)頁展示的內(nèi)容結(jié)構(gòu),選擇正確的HTML標簽進行解析與編碼。

          注: SEO是指在了解搜索引擎自然排名機制的基礎(chǔ)之上,對網(wǎng)站進行內(nèi)部及外部的調(diào)整優(yōu)化,改進網(wǎng)站在搜索引擎中關(guān)鍵詞的自然排名,獲得更多的展現(xiàn)量,吸引更多目標客戶點擊訪問網(wǎng)站,從而達到互聯(lián)網(wǎng)營銷及品牌建設(shè)的目的。

          2.3 HTML常用標簽

          HTML標簽非常多,有些由于歷史問題已經(jīng)廢棄,有些屬于HTML5中新添加的,這部分H5新標簽會在H5章節(jié)中給讀者講解,本章主要講解一些HTML中常用標簽的使用。

          2.3.1 標題標簽

          瀏覽新聞類網(wǎng)頁時,經(jīng)常能看見文章的標題,如圖2.1所示。

          圖2.1 千鋒教育新聞標題

          圖2.1的標題就是用HTML中的標題標簽來實現(xiàn)的,HTML中使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>等標簽來定義標題部分,其語法格式如下:

          	<hn 屬性=“屬性值”>標題文本</hn>
          

          接下來通過案例來演示標題標簽,如例2-1所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>定義標題</title>
           6 </head>
           7 <body>
           8 <h1>這是一級標題</h1>
           9 <h2>這是二級標題</h2>
           10 <h3>這是三級標題</h3>
           11 <h4>這是四級標題</h4>
           12 <h5>這是五級標題</h5>
           13 <h6>這是六級標題</h6>
           14 </body>
           15 </html>
          

          運行結(jié)果如圖2.2所示。

          圖2.2 標題標簽顯示效果

          從上例運行結(jié)果可以看出,默認情況下標題文字的顯示方式是加粗左對齊,并且從<h1>到<h6>字號遞減,如果想改變標題的對齊方式,需要用到align屬性,其取值如表2.1。

          接下來通過案例來演示標題標簽對齊方式的設(shè)置及效果,如例2-2所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>定義標題對齊方式</title>
           6 </head>
           7 <body>
           8 <h1>這是一級標題</h1>
           9 <h2 align="left">這是二級標題</h2>
           10 <h3 align="center">這是三級標題</h3>
           11 <h4 align="right">這是四級標題</h4>
           12 </body>
           13 </html>
          

          運行結(jié)果如圖2.3所示。

          圖2.3標題對齊方式顯示效果

          標題很重要,它有利于網(wǎng)頁搜索引擎的優(yōu)化,其中<h1>標題的重要性最高,<h6>標題的重要性最低,一般一個頁面只能有一個<h1>,而<h2>~<h6>可以有多個。

          2.3.2 段落標簽

          瀏覽新聞類網(wǎng)頁時,經(jīng)常能看見文章的段落,如圖2.4所示。

          圖2.4 千鋒教育新聞段落

          圖2.4中的段落在HTML中使用<p>標簽實現(xiàn),用于在網(wǎng)頁中把文字有條理地顯示出來,其語法格式如下:

          	<p 屬性=“屬性值”>段落文本</p>
          

          接下來通過案例來演示段落標簽,如例2-3所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>段落標簽</title>
           6 </head>
           7 <body>
           8 <h1 align="center" >扣丁學(xué)堂</h1></h1>
           9 <p align="left">扣丁學(xué)堂是中國IT培訓(xùn)教育品牌領(lǐng)導(dǎo)者,擁有最新最全的IT培訓(xùn)視頻課
           10 程,專注于發(fā)布和更新iOS培訓(xùn)、Android培訓(xùn)、HTML5培訓(xùn)、UI培訓(xùn)、PHP培訓(xùn)視頻教程,
           11 著力于培養(yǎng)移動互聯(lián)網(wǎng)人才。</p>
           12 <p align="ri">遇到IT技術(shù)難題,就上扣丁學(xué)堂學(xué)堂。</p>
           13 </body>
           14 </html>
          

          運行結(jié)果如圖2.5所示。

          圖2.5 段落標簽顯示效果

          2.3.3 文本格式化標簽

          文本格式化標簽就是針對文本進行各種格式化的標簽,例如加粗、斜體、上標、下標等。如表2.2所示。

          表2.2中列出了對文本格式化的幾種標簽,下面將詳細介紹這幾種標簽的使用和效果。

          1. <strong>標簽

          <strong>標簽將文本定義為語氣更強的強調(diào)內(nèi)容,展示效果為加粗。接下來通過案例演示<strong>標簽,如例2-4所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>文本格式化</title>
           6 </head>
           7 <body>
           8 <strong>用良心做教育!</strong>
           9 </body>
           10 </html>
          

          運行結(jié)果如圖2.6所示。

          圖2.6 strong標簽顯示效果

          注意:<b>標簽的展示效果跟<strong>完全相同,但是<b>標簽不具備語義化強調(diào)的作用,只是顯示加粗效果。

          2. <em>標簽

          <em>標簽也是將文本定義為強調(diào)的內(nèi)容,只不過比<strong>標簽強調(diào)的稍弱些,展示效果為斜體,接下來通過案例來演示<em>標簽,如例2-5所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>文本格式化</title>
           6 </head>
           7 <body>
           8 <em>用良心做教育!</em>
           9 </body>
           10 </html>
          

          運行結(jié)果如圖2.7所示。

          圖2.7 em標簽顯示效果

          注意:<i>標簽的展示效果跟<em>完全相同,但是<i>標簽不具備語義化強調(diào)的作用,只是顯示斜體效果。

          3. <sup>和<sub>標簽

          <sup>標簽用于將文本定義為上標文本,<sub>標簽用于將文本定義為下標文本,接下來通過案例來演示<sup>和<sub>標簽,如例2-6所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>文本格式化</title>
           6 </head>
           7 <body>
           8 <p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
           9 <p>H<sub>2</sub>O</p>
           10 </body>
           11 </html>
          

          運行結(jié)果如圖2.8所示。

          圖2.8 sup、sub標簽顯示效果

          4. <del>和<ins>標簽

          <del>標簽可用于定義已被刪除的文本, <ins>標簽可用于定義已經(jīng)被插入的文本,<del>標簽與<ins>標簽配合使用,來描述文檔中的更新和修正。接下來通過案例來演示<del>和<ins>標簽,如例2-7所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>文本格式化</title>
           6 </head>
           7 <body>
           8 <p><del>刪除文本加刪除線</del></p>
           9 <p><ins>插入文本加下畫線</ins></p>
           10 </body>
           11 </html>
          

          運行結(jié)果如圖2.9所示。

          圖2.9 del、ins標簽顯示效果

          文本格式化標簽,一定要根據(jù)它們的語義來記憶,至于它們的默認樣式,后續(xù)可以通過CSS方式進行修改。

          2.3.4 引用標簽

          引用標簽就是針對文本進行各種引用的標簽,例如縮略詞、短語解釋、著作、地址等。主要劃分成幾大類,如表2.3所示。

          表2.3中列出了引用標簽的幾種分類,下面進行詳細介紹。

          1. <blockquote>和<q>標簽

          <blockquote>和<q>標簽都是對文本的解釋引用,<blockquote>標簽引用是用大段的段落進行解釋,而<q>標簽引用是小段的短語進行解釋,接下來通過案例來演示<blockquote>和<q>標簽,如例2-8所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>文本格式化</title>
           6 </head>
           7 <body>
           8 <p>"死而后已"一語出自諸葛亮《出師表》:<blockquote>“凡事如是,難可逆見,
           9 臣鞠躬盡瘁,死而后已,至于成敗利鈍,非臣之明所能逆睹也。"</blockquote></p>
           10 <p>WWF 的目標是:<q>構(gòu)建人與自然和諧共存的世界。</q></p>
           11 </body>
           12 </html>
          

          運行結(jié)果如圖2.10所示。

          圖2.10 <blockquote>、<q>標簽顯示效果

          由例2-8中可以看出,<blockquote>標簽左右會空出一些距離,<q>標簽會自動加上引號。

          2. <abbr>標簽

          <abbr>標簽用來引用縮寫或首字母縮略語,接下來通過案例來演示<abbr>標簽,如例2-9所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>引用標簽</title>
           6 </head>
           7 <body>
           8 <p><abbr title="World Health Organization">WHO</abbr> 
           9 成立于 1948 年。</p>
           10 </body>
           11 </html>
          

          運行結(jié)果如圖2.11所示。

          圖2.11 <abbr>標簽顯示效果

          例2-9中可以看到一個title屬性,當(dāng)鼠標移入到設(shè)置title的區(qū)域時,就會顯示提示信息。

          3. <address>和<cite>標簽

          <address>標簽用來引用地址信息,<cite>標簽用來引用著作的標題,展示效果為斜體,接下來通過一個案例來演示<address>和<cite>標簽,如例2-10所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>引用標簽</title>
           6 </head>
           7 <body>
           8 <address>
           9 <p>網(wǎng)易北京公司</p>
           10 <p>地址:北京市海淀區(qū)西北旺東路10號院</p>
           11 <p>郵編:100084</p>
           12 </address>
           13 <p><cite>資治通鑒</cite>由北宋司馬光主編的一部多卷本編年體史書</p> 
           14 </body>
           15 </html>
          

          運行結(jié)果如圖2.12所示。

          圖2.12 <address>、<cite>標簽顯示效果

          2.3.5 水平線標簽

          有時為了使文檔結(jié)構(gòu)清晰、層次分明,常常需要在網(wǎng)頁中添加一些水平線將段落與段落之間分隔開,HTML中使用<hr>標簽來創(chuàng)建橫跨網(wǎng)頁的水平線。另外<hr>屬于單標簽,在網(wǎng)頁中輸入一個<hr/>標簽,就添加了一條默認樣式的水平線,<hr>標簽的常用屬性如表2.4所示。

          接下來通過案例來演示水平線標簽,如例2-11所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>水平線標簽</title>
           6 </head>
           7 <body>
           8 <p align="center">扣丁學(xué)堂</p>
           9 <hr color="#003399" width="100" size="5">a
           10 <p align="left">遇到IT難題,就上扣丁學(xué)堂。</p>
           11 <hr>
           12 <p>遇到問題,在線解答。</p>
           13 </body>
           14 </html>
          

          運行結(jié)果如圖2.13所示。

          圖2.13 <hr>標簽顯示效果

          例2-11中,第9行定義水平線標簽,并設(shè)置了color、width、size屬性,并沒有設(shè)置align屬性,可以發(fā)現(xiàn)align屬性默認居中對齊,第11行定義水平線標簽,其屬性都是默認值,可發(fā)現(xiàn)width屬性默認的是瀏覽器窗口的100%。

          2.3.6 特殊符號

          在編寫一些文本時,經(jīng)常會遇到輸入法無法輸入的字符,如?(注冊商標)、?(版權(quán)符)等,還有往一段文字中加入多個空格時,頁面并不會解析出多個空格。這些無法輸入和空格字符都是特殊字符,在HTML中,為這些特殊字符準備了專門的代碼,如表2.5。

          接下來通過案例來演示這些特殊字符表示代碼,如例2-12所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>特殊符號</title>
           6 </head>
           7 <body>
           8 <p>?注冊商標 ?版權(quán) 空格 < 小于號 >大于號</p>
           9 <p>&和號 ¥人民幣 °攝氏度 ±正負號 ×乘號</p>
           10 <p> ÷除號 1上標1 2上標2 3上標3</p>
           11 </body>
           12 </html>
          

          運行結(jié)果如圖2.14所示。

          圖2.14 難輸入符號顯示效果

          在DW中,只要輸入一個&符號,就可以看到相關(guān)特殊符號的提示信息。如圖2.15所示。

          圖2.15 DW中特殊符號提示功能

          2.3.7 圖像標簽

          每一張網(wǎng)頁都離不開圖片元素,在網(wǎng)頁中添加圖片是非常重要的操作,如圖2.16所示。

          圖2.16 圖片效果展示

          HTML中使用<img>標簽來添加圖片,<img>屬于單標簽,其語法格式如下

          	<img src=”圖像URL”/>
          

          其中src是用于指定圖像文件的路徑和文件名的屬性,是img標簽的必需屬性。接下來用案例來簡單演示img標簽的使用。如例2-13所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>圖像標簽</title>
           6 </head>
           7 <body>
           8 <img src="qianfeng.jpg"/>
           9 </body>
           10 </html
          

          運行結(jié)果如圖2.17所示。

          圖2.17 圖像標簽顯示效果

          src屬性引用的是當(dāng)前圖片的地址,圖片的名為qianfeng,圖片的格式為.png,接下來針對圖片的地址和圖片的格式進行詳細講解。

          1. 圖片的地址

          src屬性引用的是當(dāng)前圖片的地址,所謂地址就是一個文件的路徑。讀者在網(wǎng)頁中通過地址來找到相應(yīng)位置的元素。那么地址分為相對地址與絕對地址,相對地址即被引入的文件相對與當(dāng)前頁面的地址。絕對地址即文件在網(wǎng)絡(luò)或本地的絕對位置。

          相對地址有以下三種寫法,具體如下。

          	<img src=”qianfeng.jpg”/>
          	<img src=”img/qianfeng.jpg”/>
          	<img src=”../img/qianfeng.jpg”/>
          

          第一個相對地址說明當(dāng)前頁面和圖片在同一個目錄下。第二個相對地址說明圖片在頁面同級的img文件夾中。第三個相對地址說明圖片在頁面上一級的img文件夾中。

          絕對地址有以下兩種寫法,具體如下。

          	<img src="http://m.jungjaehyung.com/uploadfile/2024/0807/20240807024450900.jpg"/>
          	<img src=http://m.jungjaehyung.com/uploadfile/2024/0807/20240807024451373.jpg”/>
          

          第一個絕對地址在本地D盤的相應(yīng)文件夾下。第二個絕對地址在網(wǎng)絡(luò)中的相應(yīng)文件夾下。

          當(dāng)前網(wǎng)頁和圖片文件如果同時移動到其他位置時,相對地址是不會出問題的,因為兩個文件的相對位置并沒有發(fā)生變化。而絕對地址則會有問題,因為地址是唯一的路徑。所以在開發(fā)網(wǎng)頁的時候建議讀者盡量采用相對地址。

          2. 圖片格式

          網(wǎng)頁中加載圖像如果太大會造成網(wǎng)頁加載速度慢,太小圖片會顯示不清晰,在網(wǎng)頁中選擇合適的圖片格式加載顯得尤為重要,常用的圖片格式主要有jpg、png和gif三種格式,接下將分別進行詳細講解。

          (1)jpg格式

          jpg格式的圖片是一種有損壓縮的圖像格式,即每次修改圖片都會造成一些圖像數(shù)據(jù)的丟失。jpg是特別為照片圖像設(shè)計的文件格式,可以很好地處理大面積色調(diào)的圖像,一般在網(wǎng)頁中用來展示色彩豐富的圖像。如圖2.18所示。

          圖2.18 jpg格式圖片顯示效果

          (2)png格式

          png格式的圖片相對于jpg、gif格式最大的優(yōu)點是體積小,支持alpha透明(全透明、半透明、全不透明),可以很好地理透明方式的圖片,比如網(wǎng)頁中的logo圖片可以在不同的背景底色下完美展現(xiàn)。如圖2.19所示,但png不支持動畫。另外需要注意,IE6,可以支持png-8,但是在處理png-24的透明時會顯示為灰色。通常,圖片保存為png-8會在同等質(zhì)量下獲得比gif更小的體積,而半透明的圖片只能使用png-24。

          圖2.19 png格式圖片顯示效果

          (3)gif格式

          gif格式圖片最重要的特點是支持動畫,可以很好地處理動畫效果的圖片,如網(wǎng)頁中的廣告圖片。如圖2.20所示。同時gif是一種無損的圖像格式,修改圖片幾乎不會造成圖像數(shù)據(jù)的丟失。而且gif也支持透明(全透明和全不透明),因此很適合在網(wǎng)頁中使用。但gif只能處理256種顏色,在網(wǎng)頁制作中,常用于logo、小圖標及其他色彩相對單一的圖像。

          圖2.20 gif格式圖片顯示效果

          <img>標簽除了src屬性外,還包括一些其他屬性,如表2.6所示。

          表2.6中簡單描述了img標簽中常用的屬性,為了使初學(xué)者更好地理解和應(yīng)用這些屬性,接下來進行詳細講解。

          1. alt屬性

          alt屬性是圖片顯示不出來時的提示文字。當(dāng)設(shè)置了alt屬性后,如果圖片正常顯示的話,是看不到任何效果的,只有當(dāng)圖片地址出問題導(dǎo)致圖片不顯示時,才可以看到alt的提示信息。接下來通過案例來演示alt屬性,如例2-14所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>圖像標簽</title>
           6 </head>
           7 <body>
           8 <img src="qianfeng.jpg">
           9 <img src="qianfengError.jpg" alt="千鋒教育">
           10 </body>
           11 </html>
          

          運行結(jié)果如圖2.21所示。

          圖2.21 alt屬性顯示效果

          2. title屬性

          title屬性是鼠標移到圖片上的提示文字。當(dāng)設(shè)置了title屬性后,如果鼠標移入到圖片上時,就會顯示title的提示信息。接下來通過案例來演示title屬性,如例2-15所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>圖像標簽</title>
           6 </head>
           7 <body>
           8 <img src="qianfeng.jpg" title="千鋒教育">
           9 </body>
           10 </html>
          

          運行結(jié)果如圖2.22所示。

          圖2.22 title屬性顯示效果

          alt屬性和title屬性都是有利于SEO搜索引擎的優(yōu)化和用戶體驗的提升,只是它們展示的方式不一樣。

          2.3.8 鏈接標簽

          單個網(wǎng)頁不能容納網(wǎng)站需要的所有信息,需要多個網(wǎng)頁構(gòu)成,這時就點擊鏈接可以從一張網(wǎng)頁跳轉(zhuǎn)到另一張網(wǎng)頁,如圖2.23所示。

          圖2.23鏈接效果展示

          HTML中使用<a></a>標簽來定義鏈接部分實現(xiàn)網(wǎng)頁的跳轉(zhuǎn),其語法格式如下。

          <a href=“鏈接頁面地址” target=“鏈接打開的方式”>鏈接對象</a>

          接下來通過案例來演示鏈接標簽,如例2-16所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>鏈接標簽</title>
           6 </head>
           7 <body>
           8 <a href="2-15.html">打開一個新的網(wǎng)頁</a>
           9 <a >千鋒官網(wǎng)</a>
           10 <a href="../照片.rar">下載壓縮包文件</a>
           11 </body>
           12 </html>
          

          運行結(jié)果如圖2.24所示。

          圖2.24 鏈接標簽顯示效果

          鏈接和圖像一樣,地址可以是相對地址或絕對地址。鏈接除了可以鏈接地址外,還可以鏈接其他的元素(壓縮包,word文檔,PPT文檔等)。例2-16中第一個鏈接打開的是一個本地中的相對地址,第二個鏈接打開的是一個網(wǎng)絡(luò)上的絕對地址,第三個鏈接點擊后會下載一個壓縮包文件。

          鏈接可以針對文字,也可以針對圖片,當(dāng)點擊圖片時會打開一個新的網(wǎng)頁,接下來通過案例來演示,如例2-17所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>鏈接標簽</title>
           6 </head>
           7 <body>
           8 <a href="2-15.html">
           9 <img src="qianfeng.jpg">
           10 </a>
           11 </body>
           12 </html>
          

          運行結(jié)果如圖2.25所示。

          圖2.25 鏈接圖片的顯示效果

          例2-16、2-17中<a>標簽只定義了href屬性,<a>標簽除了href屬性外還包含target和name兩個重要屬性,下面就來分別介紹<a>標簽的這三個屬性。

          1. href屬性

          herf屬性就是來指定鏈接目標的url地址,為<a>標簽定義herf屬性后,它就有了鏈接的功能。

          2.name屬性

          有些網(wǎng)頁的內(nèi)容較多,頁面過長,如百度百科千鋒教育,只能不斷的拖動滾動條來瀏覽網(wǎng)頁,查看所需要的內(nèi)容,效率較低,而且很不方便,這時可以通過<a>標簽的name屬性實現(xiàn)站內(nèi)跳轉(zhuǎn),這種站內(nèi)的跳轉(zhuǎn)的方式也稱錨點操作,接下來通過案來演示name屬性的作用,如例2-18所示。

          1 <!doctype html>

          2 <html>

          3 <head>

          4 <meta charset="utf-8">

          5 <title>鏈接標簽</title>

          6 </head>

          7 <body>

          8 <a href="#h5Pos">HTML5</a>

          9 <a href="#phpPos">PHP</a>

          10 <p>點擊上面的鏈接可跳轉(zhuǎn)到指定的位置</p>

          11 <a name="h5Pos">HTML5的內(nèi)容</a>

          12 <p>HTML5</p>

          13 <p>HTML5</p>

          14 <p>HTML5</p>

          15 <p>HTML5</p>

          16 <p>HTML5</p>

          17 <a name="phpPos">PHP的內(nèi)容</a>

          18 <p>PHP</p>

          19 <p>PHP</p>

          20 <p>PHP</p>

          21 <p>PHP</p>

          22 <p>PHP</p>

          23 </body>

          24 </html>

          運行結(jié)果如圖2.26所示。

          3.target屬性

          target屬性用于指定鏈接頁面的打開方式,其取值如表2.7所示

          目前常用的取值有_self和_blank兩種,接下來通過案例來演示這兩種取值的功能,如例2-19所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>鏈接標簽</title>
           6 </head>
           7 <body>
           8 <a href="2-3.html" target="_self">當(dāng)前窗口打開鏈接</a>
           9 <a href="2-3.html" target="_blank">新窗口打開鏈接</a>
           10 </body>
           11 </html>
          

          運行結(jié)果如圖2.27所示。

          圖2.27 target屬性的顯示效果

          一般情況下,target只用到“_self”和“_blank”這兩個屬性值,其他兩個不需要深究,因為幾乎用不到。

          2.3.9 列表標簽

          列表是網(wǎng)頁中一種常用的數(shù)據(jù)排列方式,在網(wǎng)頁中到處都可以看到列表的身影,如圖2.28、圖2.29,都是網(wǎng)頁中常見的列表。

          HTML中列表分為有序列表、無序列表和定義列表三種,下面將分別介紹這三種列表。

          1. 有序列表

          在HTML中用<ol>標簽表示有序列表,列表項目用<li>標簽表示,列表項目有先后順序之分,因此稱為有序列表。接下來通過案例來了解有序列表,如例2-20所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>鏈接標簽</title>
           6 </head>
           7 <body>
           8 <ol>
           9 <li>HTML</li>
           10 <li>CSS</li>
           11 <li>JavaScript</li>
           12 <li>PHP</li>
           13 <li>JAVA</li>
           14 </ol>
           15 </body></html>
          

          運行結(jié)果如題2.30所示。

          圖2.30 有序列表展示效果

          圖2.31中可以看到前面的阿拉伯?dāng)?shù)字是默認效果,可以通過有序列表的type屬性來設(shè)置不同的顯示效果,其取值如表2.8所示。

          接下來通過案例來演示type屬性的用法,如例2-21所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>列表標簽</title>
           6 </head>
           7 <body>
           8 <ol type="a">
           9 <li>HTML</li>
           10 <li>CSS</li>
           11 <li>JavaScript</li>
           12 <li>PHP</li>
           13 <li>Java</li>
           14 </ol>
           15 </body>
           16 </html>
          

          運行結(jié)果如圖2.31所示。

          圖2.31 有序列表展示效果

          在有序列表中,除了type屬性之外,還可以為<ol>定義start屬性用于規(guī)定項目符號的起始值,為<li>定義value屬性用來規(guī)定項目符號的數(shù)字。

          以上的效果都是HTML自帶效果,如果效果上有更多的需求,可以配合CSS來完成,例如圖2.32的效果,讀者可以在學(xué)習(xí)完CSS時再來實現(xiàn)。

          圖2.32 CSS美化有序列表

          2. 無序列表

          在HTML中用<ul>標簽表示無序列表,列表項目用<li>標簽表示,列表項目沒有先后順序之分,因此稱為無序列表。接下來通過案例來演示無序列表,如例2-22所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset=”utf-8”>
           5 <title>列表標簽</title>
           6 </head>
           7 <body>
           8 <ul>
           9 <li>HTML</li>
           10 <li>CSS</li>
           11 <li>JavaScript</li>
           12 <li>PHP</li>
           13 <li>JAVA</li>
           14 </ul>
           15 </body>
           16 </html>
          

          運行結(jié)果如圖2.33所示。

          圖2.33 無序列表展示效果

          跟有序列表類似,讀者可以看到默認情況下無序列表前面會有一個黑色的小圓點,同樣可以通過type屬性修改其顯示效果,type屬性取值如表2.9。

          接下來通過案例來演示無序列表type屬性取值,如例2-23所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset=”utf-8”>
           5 <title>列表標簽</title>
           6 </head>
           7 <body>
           8 <ul type=”circle”>
           9 <li>HTML</li>
           10 <li>CSS</li>
           11 <li>JavaScript</li>
           12 <li>PHP</li>
           13 <li>JAVA</li>
           14 </ul>
           15 </body>
           16 </html>
          

          運行結(jié)果如圖2.34所示。

          圖2.34 無序列表展示效果

          <li></li>之間相當(dāng)于一個容器,可以容納所有的元素。但是<ul></ul>中只能嵌套<li></li>,不允許直接在<ul></ul>標記中輸入文字。

          3. 定義列表

          定義列表通常用于對專業(yè)術(shù)語或名詞進行解釋和描述,與有序列表和無序列表不同,定義列表項目前沒有任何項目符號。其語法如下。

          	<dl>
          	<dt>定義名詞</dt>
          	<dd>名詞解釋和描述</dd>
          	……
          	</dl>
          

          上面的語法中,<dl></dl>標簽用于定義列表,<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中,其中<dt></dt>標簽用于定義專業(yè)術(shù)語或名詞,<dd></dd>標簽用于對名詞進行解釋和描述。一對<dt></dt>可以對應(yīng)多對<dd></dd>,即一個名詞可以有多個解釋和描述。接下來通過案例來演示定義列表,如例2-24所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>列表標簽</title>
           6 </head>
           7 <body>
           8 <dl>
           9 	 <dt>HTML</dt>
           10 <dd>超文本標記語言</dd>
           11 <dt>CSS</dt>
           12 <dd>層疊樣式表</dd>
           13 <dt>JavaScript</dt>
           14 <dd>網(wǎng)頁腳本語言</dd>
           15 </dl>
           16 </body>
           17 </html>
          

          運行結(jié)果如圖2.35所示。

          圖2.35 定義列表展示效果

          定義列表在實際開發(fā)中不常用,大多數(shù)情況還是使用有序列表和無序列表,后面章節(jié)中還會詳細講解HTML標簽使用規(guī)范。

          2.3.10 <div>與<span>

          div全稱為division,“分割、分區(qū)”的意思,<div>標簽用來劃分一個區(qū)域,相當(dāng)于一塊區(qū)域容器,可以容納段落、標題、表格、圖像等各種網(wǎng)頁元素。即HTML中大多數(shù)的標簽都可以嵌套在<div>標簽中,<div>中還可以嵌套多層<div>,用來將網(wǎng)頁分割成獨立的、不同的部分,來實現(xiàn)網(wǎng)頁的規(guī)劃和布局。如圖2.36為阿里汽車和潮電影網(wǎng)站的布局。都是使用<div>標簽來實現(xiàn)的。

          圖2.36 淘寶網(wǎng)區(qū)塊展示效果

          接下來通過案例來簡單演示<div>標簽的使用,如例2-25所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>div/span</title>
           6 </head>
           7 <body>
           8 <div>區(qū)域1
           9 <p>這是一個段落</p>
           10 </div>
           11 <div>區(qū)域2
           12 <h6>這是一個段落</h6>
           13 </div>
           14 <div>區(qū)域3
           15 <hr align="left" width="50" color="#00FF66">
           16 </div>
           17 </body>
           18 </html>
          

          運行結(jié)果如圖2.37所示。

          圖2.37 div標簽展示效果

          <span>標簽是用來修飾文字的,也叫做內(nèi)聯(lián)標簽 ,如圖2.38。

          圖2.38 千鋒教育文字修飾效果

          接下來通過案例來演示<span>標簽,如例2-26所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>div/span</title>
           6 </head>
           7 <body>
           8 <span>文字修飾1</span>
           9 <span>文字修飾2</span>
           10 <span>文字修飾3</span>
           11 </body>
           12 </html>
          

          運行結(jié)果如圖2.39所示。

          圖2.39 span標簽展示效果

          <div>標簽和<span>標簽,多數(shù)情況下需要配合CSS樣式,在后續(xù)的章節(jié)中,再詳細的講解<div>標簽和<span>標簽的用法。

          2.4 本章小結(jié)

          通過本章的學(xué)習(xí),首先介紹HTML語法的發(fā)展歷史和HTML語義化的含義。然后對HTML常用標簽進行了講解,如標題、段落、列表等。通過本章的學(xué)習(xí),能掌握HTML常用標簽,能初步編寫基本的HTML網(wǎng)頁。

          2.5 習(xí)題

          1. 填空題

          (1) 網(wǎng)頁加載時常用圖片的格式為 、 、

          (2) 圖像標簽的屬性src用于指定圖像 的屬性。

          (3) 文件的路徑可以分為 兩種。

          (4) <strong>標簽強調(diào)文本 。

          (5) 是為了實現(xiàn)HMTL向XML過渡,讓作者按照統(tǒng)一的風(fēng)格來編寫標簽。

          2.選擇題

          (1) 在一個網(wǎng)頁中,只能出現(xiàn)一次的標題標簽是( )。

          A.<h1> B.<h2>

          C.<h3> D.<h4>

          (2) a標簽的target屬性中哪一個值是在一個全新的空白窗口中打開鏈接( )。

          A._self B._blank

          C._top D._parent

          (3) 定義列表不包括下面哪個標簽( )。

          A.<dl> B.<dt>

          C.<dd> D.<ol>

          (4) 強調(diào)字體是斜體的標簽是( )。

          A.<sup> B.<del>

          C.<em> D.<strong>

          (5) 設(shè)置水平線對齊方式的屬性是( )。

          A.size B.a(chǎn)lign

          C.width D.color

          3.思考題

          (1) 請簡述什么是HTML語義化?

          (2) 請簡述有序列表與無序列表之間的區(qū)別?

          內(nèi)容來源書籍:《HTML5從入門到精通》,一本W(wǎng)eb前端實用性綜合技術(shù)圖書。

          簡介:《HTML5從入門到精通》倡導(dǎo)“快樂學(xué)習(xí),實戰(zhàn)就業(yè)”的理念,作為初學(xué)者高品質(zhì)的入門教材之一,免費提供一站式教學(xué)服務(wù)包,附贈配套PPT、教學(xué)視頻、教學(xué)大綱、考試系統(tǒng)、測試題等資源。且書本內(nèi)容覆蓋全面、講解詳細,其中包括標簽語義化、標簽使用規(guī)范、選擇器類型、盒模型、標簽分類、樣式重置、CSS優(yōu)化、Photoshop切圖處理、整頁制作、CSS3新樣式、HTML5新功能等。與此同時,本教材通過總結(jié)、歸納HTML、CSS、CSS3動畫與3D及移動端布局與響應(yīng)式開發(fā)等核心知識點,并從項目開發(fā)的實際需求入手,將理論知識與實際應(yīng)用相結(jié)合,以此幫助初學(xué)者全面、系統(tǒng)、深入、透徹地理解HTML5的基礎(chǔ)知識和技術(shù),使他們快速地成長為初級程序員,并擁有一定的項目開發(fā)經(jīng)驗,從而在職場中擁有一個較高的起點。


          主站蜘蛛池模板: 精品视频一区二区观看| av无码精品一区二区三区四区| 久久精品视频一区| 农村乱人伦一区二区| 亚洲精品色播一区二区| 中文字幕一区二区视频| 亚洲一区在线免费观看| 日本v片免费一区二区三区 | 风间由美性色一区二区三区| 一区二区免费电影| 国产一区二区在线| 日本亚洲成高清一区二区三区| 国产精品一区二区久久乐下载| 日韩精品无码一区二区中文字幕| 国产在线一区二区在线视频| 色综合视频一区二区三区 | 国产丝袜视频一区二区三区| 亚洲日韩国产欧美一区二区三区 | 亚洲国产成人久久一区WWW | 国产午夜三级一区二区三| 日韩在线视频不卡一区二区三区 | 亚洲毛片不卡av在线播放一区 | 亚洲成AV人片一区二区| 夜色福利一区二区三区| 国产美女一区二区三区| 国产精品毛片a∨一区二区三区| 搡老熟女老女人一区二区| 亚洲AV无码一区二区二三区软件| 男人的天堂av亚洲一区2区| 内射白浆一区二区在线观看 | 福利片免费一区二区三区| 国产精品一区二区三区高清在线| 日韩精品国产一区| 亚洲色偷偷偷网站色偷一区| 国产日本一区二区三区| 国产免费一区二区视频| 亚洲国产精品一区| 一区二区不卡在线| 色一情一乱一区二区三区啪啪高| 国产一区二区三区免费看| 亚洲日韩一区二区一无码|