HTML和CSS (前端共三篇)【詳解】

一、前端開發介紹

二、HTML入門

三、HTML基礎標簽

四、CSS樣式修飾

五、HTML表格標簽

六、HTML表單標簽

一、前端開發介紹

????????web應用有BS和CS架構兩種，其中我們主要涉及的是BS架構。而BS架構里，B（Browser瀏覽器）是客戶端的角色，它負責與用戶交互：給用戶展示數據、收集用戶輸入的數據。

????????前端頁面是在瀏覽器里渲染顯示的，而同一頁面在不同瀏覽器里顯示的效果是有差異的，所以建議大家都使用chrome瀏覽器

前端開發有一套Web標準也稱為網頁標準，由一系列的標準組成，大部分由W3C（ World Wide Web Consortium，萬維網聯盟）負責制定。由三個組成部分：

HTML：負責展示內容、收集數據。但是不好看
CSS：負責修飾HTML的樣式。
JavaScript：負責網頁的行為（交互效果）

二、HTML入門

1.HTML: HyperText Markup Language，超文本標記語言。

超文本：超越了文本的限制，比普通文本更強大。除了文字信息，還可以定義圖片、音頻、視頻等內容。
標記語言：由標簽構成的語言
- HTML標簽都是預定義好的。例如：使用<h1> 標簽展示標題，使用<img>展示圖片。
- HTML代碼直接在瀏覽器中運行，HTML標簽由瀏覽器解析。

?2. HTML快速入門

????????第一步:創建一個名為HTML的文件夾

????????第二步：創建一個文本文件，然后修改文件名為hello.html,注意文件的后綴是.html

????????第三步：選中文件，鼠標右擊，選擇使用記事本打開文件，并且編寫前端代碼

<html><head><title>HTML 快速入門</title></head><body><h1>Hello HTML</h1></body>
</html>

第四步：然后選中文件，鼠標右擊，選擇使用瀏覽器打開文件，結果是 Hello HTML?

3. 開發工具VSCode

????????

Visual Studio Code（簡稱 VS Code ）是 Microsoft 于2015年4月發布的一款代碼編輯器。VS Code 對前端代碼有非常強大的支持，同時也其他編程語言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常強大的插件庫，大大提高了開發效率。
官網： https://code.visualstudio.com

右鍵點擊Open with Live Server運行

三、HTML基礎標簽

1.文本類標簽，是html提供的用于展示文本內容的標簽，是html里非常常見的基礎標簽。

????????2. 路徑的寫法

????????無論是前端開發還是后端開發，都會經常用到路徑，那么前端開發中路徑是怎么寫的呢？同樣有兩種寫法：

絕對路徑：指完整路徑

磁盤文件的絕對路徑：C:\img\a.jpg 或者 /Users/tom/abc.jpg。前端開發中不要使用這種路徑

互聯網網址絕對路徑(url)：http://www.baidu.com。注意：url中開頭的http或者https等不能省略，必須寫
相對路徑：指想要加載的目標資源，和當前資源的相對位置。有兩種寫法：

以./開頭的路徑：表示從當前目錄加載資源，其中./可以省略。例如
- ./hello.html表示從當前目錄里加載hello.html頁面文件
- hello.html等價于./hello.html
以../開頭的路徑：表示從上級目錄里加載資源，其中../不能省略。例如：
- ../welcome.html 表示從上組目錄里加載welcome.html

?????????3. 顏色的寫法

????????4.尺寸的寫法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文體類標簽</title>
</head>
<body><h1>公司簡介</h1><hr color="orange" size="2px"><p><b>"中關村黑馬程序員訓練營"</b>是由<a href="http://www.itcast.cn" target="_blank">傳智播客</a>聯合中關村軟件園、CSDN， 并委托傳智播客進行教學實施的軟件開發高端培訓機構，致力于服務各大軟件企業，解決當前軟件開發技術飛速發展， 而企業招不到優秀人才的困擾。<br>目前，“中關村黑馬程序員訓練營”已成長為行業“學員質量好、課程內容深、企業滿意”的移動開發高端訓練基地， 并被評為中關村軟件園重點扶持人才企業。</p><p>黑馬程序員的學員多為大學畢業后，有理想、有夢想，想從事IT行業，而沒有環境和機遇改變自己命運的年輕人。 黑馬程序員的學員篩選制度，遠比現在90%以上的企業招聘流程更為嚴格。任何一名學員想成功入學“黑馬程序員”， 必須經歷長達2個月的面試流程，這些流程中不僅包括嚴格的技術測試、自學能力測試，還包括性格測試、壓力測試、 品德測試等等測試。毫不夸張地說，黑馬程序員訓練營所有學員都是精挑細選出來的。百里挑一的殘酷篩選制度確 保學員質量，并降低企業的用人風險。</p><p>中關村黑馬程序員訓練營不僅著重培養學員的基礎理論知識，更注重培養項目實施管理能力，并密切關注技術革新， 不斷引入先進的技術，研發更新技術課程，確保學員進入企業后不僅能獨立從事開發工作，更能給企業帶來新的技術體系和理念。</p><p>一直以來，黑馬程序員以技術視角關注IT產業發展，以深度分享推進產業技術成長，致力于弘揚技術創新，倡導分享、 開放和協作，努力打造高質量的IT人才服務平臺。 </p>
</body>
</html>

