HTML-學習筆記01
阿新 • • 發佈：2022-12-05
HTML
1、初識HTML
標籤 -- > 承載內容
標籤教程：https://www.runoob.com/tags/html-reference.html
層疊樣式表 -- > 渲染頁面
JavaScript -- > 互動式行為
<!-- 頁面文件型別宣告--> <!DOCTYPE html> <!-- 起始標籤--> <html lang="en"> <!-- 不展示在頁面中--> <head> <!-- 指定編碼格式為utf-8--> <meta charset="UTF-8"> <title>逆流的魚</title> <!-- css cascading style sheet--> <!-- 樣式，寫在head之中--> <style> h1{ color: purple; font-size: 80px; font-family: '華文行楷'; } p{ color: red; font-size: 20px; font-family: '華文行楷'; } body{ color: blue; font-size: 20px; font-family: '華文行楷'; } .a{ color: green; } .b{ color: black; } </style> </head> <!-- 頁面內容--> <body> </body> </html>
2、javascripts
<script>
function showWriter() {
window.alert('作者：李白')
}
</script>
3、文字標籤+字元實體
文字標籤
h1~h6 : 標題 heading
hr ：水平標尺 horizontal ruler
p : 段落 paragraph
sub / sup 下標或上標
em / strong 強調
del / ins 刪除線或下劃線
br : break ruler 折行
<!-- h1 標籤--> <h1> 逆流的魚 </h1> <!--水平分割線--> <hr> <!--加斷句--> <em>君不見</em>黃河之水<strong>天上來</strong><br> <ins>奔流</ins>到海不復還<br> 君不見高堂明鏡悲<del>白髮</del><br> <p class="b"> 朝如青絲暮成雪</p> <p class="a"> 人生得意須盡歡</p> <p> 莫使金樽空對月</p> <button onclick="showWriter()">顯示作者</button> <hr> 笑看風雲<sub>人生如斯</sub><sup>天地悠悠</sup>
列表標籤
有序列表 ol -- ordered list
無序列表 ul -- unordered list
li -- list item
定義列表 dl -- definition list
dt -- definition title
dd -- definition description
<h2>逆流的魚喜歡的書</h2> <ol> <img src="fisher.png" height="140" width="235"> <li>紅樓夢</li> <li>三國演義</li> <li>從優秀到卓越</li> </ol> <ul> <li>西廂記</li> <li>圍城</li> <li>夢的解析</li> </ul> <dl> <dt>Python</dt> <dd>面向物件的程式語言</dd> <dd>動態弱型別語言，需要直譯器 才能執行</dd> </dl>
字元實體表
https://www.w3school.com.cn/html/html_entities.asp
字元實體 / 實體替換符
 : 空格
