【2020Python修煉記】前端開發之 前端工具和HTML

来源:https://www.cnblogs.com/bigorangecc/archive/2020/05/11/12867024.html
-Advertisement-
Play Games

【目錄】 一、前端開發工具簡介 二、前端基礎 1、什麼是前端 2、前端學習歷程 3、HTTP協議 三、HTML 1、HTML簡介 2、HTML文檔結構 3、HTML標簽分類（一） 4、HTML標簽分類（二） 5、特殊符號 6、其他常用標簽 一、前端開發工具簡介 參考閱讀： https://www.c ...


【目錄】

一、前端開發工具簡介 

二、前端基礎

1、什麼是前端

2、前端學習歷程

3、HTTP協議

三、HTML

1、HTML簡介

2、HTML文檔結構

3、HTML標簽分類（一）

4、HTML標簽分類（二）　

5、特殊符號

6、其他常用標簽

 

一、前端開發工具簡介

參考閱讀：

 https://www.cnblogs.com/xiaoyuanqujing/articles/11669889.html

https://www.cnblogs.com/xiaoyuanqujing/articles/11669962.html

 

還推薦微軟的 VScode，也是一款強大且免費的軟體，亦支持前端開發。

 

二、前端基礎

1、什麼是前端——所見即所得

任何與用戶直接打交道的操作界面都可以稱之為前端
比如:電腦界面 手機界面 平板界面

什麼是後端
後端類似於幕後操作者(一堆讓人頭皮發麻的代碼)
不直接跟用戶打交道

2、前端學習歷程

HTML:網頁的骨架 沒有任何的樣式
CSS:給骨架添加各種樣式 變得好看
Java Script:控制網頁的動態效果

前端框架:BOOTSTRAP、JQuery、Vue
　　　　提前給你封裝好了很多操作 你只需要按照固定的語法調用即可

3、HTTP協議

# 瀏覽器視窗輸入網址回車發生了幾件事:

"""
1 瀏覽器朝服務端發送請求
2 服務端接受請求(eg:請求百度首頁)
3 服務端返回相應的響應(eg:返回一個百度首頁)
4 瀏覽器接收響應 根據特定的規則渲染頁面展示給用戶看
"""

# 瀏覽器可以充當很多服務端的客戶端
百度 騰訊視頻 優酷視頻....

# 如何做到瀏覽器能夠跟多個不同的客戶端之間進行數據交互？
1.瀏覽器很牛逼 能夠自動識別不同服務端做不同處理
2.制定一個統一的標準 如果你想要讓你寫的服務端能夠跟客戶端之間做正常的數據交互
那麼你就必須要遵循一些規則——因此誕生了 HTTP協議

"""

HTTP協議，即 超文本傳輸協議 用來規定 服務端和瀏覽器之間的數據交互的格式...

該協議你可以不遵循 但是你寫的服務端就不能被瀏覽器正常訪問 你就自己跟自己玩
你就自己寫客戶端 用戶想要使用 就下載你專門的app即可
"""
# 四大特性
1.基於請求響應
2.基於TCP/IP作用於應用層之上的協議
3.無狀態——不保存用戶的信息
eg:一個人來了一千次 你都記不住 每次都當他如初見
由於HTTP協議是無狀態的 所以後續出現了一些專門用來記錄用戶狀態的技術
cookie、session、token...
4.無/短鏈接
請求來一次我響應一次 之後我們兩個就沒有任何鏈接和關係了
長鏈接:雙方建立連接之後預設不斷開 websocket(後面講項目的時候會講)


# 請求數據格式 （請求頭 和 請求體 之間，是有一行空行的）
請求首行(標識HTTP協議版本，當前請求方式)
請求頭(一大堆k,v鍵值對)

請求體(並不是所有的請求方式都有get沒有post有 存放的是post請求提交的敏感數據)


# 響應數據格式（響應頭 和 響應體 之間，是有一行空行的）

響應首行(標識HTTP協議版本，響應狀態碼)
響應頭(一大堆k,v鍵值對)

響應體(返回給瀏覽器展示給用戶看的數據)

# 響應狀態碼
用一串簡單的數字來表示一些複雜的狀態或者描述性信息 ：

1XX:服務端已經成功接收到了你的數據正在處理，你可以繼續提交額外的數據
2XX:服務端成功響應了你想要的數據(200 OK請求成功)
3XX:重定向(當你在訪問一個需要登陸之後才能看的頁面 你會發現會自動跳轉到登陸頁面)
4XX:請求錯誤
404:請求資源不存在
403:當前請求不合法或者不符合訪問資源的條件
5XX:伺服器內部錯誤(500)

# 請求方式
1.get請求
朝服務端要數據
eg:輸入網址獲取對應的內容


2.post請求
朝服務端提交數據
eg:用戶登陸 輸入用戶名和密碼之後 提交到服務端後端做身份校驗

# url:統一資源定位符(大白話 網址)

三、HTML

1、HTML簡介

超文本標記語言——HTML

