前端 -- HTML

一. HTML介紹:

HTML是什么?
- 超文本標(biāo)記語(yǔ)言(Hypertext Markup Language),是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)記語(yǔ)言,不是編程語(yǔ)言
- 本質(zhì)上是瀏覽器可識(shí)別的規(guī)則,我們按照規(guī)則寫(xiě)網(wǎng)頁(yè),瀏覽器根據(jù)規(guī)則渲染我們的網(wǎng)頁(yè).對(duì)于不同的瀏覽器,對(duì)同一個(gè)標(biāo)簽可能會(huì)有不同的解釋. (兼容性問(wèn)題)
- 網(wǎng)頁(yè)文件的擴(kuò)展名: .html 或 .htm
HTML 文檔結(jié)構(gòu)
```
<!DOCTYPE html> 
<html lang="zh-CN">   #這個(gè)lang表示語(yǔ)言，zh-CN是中文的意思，就是說(shuō)，你整個(gè)文檔的內(nèi)容以中文為主，如果以英文為主，就寫(xiě)成lang='en'

<head> 
  <meta charset="UTF-8">  # 編碼
  <title>css樣式優(yōu)先級(jí)</title>
</head>
<body> 
     正文內(nèi)容
</body>
</html>
```
- <!DOCTYPE html> 聲明為HTML5文檔
- <html> </html> 是文檔的開(kāi)始標(biāo)記和結(jié)束標(biāo)記. 是HTML頁(yè)面的根元素,在它們之間的文檔的頭部(head) 和主體(body)
- <head> </head> 定義了HTML文檔的開(kāi)頭部分,它們之間的內(nèi)容不會(huì)在瀏覽器的文檔窗口顯示. 包含了文檔的元 (meta) 數(shù)據(jù),配置信息等,是給瀏覽器看的,我們看到是在body標(biāo)簽里面寫(xiě)的內(nèi)容
- 注意: 對(duì)于中文網(wǎng)頁(yè)需要使用<meta charset = 'utf-8'>聲明編碼,否則會(huì)出現(xiàn)亂碼. 有些瀏覽器會(huì)設(shè)置GBK編碼,則需要設(shè)置為<meta charset = 'gbk'>
web服務(wù)器本質(zhì)　
```
import socket

sk = socket.socket()
sk.bind(('127.0.0.1',8008))
sk.listen()

while True:
    conn,addr = sk.accept()
    data = conn.recv(1024)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    conn.send(b'<h1>hello word</h1>')
    conn.close()
```
瀏覽器發(fā)請(qǐng)求 --> HTTP協(xié)議 --> 服務(wù)端接收請(qǐng)求 --> 服務(wù)端返回響應(yīng) --> 服務(wù)端把HTML文件內(nèi)容發(fā)給瀏覽器 --> 瀏覽器渲染頁(yè)面

二. HTML標(biāo)簽介紹

標(biāo)簽的格式: 嚴(yán)格封閉的
- HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵字，如<html>, <div>等
- HTML標(biāo)簽通常是成對(duì)出現(xiàn)的，比如：<div>和</div>，第一個(gè)標(biāo)簽是開(kāi)始，第二個(gè)標(biāo)簽是結(jié)束。結(jié)束標(biāo)簽會(huì)有斜線。
- 也有一部分標(biāo)簽是單獨(dú)呈現(xiàn)的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
- 標(biāo)簽里面可以有若干屬性，也可以不帶屬性。
標(biāo)簽的語(yǔ)法
- <標(biāo)簽名屬性1=“屬性值1” 屬性2=“屬性值2”……> 內(nèi)容部分 </標(biāo)簽名>
- <標(biāo)簽名屬性1=“屬性值1” 屬性2=“屬性值2”…… />
標(biāo)簽的分類(lèi):
- 內(nèi)斂標(biāo)簽(行內(nèi)標(biāo)簽) : 不獨(dú)占一行 (b / i / u / s / img / a / span / button 等),內(nèi)斂標(biāo)簽只能嵌套內(nèi)斂標(biāo)簽
- 塊級(jí)標(biāo)簽(行外標(biāo)簽) : 自己獨(dú)占一行 (h1- h6 / br / hr / p / div 等),可以嵌套內(nèi)斂標(biāo)簽和某些塊級(jí)標(biāo)簽
- p標(biāo)簽 : 不能嵌套p標(biāo)簽,也不能嵌套塊級(jí)標(biāo)簽

