HTML筆記
網頁基本标簽
- 标題标簽
- 段落标簽
- 換行标簽
- 水準線标簽
- 字型樣式标簽
- 注釋和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标簽</title>
</head>
<body>
<h1>一級标簽</h1><!--标題标簽-->
<h2>二級标簽</h2>
<h3>三級标簽</h3>
<h4>四級标簽</h4>
<h5>五級标簽</h5>
<h6>六級标簽</h6>
<!--段落标簽-->
<p>p換行1</p>
<p>p換行2</p>
<hr/><!--水準線标簽-->
換行1 <br/><!--換行标簽-->
換行2 <br/>
<!--換行标簽比較緊湊，段落标簽有明顯段間距-->
<!--粗體 斜體-->
<h1>字型樣式标簽</h1>
粗體：<strong>I love you </strong><br/>
斜體：<em>I love you </em><br/>
<!--特殊符号-->
空格：1 2 3 4<br/>
空格：1 2 3 4<br/>
大于号><br/>
小于号&rt;<br/>
版權符号©<br/>
<!--特殊符号記憶：&開頭;結尾，隻要在idea中&敲出後就有提示-->
</body>
</html>
- 圖像标簽
-
連結标簽
href： 必填，表示要跳轉到那個頁面
target：表示視窗在那裡打開
_blank：在新标簽中打開
_self： 在自己的網頁中打開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖像和連結标簽</title>
</head>
<body>
<!--src:資源位址
相對位址，絕對位址
../上級位址
alt：在圖檔加載失敗的時候，就會用文字代替
title:滑鼠懸停在圖檔上時，所顯示的名字
width height 圖檔的高和寬-->
<img src="../xxx.jpg" alt="oops!圖像不見了" title="123">
<br/>
<!--href：跳轉頁面的位址
a标簽内文字：即顯示的文字
可以把圖檔放在a标簽内，點選圖檔跳轉網頁
target:表示在哪打開新網頁_self:目前标簽打開 _blank:新的頁面中打開-->
<a href="https://www.baidu.com" target="_blank" title="123">你xxxx不會百度嗎</a>
<br/>
<a href="https://www.baidu.com"><img src="../xxx.jpg" alt="oops!圖像不見了"></a>
<!--錨連結
1.需要一個标記錨
2.跳轉到标記
#頁面内跳轉-->
<a name="top"></a>
<a href="#top">回到頂部</a>
<br/>
<!--也可以在網址後添加#号跳到對應網站的對應位置-->
<a href="https://www.baidu.com#down">百度底部</a> <br/>
<!--功能性連結
郵箱連結：mailto
qq連結
-->
<a href="mailto:xxxxxxqq.com">點選聯系我</a>
<a target="_blank"
href="http://wpa.qq.com/msgrd?v=xxx&uin=&site=qq&menu=yes"/>
<a target="_blank"
href="http://wpa.qq.com/msgrd?v=xxx&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="點選這裡加我領取小電影"
title="點選這裡加我領取小電影"/>
</body>
</html>
行内元素和塊元素
- 塊元素
- 無論内容多少，該元素獨占一行
行内元素：内容撐開寬度，左右都是行内元素的可以排在一行例如：<p></p><hr/> <h1>...<h6>例如：<a><strong><em>
- 無論内容多少，該元素獨占一行
清單标簽
什麼是清單
清單就是資訊資源的一種展示形式。它可以使資訊結構化和條理化，并以清單的樣式顯示出來，以便浏覽者能更快捷地獲得相應的資訊。
清單的分類：
無序清單
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
有序清單
<ul><!--無序清單-->
<li>123
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>2</li>
<li>3</li>
</ul>
定義清單
<!--自定義清單
dl：标簽
dt：清單名稱
dd：清單内容-->
<dl>
<dt>學科</dt>
<dd>國文</dd>
<dd>數學</dd>
<dd>英語</dd>
<dt>語言</dt>
<dd>中文</dd>
<dd>英語</dd>
<dd>日語</dd>
</dl>
表格
表格的基本結構：
- 單元格
- 行
- 列
- 跨行
- 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<table border="1px">
<tr><!--跨列-->
<td colspan="3">1-1</td>
</tr>
<tr><!--跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
視訊和音頻
- video
- audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素</title>
</head>
<body>
<!--視訊
src 資源路徑
controls 控制台
autoplay 自動播放
-->
<video src="xxx/xxx/xxx" controls autoplay></video>
<!--音頻-->
<audio src="xxx/xxx/xxx" controls autoplay></audio>
</body>
</html>
頁面結構
| 元素名 | 描述 |
|---|---|
| header | 标題頭部區域的内容（用于頁面或者頁面中的一塊區域） |
| footer | 标記腳部區域的内容（用于整個頁面或頁面的一塊區域） |
| section | Web頁面中的一塊獨立區域 |
| article | 獨立的文章内容 |
| aside | 相關内容或應用 |
| nav | 導航類輔助内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面結構</title>
</head>
<body>
<!--頁面頭部-->
<header>
<h2>網頁頭部</h2>
</header>
<section>
<h2>網頁主體</h2>
</section>
<footer>
<h2>網頁腳部</h2>
</footer>
</body>
</html>
iframe内聯架構
<iframe src="path" name="mainFrame" ></iframe>
- ifram标簽，必須要有src屬性即引用頁面的位址
- 給标簽加上name屬性後，可以做a标簽的target屬性，即在内聯視窗中打開連結
表單文法(重點).
from标簽，action屬性為所送出的目的位址，method選擇送出方式
可以選擇使用post或者get方式送出
- get效率高，但在url中可以看到送出的内容，不安全，不能送出大檔案
- post比較安全且可以送出大檔案
| 标簽 | 說明 |
|---|---|
| input标簽 | 大部分表單元素對應的标簽有text、password、checkbox、radio、submit、reset、file、hidden、image和button，預設為text，可以送出使用者名、密碼等等 |
| select标簽 | 下拉選擇框 |
| textarea标簽 | 文本域 |
| 屬性 | |
|---|---|
| type | 指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，預設為text |
| name | 指定表單元素的名稱（送出時所對應的key） |
| value | 元素的初始值，radio必須提供 |
| size | 指定表單元素的初始寬度。當type為text或者password時，以字元為機關；其他type以像素為機關 |
| maxlength | type為text或者password時，輸入的最大字元數 |
| checked | type為radio或者checkbox時，指定按鈕是否被選中 |
- 一些其他的屬性
| readonly | 隻讀，不可更改 |
| disable | 禁用 |
| hidden | 隐藏，雖然不可見但是會送出 |
| id | 辨別符，可以配合label的for屬性增加滑鼠的可用性 |
| placehoder | text 文字域等輸入框内的提示資訊 |
| required | 不能為空 |
| patten | 正規表達式驗證 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登入注冊</title>
</head>
<body>
<h1>注冊</h1>
<!--表單from
action：表單送出的動作，可以是交給一個網址，也可以是交給一個請求處理位址
method：post get請求方式-->
<form action="xxx/xxx" method="get">
<!--文本輸入框：input type="text"-->
<p>使用者名：<input type="text" name="username" value="請輸入使用者名" maxlength="10" size="20"></p>
<p>密 碼：<input type="password" name="password" placeholder="請輸入密碼" required="required"></p>
<!-- submit送出表單，reset清空-->
<p><input type="submit"> <input type="reset">
</p>
<!-- radio單選框标簽 value即單選框的值，在送出時對應value
name：單選框組名，在同一個組内的radio标簽同時隻能選中一個，name值在送出時對應key
checked:預設被選中
-->
<p>性别：<input type="radio" value="boy" name="sex"/>
<input type="radio" value="girl" name="sex"/>
</p>
<p>愛好：
<input type="checkbox" value="b" name="hobby">打籃球
<input type="checkbox" value="s" name="hobby">唱rap
<input type="checkbox" value="d" name="hobby">跳舞
</p>
<p><input type="button" name="btn1" value="按鈕上文字"><!--按鈕-->
<input type="image" src="xxx/xxx"><!--圖檔按鈕預設是送出：和submit類似-->
</p>
<p><!--下拉框：selected:預設選項-->
你來自：
<select name="location">
<option value="china">中國</option>
<option value="us" selected>美國</option>
<option value="japan">日本</option>
</select>
</p>
<p><!--文本域-->
回報：
<textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea>
</p>
<p><!--檔案域-->
<input type="file" name="files">
<input type="button" name="upload" value="上傳">
</p>
<!--郵件：會簡單驗證是否是郵箱位址
url：會簡單驗證是否是網絡位址
number：數字驗證-->
<p>郵箱：<input type="email" name="email">
url：<input type="url"></p>
<!--數字驗證
max最大數量
min 最小數量
step 每次點選增加或減少的數量-->
<p>商品數量<input type="number" name="num" max="100" min="1" step="1"></p>
<!--滑塊-->
<p>音量：<input type="range" min="0" max="100" name="voice" step="2"></p>
<!--搜尋框-->
<p>搜尋：<input type="search"></p>
<p><!--增強滑鼠可用性-->
<label for="mark">你點我試試</label>
<input type="text" id="mark">
</p>
</form>
</body>
</html>