如果你想要讓瀏覽器能夠渲染出你寫的頁面。你就必須遵循HTML語法

我們瀏覽器看到的頁面，內部其實都是HTML代碼(所有的網站內部都是HTML代碼)

HTML就是書寫網頁的一套標準

# 註釋:註釋是代碼之母
<!--單行註釋-->


<!--
多行註釋1
多行註釋2
多行註釋3
-->


由於HTML代碼非常的雜亂無章並且很多，所以我們習慣性的用註釋來劃定區域方便後續的查找：
<!--導航條開始-->
導航條所有的html代碼
<!--導航條結束-->
<!--左側菜單欄開始-->
左側菜單欄的HTMl代碼
<!--左側菜單欄結束-->

2、HTML文檔結構

<html>
  <head></head>:head內的標簽不是給用戶看的 而是定義一些配置主要是給瀏覽器看的
  <body></body>:body內的標簽 寫什麼瀏覽器就渲染什麼 用戶就能看到什麼
</html>

PS:文件的尾碼名其實是給用戶看到的，只不過對應不同的 文件尾碼名有不同的軟體來處理並添加很多功能

註意:

HTML代碼是沒有格式的，可以全部寫在一行都沒有問題，只不過我們習慣了縮進來表示代碼

在書寫HTML代碼的時候 你只需要寫標簽名 然後tab就能自動補全

 

兩種打開HTML文件的方式

  • 找到文件所在的位置右鍵選擇瀏覽器打開

  • 在pycharm內部，集成了自動調用瀏覽器的功能，直接點擊即可(前提是你的電腦上安裝了對應的瀏覽器) 直接全部使用谷歌瀏覽器

3、HTML標簽分類（一）——單標簽 和 雙標簽

（1）分類

<h1></h1>
<a href="https://www.mzitu.com/"></a>
<img/>

1 雙標簽
2 單標簽(自閉和標簽)

（2）head內常用標簽

<title>Title</title>  網頁標題
<style>
        h1 {
            color: greenyellow;
        }
</style>  內部用來書寫css代碼

<script>
        alert(123)
</script>  內部用來書寫js代碼
<script src="myjs.js"></script>  還可以引入外部js文件

<link rel="stylesheet" href="mycss.css">  引入外部css文件


<meta name="keywords" content="老男孩教育,老男孩,老男孩培訓,Python培訓,Linux培訓,網路安全培訓,Go語言培訓,人工智慧培訓,
雲計算培訓,Linux運維培訓,Python自動化運維,Python全棧開發,IT培訓">  

當你在用瀏覽器搜索的時候 只要輸入了keywords後面指定的關鍵字那麼該網頁都有可能被百度搜索出來展示給用戶
網頁的描述性信息

 

（3）body內常用標簽

<h1>我是h1</h1>  標題標簽 1～6級標題
<b>加粗</b>
    <i>斜體</i>
    <u>下劃線</u>
    <s>刪除線</s>
    <p>段落</p>
    <br>  換行
    <hr>  水平分割線

 

 

4、HTML標簽分類（二）——塊級標簽 & 行內標簽

# 1 塊兒級標簽:獨占一行
h1~h6 p div
1 塊兒級標簽可以修改長寬 行內標簽不可以 修改了也不會變化
2 塊兒級標簽內部可以嵌套任意的塊兒級標簽和行內標簽
但是p標簽雖然是塊兒級標簽 但是它只能嵌套行內標簽 不能嵌套塊兒級標簽
如果你套了 問題也不大 因為瀏覽器會自動幫你解開(瀏覽器是直接面向用戶的 不會輕易的報錯 哪怕有報錯用戶也基本感覺不出來)

總結:
只要是塊兒級標簽都可以嵌套任意的塊兒級標簽和行內標簽
但是p標簽只能嵌套行內標簽（HTML書寫規範）


# 2 行內標簽:自身文本多大就占多大
i u s b span
行內標簽不能嵌套塊兒級標簽 可以嵌套行內標簽

 

5、特殊符號

&nbsp;  空格
&gt;   大於號
&lt;   小於號
&amp;  & 
&yen;  ¥   人民幣符號
&copy; ©   版權
&reg;  ®   商標

 

6、其他常用標簽

（1）分塊標簽

div 塊兒級標簽
span 行內標簽
上述的兩個標簽是在構造頁面初期最常使用的 頁面的佈局一般先用div和span占位之後再去調整樣式 尤其是div使用非常的頻繁
div你可以把它看成是一塊區域 也就意味著用div來提前規定所有的區域
之後往該區域內部填寫內容即可
而普通的文本先用span標簽

 （2）img 標簽

# 圖片標簽
<img src="" alt="">

#【屬性】

src
1.圖片的路徑 可以是本地的也可以是網上的
2.url 自動朝該url發送get請求獲取數據

alt="這是我的前女友"
當圖片載入不出來的時候 給圖片的描述性信息

title="新垣結衣"
當滑鼠懸浮到圖片上之後 自動展示的提示信息

height="800px"

width=""

