前端02——HTML排版标签
生活随笔
收集整理的這篇文章主要介紹了
前端02——HTML排版标签
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本系列文章是是博主自己的學(xué)習(xí)前端筆記，所有筆記參照：Github。
排版標(biāo)簽包括：<h1> 、<p> 、<hr /> 、<br /> 、<div> 、<span> 、<center> 、<pre>。
標(biāo)題標(biāo)簽<h>
標(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 align="center">H1：千古壹號(hào)，永不止步</h1><h2 align="right">H3：千古壹號(hào)，永不止步</h2><h3 align="left">H3：千古壹號(hào)，永不止步</h3><h4>H4：千古壹號(hào)，永不止步</h4><h5>H5：千古壹號(hào)，永不止步</h5><h6>H6：千古壹號(hào)，永不止步</h6> </body> </html>
如圖，這里中文出現(xiàn)了亂碼，是因?yàn)閔tml文件的存儲(chǔ)編碼和顯示編碼不一致。可能是因?yàn)槲业膆tml文件是先新建一個(gè)txt文件再改為html文件，所以我手動(dòng)修改了html文件的編碼格式為utf-8，問題解決。
段落標(biāo)簽<p>
將HTML文檔分為若干段落。也具有align屬性，屬性值可以是：left、center、right，表示文字的對齊為居左、居中或居右。
HTML標(biāo)簽可以分為兩類：文本級(jí)標(biāo)簽和容器級(jí)標(biāo)簽。
文本級(jí)標(biāo)簽只可以放文字、圖片、表單元素；容器級(jí)標(biāo)簽可以放任意東西。
- 文本級(jí)標(biāo)簽：p、span、a、b、i、u、em。（a標(biāo)簽里不能放a和input）。
- 容器級(jí)標(biāo)簽：div、h系列、li、dt、dd。
<p>標(biāo)簽是一個(gè)文本級(jí)標(biāo)簽，不能嵌套h！
代碼及其示例：
<!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 align="center">H1：千古壹號(hào)，永不止步</h1><h2 align="right">H3：千古壹號(hào)，永不止步</h2><h3 align="left">H3：千古壹號(hào)，永不止步</h3><p>This is a paragraph</p><p align="center">This is another paragraph</p> </body> </html>水平線標(biāo)簽<hr>
一條水平線。包括的屬性有：
- align="屬性值"：left right center。意義同上。 size="2" ：設(shè)定線條粗細(xì)。以像素為單位，默認(rèn)為2。
- width="500"或width="70%"：設(shè)定線條長度?？梢允墙^對值（單位是像素）或相對值。如果設(shè)置為相對值的話，默認(rèn)為100%。
- color="#0000FF"：設(shè)置線條顏色。
- noshade：不要陰影，即設(shè)定線條為平面顯示。若沒有這個(gè)屬性則表明線條具陰影或立體。
代碼及其示例：
<!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 align="center">H1：千古壹號(hào)，永不止步</h1><h2 align="right">H3：千古壹號(hào)，永不止步</h2><h3 align="left">H3：千古壹號(hào)，永不止步</h3><p>This is a paragraph</p><hr align="center" size="15" width="500" color="#0110FF"></hr><p align="center">This is another paragraph</p> </body> </html>換行標(biāo)簽<br>
強(qiáng)制換行。
代碼及其示例：
<!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 align="center">H1：千古壹號(hào)，永不止步</h1><h2 align="right">H3：千古壹號(hào)，永不止步</h2><h3 align="left">H3：千古壹號(hào)，永不止步</h3><p>This is a paragraph</p><hr align="center" size="15" width="500" color="#0110FF"></hr><p align="center">This <br>is<br> another<br> paragraph</p> </body> </html><div>標(biāo)簽和<span>標(biāo)簽
- <div>標(biāo)簽：把標(biāo)簽里的內(nèi)容分為獨(dú)立的區(qū)塊，必須單獨(dú)占一行，即會(huì)換行。包括align屬性。容器級(jí)標(biāo)簽?！癲iv+css”即div標(biāo)簽負(fù)責(zé)布局、結(jié)構(gòu)、分塊，css負(fù)責(zé)樣式。
- <span>標(biāo)簽：與<div>作用一致，但是不換行。文本級(jí)標(biāo)簽。
代碼及其示例：
<!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 align="center">H1：千古壹號(hào)，永不止步</h1><h2 align="right">H3：千古壹號(hào)，永不止步</h2><h3 align="left">H3：千古壹號(hào)，永不止步</h3><p>This is a paragraph</p><hr align="center" size="15" width="500" color="#0110FF"></hr><p align="center">This <br>is<br> another<br> paragraph</p><div>div標(biāo)簽1</div><div>div標(biāo)簽2</div><span>span標(biāo)簽1</span><span>span標(biāo)簽2</span> </body> </html>內(nèi)容居中標(biāo)簽<center>
center標(biāo)簽里的內(nèi)容都會(huì)居中.
但是HTML5里面，center標(biāo)簽不建議使用，建議使用css布局來實(shí)現(xiàn)。
代碼及其示例：
<!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 align="center">H1：千古壹號(hào)，永不止步</h1><h2 align="right">H3：千古壹號(hào)，永不止步</h2><h3 align="left">H3：千古壹號(hào)，永不止步</h3><p>This is a paragraph</p><hr align="center" size="15" width="500" color="#0110FF"></hr><p align="center">This <br>is<br> another<br> paragraph</p><center><div>div標(biāo)簽1</div><div>div標(biāo)簽2</div><span>span標(biāo)簽1</span><span>span標(biāo)簽2</span> </center></body> </html>預(yù)定義（預(yù)格式化）標(biāo)簽<pre>
- 含義：將保留標(biāo)簽內(nèi)部所有的空白字符(空格、換行符)，原封不動(dòng)地輸出結(jié)果（告訴瀏覽器不要忽略空格和空行）。
- 說明：真正排網(wǎng)頁過程中，<pre>標(biāo)簽幾乎用不著。
代碼及其示例：
<!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 align="center">H1：千古壹號(hào)，永不止步</h1><h2 align="right">H3：千古壹號(hào)，永不止步</h2><h3 align="left">H3：千古壹號(hào)，永不止步</h3><p>This is a paragraph</p><hr align="center" size="15" width="500" color="#0110FF"></hr><p align="center">This <br>is<br> another<br> paragraph</p><center><div>div標(biāo)簽1</div><div>div標(biāo)簽2</div><span>span標(biāo)簽1</span><span>span標(biāo)簽2</span> </center><pre>隨便寫寫不知所云</pre></body> </html>HTML 注釋
<!-- 我是 html 注釋 -->總結(jié)
以上是生活随笔為你收集整理的前端02——HTML排版标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： H5 图片翻动效果
- 下一篇： 2017年html5行业报告,云适配发布