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