HTML5 筆記
阿新 • • 發佈：2022-03-29
目錄
2.1.1 標題標籤
2.1.2 水平線標籤
2.1.3 段落標籤
2.1.4 換行標籤
2.1.5 引用標籤
2.1.6 預格式標籤
2.1.7 無序列表標籤
2.1.8 有序列表標籤
2.1.10 分割槽標籤
2.2.1 圖片標籤
2.2.2 超連結標籤
- HTML5 學習筆記
HTML5 學習筆記
1.Html5的基本結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一個H5頁面</title>
</head>
<body>
<header>網站主題</header>
<nav>連線選單</nav>
<article>
主內容--HELLO，H5！
<section>
章級段落
</section>
</article>
<aside>側邊欄</aside>
<footer>頁尾</footer>
</body>
</html>
2.常見標籤
2.1塊級標籤
2.1.1 標題標籤 <h1></h1>···<h6></h6>
設定標題大小，從一級到六級一次遞減
2.1.2 水平線標籤 <hr/>
2.1.3 段落標籤 <p>
區分段落，不同段落自動增加換行符
2.1.4 換行標籤 <br/>
2.1.5 引用標籤 <blockquote></blockquote>
2.1.6 預格式標籤 <pre></pre>
2.1.7 無序列表標籤 <ul type=""><li></li></ul>
type型別：圓形、空心圓、方形等
1. disc
2. circle
3. square
2.1.8 有序列表標籤 <0l type=""><li></li></0l>
屬性 屬性值 type 1、A、a、I、i start 1、2、3等設定起始值 reversed 反向排序
2.1.9 定義列表標籤
適用於對名詞、概念或主題的定義
<dl>
<dt>定義列表的標題</dt>
<dd>描述第一項</dd>
<dd>描述第二項</dd>
</dl>
2.1.10 分割槽標籤 <div></div>
塊級標籤
2.2 行級標籤
2.2.1 圖片標籤 <img></img>
<img src="" alt="" height="" width="" title="" align="">
屬性 說明 src 相對路徑、絕對路徑 alt 圖片無法載入時顯示的內容 height、width 圖片的大小 title 圖片的標題：滑鼠放在圖片上顯示的內容 align 圖片周圍文字相對於圖片的位置
2.2.2 超連結標籤 <a></a>
<a href="" target="" name="">顯示文字</a>
屬性 功能 href 連結地址 target 定義通過超連結開啟的文件何處顯示
2.2.3 其他常用的行級標籤
標籤 說明 <em>側重強調，可巢狀使用 <strong>表示內容的重要性，巢狀遞增重要性級別 <small>旁註，可以用在免責宣告，使用條款和版權資訊等需要小字場景 <s>有誤文字，文字文字上加刪除線樣式 <b>不僅僅是粗體文字，還可以定義需要引起注意卻沒有額外語義的內容，如摘要的關鍵和文章導語的加粗 <i>不僅是單純的洩題，還可以表示“另一種敘述方式” <cite>瀏覽器顯示斜體，常用書、畫作、作品的引用 <q>短引用、顯示文字 " "起來 <code>知識便是為計算機程式碼，需要配合 <pre>使用
2.2.4 塊級標籤與行級標籤的區別
- 塊級標籤自動換行，前後隔一行；行級標籤不會自動換行，從左到右依次顯示。
- 塊級標籤的寬度預設100%，行級標籤的寬度由文字內容撐開。
- 塊級標籤可以設定寬度、高度、邊距等屬性；行級標籤不能設定上述屬性。
3. 表格
3.1 表格基本結構
行、列、列標題、單元格
| 表頭1 | 表頭2 |
|---|---|
| 第一行1 | 第一行2 |
| 第二行1 | 第二行2 |
<table>
<tr>
<th>表頭1</th>
<th>表頭2</th>
</tr>
<tr>
<td>第一行1</td>
<td>第一行2</td>
</tr>
<tr>
<td>第二行1</td>
<td>第二行2</td>
</tr>
</table>
3.2 表格的基本屬性
屬性 說明 border 表格邊框屬性，表格外圍邊框 width/height 分別定義表格的寬度和高度 bgcolor 表格背景色屬性 background 表格背景圖屬性 bordercolor 表格邊框顏色屬性 cellspacing 表格單元格間距屬性 cellpadding 表格單元格內邊距屬性 align 表格對齊屬性
3.3 行和列的屬性
<tr> <td>的屬性
屬性 說明 width/height 表格中單元格的寬和高 bgcolor 單元格的背景色屬性 align 單元格內容水平對齊屬性 valign 單元格內容垂直對齊屬性 colspan/rowspan 表格的跨行與跨列
3.4 表格的結構化與直列化
3.4.1 結構化
<table width="300" border="2"> <caption>標題</caption> <thead> <tr> <th>表格頭部</th> </tr> </thead> <tbody> <tr> <td>表格主體</td> </tr> </tbody> <tfoot> <tr> <td>表格底部</td> </tr> </tfoot> </table>
標題 表格頭部 表格主體 表格底部
3.4.2 直列化
<colgroup style="background-color: #010101"> <col/> </colgroup>
標題 表格頭部 表格頭部 表格主體 表格主體 表格底部 表格底部
4. 表單
4.1 表單常用屬性
屬性 說明 actoin 需要傳送的伺服器地址 method get/post提交方式 enctype 指定表單傳送的編碼方式，只有method =post 時有效
4.2 input 輸入框
4.2.1 input的常用屬性
屬性 說明 type 輸入框的型別 name 輸入框的名稱 value 輸入框的值 placeholder 輸入框的提示資訊 tabindex tabindex=''1'' 按Tab鍵時的跳轉順序，從最小值開始一次獲得焦點 checked/disabled/hidden 預設選中/控制元件不可用/隱藏控制元件
4.2.2 text 文字輸入框
<form action="" method="post"> 輸入內容： <input type="text" name="text1" maxlength="10" size="5"> </form>
4.2.3 密碼輸入框
<form action="" method="post"> 輸入密碼： <input type="password" name="psd" maxlength="10" size="5" value="123"> </form>
4.2.4 radio 單選按鈕
<form action="" method="post"> <input type="radio" name="sex" value="男" checked="checked">男 <input type="radio" name="sex" value="女">女 </form>注意兩個按鈕同名 才能達到單選效果
4.2.5 checkbox 複選按鈕
<form action="" method="post"> <input type="checkbox" name="hobby" value="sing" checked="checked">唱歌 <input type="checkbox" name="hobby" value="draw" checked="checked">畫畫 <input type="checkbox" name="hobby" value="dance">跳舞 </form>
4.2.6 file 檔案上傳按鈕
<form action="" method="post"> <input type="file"> </form>
4.2.7 submit 表單提交按鈕
<input type="submit" value="登入">
4.2.8 reset 重置按鈕
<input type="reset" value="重置">
4.2.9 image 圖形提交按鈕
<input type="image" src="">功能與submit相同
4.2.10 button 可單擊按鈕
<input type="button" value="點選我">
4.3 其他表單元素
4.3.1 select 下拉選擇控制元件
<form action=""> 今天是星期 <select name="week" id=""> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select> </form>
4.3.1.1 select的屬性
<select name="week" id="" size="2" multiple="multiple" >
屬性 說明 name 列表名 multiple 設定select控制元件為多選 size 規定下拉列表中可見選項的數目
4.3.1.2 option 的屬性
屬性 說明 value 當選項option沒有value屬性時，往後臺傳遞的是option標籤中的文字;反， 傳的是value的值 title 滑鼠指上後顯示的文字，與圖片的title類似 selected 預設選中
4.3.1.3 optgroup 標籤分組
<form action=""> <select name="city" id="city"> <optgroup label="山東省"> <option value="1" title="青島">青島</option> <option value="2" title="煙臺" selected="selected">煙臺</option> <option value="3" title="濟南">濟南</option> </optgroup> <optgroup label="北京市"> <option value="">海淀區</option> <option value="">昌平區</option> </optgroup> </select> </form>
4.3.2 textarea 文字域
<form action=""> <textarea name="" id="" cols="30" rows="10">這是文字域的內容</textarea> </form>
4.3.3 button 按鈕
button內部可以放置內容，如文字或影象。這是該元素與input建立的按鈕不同之處
4.4 Html5 智慧表單
4.4.1 表單分組
<form action=""> <!-- fieldset表示單邊框--> <fieldset> <!-- legend表示表單標題--> <legend>這是表單第一部分</legend> 請輸入內容: <input type="text"> <input type="submit" value="提交"> </fieldset> <fieldset> <legend>這是表單第二部分</legend> 請輸入內容: <input type="text"> <input type="submit" value="提交"> </fieldset> </form>
4.4.2 表單新增元素及屬性
新增元素 描述 <ditalist>input標籤定義選項列表，與input元素配合使用來定義input可能的值 <keygen>規定用於表單的金鑰對生成器欄位 <output>定義不同型別的輸出，比如指令碼的輸出 表單新增屬性
屬性 說明 autocompleted 規定form表單具有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項 novalidate 規定在提交表單時不進行驗證
<input>標籤新增屬性
屬性 說明 autocompleted 規定input標籤具有自動完成功能 autofocus 規定在頁面載入時，控制元件自動的獲得焦點（一個頁面只能有一個控制元件使用該屬性) required 規定輸入的欄位是必須的（必須填寫) pattern 規定通過其檢查輸入值的正則表示式 form overrides 規定表單重寫屬性 form 規定輸入域所屬的一個或多個表單
<input>標籤新增輸入型別
輸入型別 作用 color 定義拾色器 date 限制使用者輸入時間格式 限制使用者輸入email格式 number 限制使用者輸入數字格式 range 定義包含一定範圍內的值的數字欄位 search 定義用於輸入搜尋字串的文字欄位 <form action=""> 拾色器: <input type="color" name=""> <br><br> 日期選擇: <input type="date" name=""> <br><br> 電子郵件: <input type="email" name=""> <br><br> 數字輸入框: <input type="number" name=""> <br><br> 滑塊輸入: <input type="range" name=""> <br><br> 搜尋框: <input type="search" name=""> <br><br> </form>