B/S架構
B是browser（瀏覽器）用戶使用的所有客戶端（部分手機app，小程序），我們都可以把它視為瀏覽器，S是server（服務器）。瀏覽器發出請求，通過http等互聯網協議，發送至S端服務器，S端把網頁文件發送給前端，B端瀏覽器收到文件后，瀏覽器解析成圖形界面，可供用戶操作。
HTML基礎標簽
<!DOCTYPE html>
<!-- html5,html語言的第五個版本
超文本標記語言
一處發布，到處可以查看
上面是HTML5的標識，告訴瀏覽器這是按照
HTML5標准寫的代碼
-->
<html>
<head>
<!-- 頭部，頁面背景上的設置 -->
<meta charset="utf-8">
<!-- meta元標簽 -->
<!-- charset編碼格式 -->
<!-- GB-2312國家標准
GBK國家標准擴展包 -->
<title>Hello，World！</title>
</head>
<body>
<div>無實意標簽</div>
<p>段落</p>
<span>無實意標簽</span>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180826%2F56195667faad4b97be4b66f55a9b1e9d.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638327866&t=063a07f5b16adc69b0d00fc04737bfbb">
<ul type="circle">
<!-- 無序列表 -->
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
</ul>
<ol type="i">
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li><li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li><li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li><li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li><li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
</ol>
<input type="text" name="">
<input type="number" name="">
<input type="password" name="">
<!-- 單選框 -->
性別：
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
<!-- 復選框 -->
<input type="checkbox" name="">
<a href="https://www.baidu.com">
百度一下
</a>
<h1>1級標題</h1>
<h2>2級標題</h2>
<h3>3級標題</h3>
<h4>4級標題</h4>
<h5>5級標題</h5>
<h6>6級標題</h6>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- css層疊樣式表
特點：
1.繼承性
2.層疊性，可被覆蓋
-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- 外部樣式表/鏈入樣式表 -->
<style type="text/css">
/*頭部樣式表*/
ul{
background: lightgreen;
}
li{
color: blue;
}
</style>
</head>
<body>
<div style="width: 100px;
height: 100px;
background-color: lightblue;">
<!-- 行內樣式表，極差，不允許使用 -->
</div>
<ul>
<li>aaaaa</li>
<li class="xiaoHong">bbbbbb</li>
<li id="xiaoMing">cccccc</li>
<li class="xiaoHong">dddddd</li>
<li>eeeeee</li>
</ul>
</body>
</html>
li{
color: red;
/*標簽選擇器*/
}
#xiaoMing{
color: pink;
}
/*id選擇器，id唯一且不重復*/
.xiaoHong{
color: lightblue;
}
/*class類名選擇器*/
/*css優先級*/
/*1.后來者居上，越往后越說了算*/
2.行內樣式>頭部樣式>=外部樣式
3.越精確越說了算id>class>標簽
4. ！important優先級最最高，但是不到最迫不得已的時候不要用。
駝峰命名法
xiaoming小駝峰命名法，xiaoMing大駝峰命名法，xiao_ming 下划線命名法。
··表現與結構分離··
表現：css
結構：html
width:寬度
height:高度
background:背景(是一個符合屬性)
HTML 的路徑
絕對路徑：指目錄下的絕對位置，可以直接找到目標位置，通常從磁盤開始的路徑，即完整描述文件位置的路徑為絕對路徑。主要形式有：
網址：https://www.baidu.com
本地文件路徑：D:/web前端學習/biaoqian.html
相對路徑：指由當前文件所在的路徑引起其它文件的路徑關系，（以當前的文件為參照物，去尋找其他文件的一種路徑方式，在開發項目中經常使用）
同級目錄：直接寫文件名信息
下一級目錄：/imgs/1.jpg
返回上一級目錄：../imgs/1.jpg
返回多層上級目錄：../a/imgs/1.jpg