當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Day12 前端html

發(fā)布時間：2025/5/22 HTML 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 Day12 前端html 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前端基礎(chǔ)之HTML

老師博客：

http://www.cnblogs.com/yuanchenqi/articles/6835654.html

http://www.cnblogs.com/yuanchenqi/articles/6856399.html

html：靜態(tài)的內(nèi)容都是一個html標(biāo)簽,是有一組組標(biāo)簽構(gòu)成的文件

css:對一個個標(biāo)簽做渲染定位

js:所有頁面的動態(tài)效果做渲染定位

當(dāng)寫一個簡單服務(wù)端的時候，一般這樣寫：

主要的是這：conn.send=("HTTP/1.1 201 OK　\r\n\r\n %s" %response).encode("utf-8")

\r\n\r\n：后面的內(nèi)容才是發(fā)給客戶端的，這里\r\n\r\n的含義就是告訴客戶端，后面是要接收的內(nèi)容

1 import socket 2 3 sock=socket.socket() 4 sock.bind(("127.0.0.1",10001)) 5 sock.listen(5) 6 7 while 1: 8 print("waiting") 9 conn,addr=sock.accept() 10 data=conn.recv(1024) 11 print("data",data) 12 with open("index.html",encoding="utf-8") as f: 13 response=f.read() 14 conn.send=("HTTP/1.1 201 OK　\r\n\r\n %s" %response).encode("utf-8") 15 conn.close() View Code

2開頭：成功

3開頭：重定向

4開頭：文件有問題

5開頭：服務(wù)器故障

HTML結(jié)構(gòu)：

<!DOCTYPE html> 告訴瀏覽器使用什么樣的html或者xhtml來解析html文檔 <html></html>是文檔的開始標(biāo)記和結(jié)束標(biāo)記。此元素告訴瀏覽器其自身是一個 HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>。 <head></head>元素出現(xiàn)在文檔的開頭部分。<head>與</head>之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。 <title></title>定義網(wǎng)頁標(biāo)題，在瀏覽器標(biāo)題欄顯示。 <body></body>之間的文本是可見的網(wǎng)頁主體內(nèi)容

<head>內(nèi)常用標(biāo)簽：

meta介紹
<meta>元素可提供有關(guān)頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
<meta>標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。
<meta>提供的信息是用戶不可見的

meta標(biāo)簽的組成：meta標(biāo)簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁功能。?

(1)name屬性: 主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。 ? ?

?(2)http-equiv屬性：相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確地顯示網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個參數(shù)的變量值。

非meta標(biāo)簽：

<title>oldboy</title><link rel="icon" href="http://www.jd.com/favicon.ico"> #標(biāo)簽上顯示的小圖片<link rel="stylesheet" href="css.css"><script src="hello.js"></script>　

標(biāo)簽：（分為兩類，塊級(boack)標(biāo)簽和內(nèi)聯(lián)(inline)標(biāo)簽）

渲染規(guī)則：從上到下，從左到右

block（塊級）：自己獨(dú)占一行

inline（內(nèi)聯(lián)）：自己不獨(dú)占一行

塊級標(biāo)簽可以嵌套內(nèi)聯(lián)標(biāo)簽和塊級標(biāo)簽。

內(nèi)聯(lián)標(biāo)簽只能嵌套內(nèi)聯(lián)標(biāo)簽。

基本標(biāo)簽：?

塊級標(biāo)簽：

<h1>:從1級到6級標(biāo)簽，都可以使用

<p>:段落（內(nèi)部可調(diào)屬性）

<br>:換行

內(nèi)聯(lián)標(biāo)簽：

<a href="https://www.baidu.com">click</a>:跳轉(zhuǎn)標(biāo)簽

<b>和 <strong>: 加粗標(biāo)簽.

<strike>: 為文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角標(biāo) 和下角表.

<div></div>和<span></span>:沒有什么效果

常用標(biāo)簽：

<img ?src="圖片地址" alt=“加載錯誤時顯示的內(nèi)容” ?title=“當(dāng)鼠標(biāo)懸浮是顯示的內(nèi)容”

　　width="100px" height="100px">

#中間的文字可以換成其他對象

　　<img ?src="圖片地址" alt=“加載錯誤時顯示的內(nèi)容” ?title=“當(dāng)鼠標(biāo)懸浮是顯示的內(nèi)容”

　　　　width="100px" height="100px">

　　</a>

#點(diǎn)擊按鈕跳轉(zhuǎn)到別的網(wǎng)頁

<a>標(biāo)簽的錨功能：

<a href="#c1">1</a> <a href="#c2">2</a> <a href="#c3">3</a><div style="height: 500px;background-color: green" id="c1">第一章</div> <div style="height: 500px;background-color: wheat" id="c2">第二章</div> <div style="height: 500px;background-color: gray" id="c3">第三章</div>#上面寫的利用href="#名字"來進(jìn)行跳轉(zhuǎn) #下面定義的模塊里邊id里邊有名字
#返回頂部的話可以利用空<a href="">返回頂部</a>來執(zhí)行

無序列表：

<u1>

</u1>

有序列表：

<ol>

</ol>

自己定義列表：

<dl>

</dl>

表格標(biāo)簽<table>：

#<tr>:一行的標(biāo)簽, ? ??

<td>:一列的標(biāo)簽

#border:邊框

#cellpadding:字體距離邊框的距離

#cellspacing：邊框距離邊框的距離，一般利用="*px"來調(diào)試

#讓一個單元格獨(dú)占幾行或者幾列：在<td>標(biāo)簽里邊寫：

　　rowspan：單元格豎跨多少行

　　colspan：單元格橫跨多少列（合并單元格）

　　<tr>

　　</tr>

　　<tr>

　　</tr>

</table>

form表單標(biāo)簽：與server端交互

url == IP+port+路徑+子頁+？（當(dāng)有問號時侯斌就是數(shù)據(jù)了）

　　數(shù)據(jù)

</form>

#method：這里有兩種方式的數(shù)據(jù)可以填，put 和 get,但是get的時候，會將數(shù)據(jù)放在url后邊的數(shù)據(jù)里邊去，如果是put，會將數(shù)據(jù)放到form表單里邊的數(shù)據(jù)里邊。 ??

表單的數(shù)據(jù)可以寫成：

<p>姓名:<input type="text" name="useradmin" ></p> <p>密碼:<input type="password" name="pwd"></p> <p>性別:<input type="radio" name="gender" value="1">男 <input type="radio" name="gender" value="0">女</p> <p>愛好:<input type="checkbox" name="hobbies" value="basketball" checked>足球 <input type="checkbox" name="hobbies" value="football">藍(lán)球 <input type="checkbox" name="hobbies" value="doublecolorball">雙色球 </p> #當(dāng)有checked這個選項(xiàng)的時候，默認(rèn)會將有將checked的打鉤

<p>上傳:<input type="file"></p>
#需要在表單<form>屬性里邊添加 enctype="multipart/form-data"

<p><input type="reset"></p>
#將頁面內(nèi)容刷新

<p><input type="button" value="按鈕" οnclick="alert(1234)"></p>
#定義一個按鈕，可以綁定事件，后邊的onclick就相當(dāng)于一個事件
<p>提交<input type="submit"></p> #提交按鈕#數(shù)據(jù)會以鍵值對來發(fā)送,是以后邊name來定義的 #單選是利用radio類型來使用的,后邊可以利用value跟上值 #復(fù)選框是利用checkbox來執(zhí)行，后邊可以利用value跟上值