RPA 實戰：讓小姐姐填滿你的硬盤(上)
897
2025-04-03
前端基礎一之HTML篇
@[toc]
題外話
前言
身為一個合格的后端開發人員
前端的基礎知識也是需要了解的
1. 網頁
W3C規定網頁由三部分組成：結構，表現，行為。
結構指的就是HTML
表現指的是CSS
行為指的是JavaScript
這是網頁的三部分，是由萬維網聯盟W3C規范的。
這節我們就來學習HTML，網頁的結構。
1.1 什么是網頁的結構，表現，行為
結構
HTML用于表現網頁的結構
表現
CSS用于控制頁面中元素的樣式
行為
JavaScript用于響應用戶操作
1.2 什么是HTML
HTML（Hypertext Markup Language）是超文本標記語言。
嚴格來說，HTML不屬于編程語言，他是用標簽的形式標示出網頁不同的組成部分。
為什么說HTML不是編程語言呢？因為HTML沒有解釋器，寫出來的代碼可以通過瀏覽器直接瀏覽，不需要下載諸如jdk，Python之類的東西，也不需要配置環境。
1.3 運行/編寫HTML
由于HTML是超文本標記語言，所以我們可以直接通過記事本來進行編寫
或者也可以使用Notepad++，支持高亮
記事本代碼寫好之后，后綴名改為.html然后上級就可以看到我們代碼的運行效果了
2. HTML基礎
2.1 標簽
標簽由尖括號<>括起來，用于描述網頁
2.2 元素
一個完整的標簽稱之為元素，有開始有終止，有內容
HTML元素以起始標簽（<>）開始，以結束標簽（）閉合
元素內容是起始標簽與結束標簽之間的內容。
某些HTML元素具有空內容
空元素在開始標簽中關閉
2.3 屬性
我們可以通過<標簽 a = “屬性”>的方法設置屬性，屬性可以為HTML元素附加屬性
屬性是以鍵值對的形式出現的
下面會示范一下常用的標簽
2.4 HTML的hello world
這樣，把文件名改為hello.html雙擊打開，就可以看到hello world。
2.5 標簽的嵌套
大多數標簽都支持嵌套
這是段落
這是段落里面的第一段
這是段落里面的第二段
頁面展示：
這是段落
這是段落里面的第一段
這是段落里面的第二段
3. HTML常用標簽
3.1 標題
標題由h+數字標簽來實現，共有六級標題
一級標題
二級標題
六級標題
下面是顯示結果
一級標題
二級標題
3.2 鏈接
鏈接以a標簽來實現
下面是網頁顯示
這是一個鏈接
3.3 段落
段落用p標簽來實現
好家伙，好家伙，這是第一段
好家伙，好家伙，這是第二段
下面是網頁顯示
好家伙，好家伙，這是第一段
好家伙，好家伙，這是第二段
3.3 圖片
圖片用img標簽來實現
圖片說明
下面是網頁顯示，因為圖書不存在，所以不會顯示
圖片說明
3.4 換行
用
標簽表示換行
這是
效果
下面是網頁顯示
這是
效果
3.5 列表
設置一個有序列表
- 第一個
- 第二個
顯示結果：
第一個
第二個
設置一個無序列表
- 第一個
- 第二個
顯示結果：
第一個
第二個
3.6 表格
創建一個表格：
| id | age | name | sex |
顯示結果：
多行顯示：
| id | age | name | sex |
| 1001 | 20 | 布小禪 | men |
不要問為什么這么寫，這是標簽，沒有為什么，這是規定
當然，剛剛的表格其實不是很正確，我們要定義第一行的東西的話，需要用到這個標簽
3.7 注釋
顧名思義就是給我們的代碼做解釋的標簽
注釋不會被計算機識別，也就是說，注釋并不會影響運行結果
就像這樣，下面是上面代碼的運行結果：
3.8 塊
什么是塊呢？
我們通過
定義一個html代碼塊，我們可以css給div代碼塊設置屬性的方式設置整個div代碼塊的樣式。Title Hello World! Title Hello World! Title Title Title Title
代碼：
This is a header
This is a paragraph.
效果：
This is a header
This is a paragraph.
some text.some other text.
some text.some other text.
而標簽被用來組合文檔中的行內元素。
就是把某行元素的特定部分包裝起來
代碼：
This is a header
This is a paragraph.
some text.some other text.
some text.some other text.
效果：
This is a header
This is a paragraph.
some text.some other text.
some text.some other text.
3.9 表單
通過
效果這樣：
當然，我們一般都會有一個登錄/注冊的按鈕
這需要標簽的submit屬性
而效果是這樣：
而有時我們的表單并不僅僅是這么簡陋
比如你常見的，讓你選擇職業，性別之類的
這個就需要用到
個人信息采集
效果：
而拿了登錄會干嘛呢？
會把你的信息提交，這需要一個action屬性
不設置默認為提交到當前頁面，并且只會提交帶有name屬性的數據
當然這個我們現在隨便設就可以，反正人家的服務器也不會收
我這邊是便寫了一個空的html文件
個人信息采集
效果：
個人信息采集
因為提交方式為get（默認），所以點擊登錄后，會跳轉到那個空白的HTML，然后url會把你所有帶有name屬性的數據展示出來
而怎么規避這個情況呢？
需要一個屬性：method
不設置默認為get請求
個人信息采集
這樣點擊提交后就不會顯示帶有name屬性的數據
結語
興趣是最好的老師，堅持是不變的真理。
學習不要急躁，一步一個腳印，踏踏實實的往前走。
每天進步一點點，日積月累之下，你就會發現自己已經變得很厲害了。
我是布小禪，一枚自學萌新，跟著我每天進步一點點吧！
HTML web前端
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章