1 標題標籤 h1~h6
2 文本樣式標籤
3 段落標籤 p
4 超鏈接標籤 a
5 列表標籤 ul ol
6 盒子標籤 div
7 圖片標籤 img
8 span標籤
9 表格標籤 table
10 表單標籤 form
11 表單控件 button textarea select option input label
<!DOCTYPE html>
<html lang="en">
<head>
<title>註冊信息</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="icon" href="./1.ico">
</head>
<body>
<!-- 標題標籤
h1-h6 不同級別的字體,從大到小。 塊狀元素-->
<h1>lalallala</h1>
<h2>lalallala</h2>
<h3>lalllaaaa</h3>
<h4>lalallala</h4>
<h5>lalalalla</h5>
<h6>lalallala</h6>
<!-- 文本樣式標籤
1. `<b></b>`:加粗
2. `<i></i>`:斜體
3. `<u></u>`:下劃線
4. `<s></s>`:刪除線
5. `<sup></sup>`:上標
6. `<sub></sub>`:下標用於強調一段化話中的某些:
7 `<em></em>`默認會用斜體表示
8 `<strong></strong>`會用粗體來表示
9 `<br>`換行
10 `<hr>`用橫線分割
-->
<!-- 可以進行多重嵌套 -->
<h1>
<u><i>lallalala</i></u>
<sup>haha</sup>
</h1>
<!-- 段落標籤p
塊狀元素 -->
<p>lfdslafsajf<br>lhaemkhnjajsd<em>snvsf<hr>dsfdsf</em>hakfj<br>cnsl<strong>sfesf</strong>adfjiesafljasdsljfe</p>
<p><hr>fefewb<hr>scfdvf<hr>dscs<hr>sdsfcsf<hr>dsdsc<hr>sdsdsd<hr>sdsds<hr>dsdswd<hr>dsd<hr>ds<hr>sds<hr>scs<hr>scc</p>
<!-- 超鏈接標籤
a 行內元素 -->
<!-- _bank 在新的網站打開
_self 在當前網站打開 -->
<a href="https://www.baidu.com" target="_bank" title="路飛學城">路飛學城</a>
<a href="https://www.baidu.com" target="_self" title="路飛學城">路飛學城</a>
<!-- 下載包要先存在,郵箱要先登錄着 -->
<a href="a.zip">下載包</a>
<a href="mailto:[email protected]">聯繫我們</a>
<!-- 返回頂部 -->
<a href="#">跳轉頂部</a>
<!-- 一般在div中會設置id -->
<a href="#id=1">跳轉id=1</a>
<!-- 執行js代碼 -->
<a href="javascript:alert()">執行js</a>
<!-- 列表標籤
ul 無序 ol 有序 -->
<!-- type:列表標識的類型disc:實心圓(默認值)
circle:空心圓
square:實心矩形
none:不顯示標識
-->
<!-- type:列表標識的類型
1:數字
a:小寫字母
A:大寫字母
i:小寫羅馬字符
I:大寫羅馬字符
-->
<ul type="square">
<li>dafsdfd</li>
<li>sdfcsevf</li>
<li>dsafas</li>
</ul>
<ol type="a">
<li>fsfasf</li>
<li>sdfaa</li>
<li>fsfesf</li>
</ol>
<!-- 盒子標籤
div 用來進行分區 只低於head和body-->
<div class="lalalla">
fsafafsagdsk
fsegesgsbvg
fesgvsabvbvse
<h1>fwegfawfawf</h1>
<ul type="square">
<li>dafsdfd</li>
<li>sdfcsevf</li>
<li>dsafas</li>
</ul>
</div>
<!-- 圖片標籤
img 行內塊狀元素 可同行,可定義長寬 -->
<!-- 1 src設置的圖片地址可以是本地的地址也可以是一個網絡地址。
2 圖片的格式可以是png、jpg和gif。
3 alt屬性的值會在圖片加載失敗時顯示在網頁上。
4 還可以爲圖片設置寬度(width)和高度(height),不設置就顯示圖片默認的寬度和高度
5 瀏覽器查看效果:行內塊元素,與行內元素在一行內顯示
-->
<img src="data:image/jpeg;base64,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" alt="谷歌" style="width: 200px;height: 200px">
<img src="./1.png" alt="hahh" style="width: 200px;height: 200px">
<img src="./2.png" alt="hahh" style="width: 200px;height: 200px">
<!-- 其他的一些標籤 -->
<!-- span標籤
可以單獨摘出某塊內容,結合css設置相應的樣式 -->
<div>
<span>sdfsgvsdfe</span>
sdfsgasdfs
<img src="./2.png" alt="hahh" style="width: 200px;height: 200px">
</div>
<!-- <br>標籤
用來將內容換行 -->
<p>fdsfaasf<br>fsfsfsf</p>
<!-- <hr>標籤
用來在HTML頁面中創建水平分隔線,通常用來分隔內容 -->
<p>fdsfaasf<hr>fsfsfsf</p>
<!-- 特殊符號
HTML代碼中的所有連續的空行(換行)也被顯示爲一個空格 -->
<p>
fsd fsf
ffdsf
</p>
<!-- 表格標籤
table -->
<!-- 屬性
border=“1” 顯示邊框
cellspacing=“0” 取消間隙 -->
<!-- 合併
rowspan 合併行(豎着合併) tr套td時
colspan 合併列(橫着合併) td套tr時
-->thead表頭 tbody表主體 tfoot表尾
tr行 th列(表頭) tr行 td列(表主體)
<div class="table">
<table border="1" cellspacing="0">
<!-- 表頭 thead-->
<thead>
<!-- 表頭行 tr-->
<tr>
<!-- 表頭列 th-->
<th></th>
<th>
monday
</th>
<th>
tuseday
</th>
<th>
thursday
</th>
</tr>
</thead>
<!-- 表體 tbody-->
<tbody>
<!-- 表頭行 tr-->
<tr>
<!-- 表頭列 td-->
<td rowspan="2">am</td>
<td>heheh</td>
<td>lallf</td>
<td>fsfgsdf</td>
</tr>
<tr>
<td>heheh</td>
<td>lallf</td>
<td>fsfgsdf</td>
</tr>
<tr>
<td>pm</td>
<td>heheh</td>
<td>lallf</td>
<td>fsfgsdf</td>
</tr>
</tbody>
<!-- 表尾 tfoot-->
<tfoot>
<tr></tr>
</tfoot>
</table>
</div>
<!-- 表單標籤
form-->
<!--
action 定義表單被提交發生的動作,提交給服務器處理程序的地址
method 定義表單提交數據的方式
get 明文提交,提交內容會顯示在地址上,安全性低
數據最大爲2KB
post 隱式提交
無大小限制
enctype 編碼類型
取值:application/x-www-form-urlencoded (默認)允許提交普通字符、特殊字符
multipart/form-data 允許將文件提交給服務器
text/plain 只允許提交普通字符
Note:提交文件,method用post,enctype用multipart/form-data
-->
<!-- 表單控件
button按鈕
textarea文本域
允許用戶錄入多行數據
cols 列數
rows 行數
select和option選項框
select
size 大於1爲滾動列表,否則爲下拉菜單
multiple 允許多選
option
value 選項的值
selected 預選,默認是第一項
input
type
button
text 明文顯示用戶輸入的數據
password 密文
radio 單選按鈕 checkbox複選框 checked設置後默認選中
submit 提交給服務器
file 上傳文件
value
控件值,傳給服務器的數據
name
控件名稱,服務器用
disable
禁用該控件
id
id地址,一般與label關聯
placeholder
文本框中默認內容
label
關聯文本與表達元素,點擊文本如同點擊表單元素
for 表示與該label關聯的表單控件元素的id值-->
<div class="form">
<form action="http://www.baidu.com" method="get">
<!-- usename -->
<p>
<label for="user">用戶名</label>
<input type="text" name="username" id="user" placeholder="請輸入用戶名">
</p>
<!-- password -->
<p>
<label for="password">密碼</label>
<input type="password" name="password" id="password" placeholder="請輸入密碼">
</p>
<!-- gender -->
<p>
<input type="radio" name="gender" value="男" checked>男
<input type="radio" name="gender" value="女">女
</p>
<!-- hobby -->
<p>
<input type="checkbox" name="hobby" value="111" checked>111
<input type="checkbox" name="hobby" value="222">222
<input type="checkbox" name="hobby" value="333">333
<input type="checkbox" name="hobby" value="444">444
</p>
<!-- put file -->
<p>
<input type="file" name="textfile">
</p>
<!-- textarea -->
<p>
<textarea rows="5" cols="20" name="text" placeholder="請輸入自我介紹"></textarea>
</p>
<!-- select and option -->
<p>
<select size="2" name="sel" multiple="">
<option value="北京" selected>北京</option>
<option value="南京">南京</option>
<option value="天津">天津</option>
</select>
</p>
</form>
</div>
</body>
</html>