<meta charset="utf-8" />

<!-- 網(wǎng)頁標(biāo)題 -->

<title>實驗項目學(xué)習(xí)1</title>

<!-- 關(guān)鍵詞（爬蟲看） -->

<meta name="keywords" content="學(xué)習(xí)，復(fù)習(xí)，HTML">

<!-- 描述（給爬蟲看） -->

<meta name="description" content="這是一個實驗的項目">

<!-- 作者 -->

<meta name="author" content="Shanter">

<!-- 版權(quán)所有 -->

<meta name="copyright" content="版權(quán)聲明">

<!-- 跳轉(zhuǎn)網(wǎng)頁?

<meta http-equiv="refresh" content="5;ur1=http://baidu.com"> -->

<!-- 用于定義元素的CCS樣式 p指的段落 顏色 格式如下 -->

<style>

p{

color: red;

}

</style>

<!-- link也可以引入外部樣式文件（CSS文件）

要在css文件夾下有才能引用 格式如下 什么什么.cs-->

<link rel="stylesheet" href="css/?.cs">

<!-- 用于定義頁面的JavaScript代碼 也可以引用外部JavaScript文件

可以寫js內(nèi)容-->

<script>

</script>

<!-- base標(biāo)簽無意義，知道有就行??

<base> 標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。 -->

body

<!-- p表示段落 -->

<p>這是一個實驗</p>

<!-- 標(biāo)題標(biāo)簽<h1>-<h6> h1只能用一次 -->

<h1>標(biāo)簽1</h1>

<h2>標(biāo)簽2</h2>

<h3>標(biāo)簽3</h3>

<h4>標(biāo)簽4</h4>

<h5>標(biāo)簽4</h5>

<h6>標(biāo)簽6</h6>

<!-- 文字加粗 strong帶強調(diào)效果 -->

<strong>已經(jīng)<br/>加粗了</strong>

<b>加粗了,且s方法</b>

<br>

<!-- 文字傾斜 em強調(diào)-->

<em>這是傾斜em</em>

<i>傾斜,s方法</i>

<br>

<!-- 下劃線標(biāo)簽,ins帶強調(diào) -->

<ins>這是有下劃線</ins>

<u>這也是下劃線u</u>

<br>

<!-- 刪除線的標(biāo)簽,del帶強調(diào) -->

<del>刪除線del</del>

<s>刪除線s</s>

<br>

<!-- 換行標(biāo)簽 可以放里面 -->

<br/>

<!-- 水平線標(biāo)簽 可以放里面 -->

<hr/>

<!-- src是指定圖片的，

alt替換文本（圖片無法顯示時，顯示040等文本內(nèi)容）

title 提示文本（當(dāng)鼠標(biāo)放上去時顯示文本內(nèi)容） -->

<img src="./OI12P-C.jpg" alt="加載錯誤404" >??<!-- 注意要點擊刷新位置,停止加載-->

<img src="./eg_tulip.jpg" title="你真的要點擊嗎">

<p>hjahu1</p>

<!-- 通過width(寬)調(diào)節(jié)高度,height?(高),不常用,工作用ccs實現(xiàn)功能 -->

<img src="./OIP-C.jpg" width="200">

<img src="./OIP-C.jpg" height="200"><br/>

<!-- 相對路徑, ./ 當(dāng)前文件夾. ../上一級文件夾, ../../上兩級文件夾 -->

<img src="../img/隨機的圖片.webp" alt="一個美國人"/><br/>

<!-- 當(dāng)圖片不在自己網(wǎng)址用 去網(wǎng)頁復(fù)制就行https://img.alicdn.com/imgextra/i1/993831484/O1CN01zvusGU1MpiYJCENY9_!!993831484.png -->

<img src="https://img.alicdn.com/imgextra/i1/993831484/O1CN01zvusGU1MpiYJCENY9_!!993831484.png" />

<br/>

<!-- 超鏈接標(biāo)簽 跳轉(zhuǎn)頁面 是雙標(biāo)簽 <a> 就是超鏈接用的 -->

<a href="https://www.baidu.com/">跳轉(zhuǎn)到百度網(wǎng)站</a><br/>

<!-- 跳轉(zhuǎn)本地路徑,按相對標(biāo)簽寫法 -->

<!-- 打開新標(biāo)簽頁,且不會關(guān)這個 target="_blank" -->

<a href="./圖片實驗.html" target="_blank">跳轉(zhuǎn)到圖片實驗</a><br/>

<!-- 經(jīng)驗:開發(fā)初期,不知道跳轉(zhuǎn)鏈接的情況下,href 屬性值寫# 表示空鏈接,不跳轉(zhuǎn) -->

<a href="#">空鏈接</a><br/>

<!-- 音頻播放 src是必要屬性，controls可視化控制面板(屬性名和屬性值一樣省略了)

，loop循環(huán)播放，autoplay自動播放 (一般瀏覽器禁用了)-->

<audio src="../music/天涯歌-..._lan.mp3" controls loop ></audio>

<br/>

<!-- 視頻播放 controls控制面板，loop循環(huán)播放，

muted禁音播放，autoplay自動播放（需要先禁音）-->

<video src="../music/單片機.mp4" width="800" controls muted autoplay></video>

<!-- table 要包含整個表格-->

<table border="1">

