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

HTML

前端学习---html基础知识

發布時間：2025/3/15 HTML 26 豆豆

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

HTML基本知識

學習html首先我們先看看HTML本質：

web框架本質

我們在學socket，我們創建一個socketserver，然后運行起來，有一個client客戶端要連接socket服務端，連接上之后，如果兩邊都沒有close，就一直不斷開，可以不斷的進行請求。

那我們說一個網站，我們在服務器端運行我們的網站，所有的客戶端就可以通過瀏覽器訪問我們寫的網站，所以我們用的iis,apache等它們本質上就是一個socket服務端，而我們打開的瀏覽器就是client端，進行數據傳輸。

我們如果基于TCP,客戶端和服務端連接之后，只要兩邊不close，也都可以一直不斷的訪問交互。但是網站瀏覽器瀏覽和這個是不一樣的。瀏覽器訪問了服務端，服務端給我們數據，瀏覽器得到了數據之后，連接就立馬斷開了，如果還想要拿數據，還得再次建立連接。即一次請求，一次響應，一次斷開。?

我們下面寫一個socket服務端：

1 import socket 2 3 def handle_request(client): 4 buf = client.recv(1024) 5 client.send(bytes("HTTP/1.1 200 ok\r\n\r\n",encoding="utf-8")) 6 client.send(bytes("Hello,Charles",encoding="utf-8")) 7 8 9 def main(): 10 sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM) 11 sock.bind(('localhost',8000)) 12 sock.listen(5) 13 14 while True: 15 connection,addr = sock.accept() 16 handle_request(connection) 17 connection.close() 18 19 if __name__ == '__main__': 20 main()

我們運行之后用瀏覽器訪問起來：

所以服務器的本質根源就是這20行代碼，建立socket連接。

其實我網站的顯示內容本質上也就是一大堆的字符串，我們在send函數中發送了hello,clarles，在網站上就顯示了那個內容，如果我們加上一些標簽比如

<h1 style='background-color:red'>Hello,Charles</h1>

?那么瀏覽器中顯示的就是如下：

那所以客戶端和服務器端進行交互的時候，服務端返回的永遠是字符串，這個字符串之所以我們在瀏覽器上能看到上圖的樣式，那是因為瀏覽器把這個字符串進行了解析。瀏覽器認識這種格式。

所以我們要學的html其實就是一套瀏覽器認識的規則，這個就是html本質。

而我們開發者要做的就是：

1.學習html規則|（充當模板的作用）

2.從數據庫中獲取數據，然后替換到html文件的指定位置,這個事情以后就由web框架來做?

html標簽知識

?注釋：

標簽分類：

1.自閉合標簽：<meta charset="utf-8">

2.主動閉合標簽：<title>測試</title>

?head內的標簽

title

網頁頭部信息：<title>TItle</title>

Link?

1.css?

2.icon:網站圖標

Style

在頁面中寫樣式

例如：
<style type="text/css" >?
.bb{?
????? ?background-color: red;?
? ?}?
</style>?

Script

1.引進文件

2.寫js代碼

< script type="text/javascript" > ... </script >

?body內的標簽

標簽一般分為兩種：塊級標簽和行內標簽

行內標簽：a、span、select 等

塊級標簽：div、h1、p 等

各種符號

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

空格： ? ? 小于號：>? ? 大于號：<

1.p和br

p表示段落，默認段落之間是有間隔的！

br 是換行

2.H 標簽

3.input系列:

a.text文本框：<input type="text" name="user" value="輸入框中的默認值"> ，顯示效果：

b.password密碼框:<input type="password" name="passwd">輸入的密碼是點,顯示效果：

c. submit提交按鈕:<input type="submit" value="提交">,顯示效果：

?用于表單的提交

d.button按鈕:<input type="button" value="登錄">,顯示效果：

?僅僅只是一個按鈕，沒有辦法進行表單的提交

e. radio單選框：<input type="radio" value="登錄" name="gender">,

name屬性如果都相同，則互斥

value屬性用于后臺獲取選擇的值

<form><div><p>請選擇性別：</p>男：<input type="radio" name="gender" value="1"/>女：<input type="radio" name="gender" value="2"/></div><input type="submit" value="提交"/></form>

