前端 HTML
?
?
前端1 什么是前端？任何直接能夠跟用戶打交道的交互界面都可以稱之為前端2 為什么要學前端？python全棧開發 軟件開發架構c/s架構b/s架構本質上b/s也是c/s架構瀏覽器輸入網址發生了幾件事？1 輸入網址2 向服務端發送了請求3 服務器接收請求并查詢瀏覽器想要的數據返回給瀏覽器4 瀏覽器拿到數據展示頁面HTTP協議超文本傳輸協議文件的后面名是給誰看？文件的后綴并不是給計算機看，只僅僅是給人看的HTML超文本標記語言 注釋HTML文檔結構
<!DOCTYPE html> <html lang="en"> <head><!--head存放的內容用戶是看不到的，主要是給瀏覽器和搜索引擎看的--><meta charset="UTF-8"><title>Title</title> </head> <body><!--用戶能夠看見的內容都在body里面--> <!--這是多行注釋--> </body> </html>html文件打開方式
方式1： 找到該文件選擇瀏覽器打開
方式2：pycharm內自動打開 先啟動服務器
?
head內常用標簽
title:頁面標題? 就是你新打開網頁的標題
style：寫css代碼
script:內部可以直接寫js代碼，也可以通過src屬性??引入內部js代碼文件? ? ?就是你進入一個網頁的時候上面會有一個提示信息
link：通過href引入外部css文件? ?可以對你下面的body里面的內容加樣式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/lakei/"><!--兩秒后跳轉到對應的網址--><title>這是我的第一個前端頁面</title><script src="04%20myjs.js"></script><!--script:內部可以直接寫js代碼，也可以通過src屬性 就是你進入一個網頁的時候上面會有一個提示信息--><link rel="stylesheet" href="03%20mycss.css"> </head> <body><h1>來了 老弟</h1><img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D500/sign=4d1f3cc25966d0167a199e28a72ad498/728da9773912b31bc49572268d18367adbb4e1c0.jpg" alt="王鷗"> </body> </html> head內常用標簽?
body內標簽
基本標簽
h1~h6:標題標簽
p: 段落標簽? 塊級標簽 自己站一行
<s>199</s> 現價99 #雙十一砍價原價199 現價 99 <br> #塊級標簽 獨占一行 <u>下劃線</u> #字體下面帶下劃線 <hr> #塊級標簽 一行的分割線 <i>斜體</i> #斜體 <b>加粗</b> #加粗 View Code
特殊標簽
空格是 &本身是&；
大于號 &get; 小于號 < 金錢￥ ¥； 版權符號 © 注冊商標 ®一個空格可以用敲一個空格會顯示出來 你再去敲空格 頁面上只顯示一個 可以用& 表示一個空格單位 View Code?
常用標簽
div? 塊級標簽 獨占一行
span? 行內標簽內容有多少占多數空間
a 標簽 href 跟一個網頁地址? target 可以設置參數 默認（_self）是當前網頁跳轉 改為_blank 后就是在打開一個新網頁
a 標簽 還支持定位?<a href="" id="a1">top</a>
<div style="height: 1000px;background: rgba(122,81,58,0.53)"></div><div style="height: 1000px;background: #3652a5"></div>
<div style="height: 1000px;background: #1b8ea5"></div>
img 圖片標簽??<img src="123.jpg" alt="王鷗">? alt 圖片不存在或者損壞的時候顯示的圖片是什么??title="王鷗" width="400"? title 鼠標懸停在上面顯示的內容?
width 可以設置圖片大小 圖片都是等比例縮小 放大的
頁尾 a 標簽?<a href="#a1">返回頂部</a>? ?#在這里點擊可以返回到頂部
?
標題列表
無需列表 ul>li*2
有序列表ol>li*2? ol 后面可以type設置排序的方式
標題列表?<dl>
<dt>標題1</dt><dd>內容</dd>
<dd>內容2</dd>
<dt>標題2</dt>
<dd>內容1</dd>
<dd>內容2</dd>
</dl>
表格標簽
table border="1" 表的外邊框寬度 <body> <table border="10"><thead><tr><th>name</th><th>age</th><th>bobby</th></tr></thead><tbody ><tr><td>jason</td><td>19</td><td rowspan="2">學習</td> #列合并</tr><tr><td>egon</td><td>18</td><!--<td>吃飯</td>--></tr><tr><td>owen</td><!--<td>18</td>--><td colspan="2">撩妹</td> #橫向合并</tr></tbody></table> </body> </html>
?
? ??寫功能的時候 記得寫注釋
<!--導航條開始--><!--導航條結束--> <!--側邊欄開始-->
<!--側邊欄結束-->
? ? ?后面維護的時候方便查找
? form表單（******）
功能：獲取用戶輸入（手動輸入/選擇輸入/默認值），并將獲取到的用戶信息發送給后端
form表單中只有input的type類型為submit才會觸發提交信息的動作
如果不想通過input標簽來觸發提交動作 那么可以直接寫一個<button> button按鈕</tutton>
input
通過控制type的類型從而實現不同的獲取用戶輸入的標簽樣式
text? ? ? ? ? ? ?普通文本
password? ?密文
date 日歷
? radio ? 單選項(加了之后變成選項 不加用默認text)? 默認值checked
checkbox 多選框 默認值checked
file 獲取文件
submit 觸發提交數據的行為
button 普通的按鈕??<input type="button" value="普通按鈕">
reset 重置form表單內容
select?
選擇框 默認是單選的 可以通過multiple參數將單選變成多選??<select name="" id="" multiple> 下面可以跟多個option
一個option就是一個選項
textarea
獲取用戶大段文本值
? form表單中幾個重要的屬性
action:用來控制數據到底提交給誰，寫url來指定提交給誰
form表單默認是get請求，可以通過methord屬性修改提交方法
form表單中需要給每一個獲取用戶輸入的標簽加上name屬性用來標識當前數據的類型
你可以將name屬性當做字典的key 用戶輸入的當做字典的value 并且你可以手動設置value值
form表單發送文件 需要修改enctype屬性的值
默認urlencoded不支持傳輸文件
需要將其修改文multipart/form-data
1 獲取用戶輸入的標簽都必須需有一個name屬性
用戶輸入的值會被存放到標簽的value屬性中
你可以理解為name屬性對應是字典的key
用戶輸入的被value屬性獲取得到值是字典的valu
2 label 標簽
通常是和input標簽組合使用
<form action="">
<label for="i1">username: <input type="text" id= "i1" name="username"></label>
<label for= "i2"> password: <input type="password" name="pwd" id="i2"></label>
<input type="submit">
</form>
GET請求與POST請求
get請求：向服務端獲取資源（可以攜帶參數供服務端校驗）
不推薦攜帶敏感性的參數
get請求攜帶的參數是有大小限制的? 大概4KB
可以攜帶一些不重要的參數
post請求：朝服務端提交數據
敏感性的信息 都應該采用post提交方式
將form 表單中的method改為post就可以了注冊的時候
<form action="" method="post"><label for="i1">username: <input type="text" id="i1" name="username"></label>
<label for="i2">password: <input type="password" id="i2" name="password"></label>
<input type="submit">
</form>
?
總結：
標簽分類1：雙標簽 h1~h6 p a自閉和標簽 img br hr標簽分類2（*****）塊級標簽 div h1~h6 p hr br獨占一行塊級標簽能夠嵌套塊級標簽和行內標簽p標簽雖然是塊級標簽但是它不能嵌套任何的塊級標簽塊級標簽能夠設置長款行內標簽 span a img i s b u自身內容有多大就占多大行內標簽不能設置長寬url:統一資源定位符 什么是url?url是統一資源定位器（Uniform Resource Locator）的縮寫，也被稱為網頁地址，是因特網上標準的資源的地址url舉例： http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.htmlURL地址由4部分組成 第1部分：為協議：http://、ftp://等 第2部分：為站點地址：可以是域名或IP地址 第3部分：為頁面在站點中的目錄：stu 第4部分：為頁面名稱，例如 index.html 各部分之間用“/”符號隔開。a標簽：連接標簽可以通過href跳轉到指定的網址錨點功能：回到頂部<a href="" id="a1">top</a><a href="#a1">bottom</a>ps:target屬性用來控制是否在當前頁跳轉默認是_self當前頁也可以指定成_blank新建頁面跳轉所有的html標簽都應該有一個id屬性，用來唯一標識當前標簽，為后續的DOM操作提供基礎 也就意味著同一份html中標簽的id不嫩重復，不寫id屬性也是可以的img標簽src圖片路徑：即可以是網絡上的圖片地址也可以是本地的圖片地址alt當前圖片加載失敗之后自動展示的提示信息title 鼠標懸停在圖片上時顯示的文本圖片調節長寬的啥時候只需要調節一個，另外一個參數自動等比例縮放列表標簽ul:無需列表ol:有序列表dl：標題列表表單標簽固定以下面的格式書寫<table><theade></theade><tbody></tbody></table>tr 一個tr表示一行border調整列表的邊框cellspacing 調單元格與外邊框之間的距離cellpadding 調文本與單元格之間的距離rowspan 垂直反向合并colspan 水平反向合并form表單功能：獲取用戶輸入（山東輸入/選擇/默認值），并將獲取到的用戶信息發送給后端form表單中只有input的type類型為submit才會觸發提交信息的動作如果不想通過input標簽來觸發提交動作，那么可以直接寫一個<button>button按鈕</button>input 通過控制type的類型從而實現不同的獲取用戶輸入的標簽樣式text 普通文本password 密文date 日歷radio 單選框checkbox 多選框file 獲取文件submit 觸發提交數據的行為button 普通按鈕reset 重置form表單內容select 選擇框 默認是單選的，可以通過multiple參數將單選變為多選一個option就是一個選項textarea獲取用戶大段文本值?
轉載于:https://www.cnblogs.com/lakei/p/10940484.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
- 上一篇： AssetBundle
- 下一篇： 如何处理HTML5新标签的浏览器兼容问题