三. HTML常用標(biāo)簽

head標(biāo)簽中的標(biāo)簽:
- <title> </title> : 定義網(wǎng)頁(yè)標(biāo)題
- <style> </style> : 定義內(nèi)部樣式表
- <script> </script> : 定義JS代碼或引入外部JS文件
- <link/> : 引入外部樣式表文件
- <meta/> : 定義網(wǎng)頁(yè)原信息
  - meta標(biāo)簽共有兩個(gè)屬性,分別是http_equiv屬性和name屬性,不同的屬性又有不同的參數(shù)值,這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁(yè)功能
  - http_equiv屬性: 相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確地顯示網(wǎng)頁(yè)內(nèi)容，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。
```
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
# 兩秒后跳轉(zhuǎn)到相應(yīng)的網(wǎng)址,如果把URL和后面的內(nèi)容刪掉,就是兩秒中刷新一次

<meta http-equiv="content-Type" charset="UTF8"> 
# 指定編碼的類(lèi)型 
```
  - name屬性: 主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類(lèi)信息用的。　
    - 紅框就是描述的信息

body標(biāo)簽中的基本標(biāo)簽　(塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽)

<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>

<p>
    段落標(biāo)簽  # 獨(dú)占一個(gè)段落
</p>

<button>一個(gè)按鈕</button>

<h1>標(biāo)題1</h1>
<h2>標(biāo)題2</h2>
<h3>標(biāo)題3</h3>
<h4>標(biāo)題4</h4>
<h5>標(biāo)題5</h5>
<h6>標(biāo)題6</h6>
# 從上到下,字體依次變小

<!--換行-->
<br>

<!--水平線 / 分割線-->
<hr>

div標(biāo)簽和span標(biāo)簽(常用)
- 這兩個(gè)標(biāo)簽是沒(méi)有特別的樣式的。<div>xxxx</div>，但是這是兩個(gè)標(biāo)簽最大的特點(diǎn)，可以通過(guò)CSS來(lái)控制，就像咱們畫(huà)畫(huà)一樣，在一個(gè)白紙上畫(huà)好，還是在一個(gè)報(bào)紙上畫(huà)好啊，對(duì)不對(duì)。打開(kāi)個(gè)網(wǎng)頁(yè)通過(guò)f12看一下，就發(fā)現(xiàn)多數(shù)都是div和span。
- div標(biāo)簽用來(lái)定義一個(gè)塊級(jí)元素，并無(wú)實(shí)際的意義。主要通過(guò)CSS樣式為其賦予不同的表現(xiàn)。
- span標(biāo)簽用來(lái)定義內(nèi)聯(lián)(行內(nèi))元素，并無(wú)實(shí)際的意義。主要通過(guò)CSS樣式為其賦予不同的表現(xiàn)。
- 塊級(jí)元素與行內(nèi)元素的區(qū)別：所謂塊元素，是以另起一行開(kāi)始渲染的元素，行內(nèi)元素則不需另起一行。如果單獨(dú)在網(wǎng)頁(yè)中插入這兩個(gè)元素，不會(huì)對(duì)頁(yè)面產(chǎn)生任何的影響。這兩個(gè)元素是專(zhuān)門(mén)為定義CSS樣式而生的。
img標(biāo)簽
- 圖片標(biāo)簽
- 屬性:
  - src = '圖片路徑' # 網(wǎng)絡(luò)地址的絕對(duì)路徑或者本地的相對(duì)路徑
  - alt = '圖片未加載成功時(shí)的提示'
  - title = '鼠標(biāo)懸浮時(shí)提示信息'
  - width = '設(shè)置圖片的寬'
  - height = '設(shè)置圖片的高'
- ```
# 示例:
<img src="1.jpg" alt="這是個(gè)美女,請(qǐng)稍等.." title="美女" width="200" height="200">
```
a標(biāo)簽
- 超鏈接標(biāo)簽
- 屬性:
  - href : 超鏈接的地址
  - target : 是否新建窗口
    - target = '_self' 當(dāng)前窗口打開(kāi)某個(gè)路徑對(duì)應(yīng)的html頁(yè)面
    - target = '_bland' 新建窗口打開(kāi)某個(gè)路勁對(duì)應(yīng)的html頁(yè)面
