網頁程式設計技術二（塊級元素和行內標籤）
阿新 • • 發佈：2018-11-04
1、塊級元素
顧明思義，塊級標籤在網頁中顯示為塊；塊級標籤一般獨佔一行，新的塊級標籤將從新的一行開始排列，它可以容納其他塊級元素和內聯元素。
常見的會計標籤：
1.1標題標籤：<h1></h1> ~ <h6></h6>，從1級到6級每級標題的字型依次遞減
1.2水平線標籤：<hr/>,新增水平分隔線，讓頁面更容易區分段落；該標籤是單個出現，不是成對出現；
1.3段落標籤：<p></p>,使用段落標籤區分段落，不同的段落之間會自動增加換行符，段落上下方各會有一個空行的空格
1.4換行標籤：<br/>,使用換行標籤可以控制段落中文字的換行顯示，一般瀏覽器會根據視窗的寬度自動將文字進行換行顯示
1.5引用標籤：<blockquote></blockquote>,用於表示引用文字，同時會將標籤內的文字進行縮排顯示，其cite屬性用於表明引用的來源。
1.6預格式標籤：<pre></pre>,將文字按照原始的排列方式進行顯示，例如繪製一個三角形
1.7無需列表標籤:<ul><li></li></ul>,無序列表是將文欄位落向內縮排，並在每個列表前面加上實心圓形、空心圓形以及方形等符號，已達到醒目的效果；無序列表沒有順序 編號，而是採用符號的形式，所以又被稱為符號列表
<ul type="disc"> <!--實心圓形--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ul> <ul type="circle"> <!--空心圓形--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ul> <ul type="square"> <!--方形--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ul>
1.8有序列表:<ol><li></li></ol>,有序列表將文字以特定的順序進行排列,每個列表之前都會向內縮排，並且它們之間以編號來標記，比如1、2、3、...
說明：
type用於設定編號樣式,可以取值：1、A、a、I、i;預設值type=1
start用於設定編號的起始值
reversed用於反向排序
<ol type="1"> <!--以數字進行排序--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <ol type="a"> <!--以小寫字母進行排序--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <ol type="A"> <!--以大寫字母進行排序--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <ol type="i"> <!--小寫羅馬數字--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <ol type="I"> <!--大寫羅馬數字--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <ol type="1" start="5"> <!--以數字進行排序，初始值為5--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <ol type="1" reversed="reversed"> <!--以數字進行反向排序--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol>
1.9定義列表標籤:<dl></dl>,適用於對名稱、概念或主題的定義，第一部分是名稱、概念或主題，並且通常只有一項，第二部分是相應的解釋和描述
<dl> <dt>這是定義列表的標題</dt> <dd>描述第一項</dd> <dd>描述第二項</dd> <dd>描述第三項</dd> </dl>
1.10分割槽標籤:<div></div>,定義文件中的分割槽節點，將文件分割為獨立的、不同的部分.可以用於組合其他H5標籤的容器,其為塊級元素瀏覽器會在其前後換行顯示,常見用途是文件佈局;可以取代使用的表格佈局的老方法。
全部程式碼介紹說明：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 1、塊級元素 顧明思義，塊級標籤在網頁中顯示為塊；塊級標籤一般獨佔一行，新的塊級標籤將從新的一行開始排列，它可以容納其他 塊級元素和內聯元素。 常見的會計標籤： --> </head> <body> <!-- 1.1標題標籤：<h1></h1> ~ <h6></h6>，從1級到6級每級標題的字型依次遞減 --> <h1>這是一個標題</h1> <h2>這是一個標題</h2> <h3>這是一個標題</h3> <h4>這是一個標題</h4> <h5>這是一個標題</h5> <h6>這是一個標題</h6> <!-- 1.2水平線標籤：<hr/>,新增水平分隔線，讓頁面更容易區分段落；該標籤是單個出現，不是成對出現； --> <span>我在水平線上面</span> <hr /> <span>我在水平線下面</span> <!-- ` 1.3段落標籤：<p></p>,使用段落標籤區分段落，不同的段落之間會自動增加換行符，段落上下方各會有一個空行的空格 --> <p>我是一段文字</p> <p>我是一段文字</p> <!-- 1.4換行標籤：<br/>,使用換行標籤可以控制段落中文字的換行顯示，一般瀏覽器會根據視窗的寬度自動將文字進行換行顯示 --> <p> 你好嗎，我很好。 </p> <p> 你好嗎,<br />我很好。 </p> <!-- 1.5引用標籤：<blockquote></blockquote>,用於表示引用文字，同時會將標籤內的文字進行縮排顯示，其cite屬性用於表明引用的來源。 --> <p> 第一段參考文字 <blockquote cite="http://www.jredu100.com">引用的文字</blockquote> 第二段參考文字 </p> <!-- 1.6預格式標籤：<pre></pre>,將文字按照原始的排列方式進行顯示，例如繪製一個三角形 --> <pre>需要按原格式顯示的文字</pre> <pre> * *** ***** ******* ********* </pre> <!-- 1.7無需列表標籤:<ul><li></li></ul> 無需列表是將文欄位落向內縮排，並在每個列表前面加上實心圓形、空心圓形以及方形等符號，已達到醒目的效果；無序列表沒有 順序編號，而是採用符號的形式，所以又被稱為符號列表 --> <ul type="disc"> <!--實心圓形--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ul> <ul type="circle"> <!--空心圓形--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ul> <ul type="square"> <!--方形--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ul> <!-- 1.8有序列表:<ol><li></li></ol>,有序列表將文字以特定的順序進行排列,每個列表之前都會向內縮排，並且它們之間以編號來標 記，比如1、2、3、... 說明： type用於設定編號樣式,可以取值：1、A、a、I、i;預設值type=1 start用於設定編號的起始值 reversed用於反向排序 --> <ol type="1"> <!--以數字進行排序--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <ol type="a"> <!--以小寫字母進行排序--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <ol type="A"> <!--以大寫字母進行排序--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <ol type="i"> <!--小寫羅馬數字--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <ol type="I"> <!--大寫羅馬數字--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <ol type="1" start="5"> <!--以數字進行排序，初始值為5--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <ol type="1" reversed="reversed"> <!--以數字進行反向排序--> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> <!-- 1.9定義列表標籤:<dl></dl>,適用於對名稱、概念或主題的定義，第一部分是名稱、概念或主題，並且通常只有一項，第二部分是相應 的解釋和描述 --> <dl> <dt>這是定義列表的標題</dt> <dd>描述第一項</dd> <dd>描述第二項</dd> <dd>描述第三項</dd> </dl> <!-- 1.10分割槽標籤:<div></div>,定義文件中的分割槽節點，將文件分割為獨立的、不同的部分.可以用於組合其他H5標籤的容器,其為塊級元素 瀏覽器會在其前後換行顯示,常見用途是文件佈局;可以取代使用的表格佈局的老方法 --> <div>這是一個div</div> </body> </html>
2、行級標籤
與塊級元素不同，行級標籤在頁面中可以與其他元素在同行顯示，直到一行不能放下一個完整的元素，並且通常行級元素內不會包含其他元素
常見的行級元素有：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 2、行級標籤 與塊級元素不同，行級標籤在頁面中可以與其他元素在同行顯示，直到一行不能放下一個完整的元素，並且通常行級元素內不會包含 其他元素 常見的行級元素有： --> </head> <body> <!-- 2.1圖片標籤：<img/>,網頁中除了文字，還有一種重要的傳遞資訊的方式就是圖片,適當顯示圖片可以增加網頁的展現了，吸引使用者注 意;一般選擇的圖片大小不會太大,圖片太大會影響載入效率,過小內容模糊則失去載入圖片的意義,常見的圖片格式有GIF、PNG、JPG 主要有五個屬性： 1、src標識引用圖片的路徑地址,可以分為相對路徑、絕度路徑和網路地址 相對路徑是以當前檔案為基準去尋找圖片,與當前檔案處於同一層的圖片可以直接寫圖片的名字,不在同一層的可以尋找資料夾進行 查詢,(如:../是回退上級目錄) 絕對路徑只在當前計算機有效,若將網站轉移至伺服器,則路徑會失效,絕對路徑開啟圖片使用的是filr協議，但是網頁中使用的是http 協議，因此會出現跨域問題，導致圖片無法載入(載入本地計算機某個磁碟資料夾下的圖片) 網路地址是使用網路上的圖片連結,一般不會使用網路地址;因為網路圖片可能會被刪除、替換或轉移導致圖片無法開啟 2、width和height,用於指定圖片的寬度和高度的;推薦使用CSS(style="width:100px;height:100px;")替代 3、title設定圖片標題,滑鼠滑過或懸浮時的提示資訊 4、alt設定當圖片無法載入時顯示的文字資訊 5、align設定圖片周圍的文字相對圖片的位置,通常屬性值有top、center、bottom、 --> <img src="../src/img/app-l.png" alt="二維碼圖片" title="二維碼" /> <!-- 2.2超連結標籤<a></a>,一個網站由多個頁面組成,不同頁面之間的跳轉則採用超連結,<a></a>標籤可以設定一個超連結，單擊超連結可以跳轉 至一個新的文件或者當前文件中的某個部分 超連結標籤屬性描述： 1、href用於描述連結地址,改地址可以是網路的也可以是本地檔案,當用#號時,表示一個空的連結 2、target用於指定通過超連結開啟的文件在何處顯示,常用的兩個屬性分別是_self(在與連結相同的文件中開啟被連結的文件)和_blank(在 新視窗中開啟連結),預設屬性值為_self; 錨點的用法如下: 本頁面錨點： 1、設定錨點 <a name="top"></a> 2、在超連結上使用#name跳轉至對應的錨點 頁面間錨鏈接 1、在即將跳轉頁面的指定位置設定錨點 2、在超連結的href屬性中使用"頁面地址.html#name" --> <a name="top">錨點</a> <br /> <a href="#top" target="_self">這是一個超連結</a> <br /> <a href="../index.html#weixin">跳轉到新頁面的指定位置</a> <br /> <!-- 2.3其他常用的行級元素,<span></span>(常被用於組合文件中的行內元素)、<em></em>、<strong></strong>、<i></i>、<b></b> --> <em>em標籤側重點強調,可以巢狀使用,嵌套個數越多,強調級別越高</em> <br /> <strong>strong標籤標示內容的重要性,巢狀遞增重要的級別</strong> <br /> <small>small標籤為旁註,可以用在免責宣告,使用條款和版權資訊等需要小字型的場景</small> <br /> <s>s標籤為有誤文字,文字上加刪除線的樣式</s> <br /> <b>b標籤粗體文字</b> <br /> <i>i標籤標示為斜體</i> <br /> <cite>cite標籤瀏覽器顯示為斜體,長用作書、畫作、作品的引用</cite> <br /> <q>q標籤標示短引用,顯示文字用""引起來</q> <br /> <code>code標籤只是表示計算機程式碼,但是瀏覽器只會顯示等寬字型,不會保留程式碼 格式,需要配合<pre></pre>標籤使用</code> </body> </html>
特殊說明：
塊級標籤和行級標籤的區別：
1、塊級標籤自動換行,前後隔一行;行級標籤不會自動換行,從左往右一次顯示
2、塊級標籤的寬度預設是100%;行級標籤的寬度由文字內容撐開
3、塊級標籤可以設定寬度、高度、邊距等屬性;行級標籤不能設定上述屬性.
3、H5新增標籤
H5新增的結構標籤,使用結構標籤可以提升網頁文件的可讀性,並且有利於搜尋引擎優化;常見成結構化語句有：<section></section>、<article></article>、<header></header>、<hgroup></hgroup>、<footer></footer>、<nav></nav>、<aside></aside>等,像新增的標籤還有<canvas></canvas>、<video></video>、<audio></audio>等。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .header,.hgroup,.nav,.aside,.section,.article,.footer{border: 1px solid red;text-align: center;} .clearfix:after {content: " ";display: block;clear: both;height: 0;} .clearfix {zoom: 1;} .left {float: left;} .right{float: right;} .header-height{height: 70px;} .header-hgroup{width: 29%;height: 68px;font-size: 24px;line-height: 68px;} .header-nav{width: 70%;line-height: 68px;} .left-nav{width: 20%;height: 400px;} .section-content{width: 79%;height: 98px;} .article-content{width: 79%;height: 298px;} .article-header{height: 98px;} .article-section{height: 148px;} .article-footer{height: 48px;} .footer-height{height: 50px;} </style> <!-- 3、H5新增標籤 H5新增的結構標籤,使用結構標籤可以提升網頁文件的可讀性,並且有利於搜尋引擎優化;常見成結構化語句有： <section></section>、<article></article>、<header></header>、<hgroup></hgroup>、<footer></footer>、<nav></nav>、<aside></aside>等, 像新增的標籤還有<canvas></canvas>、<video></video>、<audio></audio>等 <section>section表示頁面中的一個內容區塊,文件的主體部分,用於將網頁和文章劃分章節、區塊</section> <article>article表示頁面中的一塊與上下文不相干的內容,如部落格中的一篇文章</article> <aside>aside表示article元素內容之外的,與article元素內容相關的輔助資訊</aside> <header>header網頁和文章的頭部</header> <footer>footer網頁和文章的底部</footer> <nav>nav表示頁面中導航連結部分</nav> <hgroup>hgroup將整個頁面或頁面中一個內容區塊的標題進行組合</hgroup> 佈局效果參考： --> </head> <body> <div> <header class="header header-height clearfix"> <hgroup class="hgroup header-hgroup left"> hgroup </hgroup> <nav class="nav right header-nav"> nav </nav> </header> <div class="clearfix"> <aside class="aside left-nav left"> <nav>nav</nav> </aside> <section class="section right section-content">section</section> <article class="article right article-content"> <header class="header article-header">header</header> <section class="section article-section">section</section> <footer class="footer article-footer">footer</footer> </article> </div> <footer class="footer footer-height">footer</footer> </div> </body> </html>
4、章節案例實現：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 4、章節案例實現 --> </head> <body> <h1>促銷資訊</h1> <dl> <dt> <img src="./images/computer.png" width="260px" height="200px" title="computer" /> </dt> <dd>筆記本拍賣</dd> <dd>四核,4G記憶體,256G硬碟</dd> <dd>跳樓瘋搶價<span style="font-size: 36px; color: red;">100</span>元起</dd> </dl> 這檯筆記本<span style="color: red;">不錯</span>,快速<span style="font-size: 30px;color: green;">搶購</span>吧！ </body> </html>