< > : 尖括號
4、巢狀列表+影象標籤
<ul>
<li>西廂記</li>
<li>圍城</li>
<li>夢的解析</li>
<li>小說類
<!-- 列表巢狀-->
<ol>
<li>百年孤獨</li>
<li>簡.愛</li>
<li>平凡的世界</li>
</ol>
</li>
</ul>
<!-- 圖片標籤,不建議在此改圖片大小，應讓美工按要求做出實際大小-->
<!-- 圖片標籤,可以是本地圖片，也可以是網頁圖片的URL-->
<img src="pic.jpg" height="435" width="300">
5、超連結標籤
超連結標籤
<body>
<h1>逆流的魚經常瀏覽的網站</h1>
<ul>
<!-- anchor a標籤 href 超連結 target 預設當前視窗，_blank 新視窗開啟-->
<!-- 這種連線叫頁面連線-->
<li><a href="https://www.baidu.com" target="_blank">百度</a></li>
<li><a href="https://cn.bing.com" target="_self">必應</a></li>
<li><a href="https://www.jd.com">京東</a></li>
<li>
視訊網站
<ul>
<li><a href="https://movies.youtube.com" target="_blank">Youtube</a></li>
<li><a href="https://www.bilibili.com/" target="_blank">B站</a></li>
</ul>
</li>
</ul>
</body>
</html>
錨點連結
在頁面中預先設定錨點，在瀏覽頁面時，方便快速跳轉。
<!-- 放在頁面頂部，name="top"是錨點-->
<a name="top"></a>
<!-- 放在頁面頂部，引用跳轉到錨點位置，可以是當前頁，也可以是新的頁面-->
<a href="#bottom">去底部</a>
<!-- 放在頁面底部-->
<a name="bottom"></a> <a href="#top">回頂部</a>
功能連線
點選功能可以執行一個動作，如發郵件，或者開啟某個應用。
<a href="mailto:[email protected]">聯絡管理員</a>
6、HBuilder的安裝使用
下載地址：無須安裝，解壓後直接使用。
<!-- HBuilder裡輸入ol>li*5的結果-->
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- HBuilder裡輸入ol>li*3>a的結果-->
<ol>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ol>
7、表格標籤
快速製表
<!-- HBuilder裡輸入table>tr*2>td*3,然後按下Tab鍵的結果，tr行，td列-->
<table border="1">
<tr>
<td>姓名</td>
<td>英語</td>
<td>語文</td>
</tr>
<tr>
<td>王二錘</td>
<td>85</td>
<td>90</td>
</tr>
</table>
表格樣式編輯
在標籤開頭雙擊，會選中整個標籤內容，然後按ctr+]在其外套一層標籤
rowspan 跨行，colspan跨列
<table border="1">
<caption>學生成績表</caption>
<!--表頭th居中加粗顯示，width設定列寬 -->
<!--在標籤開頭雙擊，會選中整個標籤內容，然後按ctr+]在其外套一層標籤 -->
<thead>
<tr>
<th width='120'>姓名</th>
<th width='100'>英語</th>
<th width='100'>語文</th>
<th width='100'>數學</th>
</tr>
</thead>
<tbody>
<tr>
<td>王二錘</td>
<td>85</td>
<td>90</td>
<td>90</td>
</tr>
<!--rowspan 跨行，colspan跨列 -->
<tr>
<td>金三胖</td>
<td rowspan="2">70</td>
<td colspan="3" align="center">90</td>
<td>90</td>
</tr>
<tr>
<td>王麻子</td>
<td>70</td>
<td>90</td>
<td>90</td>
</tr>
</tbody>
</table>
8、TCP+IP模型
Internet - TCP/IP 模型 -- 協議族
四層模型：
應用層 -- HTTP/SMTP/POP3/FTP/SSH/ICQ/QQ
傳輸層 -- TCP/UDP - 端到端傳輸
TCP 有滑動視窗，可以做流量控制
擁塞控制，通過監測流量來控制速率
IP層（網路層）-- 定址和路由
網路介面層 -- 接入網路（分幀，校驗）
9、表單標籤 -- form
html -- Hyper-Text Markup Language
http -- Hyper-Text Transfer Protocol
-get -- 從伺服器獲取資源（網頁、圖片、音視訊）
-post -- 提交資料給伺服器
-delete
-put
-patch
表單實際是鍵值對，需要通過下拉或複選框選擇的，必須要有name 和value 屬性，鍵盤輸入的可以沒有
textarea 輸入多行資料
<html>
<head>
<meta charset="utf-8">
<title>註冊sample</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<!--給資訊加邊框和說明資訊-->
<fieldset>
<legend>使用者基本資訊</legend>
<!-- 加上required，表示改欄位必填，placeholder 佔位符 -->
<p>
使用者名稱：
<input type="text" name="username" size="30" maxlength="20" placeholder="使用者名稱由6-20個字元組成" required/>
</p>
<p>
密碼：
<input type="password" name="password" required/>
</p>
<p>
確認密碼：
<input type="password" name="repassword" required/>
</p>
<!--radio 單選按鈕 -->
<p>
性別：
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value=0"" > 女
</p>
<!--checkbox 多選按鈕 -->
<p>
愛好：
<input type="checkbox" name="fav" value="閱讀"> 閱讀
<input type="checkbox" name="fav" value="旅遊"> 旅遊
<input type="checkbox" name="fav" value="美食"> 美食
<input type="checkbox" name="fav" value="運動"> 運動
</p>
<!--select>option*5 Tab -->
<p>
省份：
<select name="Province" id="">
<option value="110000">北京</option>
<option value="120000">天津</option>
<option value="310000">上海</option>
<option value="500000">重慶</option>
<option value="810000" selected>貴州</option>
</select>
</p>
<p>
生日：
<input type="date" name="birthday"/>
</p>
<p>
郵箱：
<input type="email" name="email" required/>
</p>
<p>
自我介紹：
<textarea name="introduction" id="" cols="30" rows="10"></textarea>
</p>
<p>
頭像：
<input type="file" name="portrait" />
</p>
<p>
註冊：
<input type="submit" value="確認註冊"/>
<input type="reset" value="重新填寫"/>
</p>
</fieldset>
</form>
</body>
</html>
10、音訊/視訊標籤
audio -- 音訊
video -- 視訊
<body>
<audio controls autoplay src="test-audio.mp3">梁山伯與朱麗葉</audio> <br>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=16435049&auto=1&height=66"></iframe>
<br />
<video width="400" height="500" controls>
<source src="test.mp4" />
</video>
</body>
11、相對路勁和其他標籤
<!-- src 使用的相對路勁 -->
<figure>
<img src="img/music.jpg" alt="">
<figcaption>圖1.music</figcaption>
</figure>
<!-- 內聯框架：巢狀網頁 -->
<iframe src="http://map.baidu.com" width="400" height="600" frameborder="0"></iframe>
12、塊級元素和行級元素
行級標籤：共享一行
a, img, iframe, button, span, input
塊級標籤：獨享一行
h1-h6, p, div, ul, ol, dl, table, hr, form