- ```
<a href="https://www.baidu.com" target="_blank">
   <button>點(diǎn)擊進(jìn)入百度</button>
</a>
```

列表標(biāo)簽

無(wú)序列表
- type屬性:
  - disc : 實(shí)心圓點(diǎn)(默認(rèn)值)
  - circle : 空心圓圈
  - square : 實(shí)心方塊
  - none : 無(wú)樣式
- ```
<ul type = 'disc'>
    <li>太白</li>
    <li>alex</li>
    <li>wusir</li>
</ul>
```
有序列表
- start屬性 : 是從數(shù)字幾開(kāi)始
- type屬性:
  - 1 : 數(shù)字列表.默認(rèn)值
  - A : 大寫(xiě)字母
  - a : 小寫(xiě)字母
  - I : 大寫(xiě)羅馬
  - i : 小寫(xiě)羅馬
- ```
<ol type="A" start="2">
    <li>太白</li>
    <li>alex</li>
    <li>wusir</li>
</ol>
# 表示按照大寫(xiě)字母進(jìn)行排序,從B開(kāi)始
```

標(biāo)題列表標(biāo)簽

就像大綱一樣,有一個(gè)層級(jí)效果

<dl>
    <dt>標(biāo)題1</dt>
    <dd>內(nèi)容1</dd>
    <dt>標(biāo)題2</dt>
    <dd>內(nèi)容1</dd>
    <dd>內(nèi)容2</dd>
</dl>

表格標(biāo)簽

屬性:
- border : 表格邊框 (邊框高度)
- cellpadding : 內(nèi)邊距 (內(nèi)邊框和內(nèi)容距離)
- cellspacing : 外邊距 (內(nèi)外邊框的距離)
- width : 像數(shù) 百分比 (最好通過(guò)css來(lái)設(shè)置長(zhǎng)寬)
- rowspan : 單元格豎跨多少行 (寫(xiě)在td里面)
- colspan : 單元格橫跨多少列(即合并單元) (寫(xiě)在td里面)

<table border="5" cellpadding="5" cellspacing="2">
    <thead>   # 表格的標(biāo)題(頭)
        <tr>  # 一行
            <th>姓名</th>  # 一個(gè)單元格的內(nèi)容
            <th>年齡</th>
            <th>愛(ài)好</th>
        </tr>
    </thead>

    <tbody>   # 表格的正文內(nèi)容
        <tr>
            <td>alex</td>
            <td>83</td>
            <td>抽煙</td>
        </tr>
        <tr>
            <td>wusir</td>
            <td>74</td>
            <td>喝酒</td>
        </tr>
    </tbody>
</table>

input標(biāo)簽

type屬性	表現(xiàn)形式	對(duì)應(yīng)代碼
text	單行輸入文本	`<input type = 'text' />`
password	密碼輸入框(不顯示明文)	`<input type = 'password' />`
date	日期輸入框	`<input type = 'date' />`
checkbox	復(fù)選框	`<input type = 'checkbox' name = 'x' />`
radio	單選框	`<input type = 'radio' name = 'x' />`
submit	提交按鈕	`<input type = 'submit' value = '提交' />`
reset	重置按鈕	`<input type = 'reset' value = '重置' />`
button	普通按鈕	`<input type = 'button' value = '普通按鈕' />`
hidden	隱藏輸入框	`<input type = 'hidden' />`
file	文本選擇框	`<input type = 'file' />`

type屬性 : 控制輸入框的樣式
name屬性 : 分組,攜帶數(shù)據(jù)key 傳給后臺(tái)的是: key:value
value : 表單提交時(shí)對(duì)應(yīng)項(xiàng)的值
- type="button", "reset", "submit"時(shí)，為按鈕上顯示的文本內(nèi)容
- type="text","password","hidden"時(shí)，為輸入框的初始值
- type="checkbox", "radio", "file"，為輸入相關(guān)聯(lián)的值
readonly : 只讀,針對(duì)的是輸入框如:text,password
disabled : 不允許操作,所有的input都可以設(shè)置
設(shè)置了readonly的標(biāo)簽,它的數(shù)據(jù)可以被提交到后臺(tái),設(shè)置了disabled的數(shù)據(jù),是不能提交到后臺(tái)的
submit : 發(fā)送瀏覽器上輸入標(biāo)簽中的內(nèi)容,配合form表單使用,頁(yè)面會(huì)刷新
reset : 頁(yè)面不會(huì)刷新,將所有內(nèi)容清空