f.checkbox多選框：<input type="checkbox" value="1" name="hobby">

<p>愛好</p> 籃球：<input type="checkbox" name="hobby" value="1"/> 足球：<input type="checkbox" name="hobby" value="2"/> 排球：<input type="checkbox" name="hobby" value="3"/> 網球：<input type="checkbox" name="hobby" value="4"/> <p>技能</p>python：<input type="checkbox" name="skill" value="python"/>php：<input type="checkbox" name="skill" value="php"/>

?效果:

如果需要默認選中的話：加一個屬性：checked="checked"

g.file上傳文件：<input type="file" name="fname">

如果你要用上傳文件功能，你再form表單中一定要加一個屬性：enctype='multipart/form-data'?

h:reset內容重置:<input type="reset" name="重置">

4.textarea多行文本:

<textarea name="meno">asdfasdf</textarea>

多行文本的默認值寫在中間

5.select下拉框：

?顯示效果：

北京上海南京廣州深證

參數解釋：

size設置一次顯示多少個值
multiple可以多選，按住control鍵
selected="selected"：默認選擇的值

分組顯示：optgroup，但是這些江蘇省，湖南省沒有辦法選中

?效果如圖：

宿遷蘇州湘潭長沙

6. a標簽

作用：

跳轉
錨點 :href="#某個標簽的id"標簽的ID不允許重復

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><a href="#i1">第一章</a><a href="#i2">第二章</a><a href="#i3">第三章</a><a href="#i4">第四章</a><div id="i1" style="height:600px;">第一章內容</div><div id="i2" style="height:600px;">第二章內容</div><div id="i3" style="height:600px;">第三章內容</div><div id="i4" style="height:600px;">第四章內容</div> </body> </html>

這個就是一個錨的效果：點擊第一章，跳轉到本頁面的第一章位置；點擊第二章，跳轉到本頁面的第二個位置?

7.img標簽

注意：默認img標簽，有一個1px的邊框，在使用的時候應該先用border:0；把邊框去掉

8.列表?

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><ul style="background-color: red"><li>asdf</li><li>asdf</li><li>asdf</li></ul><ol style="background-color: green"><li>asd</li><li>asd</li><li>asd</li></ol><dl style="background-color: yellow"><dt>asdf</dt><dd>asdf12</dd><dd>asdf12</dd><dt>asdf</dt><dd>asdf12</dd><dd>asdf12</dd></dl> </body> </html>

顯示效果如圖：

9.表格：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><table border="1"><tr><td>主機名</td><td>ip</td><td>端口號</td></tr><tr><td>localhost</td><td>192.168.1.1</td><td>8080</td></tr></table><table border="1"><thead><tr><th>主機名</th><th>ip</th><th>端口號</th></tr></thead><tbody><tr><td>localhost</td><td>192.168.1.1</td><td>8080</td></tr></tbody></table> </body> </html>

效果顯示：

要注意代碼的規范性！！

合并單元格：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><table border="1"><thead><tr><th>表頭1</th><th>表頭2</th><th>表頭3</th><th>表頭4</th></tr></thead><tbody><tr><td>1</td><td colspan="2">1</td><td>1</td></tr><tr><td rowspan="2">2</td><td>2</td><td>2</td><td>2</td></tr><tr><td>3</td><td>3</td><td>3</td></tr></tbody></table> </body> </html>

?行合并用：rowspan? ? ? ?列合并用：colspan

效果顯示：

10.label標簽：用于點擊文字，使得關聯的標簽獲得光標

用id把input 和 label進行關聯，原本如果只是寫一個label和一個input，我們在點擊用戶名的時候，input沒有被選中，如果用for關聯了input里的id之后，我們點擊“用戶名”的時候也就選中input輸入框

11.fieldset:?在一個框中然后插入標題

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><fieldset><legend>登錄</legend><label for="username">用戶名：</label><input id="username" type="text" name="user"><br><label for="password">密    碼：</label><input id="password" type="text" name="pwd"></fieldset> </body> </html>

顯示效果：

轉載于:https://www.cnblogs.com/charles8866/p/8557837.html

總結

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

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

上一篇：从零开始学PowerShell(7)编写
下一篇： 2017年html5行业报告,云适配发布