一、基礎篇
1. 基礎示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>檔案標題</title>
</head>
<body>
檔案內容......
</body>
</html>
2.基礎結構
- html檔案分為文本+標記，通過顯示標記語言對文本進行修飾，然后表達渲染后的文本內容
- 一個網頁由宣告+head+body三部分組成
- 宣告檔案使用HTML5語法
- head 部分在頁面中不顯示
- body 部分為顯示在頁面中的內容
二、常用標簽
1. 文本標簽
- <hn>...</hn> n為1-6的數字，標記為標題，加粗獨立行，
- <i>...</i> 斜體
- <em>...</em> 強調斜體
- <b>...</b> 加粗
- <strong>...</strong> 強調加粗，方便搜索引擎收錄
- <cite>...</cite> 作品標題（參考）
- <sub>...</sub> 下標
- <sup>...</sup> 上標
- <del>...</del> 洗掉線
2. 格式化標簽
- <br/> 換行
- <p>...</p> 換段
- <hr/> 水平分割線
- 串列
-
<ul>...</ul> 無序串列
-
<ol>...</ol> 有序串列，其中type的值：代表起始值，
-
<li>...</li> 串列項，在每一個串列中使用
-
<dl>...</dl> 自定義串列
-
<dt>...</dt> 自定義串列頭
-
<dd>...</dd> 自定義串列內容，會縮進
-
- <div>...</div> 常用于組合塊元素（高度為0，寬度填滿），通過CSS對這些元素進行格式化
- <span>...</span> 常用于包含的文本（沒有特殊效果），可以使用CSS對他進行格式化，或通過JavaScript對他進行操作
3. 圖片標簽
- /
在網頁中插入一張圖片
- 屬性：
- src：圖片參考地址，圖片名及url地址，（可以使用相對地址，或者網路地址）
- alt：圖片加載失敗時的提示資訊
- title：文字提示的屬性，（把滑鼠放在圖片上時提示的文字）
- width：圖片寬度
- height：圖片高度（通常高度和寬度只使用一個，否則容易失真）
- border：邊框線粗細（顏色與字體顏色相同，通常不用）
4. 超級鏈接標簽
- <a href="">...</a> 網頁中插入超級鏈接
- 屬性：
- href：必填項，指鏈接跳轉地址
- target：表示鏈接的打開方式
- _blank 新視窗
- _parent 父視窗
- _self 本視窗（默認）
- _top 頂級視窗
- framename 視窗名
- title：文字提示屬性（詳情）
- 錨點鏈接：
- <a id="a1"> 通過id來定義一個錨點，以前用name
- <a href="https://www.cnblogs.com/lixxxx/p/#a1">跳轉a1處<a> 也可以在#前加入其他頁面鏈接
5. 表格標簽
-
<table>...<\table> 表格標簽
-
屬性：
- border 表格線，0是沒有
- width 表格寬度
- cellspacing 單元格之間的距離，默認是2，0時沒有縫隙
- cellpadding 單元格的字于四邊保持的最小距離，默認是0
-
<capion>...</capion> 表格標題
-
<tr>...</tr> 行標簽
-
<th>...</th> 列頭標簽
-
<td>...</td> 列標簽
-
屬性：
- rowapan 跨行
- colspan 跨列
-
<thead>...</thead> 表頭
-
<tbody>...</tbody> 表體
-
<tfoot>...</tfoot> 表尾
6. 表單標簽**
- <form>...</form> 表單標簽
- 屬性：
- action 目標地址，就是當提交表單時，提交到的地址，
- method 發送方式，分為get（以明文的方式提交），post（以隱藏的方式提交）
- <input/> 表單項標簽，通過不同type創建不同表單項
- 屬性：
- type 表單項型別
- text 文本
- password 密碼
- radio 單選
- checkbox 復選
- submit 提交
- reset 重置
- button 按鈕，沒有效果，可以添加事件
- file 上傳檔案
- image 圖片
- email 郵箱
- number 下拉選擇數字
- url 網址
- date 日歷
- color 顏色
- name 變數名字，實作互相排斥需要相同的name
- value 默認值
- disabled 默認不能修改
- checked 默認選中，針對單選和多選使用
- min 最小值
- max 最大值
- maxlength 長度
- type 表單項型別
- <select> 文本選項
- </option>...<option> 每一項使用此標記，selected為默認選此項
- <datalist>...</datalist> 可選的下拉串列
- </option>...<option> 每一項使用此標記，selected為默認選此項
- <textarea>...</textarea> 多行文本輸入
- <button>...</botton> 標簽自定義按鈕
7. 行內框架標簽
- <iframe>...</iframe> 在網頁放另一個網頁
- 屬性：
- src：規定在iframe中顯示的url
- name：規定iframe的名稱
- height：高度
- width：寬度
- frameborder：是否顯示邊框
8. 多媒體標簽
- <audio>...<autio> 音頻標簽
- 屬性：
- src:音頻參考的地址
- controls，是否顯示控制
- <video>...<video> 視頻標簽
- 屬性：
- src:視頻參考的地址
- controls，是否顯示控制
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/427442.html
標籤：HTML5