當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

网页编程技术二（块级元素和行内标签）

發布時間：2024/4/17 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了网页编程技术二（块级元素和行内标签）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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>,無序列表是將文字段落向內縮進，并在每個列表前面加上實心圓形、空心圓形以及方形等符號，已達到醒目的效果；無序列表沒有順序　　編號，而是采用符號的形式，所以又被稱為符號列表

　　1.8有序列表:<ol><li></li></ol>,有序列表將文字以特定的順序進行排列,每個列表之前都會向內縮進，并且它們之間以編號來標記，比如1、2、3、...
　　說明：
　　　　type用于設置編號樣式,可以取值：1、A、a、I、i;默認值type=1
　　　　start用于設置編號的起始值
　　　　reversed用于反向排序

　　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></head><body><h1>這是一個標題</h1><h2>這是一個標題</h2><h3>這是一個標題</h3><h4>這是一個標題</h4><h5>這是一個標題</h5><h6>這是一個標題</h6><span>我在水平線上面</span><hr /><span>我在水平線下面</span><p>我是一段文字</p><p>我是一段文字</p><p>你好嗎，我很好。</p><p>你好嗎,<br />我很好。</p><p>第一段參考文字 <blockquote cite="http://www.jredu100.com">引用的文字</blockquote>第二段參考文字</p><pre>需要按原格式顯示的文字</pre><pre>*************************</pre><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><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"> <li>第一項</li><li>第二項</li><li>第三項</li></ol><ol type="1" reversed="reversed"> <li>第一項</li><li>第二項</li><li>第三項</li></ol><dl><dt>這是定義列表的標題</dt><dd>描述第一項</dd><dd>描述第二項</dd><dd>描述第三項</dd></dl><div>這是一個div</div></body> </html>

2、行級標簽
　　與塊級元素不同，行級標簽在頁面中可以與其他元素在同行顯示，直到一行不能放下一個完整的元素，并且通常行級元素內不會包含其他元素
常見的行級元素有：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><img src="../src/img/app-l.png" alt="二維碼圖片" title="二維碼" /><a name="top">錨點</a><br /><a href="#top" target="_self">這是一個超鏈接</a><br /><a href="../index.html#weixin">跳轉到新頁面的指定位置</a><br /> <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></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></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>

轉載于:https://www.cnblogs.com/zkai-007/p/9893365.html

總結

以上是生活随笔為你收集整理的网页编程技术二（块级元素和行内标签）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Individual
下一篇： Identityserver4中Reso