目錄
- 前端
- 什么是前端
- 什么是后端
- web服務的本質
- 請求方式
- HTTP協議
- 1.四大特性
- 2.資料格式
- 請求格式
- 回應格式
- 回應狀態碼
- HTML
- 檔案的后綴名
- HTML的注釋
- HTML的檔案結構
- 標簽的分類1
- head內常用標簽
- body內常用標簽
- body內特殊符號
- 標簽的分類2
- 1.塊級標簽
- 2.行內標簽
- body內重要的標簽
- a 鏈接標簽
- 1.跳轉功能
- 2.錨點功能
- img 圖片標簽
- src
- alt
- title
- width和height
- a 鏈接標簽
- 串列標簽
- 無序串列(***************)
- 有序串列(了解)
- 標題串列(了解)
- 表格標簽
前端
什么是前端
任何與用戶直接打交道的操作界面 都可以稱之為前端
eg：電腦界面 手機界面 平板界面
什么是后端
真正的幕后操作者
web服務的本質
請求 回應
瀏覽器輸入網址 回車發生了哪些事
1.朝著指定的服務器地址發送請求
2.服務端接收請求 并處理
3.回傳相應的回應
4.瀏覽器接收并渲染出好看的頁面 給用戶看
請求方式
1.get請求
? 朝服務器要資源
? eg:敲www.baidu.com
2.port請求
? 朝服務器提交資料
? eg:登錄功能
HTTP協議
超文本傳輸協議
規定了服務端與瀏覽器資料傳輸的資料格式
1.四大特性
1.基于TCP/IP作用與應用層之上的協議
2.基于請求回應
? 請求對應回應
3.無狀態
? 不保存客戶端狀態
? 無論來多少次 都當你如初見
? cookie session
4.無連接
? 長連接 websocket 聊天室
2.資料格式
請求格式
? 請求首行（請求方式 協議版本）
? 請求頭（一大堆k:v鍵值對）
? 請求體（敏感資訊 密碼 身份證號）
回應格式
? 回應首行（請求方式 協議版本）
? 回應頭（一大堆k:v鍵值對）
? 回應體（給用戶看的資料）
回應狀態碼
? 用數字來表示一串文字需要表達的意思
? 1XX：服務端已經成功接收到你的請求 正在處理 你可以繼續提交其他資料
? 2XX：服務端成功回應了相應的資料（200）
? 3XX：重定向
? 4XX：（404請求資源不存在） （403你當前不符合某一些條件 無法正常訪問）
? 5XX：服務器內部錯誤（500）
HTML
超文本標記語言，是一種標識性的語言，包括一系列標簽，
檔案的后綴名
? 檔案的后綴名是給人看的，對于計算機來說，全都是二進制；之所以不同的后綴名有不同的功能，是程式員人為定制的
HTML的注釋
注釋是代碼之母
<!--單行注釋-->
<!--
多行注釋1
多行注釋2
多行注釋3
-->
在搭建頁面的時候，通常會利用注釋來劃磁區域
<!--導航條開始-->
<!--導航條結束-->
<!--側邊欄開始-->
<!--側邊欄結束-->
HTML的檔案結構
<html>
<head></head> 不是給人看的 給瀏覽器看的
<body></body> body內的代碼才是給人看的
</html>
<h1>
hello world
</h1>
<a href="https://www.baidu.com">click me</a>
<img https://www.cnblogs.com/colacheng0930/p/src=src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566230133&di=590ab12707a1d494be7ec784801076d8&imgtype=0&src=https://www.cnblogs.com/colacheng0930/p/http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201207%2F04%2F20120704211148_3UWwd.jpeg"/>
標簽的分類1
1.雙標簽（h1,a）
2.自閉合標簽（img）
head內常用標簽
title 定義網頁標題
style 內部支持寫css代碼
link 引入外部css樣式檔案
script 內部可以直接寫js代碼，也可以引入外部js檔案
meta 定義網頁源資訊
<meta name="keywords" content="meta總結，html meta,meta屬性，meta跳轉">
<meta name="description" content="老男孩python學院">
瀏覽器上所看到的花里胡哨的頁面，背后都是HTML代碼而已
body內常用標簽
h1-h6 標題標簽
p 段落標簽 一個p就是一行內容
s 洗掉線
b 加粗
u 下劃線
i 斜體
br 換行
hr 一條分割線
body內特殊符號
空格
&； &
¥ ￥
> >
< <
© ?
® ?
標簽的分類2
1.塊級標簽
h1-h6、p、br、hr、div
獨占一行
- 塊級標簽內可以嵌套其他塊兒級的行內標簽
- 注意：
p標簽雖然是塊級標簽，但是他的內部不能嵌套任何塊兒級標簽，只能嵌套行內標簽(***)
2.行內標簽
s 、i、u、b、span
內部文本多大，就占多大
行內不能嵌套行內和塊級標簽
********************************************************
標簽通常應該有兩個屬性
id 就類似于身份證號，每一個標簽，都應該有id值，并且在同一個html檔案中，標簽的id不能重復
class 類屬性，有點類似于面向物件的繼承，class = 'c1 c2 c3' ，這個標簽就會擁有c1 c2 c3的所有樣式
********************************************************
body內重要的標簽
div 一塊區域，可以往這塊兒區域內填寫任何內容
span
div和span是前期構建網頁的基本骨架
a 鏈接標簽
1.跳轉功能
href引數控制跳轉的地址
這個地址如果在你的機器上如果沒有被點擊過那么默認是藍色
只要點過一次之后，之后顏色都是紫色
<!--<a href="https://www.sogo.com">點我點我</a>-->
a標簽默認是在當前視窗跳轉
你可以指定，新建視窗打開
target = "_self"
target = "_blank"
2.錨點功能
給a標簽設定id值
然后再href中書寫對應的a標簽id值，點擊即可跳轉到對應的位置
<a href="" id>文章開頭</a>
<div style="background_color: red;height: 1000px"></div>
<div style="background_color: green;height: 1000px"></div>
<div style="background_color: orange;height: 1000px"></div>
<a href="" id>文章中部</a>
<div style="background_color: black;height: 1000px"></div>
<div style="background_color: green;height: 1000px"></div>
<div style="background_color: orange;height: 1000px"></div>
<a href="https://www.cnblogs.com/colacheng0930/p/#a1">回到頂部</a>
<a href="https://www.cnblogs.com/colacheng0930/p/#a2">回到中部</a>
img 圖片標簽
src
1.圖片地址，網上的地址也可以是你的本地圖片地址
2.url(網址) 自動朝該網址發送get請求，獲取圖片資源
alt
當圖片加載不出來的時候，展示的提示資訊
title
滑鼠懸浮上去展示的提示資訊
width和height
這兩個引數，只需設定一個，就可以默認是等比例縮放
兩個全都調整的話，圖片就會失真
串列標簽
無序串列(***************)
ul
li
type引數
disc(實心圓點，默認值)
circle(空心圓圈)
square(實心方塊)
none(無樣式)
有序串列(了解)
ol
li
type引數
1 數字串列，默認值
A 大寫字母
a 小寫字母
I 大寫羅馬
i 小寫羅馬
標題串列(了解)
dl
dt 小標題
dd 小章節
表格標簽
展示資料 一般都用到表格標簽
<table>
<thead>
<tr>
<th>username</th>
<th>password</th>
<th>hobby</th>
<th>is delete</th>
</tr>
</thead>
</table>
<tbody>
<tr>
<td>tank</td>
<td>886</td>
<td>love</td>
<td>DBJ</td>
</tr>
</tbody>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/106427.html
標籤：Html/Css
上一篇：這個夏天，走向前端性能優化之路
下一篇：第一天來到博客