WEB前端開發–2（HTML基礎）
- 2022 年 2 月 12 日
- 筆記
HTML基礎
HTML不分大小寫
1.HTML概述
HTML(HyperText MarkUp Language)「超文本標記語言」，他是製作網頁的標準語言
1.1 標籤——元素
由尖括弧包圍，比如<title>，通常是成對出現
例如：<title> 百度一下，你就知道 </title>
開始標籤 內容 結束標籤
單獨出現的標籤：<img /> 圖片標籤單獨出現
1.2 標籤——嵌套
<html><body></body></html> ——正確
<html><body></html></body> ——錯誤
HTML語言中規定標籤一定得有正確的嵌套關係，且要注意縮進，類似python。
標籤嵌套關係可以用HTML DOM樹表示.
1.3 標籤——屬性
<img src=”logo.jpg” alt=”站標” />
上面這句程式碼中有 src屬性和alt屬性兩個屬性。
一個標籤可能由多個個屬性，屬性的先後順序無關
2.文件
2.1 23文件結構
——————————
<html>
<head>
<title></title>
</head>
</html>
——————————
在最外層有一對<html>標籤，表示此部分由html來規範
<head> 頭部資訊：瀏覽器、搜索引擎所需要資訊，會出現在網頁標題(標籤)欄里
<body> 主體部分：網頁中包含的具體內容
2.2 HTML 編輯器
記事本 / Sublime Text3 / Webstorm
2.3 HTML5 的文件結構
——————————————
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> </title>
</head>
<body>
<body>
</html>
—————————————
增加部分：
<!DOCTYOE html> 表示當前文檔類型符合HTML5標準
lang 屬性：搜索引擎 —— en英文 zh中文
<meta> ：元數據（作者，關鍵字等等數據）
charset屬性：字符集編碼方式——瀏覽器UTF-8是國際編碼
2.4 字符集與編碼
字元(Character): 文字、符號——123 abc 一二三 !?$#
字符集(Charset): 字元的集合——英文字符集、漢字字符集、日文漢字字符集
編碼：將字元和二進位碼對應起來
編碼方式： ASCII：數字、英文字母、符號進行了編碼
GB2312：簡體中文
Unicode：所有語言、佔用空間較大
UTF-8：所有語言、佔用空間較小
2.5 亂碼問題
源文件保存時編碼與源文件聲明<meata charset=”編碼方式”>不一致就會出現亂碼問題
3.HTML標籤
3.1 標題標籤h1~h6 一個頁面建議只有一個h1
——————————————
<h1>一級標題 heading 1</h1>
<h2>二級標題 heading 2</h2>
<h3>三級標題 heading 3</h3>
<h4>四級標題 heading 4</h4>
<h5>五級標題 heading 5</h5>
<h6>六級標題 heading 6</h6>
這裡是正文文字
——————————————
3.2 段落p
——————————————
<p>這是段落，每個段落自動換行。</p>
<p>這是段落，每個段落自動換行。</p>
<p>這是段落，每個段落自動換行。 空格，
也不會顯示空行， 且不會換行
——————————————
輸出：
————————————————————————————
這是段落，每個段落自動換行。
這是段落，每個段落自動換行。
段落內部文字忽略連續 空格， 也不會顯示空行，且不會換行
————————————————————————————
空行和多個連續空格在段落內部都會只生成一個空格
3.3 段內換行 <br/>
<br/> 為單獨出現的標籤，直接結束
讀到<br/>標籤自動換行，類似於\n
3.4 空格字元
為特殊字元，全小寫
——————————————————————————————
<body>
<p>段落內部文字忽略連續 空格，
<br/>
也不會顯示空行，且不會換行
</p>
</body>
——————————————————————————————
輸出：
——————————————————————————————
段落內部文字忽略連續 空格，
也不會顯示空行，且不會換行
——————————————————————————————
3.5 預留格式pre
定義預格式化的文本，在pre標籤內部，所有內容都會被保留源格式。
——————————————————————————————
<body>
<pre>
這是預留格式文本 它保留了 空格
和空行
</pre>
<p>pre 標籤很適合顯示電腦程式碼 </p>
<pre>
for i=1 to 10
print i
next i
</pre>
<body>
——————————————————————————————
3.6 行內組合span
組合行內元素，以便通過CSS樣式來格式化
——————————————————————————————
<style type=”text/css”>
span{
color : blue;
font-wieight : bold;
}
</style>
<p> 最新<span>中國人口調查報告顯示</span>顯示</p>
——————————————————————————————
3.7 水平線<hr/>
——————————————————————
<p>正文段落</p>
<hr />
<p>正文段落</p>
——————————————————————
3.8 注釋內容標籤 <!– 注釋內容 –>
——————————————————————
<body>
<!– 這是一段注釋–>
<!– 注釋可以
跨行 –>
</
<body>
——————————————————————
3.9 超鏈接 <a>
<a href=”網址”> 文字或圖片 </a>
分類：
鏈接到本站點的其他網頁：
<a href=”news.html”> 新聞 </a>
鏈接到其他站點的網頁：
<a href=”//www.baidu.com”> 百度 </a>
虛擬超鏈接：
<a href=’#’> 板塊2 </a> ——還沒設置好超鏈接時用虛擬超鏈接替代
舉例：
【index.html】
——————————————————————————
<!DOCTYPE html>
<html lang=’en’>
<head>
<meta charset=’UTF-8′>
<title>Doucment</title>
</head>
<body>
<h1>首頁</h1>
<h2>導航</h2>
<a href=”news.html”> 新聞 </a>
<a href=”technology.html”> 科技 </a>
<a href=”//www.baidu.com”> 問問百度 </a>
</body>
</html>
————————————————————————————
【news.html】
———————————————————————————————
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title> 新聞 </title>
</head>
<body>
<h1> 新聞板塊 </h1>
<p><a href=”#”>五年來###這樣論述”一帶一路”</a></p>
<p><a href=”#”>關於中非合作 ###這些提法有深意</a></p>
<p><a href=”#”>專家學者高度評價###提出的”五不””四不能”</a></p>
<p><a href=”#”>###將赴俄出席東方經濟論壇並與普京會晤</a></p>
<p><a href=”#”>人命日報：讓能幹事者有舞台 中國方案 專題</a></p>
<p><a href=”#”>中國人當心 又來了兩則中美貿易戰的宣言</a></p>
</body>
</html>
————————————————————————————————
【technology.html】
—————————————————————————————————————
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title> 科技 </title>
</head>
<body>
<h1> 科技板塊 </h1>
<p><a href=”#”>顏寧課題組70天里發3篇Sciense</a></p>
<p><a href=”#”>不良反應≠疫苗一定有問題</a></p>
<p><a href=”#”>自如事件：無限放大的甲醛恐慌</a></p>
<p><a href=”#”>超越基因的遺傳： 你遺傳給後代的也許不只是基因資訊</a></p>
<p><a href=”#”>科學大家 |如何治癒癌症：個性化精準醫療將發揮大作用</a></p>
<p><a href=”#”>美國無人太空飛機執行第五次任務已一年 目的仍未知</a></p>
</body>
</html>
——————————————————————————————————————
3.10 影像
3.10.1 影像格式
常見影像格式有：JPG，PNG，GIF
JPG：有損壓縮的影像格式，支援色彩豐富的圖片
GIF ：簡單動畫背景透明
PNG: 無損壓縮，透明、交錯、動畫
3.10.2 插圖影像 <img />
<img src=”w3school.gif”>
img標籤有兩個重要屬性：src屬性 、 alt屬性
src屬性：影像路徑+文件名
alt屬性：當影像由於某種原因未打開時，影像的替換文本
3.10.3 絕對路徑與相對路徑
絕對路徑：以根目錄為基準<img src=”C:/site/logo.gif” />
相對路徑：以該文檔所在位置為基準<img src=”logo.gif” />
同級文件夾中：<img src=”images/logo.gif” />
上級文件夾中：<img src=”../logo.gif” />
3.11 區域div
——————————————
<div align=”center”> # align=center 居中
<h1>web 前端開發</h1>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</div>
——————————————
3.12 列表
3.12.1 無序列表 <ul> <li>
可以將多個超鏈接變成列表項，存儲為無序列表。
————————————————————————————————
<h1>Web 前端開發</h1>
<u1>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</u1>
————————————————————————————————
3.12.2 有序列表 <ol> <li>
例如排行榜，有些地方先後順序很重要，故採用有序列表
————————————————————————————————
<h1>web 前端開發</h1>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
————————————————————————————————
3.13 表格 table tr td th
以表格的方式呈現資訊
table——表 tr——表格行 td——普通單元格 th——表頭單元格
————————————————————————————————
<table border=”1″>
<tr>
<td>red</td>
<td>yellow</td>
</tr>
<tr>
<td>blue</td>
<td>green</td>
</tr>
</table>
————————————————————————————————
3.14 表單與表單元素
表單：是一個區域，用於採集用戶資訊
表單元素：文本框、按鈕、單選、複選、下拉列表、文本域
3.14.1 表單 <form>
action屬性：表示收集來的數據交於哪個網頁處理（後端範疇）
————————————
<form action=”數據處理網頁”>
表單元素
</form>
————————————
3.14.2 文本框、密碼框input
text與password的區別： text明文顯示，password則是用星號顯示
name屬性為資訊地址
——————————————————————————————
<form>
賬戶：<input type=”text” name=”userName” />
<br />
密碼：<input typy=”password” name=”userPsd” />
</form>
——————————————————————————————
3.14.3 按鈕 input——
按鈕：提交按鈕、重置按鈕
type：提交按鈕——submit 重置按鈕——reset
value：按鈕表面的文字
——————————————————————————
<form>
愛好：
<input type=”text”>
<input type=”submit” value=”確定” />
<input tyoe=「reset」 value=「重置」 />
</form>
——————————————————————————
3.14.4 單選框、複選框input——radio checkbox
單選框：只能選則一項 複選框：任意選擇多項
type：單選框——eadio 複選框——checkbox
value：表示要提交到後端的數據
name：當前這一項的名稱（單選框name值相同，複選框name值不同）
checkd：當前這一項是否被默認選擇，一般為第一項
——————————————————————————————————
<form>
性別：
男 <input type=”radio” value=”boy” name=”gender” checkd=”checked” />
女 <input type=”radio” value=”girl” name=”gender” />
<br />
愛好：
<input type=”checkbox” value=”1″ name=”music” checkd=”checked” /> 音樂
<input type=”checkbox” value=”2″ name=”sport” /> 體育
<input type=”checkbox” value=”3″ name=”reading” /> 閱讀
</form>
——————————————————————————————————
3.14.5 下拉列表框 selected option
selected=”selected” 即為被選擇的一項
——————————————————————
<select>
<option> 選項1 </option>
<option selected=”selected”> 選項2 </option>
</select>
——————————————————————
3.14.6 文本域 Textarea
<textarea rows=”行數” cols=「列數」> 文本 </textarea>
——————————————————————————————————
<form>
個人簡介：<br >
<textarea cols=”50″ rows=”10″>
在這裡輸入內容
</textarea>
<br />
<input type=”submit” value=”確定” />
<input tyoe=「reset」 value=「重置」 />
</form>
——————————————————————————————————
4. web語義化
4.1 概述
Web語義化：讓頁面具有更好的結構與含義，從而讓人和機器都能快速理解網頁內容
優點：1.結構清晰，利於團隊的開發、維護
2.有利於搜索引擎理解
3.SEO(Search Engine Optimization) 搜索引擎優化
4.容易兼容不同設備。
4.2 em strong 均成對使用
<em> = <i>: emphasize 斜體
<strong> = <b>：strong 加粗
4.3 dl，dt，dd
————————————————
<dl>
<dt>HTML</dt>
<dd> 超文本標記語言 </dd>
<dt>CSS<dt>
<dd>層疊樣式表</dt>
</dl>
————————————————
輸出：
————————————————
HTML
超文本標記語言
CSS
層疊樣式表
————————————————
5. sublime 快捷鍵
alt+shift+2 分成兩屏
alt+shift+1 回到單螢幕
ctrl+s 保存
ctrl+/ 注釋
ctrl+shift+/ 取消注釋
按下ctrl單擊多處，可以多處同時編輯
配合Tab快捷鍵：
！ HTML5文件結構
p*4 四個段落
> 嵌套
ul>li*n 快速生成無序列表
table>tr*m>td*n 生成m*n的表格
p{段落內容} 生成含內容的段落