2. 媒體類標簽

????????

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>媒體標簽</title>
</head>
<body><img src="img/1.jpg" width="500px"><video src="video/1.mp4" controls width="500px"></video><audio src="audio/1.mp3" controls></audio>
</body>
</html>

四、CSS樣式修飾

1.CSS: Cascading Style Sheet，層疊樣式表，用于控制頁面的樣式（表現）

????????div和span標簽

????????有任何特殊的顯示效果和特殊功能，所以可以使用CSS添加幾乎任何樣式

? ? ? ??

<div>div里的內容沒有任何樣式，但是寬度會獨占一行
</div>
<span>span里的內容同樣沒有任何樣式，但是寬度是由內容決定的。內容多大，就占多大空間
</span>

2. CSS基礎語法

? ? ? ? 1.CSS的引入方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS引入方式</title><!-- <style>div{color: blue;}</style> --><link rel="stylesheet" href="./css/demo.css">
</head>
<body><!-- ctrl + / 是注釋快捷鍵引入方式1：行內樣式，用的少在html標簽里直接加樣式代碼 style="css樣式屬性:值; css樣式屬性:值;"問題：要給一個標簽加樣式，就要修改這個標簽；如果要加的樣式很多，這個標簽里的內容會很長如果多個標簽要加相同的樣式，那么每個標簽里都得寫樣式--><!-- <div style="color: red;">黑馬程序員昌平Java418期秦宇迪和雷宇迪</div><div style="color: red;">黑馬程序員</div> --><!-- 引入方式2：內部樣式，用的多在head標簽里增加子標簽style，在style里寫css樣式書寫語法是：選擇要修飾的標簽 {css樣式屬性: 值;css樣式屬性: 值;}問題：只能選擇當前頁面里的標簽進行修飾。如果有多個頁面都要加相同的樣式，每個頁面里都得重復寫一次--><!-- <div>小紅</div><div>小明</div> --><!-- 引入方式3：外聯樣式，用的更多創建單獨的css文件（xxx.css），把樣式代碼寫到css文件里在html里的head標簽內使用link標簽引入css文件即可--><div>小紅15K</div><div>小明15K</div>
</body>
</html>

? ? ? ? 2.CSS選擇器

標簽選擇器：根據標簽名稱選擇要修飾的元素
id選擇器：根據標簽的id屬性值選擇要修飾的元素
class選擇器：根據標簽的class屬性值選擇要修飾的元素
特別注意的是如果一個標簽被選設置同樣的設置(比如都設置顏色，顏色不同)，既有標簽的設置，又有id的設置，又有class的設置，優先級? id > class > 標簽

<head><style>div{/*選中所有div標簽，設置div里內容顯示成紅色*/color: red;}#d1 {/*選中id為d1的標簽，設置內容顏色為藍色*/color: blue;}.cls{/*選中class屬性值為cls的標簽，設置內容顏色為綠色*/color: green;}        </style>
</head>
<body><div>hello</div><div>css</div><div id="d1">hello</div><span class="cls">hello</span><span class="cls">world</span>
</body>

3.CSS常用屬性

? ? ? ? 1.常用樣式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS常用樣式</title><style>div {color: red;font-size: 50px;font-family: '楷體';background-color: beige;/* 首行縮進。2em是2個中文字符的距離 */text-indent: 2em;/* 行高 */line-height: 100px;/* 當一行內容不滿時，水平就居中顯示 */text-align: center;}a{/* 設置文字的樣式。underline下劃線；overline上劃線；line-throgh刪除線；none無線條 */text-decoration: none;}</style>
</head>
<body><div>418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K</div><a href="http://www.baidu.com">跳轉到百度</a>
</body>
</html>

??????????2 頁面布局與盒子模型

????????????????所謂“盒子模型”，是指CSS把頁面中所有的元素（標簽），都看做是一個盒子，從而通過設置盒子的大小等樣式進行頁面布局。

????????

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>#inner{width: 200px;height:200px;background-color: yellow;}#box{background-color: lightgreen;width: 200px;height: 200px;border: green 50px solid;padding: 50px;margin: 50px;}</style>
</head>
<body><div id="box"><div id="inner"></div></div>
</body>
</html>

