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

HTML

Day12 前端html

發布時間：2025/5/22 HTML 46 豆豆

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

前端基礎之HTML

老師博客：

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

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

html：靜態的內容都是一個html標簽,是有一組組標簽構成的文件

css:對一個個標簽做渲染定位

js:所有頁面的動態效果做渲染定位

當寫一個簡單服務端的時候，一般這樣寫：

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

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

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開頭：服務器故障

HTML結構：

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

<head>內常用標簽：

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

meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。?

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

?(2)http-equiv屬性：相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。

非meta標簽：

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

標簽：（分為兩類，塊級(boack)標簽和內聯(inline)標簽）

渲染規則：從上到下，從左到右

block（塊級）：自己獨占一行

inline（內聯）：自己不獨占一行

塊級標簽可以嵌套內聯標簽和塊級標簽。

內聯標簽只能嵌套內聯標簽。

基本標簽：?

塊級標簽：

<h1>:從1級到6級標簽，都可以使用

<p>:段落（內部可調屬性）

<br>:換行

內聯標簽：

<a href="https://www.baidu.com">click</a>:跳轉標簽

<b>和 <strong>: 加粗標簽.

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

<em>: 文字變成斜體.

<sup>和<sub>: 上角標和下角表.

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

常用標簽：

<img ?src="圖片地址" alt=“加載錯誤時顯示的內容” ?title=“當鼠標懸浮是顯示的內容”

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

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

　　<img ?src="圖片地址" alt=“加載錯誤時顯示的內容” ?title=“當鼠標懸浮是顯示的內容”

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

　　</a>

#點擊按鈕跳轉到別的網頁

<a>標簽的錨功能：

<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="#名字"來進行跳轉 #下面定義的模塊里邊id里邊有名字
#返回頂部的話可以利用空<a href="">返回頂部</a>來執行

無序列表：

<u1>

</u1>

有序列表：

<ol>

</ol>

自己定義列表：

<dl>

</dl>

表格標簽<table>：

#<tr>:一行的標簽, ? ??

<td>:一列的標簽

#border:邊框

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

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

#讓一個單元格獨占幾行或者幾列：在<td>標簽里邊寫：

　　rowspan：單元格豎跨多少行

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

　　<tr>

　　</tr>

　　<tr>

　　</tr>

</table>

form表單標簽：與server端交互

url == IP+port+路徑+子頁+？（當有問號時侯斌就是數據了）

　　數據

</form>

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

表單的數據可以寫成：

<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">藍球 <input type="checkbox" name="hobbies" value="doublecolorball">雙色球 </p> #當有checked這個選項的時候，默認會將有將checked的打鉤

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

<p><input type="reset"></p>
#將頁面內容刷新

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

select標簽：下拉菜單

#size是默認顯示幾個，multiple的意思是可不可以多選

</select>

#<option value="4" selected="selected">日本省</option>當標簽里邊有selected的時候，默認會顯示這個標簽。

文本框：

可以在<p>和<texttarea>等屬性中加入placeholder="wenben"，這會顯示一個默認灰色的字體，作為提醒用。

點擊前面對應的數字跳轉到后邊的文本框：

<p>

</p>

相當于點擊上面的姓名自動跳轉到后面c1對應的文本框

轉載于:https://www.cnblogs.com/sexiaoshuai/p/7560594.html

總結

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

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

html

上一篇： 67 个节省开发者时间的实用工具、库与资
下一篇： nginx web服务理论与实战