form表單

<form action="http://127.0.0.1:8008">    # action: 指定數(shù)據(jù)提交的路徑
    用戶名:<input type="text" name = 'username'>
    密碼:<input type="password" name = 'password'>
    <br>
    <input type="radio" name = 'sex' value="1">男  # 傳給后臺(tái)的數(shù)據(jù)是 : sex:1
    <input type="radio" name = 'sex' value="2">女
    <br> 
    <input type="checkbox" name = 'hobby' value="a">喝酒  # 傳給后臺(tái)的數(shù)據(jù)是: hobby:a
    <input type="checkbox" name = 'hobby' value="b">抽煙
    <input type="checkbox" name = 'hobby' value="c">燙頭
    <input type="submit" value = '提交按鈕'>
    <br>
    <input type="date">
    <input type="button" value = '提交按鈕'>
    <input type="reset" value = '重置'>
    <input type="hidden">
    <input type="file">
</form>

注意:form表單觸發(fā)提交數(shù)據(jù)的操作,必須寫(xiě)在form表單標(biāo)簽里面,寫(xiě)在外面就是普通按鈕
- <input type='submit'>
- <button>提交按鈕</button>
checked默認(rèn)選中
- <input type="radio" name="sex" value="2" checked>女 #簡(jiǎn)寫(xiě)方式,當(dāng)屬性名和屬性值相同時(shí)可簡(jiǎn)寫(xiě) 默認(rèn)選中 : 女
- <input type="checkbox" name="hobby" value="a">喝酒
- <input type="checkbox" name="hobby" value="b" checked="checked">抽煙
- <input type="checkbox" name="hobby" value="c" checked="checked">燙頭
- 默認(rèn)選中了 : 抽煙,喝酒

select標(biāo)簽下拉選擇框

# 單選
<select name="city">
    <option value="1">北京</option>
    <option value="2" selected='selected'>上海</option>  # 默認(rèn)選中上海
    <option value="3">深圳</option>
</select>

# 多選:multiple
<select name="city" multiple>
    <option value="1">北京</option>
    <option value="2" selected>上海</option>  # # 默認(rèn)選中上海
    <option value="3">深圳</option>
</select>

multiple：布爾屬性，設(shè)置后為多選下拉框，否則默認(rèn)單選
disabled：禁用
selected：默認(rèn)選中該項(xiàng)
value：定義提交時(shí)的選項(xiàng)值

label標(biāo)簽

標(biāo)識(shí)標(biāo)簽的功能

方式一: for:執(zhí)行對(duì)哪個(gè)標(biāo)簽進(jìn)行標(biāo)識(shí)
效果: 點(diǎn)擊label標(biāo)簽中的文字.就能讓標(biāo)識(shí)的標(biāo)簽獲得光標(biāo)
<label for="username">用戶名</label>
<input id="username" type="text" name="username" value="alex">

方式二:
<label>
    密碼:<input type="password" name="password" value="111" disabled>
</label>

說(shuō)明:
- label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果,但是點(diǎn)擊label標(biāo)簽里面的文本,那么和他關(guān)聯(lián)的input標(biāo)簽就獲得了光標(biāo),讓你輸入內(nèi)容
- label標(biāo)簽的for屬性值應(yīng)當(dāng)與相關(guān)元素的id屬性值相同

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默認(rèn)內(nèi)容
</textarea>
name：名稱(chēng)
rows：行數(shù)   #相當(dāng)于文本框高度設(shè)置
cols：列數(shù)   #相當(dāng)于文本框長(zhǎng)度設(shè)置
disabled：禁用

posted @ 2019-06-30 14:35 未來(lái)&你好閱讀(327) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部

人生苦短,我用python

只有忍受別人不能忍受的忍受,才能享受別人不能享受的享受

前端 -- HTML

一. HTML介紹:

二. HTML標(biāo)簽介紹

三. HTML常用標(biāo)簽

公告