當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端基础之HTML

發布時間：2024/9/30 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了前端基础之HTML 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

閱讀目錄

概要：

前端介紹
HTML文檔結構（head內常用標簽，body內標簽）
HTML基本標簽
HTML特殊符號
HTML常用標簽
HTML之form表單

一、什么是前端：

任何能夠直接跟用戶打交道的交互界面都可以稱之為前端，有前必有后，后端就是我們以前學的服務端。

所謂Python全棧開發，就是前端與后端都寫。

而說到前端后端就得提到：

軟件開發架構：

C/S架構 client server

B/S架構 browser server

本質上B/S架構也是C/S架構，因為瀏覽器也算一種客戶端

我們瀏覽器輸入網址回車后瀏覽器做了哪些事：

1.輸入網址

2.向服務端發送請求

3.服務器接收請求并查詢瀏覽器想要的數據，返回給瀏覽器

4.瀏覽器拿到數據展示頁面

HTTP協議：

超文本傳輸協議

客戶端服務端在數據交互的時候必須遵循的一套協議

二、HTML

1、HTML又名《超文本標記語言》，重點關鍵字在于：標記，也就是說這門語言是針對網頁的創建過程而產生的，好比你要寫一個網頁就必須要使用這種標記語言。

2、HTML文檔結構：

我們用pycharm創建一個html頁面文件的時候，pycharm會默認給一個html結構框架：

這里補充一下：html語言里的注釋用：

-------------------------------------------------------------------- 注：如果你對python感興趣，我這有個學習Python基地，里面有很多學習資料，感興趣的+Q群：895817687 -------------------------------------------------------------------- <!DOCTYPE html> 　　　　  <html lang="en"> 　　   <head> <meta charset="UTF-8"><title>Title</title> </head>  <body> </body>  </html>

html文件的打開方式：瀏覽器打開，pycharm內右上邊有選擇瀏覽器圖標打開

3、head內常用標簽：

tilte：頁面標題

style：樣式

script：內部可以直接寫js代碼，也可以通過src屬性引入外部js文件

結果：

link：通過href引入外部css文件

輸入link按tab鍵會自動加載link語句：<link rel="stylesheet" href=""> 在雙引號里面填寫引入外部css文件名（需要與html同目錄） <link rel="stylesheet" href="my_style01.css">my_style01.css文件內容： p {color: red}

三、HTML文檔結構內——body內標簽：

基本標簽：

</head> <body><h1>標題標簽</h1><h2>標題標簽</h2><h3>標題標簽</h3><h4>標題標簽</h4><h5>標題標簽</h5><h6>標題標簽</h6><p>這是段落標簽，此標簽內容獨占一行</p><s>[99]</s><u>內容下劃線</u><i>內容斜體</i><b>看，我加粗了</b><hr>這是分割符<p>特殊符號</p><p>小于號：[a<b]大于號：[a>b]其他：[©][®][&][¥]</p> </body>

常用標簽分類：
分類一：
雙標簽：標題標簽
　　自閉合標簽：
分類二：
塊兒級標簽：div p h1~h6 ul ol dl li dd table h 獨占一行能夠嵌套某些塊兒級標簽和行內標簽可以設置長、寬行內標簽：span img a
lable input em i select small sub strong button…
自身內容有多大就占多大行內無法設置長、寬能夠嵌套行內標簽，但無法嵌套快級標簽一些注意點：
有幾個特殊的塊兒級標簽只能嵌套行內標簽，不能包含塊兒級標簽：h1~h6、 p、dt
p標簽雖然也是塊級標簽，但是不能嵌套任何塊兒級標簽和行內標簽
和兩個重要的標簽，功能主要是完成頁面的布局

URL:統一資源定位符（就是我們訪問某一網站的網址）
四部分：
第1部分：為協議：http://、ftp://等
第2部分：為站點地址：可以是域名或IP地址
第3部分：為頁面在站點中的目錄：stu
第4部分：為頁面名稱，例如 index.html
各部分之間用“/”符號隔開。
a標簽：鏈接標簽（可以通過href=" "跳轉到指定網址）
跳轉功能：

<a href="http://www.baidu.com" target="_self">[百度一下]</a> <a href="http://www.baidu.com" target="_blank">[百度一下]</a>

錨點功能：

解析：href="這里面填寫跳轉id，id前面要加#" id="這里面填寫此行代碼的位置id"<a href="#middle" id="top">跳到中間</a> 把這個放在body頂部 <a href="#down" id="middle">跳到底部</a> 把這個放在body中間 <a href="#top" id="down">跳到頂部</a > 把這個放在body底部

