個人筆記全部手打 有點亂~~~~ 我相信每個人都有屬于每個人的筆記喔~~~~~~~~~~~~~~~~~~~~~~~~~
1.title 雙标簽 作用:頭部命名
2.body 雙 主體标簽 ~~~
3.h1~h6 雙 作用:字型從大到小且一個标題占一行
4.p 雙 段落标簽 作用:分段且段落間保有空隙
5.<br /> 單 換行标簽 作用:另起一行顯示
6.文本格式化标簽:strong 雙 加粗 ;em 雙 傾斜; del 雙 删除線
;ins 雙 下劃線 hr 單标簽 水準線
7.div和span标簽 雙 沒有語義,它們是一個盒子,用來裝内容的,div獨占一行 ;span全部在一行 ,大盒子與小盒子的差別
8.<img src=“圖像URL”/> 單 圖像标簽 ,當圖檔顯示不出來的時候<img src=“圖像URL” alt=“你好”/>加alt文字提示,同理加title滑鼠放在圖檔顯示文字 加weight寬 height高 border邊框 …/是傳回上一級 /是下一級
9.超連結标簽 a 雙 <a href = “跳轉目标” target = "目标視窗的彈出方式“>文本或者圖像</a> 例子:<a href = “http://erfwfw. com” target = "_black“>騰訊</a> target _self目前視窗打開頁面 _black新視窗打開頁面 内部連結:打開方式< a href = "xxx.html“>内部</a> “#”為空 下載下傳連結:<a href = "位址是一個檔案或者壓縮包 會下載下傳這個檔案“>下載下傳</a> 例子:<a href = “http…“><img src = “asdf.jpg” /></a> 錨點連結:我們點選連結,快速定位位置
1.<a href = “#名字”>xxx</a> 目标位置标簽<h3 id = "名字“>xx介紹</h3 >
10.注釋:快捷鍵ctrl + / <! – --> // /* /
特殊字元   小于号&it 大于号> 和号& 人名币¥ 版權© 注冊商标® 攝氏度° 正負号± 乘号× 除号 ÷ 平方2² 立方3³
11.表格标簽:table --tr–td 雙标簽 table定義表格 tr定義表格中的行 td 表格中的格子 在tr标簽中寫th表示表格的表頭部分
在table中可以加樣式 align對其方式後面的css有寫到的 left right center 邊框border有1和“” cellpadding規定單元邊沿與其内容之間的空白0 cellspacing 規定單元格之間的空白0 width單元格之間的寬度 height高度 表格結構标簽 thead 和 tbody 使其更清晰
跨行合并單元格:rowspan=“數字”
跨列合并單元格:colspan=“數字”
找到需要合并的單元格(td)後删除後面多餘單元格
12.清單标簽 ul li 清單項 ul li 無序清單 注意⚠️ul内隻能放li
ol li 清單項li ol 有序清單 注意⚠️也是ol隻能放li
dl dt名詞1dt dd名詞1解釋dd dl自定義清單
13.表單标簽 form 雙标簽 用于定義表單域 作用:會把
它範圍内的表單元素送出給伺服器 例子:<form action = "url位址“ method=”送出方式“name=”表單名稱“></form>
input單标簽 <input type = "屬性值 “>屬性值:button 可點選按鈕 checkbox 複選框 file輸入字段和“浏覽”按鈕 ,供檔案上傳 hidden隐藏的輸入字段 image圖像形式的送出按鈕 password密碼字段,字段被掩碼 radio 單選按鈕 reset 重置按鈕 submit 送出按鈕 text 文本框 在input 内加name 是命名的意思 value在輸入框給出提示(也可以更改和添加文字)注意⚠️單選按鈕和複選框要相同的name值 也可以設定checked = “chenked”屬性 當打開時預設選中 maxlength = “整數” 規定輸入字段中的最大長度 :::label 雙标簽 增加使用者的體驗 文法label for = “sex“ 男 label <input type=“radio” name = ‘sex’ id = “sex”/> 主要是for 和 id要對上
select 雙标簽 下拉清單 文法 : select option 選1 option 。。。
select 在option的内部加selected = “selected”是預設標明的狀态 texttarea 雙标簽 特大号文本框 作用:留言闆 評論類 文法form texttarea rows = 3 cols = 20 文本内容texttarea form
** HTML的筆記就到這裡了*
後續會更新CSS的案例
綜合案列
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICM38FdsYkRGZkRG9lcvx2bjxiNx8VZ6l2cs0TPn5UejRVT51keNBDOsJGcohVYsR2MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL2AzM1MDM1EjM1AzMwAjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注冊頁面
</title>
</head>
<body>
<h4>青春不常在 拼搏向上</h4>
<table align="left" width="500">
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" id="nan"><label for="nan"><img src="image/男.png" width="20" height="20">男</label>
<input type="radio" name="sex" id="nv"><label for="nv"><img src="image/女.png" width="20" height="20">女</label></td>
</tr>
<tr>
<td>生日:</td>
<td>
<select>
<option>--請選擇年--</option>
<option>1998</option>
<option selected="selected">1999</option>
<option>2000</option>
</select>
<select>
<option>--請選擇月--</option>
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>
<select>
<option>--請選擇日--</option>
<option>1日</option>
<option>2日</option>
<option>3日</option>
</select>
</td>
</tr>
<tr>
<td>所在地區</td>
<td><input type="text" value="廣東省茂名市"></td>
</tr>
<tr>
<td>婚姻狀況</td>
<td><input type="radio" name="marry" checked="checked">未婚<input type="radio" name="marry">已婚<input type="radio" name="marry">離婚</td>
</tr>
<tr>
<td>學曆</td>
<td><input type="text" value="國小畢業"></td>
</tr>
<tr>
<td>你喜歡的水果</td>
<td><input type="checkbox" name="fruit">蘋果<input type="checkbox" name="fruit">雪梨<input type="checkbox" name="fruit">香蕉<input type="checkbox" name="fruit">草莓</td>
</tr>
<tr>
<td>自我介紹</td>
<td>
<form><textarea rows="5" cols="40">
請開始你的表演吧!
</textarea></form>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="免費注冊"></td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked">我同意加入和遵守相關條例
</td>
</tr>
<tr>
<td></td>
<td><a href="#">會員登陸</a></td>
</tr>
<tr>
<td></td>
<td>
<h5>我同意</h5>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
</td>
</tr>
</table>
</body>
</html>