文章目錄

• 1、什么是HTML
• 2、HTML 的基本模板
• 3、常用標簽
• • 3.1 塊級標簽代碼
  • 3.2 什么是描點
  • 3.3 列表標簽
  • • 3.3.1 無序列表
    • 3.3.2 有序列表
    • 3.3.3 定義列表
  • 3.4 表格標簽
  • • 3.4.1 表格標簽格式:
    • 3.4.2 表格標簽的屬性:
    • 3.4.3 表格的合并
  • 3.5 表單標簽
  • 3.5.1 表單標簽input的屬性
  • 3.5.2 label標簽
  • 3.5.3 datalist標簽
  • 3.6 表單非input標簽
  • • 3.6.1 select標簽
    • 3.6.2 textarea標簽
  • 3.7 單選框
  • 3.8 多選框
  • • 3.8.1 input 標簽
    • 3.8.2 submit 和reset
  • 3.9 提交服務器要注意幾點
• 4、其他基礎知識
• • 4.1 塊級元素
  • 4.2 行內（內聯）元素
  • 4.3 行內塊元素
  • 4.4 隱藏元素
  • 4.5 多媒體標簽
• 5、HTML書寫規范

1、什么是HTML

超文本標記語言，標準通用標記語言下的一個應用。是 網頁制作必備的編程語言
“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
超文本標記語言的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關于網頁的信息，“主體”部分提供網頁的具體內容。

超文本標記語言（HyperText Markup Language），簡稱 HTML

2、HTML 的基本模板

3、常用標簽

3.1 塊級標簽代碼

h1 ~ h6 的標題標簽

div 塊狀標簽, hr 分割線，br 換行

<div>hello html <hr> hello css <br> hello javascript </div>

3.2 什么是描點

要想通過a標簽跳轉到指定的位置, 那么必須告訴a標簽一個獨一無二的身份證號碼, 這樣a標簽才能在當前界面中找到需要跳轉到的目標位置

如果和HTML中的標簽綁定一個獨一無二的身份證號碼呢?

在HTML中, 每一個標簽都有一個名稱叫做id的屬性, 這個屬性就是用來給標簽指定一個獨一無二的身份證號碼的。

所以要想實現通過a標簽跳轉到指定的位置分為兩步

給目標位置的標簽添加一個id屬性, 然后指定一個獨一無二的值

告訴a標簽你需要跳轉到的目標標簽對應的獨一無二的身份證號碼是多少

格式:：

<a href="#center">跳轉到中部</a> <h2 id="center">我是中部</h2>

3.3 列表標簽

3.3.1 無序列表

無序列表格式:

<ul><li>需要顯示的條目內容</li> </ul>

有序列表(最少)(ordered list)

3.3.2 有序列表

有序列表格式:

<ol><li>需要顯示的條目內容</li> </ol>

3.3.3 定義列表

定義列表的格式

<dl><dt>是用來定義列表中的標題</dt><dd>含義就是用來定義標題對應的描述的</dd> </dl>

3.4 表格標簽

3.4.1 表格標簽格式:

<table border="1"><tr><td>1.1</td><td>1.2</td><td>1.3</td></tr><tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> </table>

3.4.2 表格標簽的屬性:

<!--編寫一個2行2列的表格--> <table border="1" width="500px" height="300px" align="right" cellspacing="12px" cellpadding="1"><tr valign="bottom"><td width="150px" height="50px">1.1</td><td valign="top">1.2</td></tr><tr align="center"><td align="right">2.1</td><td>2.2</td></tr> </table>

3.4.3 表格的合并

水平方向上的單元格合并可以給td標簽添加一個colspan屬性

例如:<td colspan="2"></td>

含義: 把當前單元格當做兩個單元格來看待

• 垂直方向上的單元格合并

可以給td標簽設置一個rowspan屬性, 來指定把某一個單元格當做多個單元格來看待(垂直方向)

例如:<td rowspan="2"></td>

<table bgcolor="black" width="500px" height="300px" align="center"><tr bgcolor="white"><td rowspan="2" colspan="2">></td><!--<td></td>--><td></td></tr><tr bgcolor="white"><!--<td></td>--> <td></td><td></td></tr><tr bgcolor="white"><td></td><td></td><td></td></tr> </table>

3.5 表單標簽

<form><!--明文輸入框-->賬號:<input type="text"><br><!--暗文輸入框-->密碼:<input type="password"><br><!--給輸入框設置默認值-->賬號:<input type="text" value="lnj"><br>密碼:<input type="password" value="123"><br> </form>

3.5.1 表單標簽input的屬性

<form><!--可以自動校驗輸入的內容是否符合郵箱的格式-->郵箱:<input type="email"><br><!--可以自動校驗輸入的內容是否是URL地址-->域名:<input type="url"><br><!--輸入框中只能輸入數字-->電話:<input type="number"><br><!--可以通過日歷來選擇時間-->時間:<input type="date"><br><!--可以通過取色板來選擇顏色-->顏色: <input type="color"><br><input type="submit"> </form>

