整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
讓后面的文字、圖片、表格等等，顯示在下一行
碼海無際<br>碼海無際在網頁中要把文字有條理地顯示出來，離不開段落標簽，就如同我們平常寫文章一樣，整個網頁也可以分為若干個段落，而段落的標簽就是
<p>碼海無際</p><p>碼海無際</p>在網頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結構清晰，層次分明。這些水平線可以通過插入圖片實現，也可以簡單地通過標簽來完成，hr 就是創建橫跨網頁水平線的標簽。
碼海無際<hr>碼海無際分區顯示標簽，也稱之為層標簽，常用來編排一大段的HTML段落，也可以用于格式化表，和 p 很相似，是塊狀元素，經常嵌套使用。
<div>碼海無際</div><div>碼海無際</div><div> <div>碼海無際</div> <div>碼海無際</div></div>用來組合文檔中的行內元素，沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。
<span>碼海無際</span><span>碼海無際</span>pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。
<pre> 碼海無際 碼海無際</pre>無序列表的各個列表項之間沒有順序級別之分，是并列的。
<ul> <li>碼海無際</li> <li>碼海無際</li> <li>碼海無際</li></ul>注意：
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。 2. <li>與</li>之間相當于一個容器，可以容納所有元素。 3. 無序列表會帶有自己樣式屬性，但是不推薦使用，一般會用CSS設置。有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義
1.格式：
<ol type="符號類型"> <li type="符號類型"></li> <li type="符號類型"></li></ol>2.有序列表的type屬性值:
3.有序列表的value屬性值:
4.列表可以進行嵌套
<ol> <li>碼海無際</li> <li>碼海無際</li> <li>碼海無際</li></ol><hr><ol type="A"> <li>碼海無際</li> <li>碼海無際</li> <li>碼海無際</li></ol><hr><ol> <li>碼海無際</li> <li type="A">碼海無際</li> <li>碼海無際</li></ol><hr><ol> <li>碼海無際</li> <li>碼海無際</li> <li value="6" type="A">碼海無際</li> <li>碼海無際</li> <li>碼海無際</li></ol><hr><ol> <li>碼海無際</li> <li>碼海無際</li> <li> <ol type="A"> <li>志存高遠</li> <li>志存高遠</li> </ol> </li> <li>碼海無際</li> <li>碼海無際</li></ol>對列表條目進行簡短的說明
<dl> <dt>軟件說明：</dt> <dd>這是軟件說明</dd> <dt>軟件界面：</dt> <dd>這是軟軟件界面</dd></dl>居中對齊
<center>碼海無際</center>TML是一種用來描述網頁的標記性語言。學習HTML可能并不難，主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據使用的情況，整理出平時常用的HTML標簽。
HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客
<!--<!DOCTYPE> 是HTML5聲明，<!DOCTYPE> 必須是 HTML 文檔的第一行，位于 <html> 標簽之前。<!DOCTYPE>是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。-->
<!DOCTYPE html>
<html>
<!-- head標簽是所有頭部元素的容器。head標簽內的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標簽都可以添加到 head 部分：title、base、link、meta、script 以及style。頭部的內容不會顯示在瀏覽器的。 -->
<head>
<!-- 設置字符集，如果字符集不對，可能導致亂碼。一般建議utf-8國際編碼 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相關標簽，title定義文檔的標題,百度建議一般不要超過32位,meta定義頁面關鍵詞和頁面的描述-->
<title>網頁標題</title>
<meta name="keywords" content="PHP程序員,技術博客,個人博客,雷雪松" />
<meta name="description" content="PHP程序員，雷雪松（Raykaeso）的博客是一個優秀的個人技術博客。PHP程序員雷雪松的博客記錄了Linux學習，PHP開發與編程，Web前端開發，MySQL學習和教程，NoSQL數據庫教程以及個人的人生經歷和觀點。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分，所有在瀏覽器上可見的內容必須寫在body標簽內部 -->
<body>
</body>
</html>
a、布局標簽
div標簽定義文檔中的分區或節（division/section），可以把文檔分割為獨立的、不同的部分，主要用于布局。
aside標簽的內容可用作文章的側欄，<span style="color: #ff0000;">html5新增標簽</span>。
header標簽定義頁面的頭部（介紹信息），<span style="color: #ff0000;">html5新增標簽</span>。
section標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分，<span style="color: #ff0000;">html5新增標簽</span>。
footer 標簽定義文檔或節的頁腳，通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等等，<span style="color: #ff0000;">html5新增標簽</span>。
article標簽規定文章獨立的其他內容，比如：標題、內容、評論，<span style="color: #ff0000;">html5新增標簽</span>。
b、文本標簽
h1-h6標簽可定義標題
p標簽定義段落
b/strong標簽加粗
em標簽來表示強調的文本，斜體
strong標簽表示重要文本
u標簽下劃線
s標簽刪除線
br標簽表示回車換行
hr標簽表示水平線
span標簽被用來組合文檔中的行內元素。
blockquote標簽表示塊引用
pre標簽可定義預格式化的文本，保持原有格式的一種標簽。
sub標簽下標，
sup>標簽上標
表示一個空格
©表示版權符
<表示<
>表示>
c、a標簽定義超鏈接，指定頁面間的跳轉。鏈接可以指向外部鏈接或者頁面內部id錨點，可以在當前頁面打開，新開窗口。
<a href="指向的鏈接地址或者網址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒體標簽
img標簽主要在網頁中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設置，否則圖像會變形。
<img src="圖片地址" alt="替換文本，圖片打不開的時候顯示" width="圖片寬度" height="高度" border="0" />
audio標簽定義聲音，比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>
video標簽定義視頻，比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>
e、序列化標簽
ul和li無序列表標簽
<ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
ol和li有序列表標簽，可以使用type屬性規定有序列表符號的類型。1 按數字有序排列，為默認值，（1、2、3、4）；a 按小寫字母有序排列，（a、b、c、d）；A 按字母大寫有序排列，（A、B、C、D）。i 按小寫羅馬字母有序，（i, ii, iii, iv）；I 按小寫羅馬字母有序，（I, II, III, IV）。
<ol>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ol>
dl標簽定義了定義列表（definition list），dl標簽用于結合 dt（定義列表中的項目）和 dd（描述列表中的項目）。
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
</dl>
f、表格標簽
table標簽和tr標簽，th標簽和td標簽，合并單元格。
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>標題</th>
<th>標題</th>
</tr>
<tr>
<!-- 合并橫向單元格 -->
<td colspan="2" nowrap="nowrap">&nbsp;</td>
</tr>
<tr>
<td></td>
<!-- 合并縱向單元格 -->
<td rowspan="2"> </td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>
g、表單標簽
form標簽定義提交方式、提交地址、表單字符集以及如何對其進行編碼，需要提交的表單一定要放在form標簽內。
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
input標簽用于搜集用戶信息
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
密碼，輸入的字符會被掩碼（顯示為星號或原點）
<input name="pwd" type="password" maxlength="5" size="100" value="" />
文件類型的表單，上傳文件時，form表單一定要設置為enctype="multipart/form-data"
<input type="file" name="file" />
隱藏表單
<input type="hidden" name="country" value="China" />
提交
<input type="submit" name="Submit" value="提交" disabled="disabled" />
重置
<input type="reset" name="Submit2" value="重置" />
radio單選
<input name="sex" type="radio" value="1" />男
<input name="sex" type="radio" value="2" checked="checked" />女
checkbox多選
<input name="skill" type="checkbox" value="1" checked="checked" />PHP
<input name="skill" type="checkbox" value="2" />前端
<input name="skill" type="checkbox" value="2" />數據庫
<span style="color: #ff0000;">注：checked="checked"可以簡寫成checked</span>
label標簽為input元素定義標注，如果您點擊label元素文本，就會觸發此input控件。
textarea標簽，設置文本區內的可見行數和寬度
<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>
button標簽定義一個按鈕
提交按鈕
<button type="submit" value="提交">提交</button>
重置按鈕
<button type="reset" value="重置">重置</button>
select標簽和option標簽下拉列表
單選菜單列表框
<select name="user">
<option value="1">ray</option>
<option value="2" selected="selected">raykaeso</option>
</select>
多選列表下拉框，shift加鼠標單擊，可以連續選擇多個選擇，CTRL+鼠標點擊，可以點擊多個。
<select name="user" size="10" multiple="multiple">
<option value="1">雷雪松</option>
<option value="2" selected="selected">ray</option>
<option value="3">raykaeso</option>
</select>
注:selected="selected"可簡寫成selected，表示選中
a、HTML標簽和屬性是不區分大小寫的，建議HTML標簽和屬性都小寫，屬性值必須用雙引號包圍。
b、HTML標簽都是以開始標簽起始，以結束標簽終止。大部分HTML標簽都是成對出現的，稱為雙標簽，比如：p標簽、div標簽，也有的HTML標簽在開始標簽中結束的標簽，稱為單標簽，比如：hr標簽、br標簽。大多數 HTML 元素可擁有屬性，文本內容都是寫在開始標簽與結束標簽之間。
c、HTML標簽之間盡量縮進與換行，每行代碼不要過長，方便閱讀和維護。
d、HTML標簽使用必須符合標簽嵌套規則。禁止a標簽嵌套a標簽，p標簽嵌套div標簽。
e、建議不使用HTML已經廢棄的或者不贊成使用的標簽，少使用table布局、iframe框架嵌套以及flash播放器。
來源：PHP程序員雷雪松的博客 -HTML基礎之HTML常用標簽（http://www.leixuesong.cn/2045）
本篇文章開始成哥將帶大家一起學習一下前端的基礎知識，我們先講解前端的基礎HTML與CSS，這個講完我們將講解VUE前端框架，最后我們再講講Ant Design的VUE前端框架，從而形成前端一個系列的教程，下面就開始我們今天的內容吧！
HTML的英文全稱是 Hyper Text Markup Language，即超文本標記語言。
HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創立的一種標記語言，它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺(如UNIX， Windows等)。
使用HTML語言，將所需要表達的信息按某種規則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件"翻譯"成可以識別的信息，即現在所見到的網頁。HTML 不需要編譯，可以直接由瀏覽器執行，非常方便開發時調試。
我們現在創建一個典型的HTML結構具體如下：
1. <!DOCTYPE html>
2. <html lang="ch">
3. <head>
4. <meta charset="UTF-8">
5. <title>HTML實例</title>
6. </head>
7. <body>
8. <h1>我是標題</h1>
9. <p>我是段落。</p>
10. </body>
11. </html> 如上頁面中各個標簽代表的意思如下：
1）<!DOCTYPE html>是文檔聲明頭，它告訴游覽器當前處理的內容是HTML頁面
2）html是 HTML 頁面的根元素，用于標識HTML內容的開始與結束
3） head是HTML頁面的頭，包含了文檔的一些屬性。其中meta是元數據這邊charset="UTF-8"標識當前頁面編碼格式為UTF-8，title為文檔的標題
4）body是HTML主體也是游覽器在顯示頁面時的內容。h1是body內容中定義的標題，p是body內容中定義的段落
我們現在通過游覽器打開編寫的HTML內容，具體內容如下
在HTML中的內容可以通過以下格式進行內容注釋具體如下：
（1）HTML標簽
HTML 標簽是 HTML 語言中最基本的單位，HTML 標簽是 HTML（標準通用標記語言下的一個應用）最重要的組成部分。HTML標簽具有如下特點：
1）標簽一般是成對出現的 如:<div></div>;也有空標簽 如:<br />
2）標簽由<>包括,分為開始標簽(開放標簽)和結束標簽(閉合標簽)
3）標簽不區分大小寫,根據W3C(萬維網聯盟)推薦,統一使用小寫字母
標簽的示列如下：
標簽按照<>的對數可以分為如下兩類分別為雙標簽與單標簽，下面我們具體來了解一下這兩類標簽。
1）雙標簽
雙標簽指由開始和結束兩個標記符組成的標記。其基本語法格式如下：
1. <標記名></標記名>
常見的雙標簽有如下幾種：
1. <html></html>
2. <head></head>
3. <title></title>
4. <body></body>
5. <h1></h1>
6. <p></p>
7.
8. <!-- 塊級元素 -->
9. <div></div>
10. <span></span>
11.
12. <!-- 超鏈接元素 -->
13. <a></a>
14.
15. <!-- 列表元素 -->
16. <ul></ul> 2）單標簽
單標簽是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下：
1. <標記名/>
常見的單標簽有如下幾種：
1. <!-- 換行標簽 -->
2. <br />
3.
4. <!-- 分隔線標簽 -->
5. <hr />
6.
7. <!-- 圖片標簽 -->
8. <img /> （2）HTML元素
HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼，如<p>段落</p>。元素可以進行嵌套具體如下：
1. <div>
2. <h1>我是標題</h1>
3.
4. <div>
5. <p>元素嵌套示列</p>
6. </div>
7.
8. </div> （3）HTML屬性
屬性為 HTML 元素提供附加信息，可分為全局屬性（即所有元素均可使用的屬性，如id,class等）和元素屬性（部分元素可使用的屬性，例如<a href="http://www.baidu.com">搜索</a>），屬性通常由屬性名="屬性值"構成,存在于開始標簽中，示列如下:
（4）HTML實體編碼
對于部分不易通過鍵盤輸入的或和HTML沖突的部分符合,引入對應的"實體編碼"，如< <> >空格 。
（5）HTML事件
通過某個動作,執行某個操作/JS腳本的能力。如點擊按鈕,改變顏色，事件可以分為多類比多鼠標點擊、鼠標聚焦等，下面我看看看一個事件編寫示列：
（1）h標簽
h 標簽有六種分別為h1、h2、h3、h4、h5、h6，這六個分別對應六種樣式的標題，我們現在來編寫這六種h標簽，演示代碼如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <h1>H1標題</h1>
9. <h2>H2標題</h2>
10. <h3>H3標題</h3>
11. <h4>H4標題</h4>
12. <h5>H5標題</h5>
13. <h6>H6標題</h6>
14. </body>
15. </html> 我們來運行該HTML文件，來看看這六種h標簽有什么樣式差異，從示列中可以發現h1標簽字體最大然后依次減小。
（2）p標簽
p 標簽是文本標簽，現在我們來編寫一段含有p標簽的html文本，然后運行了看看p標簽的樣式具體操作如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <h4>標題一</h4>
10. <p>我是段落1</p>
11.
12. <h4>標題二</h4>
13. <p>我是段落2</p>
14.
15. </body>
16. </html> （3）a標簽
a標簽是超鏈接標簽，點擊a標簽可以跳轉到其設置的網站，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <div>
9. <a href="http://www.baidu.com">點我跳轉到百度頁面</a>
10. </div>
11.
12. <div>
13. <a href="http://www.qq.com">點我跳轉到騰訊頁面</a>
14. </div>
15.
16. </body>
17. </html> （4）div標簽
div標簽是一個塊級元素，它可用于組合其他 HTML 元素的容器。可以把div看成一個盒子，我們可以為這個盒子設置各種各樣屬性（如高度、寬度、顏色等），下面我們編寫一個div標簽并設置其長為300px，寬度為200px，同時給其一個背景顏色，具體如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>
10.
11. </body>
12. </html> （5）列表標簽
列表作為網頁設計的重要內容之一，能夠用來制作導航欄和新聞列表等。HTML 列表分為：有序列表（ol），無序列表（ul）以及自定義列表（dl）
1）有序列表ul
有序列表的順序是有序的，默認情況下會以數字來排列，但也可以通過設置其type屬性以大寫字母、小寫字母、大寫羅馬數字、小寫羅馬數字來排列，我們現在來寫一個示列，具體如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <!-- 有序列表，以默認方式數字排列 -->
10. <p>有序列表默認方式數字排列</p>
11. <ol>
12. <li>列表1</li>
13. <li>列表2</li>
14. <li>列表3</li>
15. </ol>
16.
17. <!-- 有序列表，以大寫字母排列 -->
18. <p>有序列表大寫字母排列</p>
19. <ol type="A">
20. <li>列表1</li>
21. <li>列表2</li>
22. <li>列表3</li>
23. </ol>
24.
25. </body>
26. </html> 2）無序列表ol
無序列表的順序是無序的，不會按照某個值來排序，無序列表中每個列表前默認都有一個實心圓，也可以通過type屬性來設置成空心圓或者小方塊，無序列表示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>無序列表默認type樣式</p>
10. <ul>
11. <li>列表1</li>
12. <li>列表2</li>
13. <li>列表3</li>
14. </ul>
15.
16. <p>無序列表方塊樣式</p>
17. <ul type="square">
18. <li>列表1</li>
19. <li>列表2</li>
20. <li>列表3</li>
21. </ul>
22.
23. </body>
24. </html> 3）自定義列表dl
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始，其列表內容是以<dd> 開始，自定義列表前面沒有任何標識，其具體示例如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>自定義列表</p>
10. <dl>
11. <dt>東岳</dt>
12. <dd>泰山</dd>
13.
14. <dt>南岳</dt>
15. <dd>衡山</dd>
16.
17. <dt>西岳</dt>
18. <dd>華山</dd>
19.
20. <dt>北岳</dt>
21. <dd>恒山</dd>
22.
23. <dt>中岳</dt>
24. <dd>嵩山</dd>
25. </dl>
26.
27. </body>
28. </html> （6）其它標簽
1）換行標簽<br/>
在HTML中如果想給內容進行換行可以使用換行標簽，具體示列如下：
2）分割線標簽<hr/>
<hr/> 標簽用于在 HTML創建一條分割線，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>我是張三</p>
10. <!-- 分割線標簽 -->
11. <hr/>
12. <p>我是李四</p>
13. </body>
14. </html> 至此我們《HTML基礎教程上篇》就講完了，下篇內容主要講解HTML樣式、HTML表單、Tabel等，敬請期待。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！
-END-
@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。
文章推薦：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