高度和寬度當你只修改一個的時候 另外一個參數會等比例縮放
如果你修改了兩個參數 並且沒有考慮比例的問題 那麼圖片就會失真

（3）a 標簽

# 鏈接標簽
<a href=""></a>
"""
當a標簽指定的網址從來沒有被點擊過 那麼a標簽的字體顏色是藍色
如果點擊過了就會是紫色（瀏覽器給你記憶了）
"""

#【屬性】

href
1.放url，用戶點擊就會跳轉到該url頁面
2.放其他標簽的id值 點擊即可跳轉到對應的標簽位置

target
預設a標簽是在當前頁面完成跳轉 _self
你也可以修改為新建頁面跳轉 _blank

# a標簽的錨點功能
"""eg:點擊一個文本標題 頁面自動跳轉到標題對應的內容區域"""
<a href="" id="d1">頂部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中間</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中間</a>
<a href="#d111">回到中間</a>

 　【補充】

　標簽預設具有的兩個重要書寫

1.id值
類似於標簽的身份證號 在同一個html頁面上id值不能重覆
2.class值
該值有點類似於面向對象裡面的繼承 一個標簽可以繼承多個class值

 　　標簽既可以有預設的書寫也可以有自定義的書寫

<p id="d1" class="c1" username="jason" password="123"></p>

 

（4）列表標簽

無序列表(使用較多) —— 快捷語法  ul>li*4

<ul>
        <li>第一項</li>
        <li>第二項</li>
        <li>第二項</li>
        <li>第二項</li>
</ul>
雖然ul標簽很醜 但是在頁面佈局的時候 只要是排版一致的幾行數據基本上用的都是ul標簽

有序列表(瞭解) —— 快捷語法 ol>li*3

<ol type="1" start="5">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

標題列表(瞭解)

<dl>
    <dt>標題1</dt> 
    <dd>內容1</dd>
    <dt>標題2</dt>
    <dd>內容2</dd>
    <dt>標題3</dt>
    <dd>內容3</dd>
</dl>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Vular開發手記#1：設計並實現一個拼插式應用程式框架
    可視化編（rxeditor）輯告一段落，在知乎上發了一個問題，詢問前景，雖然看好的不多，但是關註度還是有的，目前為止積累了21w流量，因為這個事，開心了好長一段時間。這一個月的時間，主要在設計製作Vular，基於Vuetify跟larval實現的，可拼插式應用框架。並且把RXEditor可視化編輯也 ...
  • spring boot 使用 Thymeleaf +layui 使用到的功能實例
    spring boot 使用 Thymeleaf +layui 使用到的功能實例 ...
  • vue項目中使用bpmn-自定義platter
    內容概述 本系列“vue項目中使用bpmn-xxxx”分為七篇，均為自己使用過程中用到的實例，手工原創，目前陸續更新中。主要包括vue項目中bpmn使用實例、應用技巧、基本知識點總結和需要註意事項，具有一定的參考價值，需要的朋友可以參考一下。如果轉載或通過爬蟲直接爬的，格式特別醜，請來原創看：我是作 ...
  • 實戰 - JavaScript 函數式編程
    最近和做技術的朋友聊天的時候，發現自己居然不能將函數式編程思想講清楚，於是做一次複習 一、函數是“一等公民” 常常都能聽到這麼一句話：在 JavaScript 中，函數是“一等公民”，這句話到底意味著什麼？ 在編程語言中，一等公民可以作為函數參數，可以作為函數返回值，也可以賦值給變數 —— Chri ...
  • 01-HTML5講義
    瞭解HTML5 新語義標簽 "http://www.w3school.com.cn/html/html5_semantic_elements.asp" 語義標簽相容性處理 解決方案一：通過創建元素的方式，然後將元素轉化為塊級元素即可 解決方案二：通過引用第三方js插件方式(本質也是用createEl ...
  • 5.jQuery實現簡單的on()和trigger()方法
    # jQuery事件 - 1.on() ```js //1.事件類型type 2.selector 3.data 4.handle $('ul').on('click', 'li', function(e){ alert($(e.target).text()); });//點擊ul下的li元素觸發h ...
  • Node.js解壓版的環境配置及相關常用命令
    下載 進入node.js官網的下載頁面 "node.js下載頁面" ,選擇合適的版本進行下載 配置 1.設置環境變數 隨便找一個地方,將文件解壓出來 複製當前的路徑,我的電腦右鍵,打開屬性,左邊有個高級系統配置,之後再打開環境變數 選擇Path選項,點開編輯,把之前複製的路徑粘貼即可 之後在命令行輸 ...
  • Angular 從入坑到挖坑 - Router 路由使用入門指北
    一、Overview Angular 入坑記錄的筆記第五篇，因為一直在加班的緣故拖了有一個多月，主要是介紹在 Angular 中如何配置路由，完成重定向以及參數傳遞。至於路由守衛、路由懶載入等“高級”特性，並不會在本篇文章中呈現 對應官方文檔地址： "路由與導航" 配套代碼地址： "angular ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類