img標簽：圖片標簽

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=155 9654296&di=9107ce33edfe48328019f4aa2c976fc3&imgtype=jpg&er=1&src=http%3A%2F%2Fmmb iz.qpic.cn%2Fmmbiz_jpg%2FeibPQuTaEv62qGwCsE1ibzCWficke01VS9d1CLPllyt5fl9TbZSXziat RpEB3L0c1VPYZPtT7BfYYgXGoGk4GcMFnw%2F640%3Fwx_fmt%3Djpeg" alt=""> <br> <img src="平凡的世界.jpg" alt="細讀經典" title="這是一本必須要讀的書"> <img src="平凡的世界.jpg" alt="" title="路遙" width="315"> # 圖片原寬度631解析：src輸入圖片網絡地址或者html同目錄下圖片名，alt圖片加載失敗顯示的文字， title圖片加載出來鼠標放在圖片上會出現的文字 width圖片寬度，高度等比例改變

列表標簽
無序列表

type默認為disc（小圓點），還可以自定義circle(小圓圈),square（小方塊），none <ul type="square"><li>平凡的世界</li><li>與時間做朋友</li><li>自卑與超越</li> </ul> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>ul去除自帶樣式</title> </head><style>body {margin: 0; /*標簽與網頁直接無空隙*/background-color: bisque; /*網頁背景顏色*/}ul {margin: 0;list-style-type: none; /*去除列表序號*/padding-left: 0 /*列表緊貼左邊*/}</style> <body> <ul><li>書籍1</li><li>書籍2</li><li>書籍3</li> </ul> </body> </html>

有序列表

type可以為：A I a i 1 <ol type="1"><li>路遙</li><li>李笑來</li><li>阿福雷德阿德勒</li> </ol>

標題列表

<dl><dt>內蒙古</dt><dd>呼和浩特</dd><dd>鄂爾多斯</dd><dd>呼倫貝爾</dd><dt>湖北</dt><dd>武漢</dd><dd>黃石</dd><dd>鄂州</dd> </dl>dt 標題 dd 內容

表格標簽：

四、HTML——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獲取用戶大段文本值 <h3>注冊界面</h3> <form action=""><p>用戶名 <input type="text" name="user"></p><p>密碼 &nbsp&nbsp<input name="password" type="password"></p><p>生日 &nbsp&nbsp<input name="birthday" type="date"></p><p>性別 &nbsp&nbsp 男<input type="radio" name="gender">女<input type="radio" name="gender">保密<input type="radio" name="gender"></p><p>愛好 &nbsp&nbsp<input type="checkbox" name="hobby">讀書<input type="checkbox" name="hobby">健身<input type="checkbox" name="hobby">籃球</p><p>省份(單選) &nbsp&nbsp<select name="province" id=""><option value="hubei">湖北</option><option value="neimenggu">內蒙古</option><option value="shanghai">上海</option></select></p><p>市(多選) &nbsp&nbsp<select name="city" id="" multiple><option value="hubei">武漢市</option><option value="neimenggu">黃石市</option><option value="shanghai">鄂州市</option></select></p><p>地區 &nbsp&nbsp<select name="" id=""><optgroup label="湖北"><option value="">武漢市</option><option value="">黃岡市</option><option value="">孝感市</option></optgroup><optgroup label="內蒙古"><option value="">鄂爾多斯市</option><option value="">呼和浩特市</option><option value="">呼倫貝爾市</option></optgroup><optgroup label="上海市"><option value="">青浦區</option><option value="">黃埔新區</option><option value="">虹橋區</option></optgroup></select></p><p>自我評價 &nbsp<textarea name="" id="" cols="60" rows="8"></textarea></p><p>文件上傳 &nbsp&nbsp<input type="file" name="file"></p><p><input type="submit" value="提交注冊"> </p><p><input type="button" value="普通按鈕，可以后續自定義功能"></p><p><input type="reset" value="重選輸入信息"></p> </form>

補充：input的label

<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>

需要注意： form表單中需要給每一個獲取用戶輸入的標簽加上name屬性，用來標識當前數據的類型
可以將name屬性看成服務端接收到提交過來信息的字典的key 用戶輸入的當做字典的value
可以手動設置value默認值，如果用戶修改了則更新為修改的表單如果需要上傳文件，則需設置enctype=“multipart/form-data”（默認為enctype="ap
表單中幾個重要屬性： action：用來控制數據提交的目標對象（一般都是url來指定提交目標）
表單默認請求是get類型（獲取數據請求），可以通過修改method屬性來更改提交方法為：post（提交數據請求）
get請求可以攜帶參數供服務端效驗，不推薦攜帶敏感型參數，因為get請求提交時候，會在地址欄顯示攜帶的參數
，而且請求攜帶的參數大小是有限制的，大約在4KB，所以敏感性的信息都應該采用post提交方式。

總結

以上是生活随笔為你收集整理的前端基础之HTML的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
基础