五、HTML表格標簽

? ? ? ? ?1.場景：在網頁中以表格（行、列）形式整齊展示數據

? ? ? ? ?2.表格標簽

????????

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表格</title><style>td {text-align: center; /* 單元格內容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0"  width="600px"><tr><th>序號</th><th>品牌Logo</th><th>品牌名稱</th><th>企業名稱</th></tr><tr><td>1</td><td> <img src="圖片路徑" width="100px"> </td><td>某公司</td><td>某某有限公司</td></tr><tr><td>2</td><td> <img src="圖片路徑"  width="100px"> </td><td>公司</td><td>某某團控股有限公司</td></tr></table></body>
</html>

六、HTML表單標簽

????????表單，是用于收集用戶所輸入的數據的組件

? ? ? ? 1.標簽介紹

<!--
01.表單標簽：form是一個容器，里邊用來放各種各樣的表單項。脫離開表單項，form標簽本身沒有任何作用屬性：name：名稱。可以不給名稱action：表單數據提交的路徑。如果沒有路徑，表示提交給當前頁面自己method：表單數據提交的方式。常用方式有get、post
-->
<form name="myform" action="" method="get"></form>

? ? ? ?2.get和post的區別（重點）

???????get方式：

????????????????數據是在HTTP請求行里提交的，會顯示到地址欄

????????????????安全性相對較低

????????????????參數長度有限制

????????post方式：

????????????????數據是在HTTP請求體里提交的，不會顯示到地址欄

????????????????安全性相對較高

????????????????參數長度理論上沒有限制

? ? ? ? 3.input標簽? ?

? ? ? ? 4.select下拉框標簽? ? ?

? ? ? ? 5.tetxtarea文本域標簽

????????如果需要讓用戶輸入大段的文本內容的話，可以使用textarea文本域標簽，它允許用戶輸入多行內容

<form method="post" action=""><!--文本框(text)，密碼框(password)：name：表單項的名稱。如果這個表單項的數據要提交，就必須有name屬性value：默認值-->帳號：<input type="text" name="username" value="默認值"> <br>密碼：<input type="password" name="password" value="123456"><br><!--單選按鈕(radio)，復選框(checkbox)：name：表單項名稱。如果這個表單項的數據要提交，就必須有namename相同的radio屬于同一組；同組radio的特性是：選擇互斥name相同的checkbox屬于同一組，但是同組的目的僅僅是方便服務端接收數據而已value：選項的值，每個選項都要有值。選中哪個選項，提交表單時就提交哪個選項的value值默認值：哪個選項想要默認選中，就在哪個選項上加屬性 checked="checked" 或者簡寫：checked-->性別：<input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex" value="female">女 <br>愛好：<input type="checkbox" name="hobby" value="sing" checked>唱<input type="checkbox" name="hobby" value="dance" checked>跳<input type="checkbox" name="hobby" value="rap" checked>rap<input type="checkbox" name="hobby" value="ball">籃球 <br><!--文件選擇框(file)name：如果這個表單項的數據要提交，就必須有name注意：默認情況下，文件選擇框提交的僅僅是文件名稱，而不是上傳文件-->文件：<input type="file" name="file"><!--隱藏域：不顯示到頁面上的表單項，但是在提交表單時，它的數據可以被提交（只要有name）type：hiddenname：如果數據要提交，就必須有namevalue：隱藏域的值實際使用場景：等學習到的時候再說--><input type="hidden" name="hide" value="隱藏域的值"><!--按鈕：普通按鈕(button)：沒有任何功能的按鈕，所以將來可以使用JavaScript自定義任何功能提交按鈕(submit)：點擊時會提交表單。按鈕在哪個表單里，就提交哪個表單重置按鈕(reset)：點擊時會把表單里所有表單項數據，恢復成默認值常用屬性：name：可以不設置。value：是按鈕上的文字--><input type="button" value="普通按鈕"><input type="submit" value="提交按鈕"><input type="reset" value="重置按鈕"><br><br><hr><!--下拉框：select標簽：下拉框本身name：如果下拉框的數據要提交，就必須有name屬性option標簽：下拉選項，要放在select標簽里邊使用value：選項的值。選中哪個選項，就提交哪個選項的value值默認值：如果沒有任何設置，默認選中第一個選項如果要手動設置默認值：哪個選項想要默認選中，就在哪個選項option上加屬性 selected="selected"或者簡寫 selected-->地址：<select name="address"><option value="tj">天津市</option><option value="bj" selected>北京市</option><option value="sh">上海市</option></select><!--文本域：textareaname：如果數據要提交，就必須有name屬性-->slogan：<textarea name="slogan" rows="5" cols="10" maxlength="5">默認值</textarea>
</form>

七、文檔閱讀