3.5.2 label標簽

要想讓輸入框和文字綁定在一起, 那么我們可以使用Label標簽

1. 將文字利用label標簽包裹起來 2. 給輸入框添加一個id屬性 3. 在label標簽中通過for屬性和輸入框中的id進行綁定即可

<label for="account">賬號:</label><input type="text" id="account">

3.5.3 datalist標簽

作用: 給輸入框綁定待選項
1. 搞一個輸入框
2. 搞一個datalist列表
3. 給datalist列表標簽添加一個id
4. 給輸入框添加一個list屬性,將datalist的id對應的值賦值給list屬性即可
請輸入你的車型: <input type="text" list="cars"> <datalist id="cars"> <option>奔馳</option> <option>寶馬</option> <option>奧迪</option> <option>路虎</option> <option>賓利</option> </datalist>

3.6 表單非input標簽

3.6.1 select標簽

作用: 用于定義下拉列表

一級下拉列表 <select><option>北京</option><option>上海</option><option>廣州</option><option>廣西</option》<option selected="selected">武漢</option> <</select> 二級下拉列表 <select><optgroup label="北京"><option>朝陽區</option><option>昌平區</option><option>通州區</option></optgroup><optgroup label="廣州"><option>天河區</option><option>越秀區</option><option>黃浦區</option></optgroup> </select>

3.6.2 textarea標簽

作用: 定義一個多行輸入框
格式: 25行 一行5個 <p> 個人簡介: <textarea cols="25" rows="5"></textarea> </p>

3.7 單選框

input 標簽 radio 必須有 相同的name ，checked = checked 默認選上

<p>性別:<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女<input type="radio" name="gender" checked="checked" value="yao">保密 </p>

3.8 多選框

3.8.1 input 標簽

input 標簽 checkbox 必須要相同的name

<p>愛好:<input type="checkbox" name="hobby" value="basketball">籃球<input type="checkbox" name="hobby" value="football">足球<input type="checkbox" name="hobby" checked="checked" value="crazy">足浴</p>

3.8.2 submit 和reset

submit 和reset

<p><input type="submit" value="注冊"><input type="reset" value="清空"></p>

3.9 提交服務器要注意幾點

在單選框和多選框中,所有的項目的name必須一致，在表單標簽中,除了按鈕標簽以外的標簽,都可以通過value來指定需要提交到服務器的數據，也就是必須有name和value屬性 提交時url 會有 name的值 = value的值

其他input標簽 如text，password，必須要name ，提交時會name的值 = 填寫的值

4、其他基礎知識

4.1 塊級元素

div display:block;
可以包含任何塊和行內元素
獨占一行，支持設置寬高
如果沒有設置寬高，高度由內容撐開，寬度默認瀏覽器寬度
沒有內容，在網頁上肉眼看不到東西，但是審查元素，寬度是瀏覽器寬度，高度0

4.2 行內（內聯）元素

span display:inline;
可以和其他行內元素位于同一行
行內元素不要包塊級元素
不支持設置寬高
內容撐開寬高

4.3 行內塊元素

display:inline-block;
塊級元素可以橫排展示
行內元素可以設置寬高
元素既能設置寬高 也能排在一排

4.4 隱藏元素

display:none
包括他的子標簽，在頁面中不占位置，等同于消失了

4.5 多媒體標簽

• 什么是video標簽?
  作用: 播放視頻

  格式: <video src=""> </video>

  video標簽的屬性
  src: 用于告訴video標簽需要播放的視頻地址
  autoplay: 用于告訴video標簽是否需要自動播放視頻
  controls: 用于告訴video標簽是否需要顯示控制條
  poster: 用于告訴video標簽視頻沒有播放之前顯示的占位圖片
  loop: 一般用于做廣告視頻, 用于告訴video標簽視頻播放完畢之后是否需要循環播放
  preload: 預加載視頻, 但是需要注意preload和autoplay相沖, 如果設置了autoplay屬性, 那么preload屬性就會失效

  muted:靜音
  width/height: 和img標簽中的一模一樣-

• 什么是audio標簽?
  作用: 播放音頻

  格式: <audio src=""> </audio><audio><source src="" type=""> </audio>

5、HTML書寫規范

1.名字用小寫字母2.以英文開頭，可以包含英文字母，數字，_，-，不能使用中文3.駝峰命名className 第二個單詞首字母大寫4.id命名id只能有一個名字，而且在頁面中相同的名字只能出現一次，相當于身份證號碼一樣5.class命名class可以出現多次，而且相同的名字可以有多個，相當于人名一樣

總結

以上是生活随笔為你收集整理的一、前端必须掌握HTML的基础知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。