web前端
什么是web
使用瀏覽器去訪問的程序 web程序：習慣性叫他程序 細分：電商網站、門戶網站、應用網站
什么是web前端
web程序的代碼存儲在服務器端
代碼分兩種：一種運行在客戶端，一種運行在服務器端
運行在服務器端的代碼：后台代碼
運行在客戶端（瀏覽器）：前端代碼 （web前端）
完整的（優秀的）web程序：前端+后台
學什么
1.靜態頁面編寫：按照產品設計完成網頁的編寫（.html文件），可以在瀏覽器里運行 技術：html(5)+css3
2.添加頁面功能：動態特效，頁面交互技術：javascript,jQuery,DOM
3.和服務器的交互技術：sever，php，ajax
4.復雜開發：HTML5，框架技術（bootstrap，node，js，angular.js），移動端開發，微信開發
web基礎知識⭐
1.web與internet
1.internet 一個全球性的計算機互聯網絡，因特網，互聯網，交互網
2.Internet所提供的服務
1.email郵件服務 2.Telnet 遠程登錄 3.www服務 （world wide web）萬維網 4.bbs 電子公告板，俗稱論壇 5.FTP 文件的上傳下載
3.基本實現技術
1.分組交換原理（先拆分后重組） 2.tcp/ip協議
4.web
1.指的是網絡環境下的一種應用程序---網頁程序，簡稱網頁 作用：將各類信息和服務進行無縫連接，並且提供生動的圖形用戶界面。信息共享
5.工作原理
1.由服務器，瀏覽器，通信協議組成
通信協議：http（hyper text transfer protocol）超文本傳輸協議
瀏覽器：IE，Firefox火狐，chrome谷歌，Safari蘋果，opera歐朋
功能：
1.提交請求
2.作為HTML和js的解釋器
3.以圖形化的方式顯示文本
服務器：
功能：
1.存儲web上的信息
2.響應瀏覽器請求並且執行服務器端程序
3.具備基本的安全性功能
服務器產品：
tomcat
iis
Apache
服務器端技術：
python
Java
PHP
.net
都有數據庫訪問能力
前端技術：
HTML
css
js
運行在客戶端，由瀏覽器解析執行
HTML概述⭐
1.什么是HTML？
hyper text markup language
超級 文本 標記 語言
普通文本a：無特殊意義
超級文本<a>:超鏈接功能
超文本：文本具備特殊功能
標記：超文本的組成形式<a>
語言：擁有自己的語法結構
由HTML編寫的web文件，以.HTML或.htm作為后綴。
2.特點
1.以.HTML或.htm作為后綴
2.由瀏覽器解析執行
3.可以嵌套腳本語言（JavaScript，VBScript）
4.用帶有尖括號的“標記”來標識
3.HTML基礎語法
1.標記
什么是標記？
在HTML中，用於描述功能的符號，稱之為標記
2.語法
標記在使用時，必須用尖括號（<>）括起來
標記的分類：
1.封閉類型標記
也稱為雙標記，必須成對出現
<標記>內容</標記>
例如：<a>網頁</a>
注意：封閉類型標記必須成對出現，如果沒有被封閉，會產生意想不到的效果。
例如：
<p>段落一</p>
<h1>標題元素
<p>段落二</p>
2.非封閉類型
也稱為單標記或空標記
語法：<標記>或<標記/>
單標記不能包含內容
例如：
<br>或<br/>表示換行
<hr>或<hr/>表示橫線
<img>
3.元素
元素即標記（標簽）
4.元素的嵌套
元素之間可以相互嵌套，形成更為復雜的頁面結構
元素嵌套：在一個元素中，又出現另一個元素
<p>
<a>
<img>
</a>
</p>
注意：成對出現，成對縮進
5.屬性和值
1.什么是屬性
屬性用來修飾元素的
2.語法
屬性的聲明必須位於開始標記里
<標記 屬性=“值” 屬性=“值”...></標記>
<p align="center" id="p1">段落一</p>
3.標准屬性（只有以下4個）
1.id 用來定義元素在頁面中的唯一標識
2.title 鼠標移入到元素上時，所提示的文本內容
3.class CSS中引入類選擇器
4.style CSS中定義元素的行內樣式
6.注釋
在頁面中編寫完成后，不會被瀏覽器解析運行
可以將代碼的解釋說明寫在注釋中，便於其他程序員查看。
語法: <!--注釋內容-->
注意:
1.本身不能嵌套
<!--<!---->--> 錯誤的寫法
2.不能嵌套在<>中
3.HTML和XHTML和HTML5
w3c負責定制和推廣HTML
w3c：萬維網聯盟
1999年12月24日html 4.01標准
2000年1月26日w3c推出XHTML1.0標准
XHTML與html4.01幾乎相同
XHTML是一個更純凈的版本
如：<br>早XHTML中必須要求結束<br/>
2014年9月。HTML5目標：實現更簡潔的html代碼
能不寫就不寫，能少寫就少寫
例如：<br>或<br/>
<p align="center"></p>正確
<p align=center></p>正確
<input readonly="readonly">正確
<input readonly=readonly>正確
4.HTML文檔結構
1.文本類型的聲明
<!doctype html>
作用：指定HTML的版本和風格
2.HTML頁面
語法：<html></html>
位於<doctype html>之下
練習：創建一個網頁，名稱為01.html，並且搭建網頁結構（docype html）
3.html頁面內容
1.頁面頭部內容
作用：用來定義頁面的全局信息
2.語法
<head></head>
緊跟在html之后，是html中首個子元素
3.頭部所包含的內容
1.定義網頁的標題
<title>標題內容</title>在網頁的標簽頁顯示
2.定義網頁的編碼格式,關鍵字，描述等
<meta charset="utf-8">
<meta name="keywords" content="關鍵字">搜索欄里搜索的關鍵字
<meta name="description" content="描述內容">搜索完顯示的具體內容
3.<script></script>定義或引用javascript
4.<style></style>定義內部樣式
5.<link>引用外部樣式
4.頁面主體內容
語法：<body></body>
屬性：(寫在<body>中)
text：表示文本顏色
bgcolor：表示網頁的背景顏色
練習：
在已有網頁基礎上，完善網頁的頭元素和主體內容布局，在body中添加一行文本，設置文字顏色為紅色，背景顏色為黑色
文本標記⭐
1.特殊字符
1. 空格
2.>>
3.<<
4.©圈C，版權免責聲明字符
5.¥人民幣字符
2.文本樣式
1.<i></i>斜體
<u></u>下划線
<s></s>刪除線
<b></b>加粗
<sup></sup>上標
<sub></sub>下標
3.標題元素
以標題形式來顯示文本內容
語法：<hn></hn> n代表1-6數字
<h1></h1>一級標題，加粗，字號最大
...
<h6></h6>六級標題，加粗，字號最小
特點：
1.字體加粗
2.改變字體大小
3.上下文之間有空白間距
4.獨自成行
4.段落元素
語法：<p></p>
以段落的形式顯示文本
形式：字體大小為默認大小，段落獨自成行，並且上下文有垂直空白間距
5.換行元素
語法：<br>或<br/>
6.分割線元素
語法<hr>或<hr/>
屬性：
size：取值px為單位的數值
color：顏色
width：寬度
align：線條的水平對齊方式
7.預格式化
保留源文件中的格式，即源文件中的換行和空格的效果
語法：<pre></pre>
8.分區元素
1.塊分區
語法：<div></div>
形式：
1.獨自成行
2.無任何明顯效果
作用：布局
2.行分區
語法：<span></span>
形式：
1.多個span在一行內顯示
2.無任何特殊效果
作用：用來處理一行文字的不同樣式
標簽元素分類⭐
1.行內元素與塊級元素
1.行內元素
多個元素在一行內顯示
ex：
span，i，b,s,u,sub,sup,（img,a）
作用：大部分行內元素為了處理文本的顯示效果
2.塊級元素
每個塊級元素會獨占一行，即前后都有換行
ex：div，h1~h6,p,(結構標記)
作用：用來做布局
2.嵌套問題
1.盡量不要讓行內元素嵌套塊級元素
<span>
<div>
</div>
</span>
以上結構不推薦
2.段落元素<p></p>是不允許嵌套其他塊級元素（p也不能嵌套p）
圖像和鏈接
url⭐
1.目錄結構
目錄：web站點中文件夾的名稱
2.url
統一資源定位器，俗稱：路徑
作用：標識資源的位置
3.表現形式
1.絕對路徑
完整的路徑
1.網絡資源
通過以下四部分來獲取網絡資源的路徑
1.協議名:ex:http
2.主機名（域名/IP）ex:www.jd.com
3.目錄結構：ex:da/index/img
4.資源文件名：ex:logo.jpg
http://www.jd.com/da/index/img/logo.jpg
2.本機資源
從最高盤符處開始找，一直找到資源所在的目錄
ex:D:\yang\練習\img\flower.jpg
2.相對路徑
從當前文件位置處開始，一直到資源文件所在的位置，所經過的路徑就是相對路徑
1.同目錄
直接通過資源文件名稱進行引用
ex:a.jpg
2.子目錄
先進入到子目錄中，然后再對資源文件進行引用
ex:子目錄1/子目錄2/資源文件名稱
ex:index/img/b.jpg
3.父目錄
先返回到父級目錄再對資源文件進行引用
ex:../表示返回到上一級
ex:../c.jpg
3.根相對路徑
永遠都從web站點的根目錄開始找的
由/作為開始，表示web站點的根目錄
/index/img/d.jpg
圖像⭐
1.圖像格式
jpg(jpeg):有損壓縮
png：背景是透明
gif：動畫
2.圖像
語法：<img>
屬性：
src:(源)要顯示的圖像的路徑，url
width:寬度
height:高度
注意：
取值：數值px單位
width和height如果只指定其中一個屬性，那么另外一個也會跟着等比縮放。
title:鼠標移入停留時顯示的文字
alt:圖片出錯時，顯示的文字
練習：顯示三張圖片，要求圖片路徑位於同級，子級，父級目錄
3.鏈接
1.作用：鏈接，又稱超鏈接，設置頁面中允許 被點擊的內容。在網頁中，鏈接允許完成頁 面間的跳轉動作。
2.語法
標記：<a>內容</a>
屬性：
href:鏈接的URL（要跳轉到的頁面的地址）
target:目標，指定打開新網頁的方式
取值：
_self:（默認值）在自身的標簽頁中打開
_blank:在新的標簽頁中打開
title:鼠標放到鏈接上的提示
3.鏈接的表現形式
1.目標為下載資源
<a href="*.zip/*.rar"></a>
如果鏈接地址是壓縮文件，就是下載操作
2.電子郵件鏈接
<a href="mailto:932023756@qq.com">打開郵件</a>
注意:電腦必須裝有郵箱客戶端，不然是不能使用的！
3.返回頁面頂部的空鏈接
<a href="#">返回頁面頂部</a>
4.鏈接到JS
<a href="javascript:JS代碼">執行JS功能</a>
4.錨點
1.作用
在頁面中的某行位置處，做一個記號
方便頁面能夠隨時跳轉到記號位置處
2.使用方式
1.定義錨點
1.通過a標記的name屬性定義錨點
<a name="自定義錨點名稱">內容</a>
2.通過任意標記的ID屬性定義錨點
<ANY id="自定義錨點名稱"></ANY>
ANY任意的意思
2.鏈接到錨點
跳轉到本頁的錨點處
<a href="#錨點名稱">內容</a>
跳轉到其他頁面錨點處
<a href="頁面的url#錨點名稱">內容</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圖片</title> </head> <body> <img src="https://mmbiz.qpic.cn/mmbiz_jpg/9ic3KXmZicj8Kic9Pt8icf1iauibKwibKpODcibtUhmC2m8icdH7Lq8GUSbeq1cdLqpicjf8kUYVJXUEOqyzm7NmVfkjpR3w/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1" alt="頁面加在不出來了" title="這是一個圖片啊" style="width: 800px;"> <!-- title是我們將鼠標放在圖片時有提示的文字 --> <!-- alt 是當我們的圖片加載不出來的時候有顯示 --> <!-- style 是每個標簽中都有的一個屬性 這是一個內嵌的css樣式 --> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style media="screen"> div{ height: 800px; width: auto; } </style> </head> <body> <!-- 超鏈接 --> <a href="http://www.baidu.com" title="這是超鏈接" target="_self">點一下</a> <!-- 在當前窗口中打開內容 --> <a href="http://www.baidu.com" title="這是超鏈接" target="_blank">輕點點</a> <!-- 在新窗口中打開內容 --> <!-- 通過a標簽可以實現文件下載 --> <a href="路徑是一個壓縮包的路徑點擊的時候就是下載">下載文件</a> <!-- 通過a標簽可以實現郵件發送 --> <a href="mailto:932023756@qq.com">發送郵件給自己</a> <!-- 返回頂部 --> <a href="#">返回頂部</a> <!-- 錨點 --> <!-- a標簽定義錨點 --> <a name="a1"></a> <!-- 其它標簽定義錨點 --> <p id="p1" ></p> <!-- 跳轉錨點 --> <a href="#NOM2">跳轉到目錄二</a> <div id="NOM1">目錄一</div> <p>內容</p> <div id="NOM2">目錄二</div> <p>內容</p> <a href="#NOM1">跳轉到目錄一</a> <div id="NOM3">目錄三</div> <p>內容</p> </body> </html>
表格⭐
1.表格的作用
按照一定的格式（結構）來顯示數據
表格是由單元格，按照從左往右，從上往下的順序排列的
表格中的數據最終保存在單元格中
2.使用表格
1.創建表格
1.定義表格：<table></table>
2.創建表行：<tr></tr>
3.創建列：<td></td>
注意：傳統的表格，默認每行的列數都是統一化的。
練習：
創建一個3行4列的表格
步驟：
1.創建一對：table
2.在table中創建3對tr
3.在tr中創建4對td
2.表格屬性
table屬性
1.width
設置表格的寬度
2.height
設置表格的高度
3.align
設置表格的水平對齊方式
取值：left/center/right
4.border
邊框，指定邊框的寬度
5.bgcolor
設置表格的背景顏色
6.cellspacing
設置單元格的外邊距（單元格與單元格之間的距離）
7.cellpadding
設置單元格內邊距（單元格邊框與內容之間的距離）
3.tr屬性
1.align
設置該行內容水平對齊方式
取值：left/center/right
2.valign
設置該行內容的垂直對齊方式
取值：top/center/bottom
3.bgcolor
設置該行的背景顏色
4.td屬性
1.align 水平對齊
2.valign 垂直對齊
3.width 列寬度
4.hegiht 列高度
5.colspan 設置單元格跨列
6.rowspan 設置單元格跨行
注意：
1.每行中的指定列的寬度，都是一致的，默認以最寬的為主
3.表格的標題
標記：<caption></caption>
注意：
1.caption緊跟在table之后
2.一個表格只能有一個標題
4.th 行標題或列標題，字體有加粗的效果，放在tr中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1" align="center" cellspacing="0" bgcolor="#ff7f50" width="800" height="600" cellpadding="60"> <tr> <th>ID</th> <th>班級</th> <th>名稱</th> <th>年齡</th> </tr> <tr> <td>1</td> <td>9</td> <td>張山</td> <td>16</td> </tr> <tr> <td>2</td> <td>9</td> <td>李思</td> <td>18</td> </tr> <tr> <td>3</td> <td>9</td> <td>王武</td> <td>20</td> </tr> </table> <table border="1" cellspacing="0" width="300" height="300x"> <tr align="center" valign="center" bgcolor="red"> <th>1</th> <th>2</th> <th>3</th> </tr> <tr align="center" valign="center" bgcolor="green"> <td>1</td> <td>2</td> <td>3</td> </tr> <tr align="center" valign="center" bgcolor="blue"> <td >11</td> <td>12</td> <td colspan="2">13</td> </tr> <tr align="center" valign="center" bgcolor="#8a2be2"> <td>01</td> <td>02</td> <td>03</td> </tr> </table> </body> </html>
表格復雜使用⭐⭐
1.行分組 可以將表格分成3個部分 1.表頭：<thead></thead> 2.表主體：<tbody></tbody> 3.表尾：<tfoot></tfoot> 2.不規則表格 通過td的colspan（跨列）和rowspan（跨行）屬性設置 1.跨列 從指定的單元格位置處，橫向向右合並幾個單元（包含自己） 注意：被合並掉的單元格需要刪除 屬性：colspan 取值：數字（合並單元格的個數） 2.跨行 從指定的單元格位置處，縱向向下合並幾個單元格（包含自己） 注意：被合並掉的單元格要刪除 屬性：rowspan 取值：數字（合並單元格的個數） 3.表格嵌套 在單元格中去嵌套另一個表格 <table> <tr> <td> <table> <tr> <td></td> </tr> </table> </td> </tr> </table>
結構標記⭐
1.什么是結構標記 在HTML5中，專門提出一組標記用來表示網頁的結構，即制作布局 目的：取代div布局，提升布局代碼的語義性和可讀性 ex：<div></div>-----><header></header> 2.常用的結構標記 1.header元素 作用：用來定義網頁或者其他部分內容的頁眉（靠頂部的內容） 語法：<header>內容</header> 2.nav元素 作用：用來表示網頁的導航鏈接部分 語法:<nav></nav> 3.section元素 語義：小節 作用：定義頁面中的節，表示頁面的主體內容 語法：<section></section> 4.footer元素 作用：定義頁面的底部信息，用戶不太注意的內容：網站備案號，解釋說明... 語法：<footer></footer> 5.aside元素 作用：用來定義頁面中的邊欄信息 語法：<asdie></aside> 6.article元素 語義：文章，藝術 作用：定義一些簡短的內容，章，節。比如像論壇的帖子，用戶的評論，微博條目 語法：<article></article> 注意：如果以后出現無法被結構標記取代的模塊，那么繼續用div布局
表單⭐⭐⭐
表單的作用
用於顯示，收集數據，並提交信息給服務器
完整的表單處理包含兩部分：
1.實現數據交互的可見界面元素（前端）
ex：文本框，密碼框，按鈕
2.提交后的表單的數據處理（服務器端）
表單元素
標記：<form></form>
屬性：
1.action
定義表單提交時發生的動作
具體取值要與后端服務器人員協同完成（后端人員給一個url路徑）
如果省略不寫，默認提交給本頁
2.method
定義表單提交數據的方式
取值：
1.get（默認值）
1.明文提交，提交的數據會顯示在瀏覽器的地址欄上
2.安全性不高
3.提交的數據大小有限制 小於2kb
4.場合：用於向服務器要數據的時候使用，搜索關鍵字提交
2.post
1.隱式提交，不會將提交的信息顯示在瀏覽器的任何位置
2.安全性高
3.無大小限制
4.場合：要傳遞數據給服務器進行處理的時候，登錄，注冊，上傳文件...
3.delete，put...等
3.enctype
作用：指定數據進行編碼的方式
取值：
1.application/x-www-form-urlencoded
默認值，可以將表單中的普通文本，特殊字符，標點符號都可以進行二進制編碼，然后提交給服務器
（無法對文件進行提交）
2.multipart/form-data
將表單中的文件進行二進制編碼再提交（字符、標點符號無法編碼提交）
3.text/plain
將表單中的普通字符進行二進制編碼提交，其余無法提交
4.name
定義表單名稱，js用到的比較多
5.id 獨一無二的標識
表單控件
1.作用 用於接收用戶數據並依托於表單提交給服務 2.表單控件的分類 1.input元素：文本輸入框（用戶名，密碼），按鈕，單選按鈕，復選框 標記：<input> 2.textarea 多行文本域 標記：<textarea></textarea> 3.select 和 option 選項框 標記：<select> <option></option> </select> 4.其他元素
input元素
1.作用： 用於收集用戶信息 2.語法： 標記<input> 主要屬性：（同有的屬性，指所有input都具有的屬性） 1.type 根據type的值，來創建各種類型的輸入控件，比如：文本框、密碼框、按鈕 2.name 定義控件名稱，提供給服務器使用 注意：如果不給控件設置名稱，則數據無法提交 匈牙利命名法：控件的縮寫+功能名稱 ex：txtName txtPassword 3.value 設置控件的值，也是最終提交給服務器的值 4.disabled 禁用控件 表示控件不可用（不能獲取他的值，也不能被提交） 注意：該屬性沒有值 <input type="" name="" value="" disabled>
input元素詳解
input元素詳解 1.文本框與密碼框 文本框：<input type="text"> 密碼框：<input type="password"> 專有屬性： 1.maxlength 限制輸入字符數的數量 取值：數字 2.readonly 只讀 注意：readonly只讀，允許被提交 disabled禁用，不能被提交 3.name 文本框和密碼框縮寫：txt ex：txtName txtPassword <input type="text" name="txtName" > <input type="password" name="txtPwd"> 注意：txt后面單詞首字母大寫，多個單詞每個首字母都要大寫 4.placeholder 占位符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定義列表</title> </head> <body> <!--input框 禁用--> <input type="text" disabled> <!--input框 最大限制數量--> <input type="text" maxlength="6"> <!--input框 只可以讀--> <input type="text" readonly> <!--input框 隱藏域--> <input type="hidden"> <!--input框 文件框--> <input type="file"> <!--input框 密碼框--> <input type="password"> <!--input框 電話號--> <input type="tel"> <!--范圍--> <input type="range"> <!--url--> <input type="url"> <!--數字--> <input type="number"> <!--日期--> <input type="date"> <!--周--> <input type="week"> <!--月--> <input type="month"> <!--搜索--> <input type="search"> <!--非空限制--> <input type="text" required> </body> </html>
單選按鈕和復選框
單選按鈕：<input type="radio"> 復選框：<input type="checkbox"> 屬性： 1.name 名稱，同時具備分組的作用 單選按鈕：一組中只能有一個按鈕被提交 復選框：一組數據后台獲取時名稱是相同的 2.value 值，被選中后提交的值 3.checked 設置默認被選中 該屬性無值
按鈕
1.提交按鈕
<input type="submit">
作用：提交表單數據給服務器
2.重置按鈕
<input type="reset">
將表單恢復到初始化的狀態
3.普通按鈕
<input type="button">
作用：由用戶自定義功能（js）
屬性：
1.name
定義按鈕名稱，縮寫：btn
2.value
按鈕上面的文字內容
4.其他按鈕
1.圖片按鈕（提交）
<input type="image">
屬性：src
2.按鈕(提交按鈕)
<button>內容</button>
4.隱藏域和文件選擇框
1.隱藏域
<input type="hidden">
作用：要提交給服務器，但是又不想給用戶看到的數據，放到隱藏域中
2.文件選擇框
<input type="file">
作用：允許打開文件的選擇框，選擇文件進行上傳
屬性：
1.name
縮寫：txt
2.value
值
注意：
使用文件選擇框上傳文件時候，有以下兩點要求：
1.<form>的method屬性必須是post
2.<form>的enctype屬性必須是multipart/form-data
textarea元素
1.完成多行文本的錄入功能
2.語法
標記：<textarea>內容（默認值）</textarea>
屬性：
1.name
名稱，縮寫為txt
2.cols
去指定文本區域的列數
變相的去設計控件的寬度
3.rows
指定文本區域的行數
變相的去設置控件的高度
4.readonly 只讀
選項框
分兩種形式：
下拉選項框
滾動列表
語法：
1.<select></select>
作用：創建選項框
屬性：
name：名稱，sel
size：指定選項框默認能顯示幾項內容
默認值是1，如果大於1，則為滾動列表
multiple：設置允許多選
該屬性沒有值
2.<option></option>
作用：定義選項框中子選項
屬性：
value：選項的值
selected：預選中，設置默認被選中的選項
該屬性無值。
其他元素
1.lable元素 作用：關聯文字與表單控件，點擊文字時候如同點擊表單一樣 語法： <lable>內容</lable> 屬性：for 表示該元素相關聯的表單控件的ID屬性值 2.為控件分組 <fieldset></fieldset> 子元素：<legend></legend> 來指定分組的標題 ex： <fieldset> <legend>標題內容</legend> </fieldset>