<thead> <!--這是一個雙標(biāo)簽，指表格頭部 -->

<tr> <!-- tr就是分行 -->

<th>姓名</th> <!-- th列（標(biāo)題的列） -->

<th>語文</th>

<th>數(shù)學(xué)</th>

<th>總分</th>

</tr>

</thead>

<tbody>?<!-- 這是雙標(biāo)簽，表格主體包含住 -->

<tr>

<td>張三</td> <!-- td（內(nèi)容的列） -->

<td>92</td>

<td>98</td>

<td rowspan=2"">190</td>?<!-- rowspan是跨列合并 -->

</tr>

<tr>

<td>李四</td>

<td>92</td>

<td>98</td>

<!-- <td>190</td> -->??<!-- 合并 需要注釋掉 -->

</tr>

</tbody>

<tfoot> <!-- 這是雙標(biāo)簽，表格尾部包含住 -->

<tr>

<td>總結(jié)</td>

<td colspan="3">全市第一</td>?<!-- 跨列合并單元格 -->

<!-- <td>全市第一</td> -->

<!-- <td>全市第一</td> -->

</tr>

</tfoot>

</table>

<!-- 例如登錄信息，注冊頁面，搜索區(qū)域都是用的表單?-->

<!-- 通過tape可以改變屬性 -->

一個文本標(biāo)簽框<input type="text">?<!-- 不會換到下一行 -->

<br/><br/>

密碼框標(biāo)簽<input type="password">?<!-- 不會換行 -->

<br/><br/>

單選框<input type="radio">??

<br/><br/>

多選框<input type="checkbox">

<br/><br/>

上傳文件<input type="file">

<br/><br/>

<!-- input 占位文本：提示信息 -->

可以輸入文字，提示<input type="text" placeholder="請輸入">

<br/><br/>

<!-- radio 單選展開：name然后取名字 name要一樣-->

<!-- checked默認(rèn)開局選 -->

<!-- label 讓文字與單選綁定?for要和id對應(yīng)-->

<!-- label簡單粗暴寫法 -->

性別：

<label><input type="radio" name="han">簡單粗暴寫法</label>

<input type="radio" name="han" id="man"><label for="man">男</label>

<input type="radio" name="han" id="" checked>女

<br/><br/>

<!-- 多選文件 multiple -->

上傳文件<input type="file" multiple >

<br/><br/>

<!-- 多選打? -->

興趣愛好：

<input type="checkbox" name="xing" checked>籃球 <!-- 默認(rèn)選中checked -->

<input type="checkbox" name="xing" >羽毛球

<input type="checkbox" name="xing" >乒乓球

<br/><br/>

<!-- 下拉菜單 select-->

城市

<select name="" id="">??

<option value="">北京</option>

<option value="">上海</option>

<option selected>重慶</option>

</select>

<br/><br/>

<!-- 文本域標(biāo)簽textarea，比如發(fā)表評論，會回復(fù) -->

<!-- 右下角有拖拽功能，可以放大文本框，但后面要禁用 -->

<!-- 前兩個為后臺發(fā)送，后兩個為尺寸但一般用CSS -->

<textarea name="" id="" cols="" rows="" >??這個中間寫提示文字</textarea>

<!-- 按鈕button ，點擊進(jìn)行操作 -->

<!-- 暫時無法使用，功能為將數(shù)據(jù)提交到后臺（默認(rèn)功能） -->

<button type="submit">提交按鈕</button>

<!-- 重置按鈕 ，恢復(fù)默認(rèn)值-->

<button type="reset">重置按鈕 </button>

<!-- 普通按鈕，本身無用，需要配合JavaScript -->

<button type="submit"> 普通按鈕，配合JS</button>

<br/><br/>

<!-- div標(biāo)簽獨占一行，與p標(biāo)簽有什么區(qū)別呢？

1、名稱不同

div是布局框架標(biāo)簽;

p是段落標(biāo)簽，布局文章標(biāo)簽。

2、div與p基本css屬性

div與p均獨占一行的塊元素標(biāo)簽，唯一區(qū)別,p自帶有一定margin-top和margin-bottom屬性值，而div兩個屬性值為0

也就是兩個p之間有

—定間距，而div沒有。

div上下沒有間隔間距，而p有。 -->

<!-- 大格子 -->

<div>這是div標(biāo)簽</div>

<div>這是div標(biāo)簽</div>

<br/><br/>

<p>這是p標(biāo)簽效果</p>

<p>這是p標(biāo)簽效果</p>

<br/><br/>

<!-- span標(biāo)簽，不換行?<span> 標(biāo)簽被用來組合文檔中的行內(nèi)元素。

只有應(yīng)用樣式（CSS）才會看出效果，不然跟其他文本一樣-->

<!-- 小格子 -->

<span>span標(biāo)簽</span>

<span>span標(biāo)簽</span>

<br/><br/>

?

<!-- 實體字符標(biāo)簽?可以避免出現(xiàn)<p>這種情況，防止瀏覽器誤判-->

<!-- 在代碼中按很多空格，網(wǎng)頁只會識別一個空格，所以采用實體字符 -->

<!-- &nbsp;空格?&lt;小于號?&gt;大于號 -->

<p>我&nbsp;看見&lt;了時&gt;間</p>

<br/><br/>

?