div 不受父级标签影响_前端H5开发中常用的标签
本文主要內(nèi)容
排版標(biāo)簽：
- <h1>
- <p>
- <hr />
- <br />
- <div>
- <span>
- <center>
- <pre>
下面來詳細(xì)介紹一下排版標(biāo)簽。
標(biāo)題標(biāo)簽
標(biāo)題使用<h1>至<h6>標(biāo)簽進(jìn)行定義。<h1>定義最大的標(biāo)題，<h6>定義最小的標(biāo)題。具有align屬性，屬性值可以是：left、center、right。
代碼舉例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><h1>H1：千古壹號，永不止步</h1><h2>H3：千古壹號，永不止步</h2><h3>H3：千古壹號，永不止步</h3><h4>H4：千古壹號，永不止步</h4><h5>H5：千古壹號，永不止步</h5><h6>H6：千古壹號，永不止步</h6> </body> </html>效果演示：
HTML 注釋
HTML 注釋的格式如下：
<!-- 我是 html 注釋 -->段落標(biāo)簽<p>
段落，是英語“paragraph“縮寫。
作用：可以把 HTML 文檔分割為若干段落。在網(wǎng)頁中如果要把文字有條理地顯示出來，離不開段落標(biāo)簽。就如同我們平常寫文章一樣，整個(gè)網(wǎng)頁也可以分為若干個(gè)段落。
代碼舉例：
<p>This is a paragraph</p> <p>This is another paragraph</p>屬性：
- align="屬性值"：對齊方式。屬性值包括left center right。
屬性舉例：
HTML標(biāo)簽是分等級的，HTML將所有的標(biāo)簽分為兩種：
- 文本級標(biāo)簽：p、span、a、b、i、u、em。文本級標(biāo)簽里只能放文字、圖片、表單元素。（a標(biāo)簽里不能放a和input）
- 容器級標(biāo)簽：div、h系列、li、dt、dd。容器級標(biāo)簽里可以放置任何東西。
從學(xué)習(xí)p的第一天開始，就要牢牢記住：p標(biāo)簽是一個(gè)文本級標(biāo)簽，p里面只能放文字、圖片、表單元素。其他的一律不能放。
錯(cuò)誤寫法：（嘗試把 h 放到 p 里）
<p>我是一個(gè)小段落<h1>我是一級標(biāo)題</h1></p>網(wǎng)頁效果如下：
上圖顯示，瀏覽器不允許你這么做，我們使用Chrome的F12審查元素發(fā)現(xiàn)，瀏覽器自己把p封閉掉了，不讓你去包裹h1。
PS：Chrome瀏覽器是HTML5支持度最好的瀏覽器。提供了非常好的開發(fā)工具，非常適合我們開發(fā)人員使用。審查元素功能的快捷鍵是F12。
水平線標(biāo)簽<hr />
horizontal 單詞的發(fā)音：[?h?r??z?ntl]。水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個(gè)部分。在網(wǎng)頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。
代碼舉例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><p>自古情深留不住</p><hr /><p>總是套路得人心</p> </body> </html>運(yùn)行效果：
屬性介紹：
- align="屬性值"：設(shè)定線條置放位置。屬性值可選擇：left right center。
- size="2"：設(shè)定線條粗細(xì)。以像素為單位，內(nèi)定為2。
- width="500"或width="70%"：設(shè)定線條長度。可以是絕對值（單位是像素）或相對值。如果設(shè)置為相對值的話，內(nèi)定為100%。
- color="#0000FF"：設(shè)置線條顏色。
- noshade：不要陰影，即設(shè)定線條為平面顯示。若沒有這個(gè)屬性則表明線條具陰影或立體。
屬性效果演示：
換行標(biāo)簽<br />
如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽。
This <br/> is a para<br/>graph with line breaks效果如下：
<div>和<span>標(biāo)簽
div和span是非常重要的標(biāo)簽，div的語義是division“分割”； span的語義就是span“范圍、跨度”。想必你應(yīng)該聽說過“div + css”布局。
div和span的介紹
- div標(biāo)簽：可以把標(biāo)簽中的內(nèi)容分割為獨(dú)立的區(qū)塊。必須單獨(dú)占據(jù)一行。
- span標(biāo)簽：和div的作用一致，但不換行。
代碼舉例：
div標(biāo)簽的屬性：
- align="屬性值"：設(shè)置塊兒的位置。屬性值可選擇：left、right、 center。
div和span的區(qū)別
<span>和<div>唯一的區(qū)別在于：<span>是不換行的，而<div>是換行的。
如果單獨(dú)在網(wǎng)頁中插入這兩個(gè)元素，不會對頁面產(chǎn)生任何的影響。這兩個(gè)元素是專門為定義CSS樣式而生的。或者說，DIV+CSS來實(shí)現(xiàn)各種樣式。
div在瀏覽器中，默認(rèn)是不會增加任何的效果的，但是語義變了，div中的所有元素是一個(gè)小區(qū)域。 div標(biāo)簽是一個(gè)容器級標(biāo)簽，里面什么都能放，甚至可以放div自己。
span也是表達(dá)“小區(qū)域、小跨度”的標(biāo)簽，但只是一個(gè)文本級的標(biāo)簽。 就是說，span里面只能放置文字、圖片、表單元素。 span里面不能放p、h、ul、dl、ol、div。
span舉例：
<p>簡介簡介簡介簡介簡介簡介簡介簡介<span><a href="">詳細(xì)信息</a><a href="">購買</a></span> </p>div舉例：
<div class="header"><div class="logo"></div><div class="nav"></div> </div> <div class="content"><div class="guanggao"></div><div class="dongxi"></div> </div> <div class="footer"></div>我們親切地稱這種模式叫做“div+css”：div標(biāo)簽負(fù)責(zé)布局、結(jié)構(gòu)、分塊，css負(fù)責(zé)樣式。
內(nèi)容居中標(biāo)簽 <center>
此時(shí)center代表是一個(gè)標(biāo)簽，而不是一個(gè)屬性值了。只要是在這個(gè)標(biāo)簽里面的內(nèi)容，都會居于瀏覽器的中間。 效果演示：
到了HTML5里面，center標(biāo)簽不建議使用，建議使用css布局來實(shí)現(xiàn)。
預(yù)定義（預(yù)格式化）標(biāo)簽<pre>
含義：將保留標(biāo)簽內(nèi)部所有的空白字符(空格、換行符)，原封不動地輸出結(jié)果（告訴瀏覽器不要忽略空格和空行）。
說明：真正排網(wǎng)頁過程中，<pre>標(biāo)簽幾乎用不著。 效果演示：
總結(jié)
以上是生活随笔為你收集整理的div 不受父级标签影响_前端H5开发中常用的标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 剪切粘贴时总是上次的内容_Quicker
- 下一篇： 在div中显示html_HTML基础知识