一 介紹web開發(fā)
Web：全球廣域網，也稱萬維網，能夠通過瀏覽器訪問的網站
Web網站的工作流程：（前后端分離模式）
網頁有哪些組成？
文字、圖片、視頻、音頻、超鏈接
前端代碼通過瀏覽器的解析和渲染變成用戶看到的頁面，對網頁進行解析渲染的部分就是瀏覽器的內核
Web標準
不同的瀏覽器解析相同的前端代碼也可能會有不同的效果，為了統(tǒng)一渲染的效果，制定了一個標準：web標準，也叫做網頁標準，由萬維網聯(lián)盟負責制定。
三個組成部分：
HTML：網頁的結構（頁面的元素和內容）
CSS：網頁的表現(xiàn)（網頁元素的外觀 位置頁面等樣式）
JavaScript：網頁的行為（交互效果）
二 HTML與CSS
HTML：（HyperText Markup Language）超文本標記語言，超越了文本限制，比普通文本更強大，除了文字信息還可以定義圖片音頻視頻等內容。標記語言，由標簽構成的語言。
標簽都是預定好的，例如：<a>展示超鏈接，<video>展示視頻。HTML代碼在瀏覽器中運行，由瀏覽器解析。
CSS：（Cascading Style Sheet）層疊樣式表，用于控制網頁的樣式。
參考學習文檔:
w3school 在線教程
特點：
1 HTML中不區(qū)分大小寫
2 src引用中屬性可以使用雙引號也可以使用雙引號
3 語法結構不夠嚴謹，刪除標簽中后面的</>部分依然能顯示
三 編譯軟件
VSCode：Visual Studio Code - Code Editing. Redefined
四 HTML和CSS的具體應用
4.1 標題排版
<!DOCTYPE html> <!-- 文檔格式是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>焦點訪談：中國底氣</title>
</head>
<body>
? ? <!-- img :
? ? ? ? src：圖片資源路徑
? ? ? ? width：寬度
? ? ? ? height：高度
? ? ? ? 路徑的書寫方式：
? ? ? ? 1 絕對路徑：盤符指定的路徑 ?網頁指定的路徑? ? ?
2 相對路徑：./是當前路徑 可以省略 ?
? ? ? ? ? ? ? ? ?../是上一級路徑 不可省略 ./image1.jpg
? ? ? ?width :px 像素 ? 百分比 ? ? ? ? ?
? ? -->
? ? <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" > 新浪政務 > 正文
? ? <h1 >中國底氣 新思想夯實大國糧倉</h1>
? ?
? ? <hr>
? ? 2023年05月17日 22:00 央視網
? ? <hr>
</body>
</html> 運行后樣式：
?4.2 標題樣式
CSS的引入方式：
·行內樣式，分號分隔
·內嵌樣式，一般定義在head中，h1 hr叫做選擇器，定義好后，整個頁面選擇器的樣式都會改變
·外聯(lián)樣式：單獨定義一個.css的文件，通過link標簽在網頁中引入。
代碼
<!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>焦點訪談：中國底氣</title>
?<!-- 方式二 ?針對當前頁面有效-->
? ? <!-- <style>
? ? ? ? h1{
? ? ? ? ? ? color: aqua;
? ? ? ? }
? ? </style> -->
<!-- 方式三 link -->
? ? <link rel="stylesheet" href="css/news.css">
</head>
<body>
? ? <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" > 新浪政務 > 正文
<!-- 方式一 ?只針對該條目有效-->
? ? <!-- <h1 style="color: antiquewhite;" >中國底氣 新思想夯實大國糧倉</h1> -->
? ? <h1>中國底氣 新思想夯實大國糧倉</h1>
? ?
? ? <hr>
? ? 2023年05月17日 22:00 央視網
? ? <hr>
</body>
</html> ?css代碼：
?文章來源地址http://www.zghlxwxcb.cn/news/detail-554616.html
顏色的表示：
1 英文單詞表示：blue、red、green
2 rgb表示法：紅綠藍三原色rgb(0,0,0)---rgb(255,255,255)
3 十六進制 #開頭 #000000兩位為一個顏色 從左到右分別是紅綠藍
谷歌拾色器插件：live color picker
Span是沒有實際作用的標簽，用于在一行內顯示不同元素進行一個分割作用
?<span style="color: ?gray;">2023年05月17日 22:00</span> <span>央視網</span>CSS選擇器：用來選取需要樣式的元素
?
? <span id="time">2023年05月17日 22:00</span> <span>央視網</span>
#time{
? ? color: gray;
}4.3 超鏈接
代碼
<!-- 屬性：
? ? ? ? href：指定資源訪問的url
? ? ? ? target：在何處打開資源鏈接
? ? ? ? ? _self：默認值 在當前頁面打開
? ? ? ? ? _blank：在空白頁面打開-->
<a target="_blank">新浪政務</a> ?> 正文CSS樣式：
a{
? ? color: black;
? ? text-decoration: none; /*超鏈接去除下劃線*/
}4.4?正文
代碼：
?<!-- 視頻標簽Video
? ? ? ? src：規(guī)定視頻的URL
? ? ? ? controls：顯示播放控件
? ? ? ? width：視頻播放器的寬
? ? ? ? height：視頻播放器的高 -->
? ? <!-- 音頻 audio
? ? ? ? ?src：規(guī)定視頻的URL
? ? ? ? controls：顯示播放控件-->
? ? <!-- 段落 p -->
? ? <!-- 文本加粗 ?b /strong ?-->
? ? <p>
? ? ? ? <video src ="E:\Vlog\kkk.mp4" controls
? ? ? ? width="400px"></video>
? ? </p>
? ? ? ?
? ? <p>
? ? ? ? <audio src="E:\Vlog\xjy.mp3" controls></audio>
? ? </p>
? ? <p>
? ? ? ? <b>遼寧省</b>醫(yī)療保障局在回復中表示，遼寧省醫(yī)保局高度重視促進人口生育相關政策，認真貫徹落實《關于進一步完善和落實積極生育支持措施的指導意見》（國衛(wèi)人口發(fā)〔2022〕26號）“逐步將適宜的分娩鎮(zhèn)痛和輔助生殖技術項目按程序納入基金支付范圍”的工作要求，組織專家開展討論。
? ? ? ? 遼寧省醫(yī)療保障局表示，2023年5月5日，印發(fā)了《關于調整遼寧省基本醫(yī)療保險、工傷保險和生育保險醫(yī)療服務項目目錄的通知》（遼醫(yī)保〔2023〕33號），將胚胎培養(yǎng)、胚胎移植術等18項輔助生殖項目納入我省生育保險目錄，擬于2023年7月1日全省執(zhí)行。
? ? ? ?
? ? ? ? 澎湃新聞記者注意到，目前，遼寧省醫(yī)療保障局網站尚未公布“遼醫(yī)保〔2023〕33號”這一已經印發(fā)的文件。
? ? </p>
? ? ? <p> ? ?
?? ? ? <strong>《遼寧省2022年國民經濟和社會發(fā)展統(tǒng)計公報》</strong>顯示：根據1‰人口抽樣調查推算，遼寧省2022年末常住人口4197萬人；全年出生人口17.2萬人，出生率為4.08‰；死亡人口38.1萬人，死亡率為9.04‰；人口自然增長率為-4.96‰。
? ? ? </p> ?
? ? ? <img src="E:\Vlog\test.png" height="400px">
? ? ? <p>
? ? ? ? 近年來，全國各地關于將試管嬰兒、輔助生殖項目納入醫(yī)保的呼聲漸高。北京市2022年一度擬將16項輔助生殖技術項目納入醫(yī)保甲類報銷范圍，后來暫緩執(zhí)行。
? ? ? </p>
? ? ? <p id="end">
? ? ? ? 責任編輯：橙子
? ? ? </p>CSS樣式：
p{
? ? text-indent: 35px; ? ?/*設置首行縮進 */
? ? line-height: 30px; ? ?/*設置行高 */
}
#end{
? ? text-align: right; ? /*設置文字對齊方式 */
}4.5 布局
盒子：頁面上的所有元素都可以看成一個盒子，由盒子將頁面中的元素包含在一個矩形內，通過盒子的視角更方便進行頁面布局
盒子模型組成：內容區(qū)域、內邊距區(qū)域、邊框區(qū)域、外邊距區(qū)域
布局中兩個常用的標簽：<div> ?<span>
<!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>盒子模型</title>
? ? <style>
? ? ? ? div{
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? box-sizing: border-box; ?/*指定width height為盒子的寬高*/
? ? ? ? ? ? background-color: aquamarine; /*背景色*/
? ? ? ? ? ?
? ? ? ? ? ? padding: 20px; /*內邊距 ?“上右下左 ” 四個值都一樣可以簡寫為一個值*/
? ? ? ? ? ? ? border: 15px solid orange;/*邊框 ?“ 寬度 線條類型 顏色”*/
? ? ? ? ? ? margin: 30px; /*外邊距 ?“上右下左 ” 四個值都一樣可以簡寫為一個值*/
? ? ? ? }
? ? </style>
</head>
<body>
? ?<div>orangeorangeorange</div>>
? ?
</body>
</html>在div框里添加了一行單詞，然后效果是這樣的：
?然后在之前的新聞里加入CSS樣式，
#center{
? ? width: 65%;
? ? margin: 0% 17.5% 0% 17.5%;
}Body里的內容用div包起來，這樣就能保證內容在頁面上是居中顯示的
? <div id="center">
</div >4.6 表格
在網頁中以行列的形式整齊的展示數據
代碼：
? <!-- trd代表行 th代表表頭 ?td是單元格中的內容
cellspacing="0"表示單元格中間的間距是0-->
? ? <table border="1px" cellspacing="0" width="300px">
? ? ? ? <tr>
? ? ? ? ? ? <th>序號</th>
? ? ? ? ? ? <th>姓名</th>
? ? ? ? ? ? <th>年齡</th>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>21841001</td>
? ? ? ? ? ? <td>小芳</td>
? ? ? ? ? ? <td>19</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>21841005</td>
? ? ? ? ? ? <td>小麗</td>
? ? ? ? ? ? <td>19</td>
? ? ? ? </tr>
? ? </table>
?4.7 表單
場景：在網頁中主要用于負責數據采集功能，注冊登錄等
標簽：<form>
?<!-- form 表單
? ? input 表單項 通過type控制輸入形式
? ? select 定義下拉列表
? ? textarea 定義文本域
? ? action+URL 規(guī)定提交表單時向誰發(fā)送數據 ?不指定默認提交當前頁面
? ? method ?規(guī)定用于發(fā)送表單數據的方式 ? get ?post-->
? ? <form action="" method="get">
? ? ? ? 用戶名 <input type="text" name="username">
? ? ? ? 年齡 <input type="text" name="age">
? ? ? ? <input type="submit" value="提交">
? ? </form>
?
輸入用戶名orange年齡18后點擊提交，URL變化如下：
file:///E:/pro_web/HTML/%E8%A1%A8%E5%8D%95.html???
--->>
file:///E:/pro_web/HTML/%E8%A1%A8%E5%8D%95.html?username=orange&age=18
post請求，在網頁中打開開發(fā)者模式，然后看到：
?
?Input中的type類型：
?Select：定義下拉列表，option定義列表項
代碼：
? ? <form action="" method="post">
? ? ? ? 用戶名 <input type="text" name="username"> <br><br>
? ? ? ? 年齡 <input type="text" name="age"> <br><br>
? ? ? ? 性別<label><input type="radio" name="gender" value="1"> 男 </label> ?
? ? ? ? <label><input type="radio" name="gender" value="2"> 女 </label> ?<br><br>
? ? ? ? 愛好<label><input type="checkbox" name="hobby" value="java">Java</label>
? ? ? ? 愛好<label><input type="checkbox" name="hobby" value="python">python</label> <br><br>
? ? ? ? 照片<input type="file" name="img"><br><br>
? ? ? ? 郵箱<label><input type="email" name="email"></label><br><br>
? ? ? ? 學歷<select>
? ? ? ? ? ? <option value="">-------請選擇--------</option>
? ? ? ? ? ? <option value="1">大專</option>
? ? ? ? ? ? <option value="2">本科</option>
? ? ? ? ? ? <option value="3">碩士</option>
? ? ? ? ? ? <option value="4">博士</option>
? ? ? ? </select><br><br>
? ? ? ? <input type="button" value="按鈕">
? ? ? ? <input type="reset" value="重置">
? ? ? ? <input type="submit" value="提交">
</form>
五JavaScript
JavaScript簡稱JS，是一個跨平臺面向對象的腳本語言，用來控制網頁行為的，能使網頁可交互
?5.1 JS的引入
內部腳本：
將JS代碼定義在HTML頁面中
1 JS代碼必須在<script></script>之間
2 在Html中可以在任何位置放置任何數量的script
3 一般會把腳本代碼置于body的下面 可以改善顯示速度
代碼：
<body>
? ? <script>
? ? ? ? alert("Hello world")
? ? </script>
</body>外部腳本：
將JS代碼定義在外部js文件中，然后引入到HTML頁面中
1 外部JS文件只包含JS代碼，不包含script標簽
2 <script>標簽不能自閉和
<body>
? ?<script src=" js/demo.js"></script>
</body>
alert("外部引用 hello JS")5.2 JS的基礎語法
書寫語法
1 區(qū)分大小寫
2 每一行后的分號可有可無
3 ?//單行注釋 ??/*多行注釋*/
4 大括號表示代碼塊
輸出語句
window.alert("彈框輸出")
document.write("瀏覽器輸出")
console.log("控制臺輸出")變量
var 聲明變量 ??var a=10; ??a=”張三”;
JS是一種弱類型的語言，變量可以存放不同類型的值。
變量名的規(guī)則：
1 組成字符可以是任何字母 數字 下劃線 $
2 數字不能開頭
3 建議用駝峰法
{
? ? var a=10;
? ? var a="張三"
}
window.alert(a)
//var定義的是全局變量
//var定義出來的變量是可以重復定義的 后定義的會將之前的覆蓋掉//let ?定義的變量只在作用域內有效 是局部變量 ?且不能重復定義? ?
let a=10;
window.alert(a)
//?const關鍵字用來聲明一個只讀變量，一旦聲明就不能改變數據類型
原始數據類型和引用數據類型
var number =1 ;//數字
string //字符串
boolean //布爾
null //對象為空
undefined //聲明的變量未初始化時 默認值是undefined獲取數據類型 typeof
alert(typeof 1) ?//number
alert(typeof "A") ?//string
alert(typeof A) ?//undefined
alert(typeof false) //boolean
alert(typeof null) ?//object運算符
==會進行類型轉換 然后再比較 ?
===不會進行類型轉換 ?直接比較
var a=10;
alert(a=="10") //true
alert(a==="10") //false
alert(a==10) //true//字符串轉換為數字
var a=10;
alert(parseInt("12")) //12
alert(parseInt("12AAA")) //12
alert(parseInt("BABA")) //NaN ?(not a number)其他類型轉換為boolean
Number：0和NaN是false ?其他均轉換為true
String：空字符串是false ?其他均轉換為true
null和undefined均轉換為false ?
流程控制語句
if... else
switch
for
while
do ?while
5.3 函數
//函數 function
function funName(a,b){
? ? return a+b;
}
var dec=function funName1(c,d){
? ?return c-d;
}
alert(dec(2,1)) //1
alert(funName(2,8)) //10注意：1 形參不需要有類型
2 返回值也不需要定義類型 直接返回即可
5.4 對象
Array
var arr=new Array(1,2,3);
var arr=[1,2,3];
//訪問
alert(arr[1]) JS中的數組長度可變，數組中的類型可以多種多樣
屬性：length
方法：forEach()遍歷 每個有值元素 ???
push()將新元素添加至末尾返回新長度 ?順序執(zhí)行 ???
splice(start,stop)刪除 ???刪除包含首尾元素
var arr=new Array(1,2,3,5);
arr[10]=90;
for (let index = 0; index < arr.length; index++) {
? ? const element = arr[index];
? ? console.log(arr[index]);
? ?
}
arr.forEach(function(e){
? ? console.log(e);
})
?Foreach，僅僅遍歷有值的元素
?
String
var s = new String("hello world");
var s2="hello js"
var s3='hello js 單引號' 
?
屬性：length
方法：
chatAt：返回指定位置的字符
indexof：檢索字符串的位置
trim：去掉字符串兩邊的空格
substring：提取字符串中兩個指定的索引號之間的字符 （含頭不含尾）
JSON
JS自定義對象：
var obj ={
? ? name:"ab",
? ? age:20,
? ? run(){
? ? ? ? alert("run");
? ? }
}
//調用
obj.name;
obj.run();
JSON：JavaScriptObjectNotation，通過JavaScript對象標記法書寫的文本。
Key:用雙引號包裹起來
Value:數字、字符串、邏輯值（true false）、 數組[]、對象{}、null
//定義JSON字符串：
var jsonStr='{"name":"Tom","age":18,"hobby":["java","JS","C++"]}'
//JSON字符串轉JS對象：
JSON.parse(jsonStr);
//JS對象轉JSON字符串：
JSON.stringify()????
BOM?
Browser Object Model 瀏覽器對象模型
Window：瀏覽器窗口對象
Navigator:瀏覽器對象
Screen：屏幕對象
Location：地址欄對象
History：歷史記錄對象
Window:
window.alert()，可以省略window
alert()：顯示帶有一段消息和確認按鈕的警告框
?
confirm ()：顯示帶有一段消息及確認按鈕和取消按鈕的對話框 點確認是true 取消是false
?setInterval()：按照指定的周期來調用函數或計算表達式
setInterval(function(){
? ? console.log(1);
},2000) //每隔兩秒打印一個1
?setTimeout()：在指定的毫秒數后調用函數或者計算表達式
?
Location:
屬性：href，設置或顯示完整的URL
alert(location.href);
代碼：
window.location.href="https://www.w3school.com.cn/js/js_window.asp";
結果：直接跳轉到該網頁
DOM
Document Object Model，將標記語言的 各個組成部分封裝成對象。
一 所有文檔類型的標準模型
Document：整個文檔對象
Element：元素對象 每一個標簽封裝成一個元素對象
Attribute：屬性對象 ?標簽中的屬性
Text：文本對象 ?標簽中的文本
Comment：注釋對象 ?
Dom樹：
?
JavaScript通過Dom，就能對HTML進行操作，
1 改變HTML元素的內容
2 改變HTML元素的樣式
3 對HTML DOM事件做出反應
4 添加和刪除HTML元素
HTML的element可以通過document對象獲取，而document是通過window對象獲取的
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>JS對象－DOM</title>
</head>
<body>
? ? <img id="h1" src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> <br><br>
? ? <div class="cls">傳智教育</div> <br>
? ? <div class="cls">黑馬程序員</div> <br> ? ?
? ? <input type="checkbox" name="hobby"> 電影
? ? <input type="checkbox" name="hobby"> 游戲
? ? <input type="checkbox" name="hobby"> 看書
? ? <input type="checkbox" name="hobby"> 滑板
? ?
? ?
</body>
<script>
? ? //1 獲取element元素
? ? //1.1 根據ID獲取
? ? var img=document.getElementById("h1");
? ? alert(img);
? ? //1.2 根據標簽獲取
? ? var arr=document.getElementsByTagName("div");
? ? for(let i=0;i<arr.length;i++){
? ? ? ? const ele=arr[i];
? ? }
? ? //1.3 根據name獲取
? ? var arr1=document.getElementsByName("hobby");
? ? for(let i=0;i<arr1.length;i++){
? ? ? ? const ele=arr1[i];
? ? }
? ? //1.4 根據class屬性獲取
? ? var arr2=document.getElementsByClassName("cls")
? ? for(let i=0;i<arr2.length;i++){
? ? ? ? const ele=arr2[i];
? ? }
? ? //2 參考手冊 找到對應標簽的屬性 方法
? ? var ele2=arr2[0];
? ? ele2.innerHTML="傳智教育哈哈哈"; //把傳智教育改成傳智教育哈哈哈
? ?
</script>
</html>//總結：
//1 拿到element對象
//2 根據標簽屬性去更改設置對應的方法或者屬性
? ? var img=document.getElementById("h1");
img.src("");5.5 JS事件
事件：HTML事件是發(fā)生在HTML元素上的事情，比如：
1 按鈕被點擊
2 鼠標移動到元素上
3 按下鍵盤
事件監(jiān)聽：JS在監(jiān)測到事件的時候執(zhí)行的代碼
事件的綁定
1 通過HTML中標簽中的事件屬性進行綁定
2 通過DOM元素綁定
<body>
? ? <button type="button" id="id1" value="事件綁定1" onclick="on()"></button>
? ? <button type="button" id="id2" value="事件綁定2"></button>
</body>
<script>
? ? //通過HTML事件屬性進行綁定
? ? function on(){
? ? ? ? alert("按鈕1被點擊");
? ? }
? ? //通過DOM元素進行綁定
? ? document.getElementById("id2").onclick=function(){
? ? ? ? alert("按鈕2被點擊");
? ? };
</script>常見事件
文章來源：http://www.zghlxwxcb.cn/news/detail-554616.html
?
到了這里，關于前端全集Ⅰ---- HTML/CSS/JavaScript的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
![[HTML]Web前端開發(fā)技術26（HTML5、CSS3、JavaScript ）JavaScript基礎——喵喵畫網頁](https://imgs.yssmx.com/Uploads/2024/02/828994-1.png)
![[HTML]Web前端開發(fā)技術7（HTML5、CSS3、JavaScript ）CSS的定位機制——喵喵畫網頁](https://imgs.yssmx.com/Uploads/2024/02/755631-1.png)
![[HTML]Web前端開發(fā)技術9（HTML5、CSS3、JavaScript ）——喵喵畫網頁](https://imgs.yssmx.com/Uploads/2024/02/777294-1.png)
