HTML學習筆記

時間 2020-01-01

標籤 html 學習筆記欄目 HTML 简体版

原文原文鏈接

HTML學習筆記

1、HTML基本結構

1.文檔類型聲明

<!DOCTYPE html>html

做用：告訴瀏覽器按當前標準解析代碼web
HTML5 不區分大小寫，雙標記結束標籤能夠省略（不推薦）瀏覽器
HTML4.01 嚴格（strict）過渡（transitional）框架（frameset）安全
XHTML 嚴格的HTML，區分大小寫，雙標記結束標籤必須寫服務器
doctype不是標籤框架
DTD 等同於文檔類型聲明 DOCTYPEide

2.head

做用：oop
- 標明做者信息、關鍵字、描述post
- 設置字符集、引入外部文件學習
- 標題（只有標題能被用戶看到）

3.body

做用： body裏邊的全部信息都是展現給用戶的此區域內展現HTML的全部內容

2、經常使用標籤

1.標題標籤

<hn></hn>

做用: 設置標題
說明：h1~h6，h1最大，h6最小，默認加粗居左塊級元素
屬性：
- align設置內容水平對齊方式
  - left （左對齊、默認值）
  - center （居中對齊）
  - right (右對齊)

2.圖片

<img/>

做用：引入圖片
說明：src屬性必須得有，行內元素
屬性：
- src：圖片路徑
- alt：圖片加載失敗時提示
- title：鼠標懸停時出現的文字

3.超連接

<a></a>

做用：跳轉到目標（地址、位置、文件等）
說明：行內元素
屬性：
- href：連接目標
- target：打開方式（在哪一個窗口打開）
  - _blank （新窗口打開）
  - _self （當前窗口打開默認值）
應用：
- 錨點定位
  - a標籤到a標籤
  - a標籤到塊級元素
  - 空標籤點擊返回頂部

4.段落標記

<p></p>

做用：標記一個段落
說明：塊級元素
屬性：
- align：水平對齊方式（同上）

5.強制換行

<br/>

做用：強制換行
說明：沒有任何屬性

6.水平分割線

<hr/>

做用：在網頁中添加水平分割線
說明：塊級元素
屬性：
- color：設置分割線的顏色
  - 關鍵字：red、blue、yellow...
  - rgb顏色：#000000...
- width：設置水平線的長度，默認單位px
- size：設置水平線的粗細，默認單位px
- align同上

7.文本格式化標籤

<b></b>加粗bold <i></i>傾斜italic <u></u>下劃線underline <del></del><s></s>刪除線 <em></em>強調，傾斜顯示 <strong></strong>強調，加粗顯示 <sup></sup>上標 <sub></sub>下標 <big></big>大號字體 <small></small>小號字體

雙標記，行內元素

3、列表

塊級元素

1.無序列表

 <ul>
     <li></li>
     <li></li>
     <li></li>
 </ul>

效果
屬性：
- type：設置項目符號
  - disk
  - circle
  - square
  - none

2.有序列表

 <ol>
     <li></li>
     <li></li>
     <li></li>
 </0l>

效果
屬性：
- type："1/a/A/i/I"設置序號符號
- reversed："reversed"倒序，當屬性等於屬性值時，能夠簡寫爲屬性
- start="number" 設置從第幾個開始

3.自定義列表

     <dl>
         <dt>主題一</dt>
         <dd>描述一（多個描述）</dd>
         <dt>主題二</dt>
         <dd>描述二</dd>
     </dl>

通常用來放置圖片以及相關描述

4、表格

 <table>
  <caption>表格的標題</caption>
     <tr>
         <th>特殊單元格</th>table header
         <th>替換td</th>
         <th>默認水平居中且加粗</th>
     </tr>
     <tr> 行 table row
         <td>列 單元格 table data cell</td>
         <td></td>
         <td></td>
     </tr>
     <tr>
         <td></td>
         <td></td>
         <td></td>
     </tr>
 </table>

效果：

做用：向用戶展現數據
table屬性：
- border 設置邊框（默認沒有），像素單位px;
- align 水平對齊方式（表格）
- width 寬度
- height 高度
- cellpadding 單元格內邊距
- cellspacing 單元格間距
- bgcolor 背景顏色
- background 背景圖片
- bordercolor 邊框顏色
tr的屬性
- height 行高
- align 行內容的水平對齊方式
- valign vertical 行內容的垂直對齊方式，取值top/middle/bottom
td的屬性
- width 寬度
- height 高度
- align 單元格內容的水平對齊方式
- valign 單元格內容的垂直對齊方式
- bgcolor 背景顏色
- background背景圖片
- colspan 水平合併（跨列）刪除同一行的td
- rowspan 垂直合併（跨行）刪除下面行的td

5、表單

<form></form> 塊級元素

做用：採集數據，將數據提交到服務器
說明：不能相互嵌套，一個HTML文件能夠包含多個form表單
屬性
- name：表單名稱
- method：提交方式，默認值get
  - get：提交數據不安全，提交的數據會在地址欄中顯示；get提交的數據大小有限制（不能超過2kb）；
  - post：比較安全；提交的數據理論上沒有限制；
- action：提交的地址
表單元素
- 單行文本框： <input type="text"/>
- 密碼框： <input type="password"/>
- 單選框： <input type="radio" name=""/>
- 多選框： <input type="checkbox"/>
- 提交：
  - <input type="submit" value="登陸"/>
  - <button type="submit">提交</button/>
- 重置：
  - <input type="reset" value="重置">
  - <button type="reset">重置</button>
- 無功能按鈕：
  - input type="button" value="無功能">
  - <button type="button">無功能</button>
- 圖片提交按鈕：<input type="image" src="URL"/>
- 文本框：<textarea cols：文字區塊的寬度rows：文字區塊的行數，即其高度><textarea>
- 隱藏域：<input type="hidden">
- 文件：<input type="file" enctype="multipart/form-data">二進制傳輸
- 下拉列表：

 <select>
     <optgroup label="分組名">
     <option>選項一</option>
     <option>選項二</option>
     <option>選項三</option>
 </select>

label：配合單選和複選框使用，提高用戶體驗度（for和input的id綁定）
fieldset ：給表單元素分組，組名legend標籤（雙標籤）
表單元素屬性
- type：表單元素類型
- name：表單元素名稱
- value：當前值
- checked：默認被選中，配合單選按鈕和多選按鈕使用
- disabled：禁用
- readonly：只讀
- selected：默認顯示，配合option顯示
- size：顯示數量，取值爲number，配合selected使用
HTML新增屬性：
- paceholder 默認提示
- autofocus 自動獲取焦點，推薦寫在表單的第一個元素上
- require 必填項
- minlength 最小長度
- maxlength 最大長度
- multiple 能夠輸入多個，用","隔開，配合郵箱和網址使用

6、div+span

div

無語義的容器、盒子、塊級元素

span

無語意的容器、盒子、行內元素

7、HTML新增標籤

1.語義化標籤

正確的標籤作相關的事情
示例：

2.視頻

video

做用：在網頁中插入視頻
行內元素，支持的視頻格式：mp4 ogg webM（高清）
屬性：
- src：視頻地址，必須屬性
- width：寬度
- height：高度
- autoplay：自動播放
- controls：顯示控制面板
- loop：循環播放
- poster：視頻播放前顯示一張圖片
- muted：靜音