网页编程技术二（块级元素和行内标签）
生活随笔
收集整理的這篇文章主要介紹了
网页编程技术二（块级元素和行内标签）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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用于反向排序
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=1start用于設置編號的起始值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、行級標簽
與塊級元素不同，行級標簽在頁面中可以與其他元素在同行顯示，直到一行不能放下一個完整的元素，并且通常行級元素內不會包含其他元素
常見的行級元素有：
?特殊說明：
塊級標簽和行級標簽的區別：
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>?
?
?
?
?
轉載于:https://www.cnblogs.com/zkai-007/p/9893365.html
總結
以上是生活随笔為你收集整理的网页编程技术二（块级元素和行内标签）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Individual
- 下一篇： Identityserver4中Reso