HTML的標簽分類
雙標簽：如<strong>標簽的內容</strong>
語法：<開始標簽> 標簽內容 </結束標簽>
<strong>我要變粗</strong> <head></head>......
單標簽：<br/>單標簽都是功能性的標簽，例如換行等功能里面不需要添加內容
語法：<標簽名 />
<br> <hr> ......
HTML中的標簽（熟練）
用<>包裹的英文單詞
h 系列的標簽 : 標題標簽
h1，h2，h3，h4，h5，h6
作用 : 給頁面上的文字加上標題的語意
代碼 : <h1>我就是h1標簽</h1>
效果 : h1，h2，h3，h4，h5，h6 將文字放大、加粗、并且逐漸變小（h1標簽是最大的）
特點 : 獨占一行
注意 : h1 標簽盡量少用，太多不利于SEO(搜索引擎優化) ， 一般h1 都是給文章的標題或者 logo使用，
p 標簽 : 段落標簽
作用: 給頁面上的一段文字加上段落的語意
代碼: <p>這是段落</p>
特點：頁面上的一個段落，單獨占一行，并且與上下內容之間存在距離，
hr 標簽：水平線標簽
作用: 在頁面上顯示一條橫線
代碼: <hr />
br 標簽：換行標簽
作用：強制換行（代碼中換行無效）
代碼：<br />
(4組)文本格式化標簽
作用:
- b: 加粗
- u: 下劃線
- i: 傾斜
- s: 洗掉線
建議不要使用, 因為這些標簽沒有語意
作用:
- strong: 加粗
- ins: 下劃線
- em: 傾斜
- del: 洗掉線
可以使用
語意: 起強調加強語氣作用
圖片標簽（重點）
img 標簽 ：圖片標簽
作用： 在頁面中顯示一張圖片
代碼： <img src="影像URL" />
特點： 就是顯示圖片
屬性：
- src：圖片顯示的路徑（必須）
- alt：如果圖片加載不出來，會顯示這個屬性中的文字
- title：介紹這張圖片
- width：圖片的寬度
- height：圖片的高度
圖片寬高只設一個, 另一個會等比例縮放
兩個都設可能會變形，所以一般我們只設一個，
路徑問題（難點）
當前檔案找目標檔案的程序
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1Teq5brB-1602818986804)(mdImg/%E5%9C%B0%E5%9B%BE.png"/>屬性
雖然我們可以使用table中的標簽來設定標簽的一些樣式，但是最好不要用，因為將來凡是與樣式相關內容都是由css來設定的
表格中的其他標簽
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mQSl4axA-1602818986815)(mdImg/%E5%90%88%E5%B9%B6.png"/>標簽
<th></th><caption></caption><thead></thead><tbody></tbody><tfoot></tfoot>注意：
<tr></tr>中只能嵌套<td></td>或者<th></th><td></td>標簽像一個容器，可以容納所有的元素
合并單元格 (左上原則)
上下合并------》跨行合并：屬性: rowspan=“合并的個數”------》留住最上，洗掉其他
左右合并------》跨列合并：屬性: colspan=“合并的個數”-------》留住最左，洗掉其他
1.確定合并哪幾個單元格
2.利用左上原則，確定保大保小
3.確定跨行（rowspan）還是跨列合并（colspan）
步驟：
- 通過左上原色，確定保留的單元格，給他添加屬性（rowspan/colspan），屬性值就是合并單元格的個數
- 找到要洗掉的單元格，洗掉掉就行了~
合并單元格練習:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-F7Ex4lKA-1602818986815)(mdImg/%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC%E7%BB%83%E4%B9%A0.PNG)]
**其實：**在早期的網站開發中，表格的使用非常的泛濫
表單系列標簽（重點）
表單的目的是收集用戶資訊
注冊頁面
有一種生物叫做后端
input (輸入框系列) 基本表單控制元件
先簡單的過一遍~
<input type="text">
單標簽、type：用于指定不同的控制元件型別
文本框 text 、 密碼框 password
昵稱：<input type="text" value="小姐姐" name="nicheng" maxlength="6">
密碼：<input type="password" name="password" maxlength="6">
注意：
-
value ：用戶輸入的值（提前在標簽設定好就是默認值）
-
name：告訴后端對應的值的含義，后端接收到的格式：
name的屬性值=value的屬性值拓展：頁面中的資訊需要傳給后臺服務器，但是直接發一個值（value）過去，后端不知道是什么，所以需要加上一個屬性name 代表資料的含義，
后端接收的資料結構為： name屬性值=value屬性值 這樣后端就知道傳過去的是什么（前后端互動在就業班會重點說明，基礎班不會使用）
-
maxlength：設定表單的最大輸入值
小bug ：如果是密碼輸入框，type="password" 的password不能拼錯且后面不能有空格，否則瀏覽器會認為type屬性設定無效，會以默認的text方式顯示，此時不會密文，相當于是文本框，
單選框 radio 、多選框 checkbox
單選框 radio
性別 : <input name="sex" type="radio" value="nan"> 男
<input name="sex" type="radio" value="nv" checked> 女
注意：
- 通過name進行分組（有相同name屬性值的單選框是一組的，一組中同時只能有一個選中），并且告訴后臺傳的是什么
- 在實際作業中，需要寫value值
- checked 屬性設定默認選中，屬性值省略，
多選框 checkbox
愛好：<input type="checkbox" name="hobby" value="code" checked>敲代碼
<input type="checkbox" name="hobby" value="nosleep" checked>熬夜
<input type="checkbox" name="hobby" value="game">玩游戲
- 通過name進行分組，并且告訴后臺傳的是什么
- 需要寫value值
- checked屬性設定默認選中，屬性值省略
檔案選擇框 file
<input type="file"> 單檔案上傳
<input type="file" multiple> 多檔案上傳
注意：
- multiple設定一次同時可以選中多個檔案（ctrl+選中/滑鼠框選）屬性值可以省略
- 現在html只負責結構，之后真正的上傳相關功能通過js來實作
表單按鈕
需要配合form表單一起使用
說白了就是用form標簽把表單標簽都包起來~
提交按鈕submit
將表單的內容提交給后端
<input type="submit">
重置按鈕reset
將表單的內容重置為默認值
<input type="reset">
普通按鈕button
之后配合js使用
<input type="button"> // 配合后面的js使用
圖片按鈕image
功能相當于提交按鈕，樣式為一張圖片
<input type="image" src="a.jpg">
select 下拉選單
出生年月：<select name="year">
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999" selected>1999</option>
</select>
注意：
- name屬性設定在select標簽上（告訴后臺傳過去的是什么）
- value屬性設定在option上，表示選中的值
- selected屬性設定默認選中，屬性值省略
textarea文本域
用于輸入大段文字
<textarea cols="規定文本區內的可見寬度" rows="規定文本區內的可見行數">
文本內容
</textarea>
**注意：**不能通過設定value使文本域有默認值，無效！
Form 表單域
form標簽用于定義表單域，將各種表單包裹起來，用于表單提交
<form action="url地址">
各種表單控制元件
</form>
**屬性：**action 用于指定處理請求的服務器URL地址（就業班的內容）
label 標簽（記憶）
示例 : 新浪網頁注冊
作用：讓文本和表單元素系結到一起（結拜兄弟）
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CBARlNXR-1602818986816)(F:/前端/筆記/mdImg/label.jpg)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LLjixZIi-1602818986816)(F:/前端/筆記/mdImg/貓哥.jpg)]
用法：
- 寫 for ，值為 id，規定 label 與哪個表單元素系結
性別 :
<input id="nan" name="sex" type="radio"> <label for="nan">男</label>
<input id="nv" name="sex" type="radio"> <label for="id名">女</label>
步驟：
1.在表單元素上添加id屬性
2.給label添加for屬性，for的屬性值與對應表單元素的id值相同即可
- 不寫 for，默認系結 label 內的表單控制元件
<label><input type="radio" name="sex"> 男</label>
步驟：用label把表單元素和文字包在一起即可
沒有語意的布局標簽（記憶）
div和span是沒有語意的標簽，一般用于頁面布局使用（專案中會經常使用到）
div：div盒子
<div>長亭外</div><div>古道邊</div>
特點：
- width由螢屏寬度決定（獨占一行）height自適應（由內容撐開）
- 默認占一整行（一行只能顯示一個）
頁面布局中用的最多~
span
<span>芳草碧連天</span>
特點：
- width、height由內容來決定（都由內容撐開）
- 一行里面可以顯示多個
除了沒有語意的標簽可以用于布局，還有一些有語意的標簽可以用于布局
HTML5新標簽與特性（了解）
就業班會有專門的H5C3的課，來學習html5的一些新標簽和屬性
HTML5新增語意標簽（記憶）
-
頭部：header標簽
header：定義網頁的頭部---》頭部語意 + div -
導航：nav標簽
nav：定義網頁的導航---》導航語意 + div -
底部：footer標簽
footer：定義網頁的底部---》底部語意 + div -
側邊欄：aside標簽
aside：定義網頁的側邊---》側邊語意 + div -
區塊：section標簽
section：定義網頁的區塊---》區塊語意 + div -
文章：article標簽
article：定義網頁的文章---》文章語意 + div
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-R7dXEVgc-1602818986817)(F:/前端/筆記/mdImg/h5新標簽.png)]
**注意：**html5標簽有兼容性問題（老瀏覽器沒效果），所以為了客戶群多，會少用，
其他表單新屬性(記憶)
| 用法 | 屬性 | 含義 |
|---|---|---|
<input type="text" placeholder="請輸入用戶名"> | placeholder | 提示用戶輸入對應的資訊 |
<input type="text" autofocus> | autofocus | 自動獲得焦點 |
<input type="file" multiple> | multiple | 多檔案上傳，可選多檔案 |
多媒體標簽—audio 音頻
在網頁中播放音頻（聲音）
屬性：
- controls 是否顯示播放控制元件
- autoplay 自動播放（有兼容性問題）
- loop 回圈播放（有兼容性問題）
兼容性處理：
<audio controls autoplay loop>
<source src="1.mp3">
您的版本過低,請升級高級版本 <a href="http://www.itcast.cn/">點擊下載</a>
</audio>
多媒體標簽—video 視頻
在網頁中播放視頻
屬性（和audio類似）：
- controls 是否顯示播放控制元件
- autoplay 自動播放（有兼容性問題）（muted）
- loop 回圈播放（有兼容性問題）
**區別：**可以設定寬高，并且顯示視頻
**注意：**寬度和高度只需要設定一個，另一個會根據等比例縮放，如果同時指定兩個，視頻的實際寬高會以小的為基準（類似圖片）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/181160.html
標籤：其他
上一篇：一個小白想建站，應該如何操作