【HTML5】HTML5基础语法汇总
生活随笔
收集整理的這篇文章主要介紹了
【HTML5】HTML5基础语法汇总
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
HTML
超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language，簡(jiǎn)稱HTML）是一種構(gòu)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。
那么“超文本”和“標(biāo)記語(yǔ)言”是什么意思呢？
- 超文本：可以展示動(dòng)畫(huà)、圖片、音視頻等多媒體的內(nèi)容，還可以進(jìn)行文本之間的跳轉(zhuǎn)。
- 標(biāo)記語(yǔ)言：HTML全部是由標(biāo)記標(biāo)簽組成的。這些標(biāo)簽用來(lái)描述網(wǎng)頁(yè)的結(jié)構(gòu)特點(diǎn)。
HTML與CSS、JavaScript組合使用，可以用來(lái)完成一個(gè)網(wǎng)頁(yè)、網(wǎng)頁(yè)應(yīng)用程序、移動(dòng)應(yīng)用程序界面的開(kāi)發(fā)。
三者的協(xié)作關(guān)系和各自的職能是什么呢？
HTML是構(gòu)建一個(gè)網(wǎng)頁(yè)的基礎(chǔ)，CSS會(huì)讓網(wǎng)頁(yè)變得更好看，JavaScript會(huì)讓網(wǎng)頁(yè)實(shí)現(xiàn)更多的交互行為。
CSS和JavaScript可以嵌入在HTML合適的位置中。
因此，HTML是網(wǎng)頁(yè)開(kāi)發(fā)最基礎(chǔ)的知識(shí)了，它是構(gòu)建一個(gè)網(wǎng)頁(yè)的基礎(chǔ)，也是網(wǎng)頁(yè)的骨架。
基本開(kāi)發(fā)方式
選擇一款文本編輯器（甚至記事本都可以），編輯HTML代碼，保存為.html文件。
原本使用過(guò)Atom：
現(xiàn)在基本使用VSCode或者WebStorm：
可以借助文本編輯器運(yùn)行，也可以在瀏覽器中找到文件運(yùn)行。
HTML最基本的樣例
<!DOCTYPE HTML> <html> <head><meta charset="utf-8"/><title>HelloWorld</title> </head> <body><h1>HelloWorld</h1> </body> </html>HelloWorld的運(yùn)行結(jié)果：
上面這段代碼是非常簡(jiǎn)單的，運(yùn)行結(jié)果：
HTML語(yǔ)法
HTML骨架標(biāo)簽
- <!DOCTYPE HTML>：告訴瀏覽器我們的HTML版本是HTML5，然后瀏覽器就按照HTML5的規(guī)則進(jìn)行解析。
- <html> </html>：HTML標(biāo)簽中的根結(jié)點(diǎn)標(biāo)簽。
- <head> </head>：HTML標(biāo)簽中的頭標(biāo)簽，是對(duì)頁(yè)面進(jìn)行的一系列配置。比如使用的編碼格式、網(wǎng)頁(yè)的標(biāo)題，等等。這里面編輯的內(nèi)容都不會(huì)展示到網(wǎng)頁(yè)的內(nèi)容區(qū)域。
- <body> </body>：HTML標(biāo)簽中的內(nèi)容標(biāo)簽，網(wǎng)頁(yè)上展示的內(nèi)容都是由body標(biāo)簽完成的。
上面的HTML標(biāo)簽里經(jīng)常有這些標(biāo)簽
- <meta>：提供對(duì)界面進(jìn)行配置的一些元素的信息，位于head標(biāo)簽里。
- <meta charset="utf-8">：表示使用UTF-8的編碼格式。如果沒(méi)有特殊要求都使用這個(gè)。
- <title> </title>：整個(gè)文檔的標(biāo)題標(biāo)簽，代表網(wǎng)頁(yè)標(biāo)題要展示的內(nèi)容。
HTML標(biāo)題標(biāo)簽
- <h1> </h1>：文檔標(biāo)題標(biāo)簽，大小最大，往下依次遞減。
- <h2> </h2>：……
- <h3> </h3>：……
- <h4> </h4>：……
- <h5> </h5>：……
- <h6> </h6>：文檔標(biāo)題標(biāo)簽，大小最小，往上依次遞增。
HTML段落標(biāo)簽
- <p> </p>：二者之間添加段落內(nèi)容即可。
HTML換行標(biāo)簽和分割線標(biāo)簽
- <br/>：換行標(biāo)簽。
- <hr/>：分割線標(biāo)簽。
HTML格式化標(biāo)簽
- <b>：字體加粗。
- <strong>：字體加粗，加強(qiáng)語(yǔ)義。
- <i>：字體傾斜。
- <em>：字體傾斜，加強(qiáng)語(yǔ)義。
- <s>：刪除線。
- <del>：刪除線，加強(qiáng)語(yǔ)義。
- <u>：下劃線。
- <ins>：下劃線，加強(qiáng)語(yǔ)義。
- <q>：加雙引號(hào)。
- <sub>：下標(biāo)。
- <sup>：上標(biāo)。
HTML的div和span標(biāo)簽
- `<div>`：被div包裹住的內(nèi)容會(huì)以分塊的形式縱向排列在網(wǎng)頁(yè)上，可與CSS結(jié)合。 - `<span>`：對(duì)行內(nèi)元素進(jìn)行組合，橫向排列在網(wǎng)頁(yè)上，可與CSS結(jié)合。HTML圖片
- <img>：圖片標(biāo)簽。
- src：顯示圖片屬性。
- width：顯示圖片寬度的屬性。
- height：顯示圖片高度的屬性。
- alt：當(dāng)圖片無(wú)法顯示的時(shí)候，代替圖片的文字的屬性。
- title：鼠標(biāo)停留在圖片上時(shí)，顯示的文字的屬性。
注意路徑選擇：
- 絕對(duì)路徑：可以選擇PC或者服務(wù)器的一個(gè)文件或者一個(gè)網(wǎng)絡(luò)路徑（網(wǎng)路連接）。
- 相對(duì)路徑：
- 圖片和img.html在同一文件夾下：<img src="pic.jpg" />
- 圖片在img.html所在文件夾的父文件夾下：<img src="../pic.jpg" />
../可以多次使用：../../../pic.jpg - 圖片在img.html所在文件夾的子文件夾下：<img src="folder/pic.jpg" />
HTML列表
- <ul>：無(wú)序列表。
- <ol>：有序列表。
- <li>：有序、無(wú)序列表的項(xiàng)。
- <dl>：描述列表。
- <dt>：描述列表的項(xiàng)。
- <dd>：描述列表項(xiàng)的內(nèi)容。
可配置無(wú)序列表的標(biāo)識(shí)：
- disc：原點(diǎn)標(biāo)識(shí)（默認(rèn)效果）。
- circle：空心圓標(biāo)識(shí)。
- square：方塊標(biāo)識(shí)。
- none：不顯示標(biāo)識(shí)。
可配置有序列表的標(biāo)識(shí)：
- 1：按照阿拉伯?dāng)?shù)字排序（默認(rèn)）。
- A：按照大寫(xiě)字母排序。
- a：按照小寫(xiě)字母排序。
- I：按照大寫(xiě)羅馬字母排序。
- i：按照小寫(xiě)羅馬字母排序。
start屬性可以配置列表開(kāi)始的序號(hào)。
HTML表格
- <table>：定義一個(gè)表格。
- <tr>：定義一個(gè)行。
- <td>：定義表格的元素。
- <th>：定義表格的頭。
- <caption>：設(shè)置表格標(biāo)題。
屬性：
- width：表格寬度。
- height：表格高度。
- border：表格邊框。
- cellspacing：單元格和單元格之間的距離。
- cellpadding：單元格內(nèi)容和邊框之間的距離。
- align：表格在網(wǎng)頁(yè)中的位置。
注意：
- <table>、<tr>、<td>、<th>嵌套順序不能顛倒
- <caption>必須在<table>里使用
HTML超鏈接
- <a>：超鏈接標(biāo)簽。
- href：定義鏈接地址的屬性。
- title：鼠標(biāo)停留在超鏈接上，會(huì)顯示的文字。
- target：網(wǎng)頁(yè)打開(kāi)方式
- _blank：
- _self：
- 書(shū)簽定位：
- id="value"
- href="#value"
上面內(nèi)容整合起來(lái)的一個(gè)實(shí)例：
下面的代碼在“HTML訓(xùn)練”的基礎(chǔ)上改進(jìn)而來(lái)，代碼如下（原博客有原樣例圖）：
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html" charset="utf-8"/><title> 清華大學(xué) Tsinghua University </title></head><body><h2> 清華大學(xué) </h2><canvas id = "pic" width = "400" height = "400"style = "border:1px solid black"></canvas><script languagetype = "text/javascript">window.onload = function() {var picture_c = document.getElementById("pic");var ctx_picture = picture_c.getContext("2d");//頁(yè)面背景圖片var img = new Image();//隨便給一張測(cè)試圖片img.src = "file:///D:/HTML5/qinghua.png";img.onload = function() {var iw = img.width;var ih = img.height;//設(shè)置canvas的寬等于圖片寬，這樣移動(dòng)端（比例顯示)的圖片就能完全顯示picture_c.width = iw;picture_c.height = ih;//開(kāi)始繪制一個(gè)新的路徑ctx_picture.beginPath();//設(shè)置路徑起點(diǎn)坐標(biāo)ctx_picture.moveTo(0, 0);//繪制直線線段到坐標(biāo)點(diǎn)(60, 50)ctx_picture.lineTo(0, ih);ctx_picture.lineTo(iw, ih);ctx_picture.lineTo(iw, ih*0.1831775700934579);ctx_picture.lineTo(iw*0.8617594254937163, 0);//先關(guān)閉繪制路徑，注意，此時(shí)用直線連接當(dāng)前端點(diǎn)和起始端點(diǎn)ctx_picture.closePath();//剪切ctx_picture.clip();ctx_picture.drawImage(img, 0, 0, iw, ih, 0, 0, iw, ih);}}</script><!--使用q表示一段短的引用文本--><p>清華大學(xué)的校訓(xùn)是<q>自強(qiáng)不息 厚德載物</q>這也是所有清華學(xué)子的精神</p><div><!--使用blockquote表示一段唱的引用文本--><blockquote cite="清華大學(xué)校歌">西山蒼蒼，東海茫茫，吾校莊嚴(yán)，巍然中央，<br>東西文化，薈萃一堂，大同爰躋，祖國(guó)以光。<br>莘莘學(xué)子來(lái)遠(yuǎn)方，莘莘學(xué)子來(lái)遠(yuǎn)方，春風(fēng)化雨樂(lè)未央，行健不息須自強(qiáng)。<br>自強(qiáng)，自強(qiáng)，行健不息須自強(qiáng)！<br>自強(qiáng)，自強(qiáng)，行健不息須自強(qiáng)！<br><br>左圖右史，鄴架巍巍，致知窮理，學(xué)古探微，<br>新舊合冶，殊途同歸，肴核仁義，聞道日肥。<br>服膺守善心無(wú)違，服膺守善心無(wú)違，海能就下眾水歸，學(xué)問(wèn)篤實(shí)生光輝。<br>光輝，光輝，學(xué)問(wèn)篤實(shí)生光輝！<br>光輝，光輝，學(xué)問(wèn)篤實(shí)生光輝！<br><br>器識(shí)其先，文藝其從；立德立言，無(wú)問(wèn)西東。<br>孰介紹是，吾校之功，同仁一視，泱泱大風(fēng)。<br>水木清華眾秀鐘，水木清華眾秀鐘，萬(wàn)悃如一矢以忠，赫赫吾校名無(wú)穹。<br>無(wú)穹，無(wú)穹，赫赫吾校名無(wú)穹。<br>無(wú)穹，無(wú)穹，赫赫吾校名無(wú)穹。<br><br>這首校歌是我國(guó)優(yōu)秀傳統(tǒng)文化的結(jié)晶，可以表示中國(guó)文化之精神。而同時(shí)又能符合校訓(xùn)，達(dá)出清華教育的宗旨</div><p><cite>《清華大學(xué)校歌》</cite>為清華大學(xué)之校歌，由<b>汪鸞翔</b>先生作詞，<b>張慧珍</b>女士作曲，評(píng)審于<i>1923</i>年前后<br></p><!--使用abbr定義縮寫(xiě)-->清華大學(xué)的縮寫(xiě)是<abbr title="清華大學(xué)">THU</abbr><!--使用address定義地址-->清華大學(xué)的地址是<address>北京市海淀區(qū)清華園1號(hào)</address><!--使用dfn定義專(zhuān)業(yè)術(shù)語(yǔ)--><table border="1" width = "400", height = "400" style="wifth:400px"><caption><b>下面是今年理科最高分考生李華的成績(jī)單</b></caption><thead><tr><th> </th><th>學(xué)科</th><th>成績(jī)</th></thead><tfoot><tr><td colspan="3" style="text-align:right">總成績(jī)：730</td></tr></tfoot><tbody><tr><th rowspan="3">語(yǔ)數(shù)英</th><td style="text-align:center">語(yǔ)文</td><td style="text-align:center">140</td></tr><tr><td style="text-align:center">數(shù)學(xué)</td><td style="text-align:center">150</td></tr><tr><td style="text-align:center">英語(yǔ)</td><td style="text-align:center">150</td></tr></tbody><tbody><tr><th rowspan="4">理綜</th><td style="text-align:center">物理</td><td style="text-align:center">108</td></tr><tr><td style="text-align:center">化學(xué)</td><td style="text-align:center">96</td></tr><tr><td style="text-align:center">生物</td><td style="text-align:center">86</td></tr><tr><td colspan="2" style="text-align:center">理綜：290</td></tr></tbody></table><p>下面代碼定義了一個(gè)Java類(lèi)<br><code>public class Dalao {<br>public static void main(String[] args) {<br>System.out.println("\u5927\u4f6c\u000d\u000a");<br>}<br>}<br></code></p><!--pre元素包含的是“預(yù)格式化”文本--><pre>public class Dalao {public static void main(String[] args) {System.out.println("\u5927\u4f6c\u000d\u000a");}}</pre><p><dfn>Java</dfn>是一種廣為人知的編程語(yǔ)言。</p><p>可以輸入如下命令：<br><kbd>rm -rf / *</kbd><br>在Linux下體會(huì)“人生至樂(lè)”</p><!--使用var定義變量--><var>i</var>、<var>j</var>、<var>k</var>通常用于作為循環(huán)計(jì)數(shù)器變量。<br>而<var>a</var>、<var>b</var>、<var>c</var>之類(lèi)的變量命名<strong>缺乏實(shí)際含義</strong>，不推薦使用<br><!--使用del和ins表示修訂--><p>寫(xiě)代碼是一件令人<del>快樂(lè)</del><ins><b>頭禿</b></ins>的事情。<br>學(xué)編程就是一個(gè)逐漸努力，從入門(mén)到<del>精通</del><ins><b>放棄</b></ins>的過(guò)程。<br></p><p>QQ音樂(lè)更新了評(píng)論區(qū)規(guī)則。<br/>很多網(wǎng)友戲稱：早該如此。<br/>下面是官方推薦的一種評(píng)論方式：<br/></p><sample>特別喜歡《有一種悲傷》這首歌，然后自作主張給它寫(xiě)了后半段：<br/>我不喜歡闖蕩，找不到你方向，為了理想，我選擇，去流浪，我放棄了狂妄，卑微的很絕望，沒(méi)有念想，也就不會(huì)失望，有一種悲傷，是給你肩膀卻沒(méi)有身份停靠，是幫你解憂去獨(dú)自承受心亡，只剩奢望，有一種悲傷，是陪你瘋狂之后一個(gè)人在街上搖晃，暴雨傾狂，舉酒紀(jì)念，北方。<br/>——《有一種悲傷》A-Lin<br/></sample><p>沒(méi)有任何意義的灌水刷屏的純表情/純字符/純@/純標(biāo)點(diǎn)/純數(shù)字/字符畫(huà)類(lèi)的評(píng)論不被允許。<br/>例如：<br/></p><sample>aaaaaaa、88888、@#！！！、475#@81***<br/></sample><p>考研數(shù)一考什么？<br></p><!--定義無(wú)序列表--><ul><li style="list-style-type:disc">高等數(shù)學(xué)</li><li style="list-style-type:circle">線性代數(shù)</li><li style="list-style-type:square">概率論與數(shù)理統(tǒng)計(jì)</li><li style="list-style-type:none">沒(méi)了啊</li></ul><!--定義有序列表--><p>再來(lái)一遍——考研數(shù)一考什么？<br></p><ol><li>高等數(shù)學(xué)</li><li>線性代數(shù)</li><li>概率論與數(shù)理統(tǒng)計(jì)</li></ol><p>阿拉伯?dāng)?shù)字太丑，我想看羅馬數(shù)字，從IV開(kāi)始<br></p><ol type="I" start="4"><li>高等數(shù)學(xué)</li><li>線性代數(shù)</li><li>概率論與數(shù)理統(tǒng)計(jì)</li></ol><a href="https://www.tsinghua.edu.cn/publish/thu2018/index.html" title="帶你去清華官網(wǎng)玩玩" target="_blank"><img src="th.png" alt="點(diǎn)我點(diǎn)我"></a></body> </html>表單
表單在網(wǎng)頁(yè)中多用于輸入用戶名和密碼，以及填寫(xiě)個(gè)人信息等輸入操作。
- 插入標(biāo)簽
- <input type="text">：插入單行的文本信息。
- <input type="radio">：單選框。
- <input type="submit">：定義一個(gè)提交按鈕。
- 下拉標(biāo)簽
- <select>：下拉標(biāo)簽。
- <option>：下拉標(biāo)簽的項(xiàng)。
- size：同時(shí)展示多少個(gè)標(biāo)簽。
- <select>標(biāo)簽嵌套<option>標(biāo)簽
- <option>中selected屬性表示該條目是默認(rèn)選中狀態(tài)。
- 輸入多行信息
- <textarea>：下拉標(biāo)簽。
- rows：可以輸入的可見(jiàn)行數(shù)。
- cols：每一行可見(jiàn)的輸入長(zhǎng)度。
- 表單域
- <form>：用于收集用戶輸入內(nèi)容的表單信息。
- action：提交代碼服務(wù)器地址。
- method：提交GET、POST方法等。
樣例代碼：
<!DOCTYPE HTML> <html><head><meta charset="utf-8"><title>表單操作</title></head><body style="background-color:gainsboro"><form action="" method="GET"><table width="400" align="center"><caption>面試登記</caption><tr><td>姓名:<input type="text" name="姓名" value="請(qǐng)輸入姓名"></td></tr><tr><td>性別:<input type="radio" name="gender" value="男">男<input type="radio" name="gender" value="男">女</td></tr><tr><td><select name="language"><option value="Java">Java</option><option value="Python">Python</option><option value="C">C</option><option value="JavaScript">JavaScript</option><option value="Visual Basic.NET">Visual Basic.NET</option><option value="C++">C++</option><option value="Scala">Scala</option><option value="Ruby">Ruby</option><option value="C#">C#</option></select></td></tr><tr><td>自我介紹:<br/><textarea name="message" rows="10" cols="10">To introduce myself.</textarea></td></tr><tr><td><input type="submit" name="submit" value="提交"><input type="reset" value="重置"></td></tr></table></form></body> </html>運(yùn)行結(jié)果：
總結(jié)
以上是生活随笔為你收集整理的【HTML5】HTML5基础语法汇总的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【算法分析与设计】浅谈递归与非递归
- 下一篇： 前端常用库说明