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