HTML

番茄西紅柿發(fā)布于2019-04-23 13:15 / 1403人閱讀

摘要：秒后跳轉(zhuǎn)到對(duì)應(yīng)的網(wǎng)址，注意引號(hào)指定文檔的編碼類(lèi)型告訴以最高級(jí)模式渲染文檔屬性主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為，中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類(lèi)信息用的。主要通過(guò)樣式為其賦予不同的表現(xiàn)。

一、WEB本質(zhì)

本質(zhì)：socket

瀏覽器發(fā)請(qǐng)求 --> HTTP協(xié)議 --> 服務(wù)端接收請(qǐng)求 --> 服務(wù)端返回響應(yīng) --> 服務(wù)端把HTML文件內(nèi)容發(fā)給瀏覽器 --> 瀏覽器渲染頁(yè)面

服務(wù)端：

import socket

sk = socket.socket()

sk.bind(("127.0.0.1", 8080))
sk.listen(5)

while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)
    conn.send(b"HTTP/1.1 200 OKrnrn")
    conn.send(b"Hello world!")
    conn.close()

瀏覽器：

二、HTML介紹

1、HTML是什么？

超文本標(biāo)記語(yǔ)言（Hypertext Markup Language, HTML）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)記語(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

ps：HTML是一種標(biāo)記語(yǔ)言，它不是編程語(yǔ)言！

　　HTML使用標(biāo)簽來(lái)描述網(wǎng)頁(yè)。

2、HTML VS Python

三、HTML文檔結(jié)構(gòu)


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>titletitle>
head>
<body>

body>
html>

聲明為HTML5文檔。
、是文檔的開(kāi)始標(biāo)記和結(jié)束的標(biāo)記。是HTML頁(yè)面的根元素，在它們之間是文檔的頭部（head）和主體（body）。
、定義了HTML文檔的開(kāi)頭部分。它們之間的內(nèi)容不會(huì)在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數(shù)據(jù)。
</span>、<span style="background-color: #00ff00;">定義了網(wǎng)頁(yè)標(biāo)題，在瀏覽器標(biāo)題欄顯示。
、之間的文本是可見(jiàn)的網(wǎng)頁(yè)主體內(nèi)容。

ps：對(duì)于中文網(wǎng)頁(yè)需要使用聲明字符編碼，否則會(huì)出現(xiàn)亂碼！

四、HTML標(biāo)簽格式

HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵字，如：,
等
HTML標(biāo)簽通常是成對(duì)出現(xiàn)的，比如：
，第一個(gè)標(biāo)簽是開(kāi)始，第二個(gè)標(biāo)簽是結(jié)束，結(jié)束標(biāo)簽會(huì)有斜線(xiàn)！
有一部分標(biāo)簽是多帶帶出現(xiàn)的，比如：
、
、等。
標(biāo)簽里面可以有屬性，也可以不帶屬性

標(biāo)簽的語(yǔ)法：

<標(biāo)簽名屬性1=“屬性值1” 屬性2=“屬性值2”。。。>內(nèi)容部分
<標(biāo)簽名屬性1=“屬性值1” 屬性2=“屬性值2”。。。 / >

重要屬性：

id ：定義標(biāo)簽的唯一ID，HTML文檔中唯一存在
class：為HTML元素定義一個(gè)或多個(gè)類(lèi)名(classname) CSS樣式
style：規(guī)定元素的行內(nèi)樣式(CSS)

HTML注釋?zhuān)?/span>

為了代碼規(guī)范性最好加注釋

標(biāo)簽

聲明必須是 HTML 文檔的第一行，位于標(biāo)簽之前。

聲明不是 HTML 標(biāo)簽；它是指示 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫(xiě)的指令。

五、HTML中head內(nèi)常用標(biāo)簽

meta 標(biāo)簽

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

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

1.1、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=http://www.baidu.com">


<meta http-equiv="content-Type" charset=UTF8">


<meta http-equiv="x-ua-compatible" content="IE=edge">

1.2、 name屬性：

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

<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)">

<meta name="description" content="w3school">

六、HTML中body內(nèi)常用標(biāo)簽

1. 基本標(biāo)簽（塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽）

<b>加粗b>
<i>斜體i>
<u>下劃線(xiàn)u>
<s>刪除s>

<p>段落標(biāo)簽p>

<h1>標(biāo)題1h1>
<h2>標(biāo)題2h2>
<h3>標(biāo)題3h3>
<h4>標(biāo)題4h4>
<h5>標(biāo)題5h5>
<h6>標(biāo)題6h6>


<br>

<hr>

2. 特殊字符

3. div 標(biāo)簽和 span 標(biāo)簽

div 標(biāo)簽：

　　定義一個(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)元素則不需另起一行。如果多帶帶在網(wǎng)頁(yè)中插入這兩個(gè)元素，不會(huì)對(duì)頁(yè)面產(chǎn)生任何的影響。
這兩個(gè)元素是專(zhuān)門(mén)為定義CSS樣式而生的。

ps：關(guān)于標(biāo)簽嵌套：通常塊級(jí)元素 可以包含 內(nèi)聯(lián)元素或某些塊級(jí)元素，但內(nèi)聯(lián)元素不能包含塊級(jí)元素，它只能包含其他內(nèi)聯(lián)元素！

p標(biāo)簽不能包含塊級(jí)標(biāo)簽，p標(biāo)簽也不能包含p標(biāo)簽。

4. img 標(biāo)簽

<img src="圖片的路徑" alt="圖片未加載成功時(shí)的提示" title="鼠標(biāo)懸浮時(shí)提示信息" width="寬" height="高(寬高兩個(gè)屬性只用一個(gè)會(huì)自動(dòng)等比縮放)">

5. a 標(biāo)簽

超鏈接標(biāo)簽（從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序）

什么是URL？
URL是統(tǒng)一資源定位器(Uniform Resource Locator)的縮寫(xiě)，也被稱(chēng)為網(wǎng)頁(yè)地址，是因特網(wǎng)上標(biāo)準(zhǔn)的資源的地址。
URL舉例
https://www.baidu.com/
http://http://115.239.211.112/

URL地址由4部分組成
第1部分：為協(xié)議：http://、ftp://等 
第2部分：為站點(diǎn)地址：可以是域名或IP地址
第3部分：為頁(yè)面在站點(diǎn)中的目錄：stu
第4部分：為頁(yè)面名稱(chēng)，例如 index.html
各部分之間用“/”符號(hào)隔開(kāi)。

<a href="http://www.baidu.com" target="_blank" >點(diǎn)我開(kāi)車(chē)a>

href屬性指定目標(biāo)網(wǎng)頁(yè)地址。該地址可以有幾種類(lèi)型：

絕對(duì)URL - 指向另一個(gè)站點(diǎn)（比如 href="http://www.jd.com）
相對(duì)URL - 指當(dāng)前站點(diǎn)中確切的路徑（href="index.htm"）
錨URL - 指向頁(yè)面中的錨（href="#top"）

target：

_blank表示在新標(biāo)簽頁(yè)中打開(kāi)目標(biāo)網(wǎng)頁(yè)
_self表示在當(dāng)前標(biāo)簽頁(yè)中打開(kāi)目標(biāo)網(wǎng)頁(yè)

6. 列表（ul、ol、dl）

1.無(wú)序列表 ul

<ul type="disc">
  <li>第一項(xiàng)li>
  <li>第二項(xiàng)li>
ul>

type屬性：

disc（實(shí)心圓點(diǎn)，默認(rèn)值）
circle（空心圓圈）
square（實(shí)心方塊）
none（無(wú)樣式）

2.有序列表 ol

<ol type="1" start="2">
  <li>第一項(xiàng)li>
  <li>第二項(xiàng)li>
ol>

type屬性：

1 數(shù)字列表，默認(rèn)值
A 大寫(xiě)字母
a 小寫(xiě)字母
Ⅰ大寫(xiě)羅馬
ⅰ小寫(xiě)羅馬

3.標(biāo)題列表

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

7. 表格 table

<table>
  <thead>
  <tr>
    <th>idth>
    <th>姓名th>
    <th>愛(ài)好th>
  tr>
  thead>
  <tbody>
  <tr>
    <td>1td>
    <td>mogutd>
    <td>聽(tīng)歌td>
  tr>
  <tr>
    <td>2td>
    <td>小女孩td>
    <td>跳舞td>
  tr>
  tbody>
table>

屬性:

border: 表格邊框.
cellpadding: 內(nèi)邊距
cellspacing: 外邊距.
width: 像素百分比.（最好通過(guò)css來(lái)設(shè)置長(zhǎng)寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合并單元格）

七、HTML中body內(nèi) form 表單

表單用于向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶(hù)與Web服務(wù)器的交互
表單能夠包含input系列標(biāo)簽，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標(biāo)簽。

表單屬性

基本概念：
　　HTML表單是HTML元素中較為復(fù)雜的部分，表單往往和腳本、動(dòng)態(tài)頁(yè)面、數(shù)據(jù)處理等功能相結(jié)合，因此它是制作動(dòng)態(tài)網(wǎng)站很重要的內(nèi)容。
　　表單一般用來(lái)收集用戶(hù)的輸入信息

表單工作原理：
　　訪(fǎng)問(wèn)者在瀏覽有表單的網(wǎng)頁(yè)時(shí)，可填寫(xiě)必需的信息，然后按某個(gè)按鈕提交。這些信息通過(guò)Internet傳送到服務(wù)器上。
　　服務(wù)器上專(zhuān)門(mén)的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息，并要求糾正錯(cuò)誤。當(dāng)數(shù)據(jù)完整無(wú)誤后，服務(wù)器反饋一個(gè)輸入完成的信息。

from django.conf.urls import url
from django.shortcuts import HttpResponse


def upload(request):
    print("request.GET:", request.GET)
    print("request.POST:", request.POST)

    if request.FILES:
        filename = request.FILES["file"].name
        with open(filename, wb) as f:
            for chunk in request.FILES[file].chunks():
                f.write(chunk)
            return HttpResponse(上傳成功)
    return HttpResponse("收到了！")

urlpatterns = [
    url(r^upload/, upload),
]

Django接收上傳文件代碼

1、input

元素會(huì)根據(jù)type 屬性，變化多種形態(tài)

text        <p>單行輸入文本：<input type="text">p> value=“默認(rèn)值”  placeholder=“占位內(nèi)容”
password    <p>密碼輸入框： <input type="password">p>
date        <p>日期輸入框： <input type="date">p> type="datetime" 時(shí)間
checkbox    <p>多選框 ：    <input type="checkbox" checked>p>
            <p>多選框2 ：   <input type="checkbox" >p>
radio       <p>單選框   ：  <input type="radio">p>
submit      <p>提交按鈕  ： <input type="submit">p>
reset       <p>重置按鈕  ： <input type="reset">p>
button      <p>普通按鈕  ： <input type="button">p>  多用于JS與其綁定事件
hidden      <p>隱藏輸入框： <input type="hidden">p> 
file        <p>文本選擇框 ：<input type="file">p>

name：表單提交時(shí)的“鍵”，注意和id的區(qū)別
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)的值
checked：radio和checkbox默認(rèn)被選中的項(xiàng)
readonly：text和password設(shè)置只讀
disabled：所有input均適用

2、select

2.1 下拉菜單

        <p><select name="城市" id="">
            <option value="sh">上海option>
            <option value="bj">北京option>
            <option value="wh">武漢option>
        select>p>

2.2 分組的下拉菜單

    <select name="地點(diǎn)" id="address">
        <optgroup label="上海">
            <option value="xhq">徐匯區(qū)option>
            <option value="pdxq">浦東新區(qū)option>
            <option value="ypq">楊浦區(qū)option>
            <option value="bsq">寶山區(qū)option>
        optgroup>
        <optgroup label="北京">
            <option value="cyq">海淀區(qū)option>
            <option value="hdq">朝陽(yáng)區(qū)option>
        optgroup>
    select>

屬性說(shuō)明：

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

3、label

定義：標(biāo)簽為input 元素定義標(biāo)記

　　label 元素不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果

　　標(biāo)簽的 for 屬性值應(yīng)當(dāng)與相關(guān)元素的 id 值相同

        <label for="t1">測(cè)試label>
        <input type="text" id="t1" name="t1">

4、textarea 多文本內(nèi)容

        <p><textarea name="info" id="info" cols="30" rows="10">
            文本文檔（默認(rèn)內(nèi)容）
        textarea>p>

屬性說(shuō)明：

name：名稱(chēng)
rows：行數(shù)
cols：列數(shù)
disabled：禁用

form表單提交數(shù)據(jù)的幾個(gè)注意事項(xiàng):
    0. 如果上傳文件的話(huà)，必須要form表單action后面添加 enctype="multipart/form-data"
    1. 所有獲取用戶(hù)輸入的標(biāo)簽都必須放在form表單里面
    2. action控制著往哪兒提交
    3. inputselecttextarea 都需要有name屬性
    4. 提交按鈕 <input type="submit">

GPU云服務(wù)器云服務(wù)器 html對(duì)象.html html嵌套html html調(diào)用html html內(nèi)嵌html

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1636.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 736·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3981·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問(wèn)題 lib/native/libhadoop.so which mi

閱讀 3807·2021-11-30 14:52
VmShell：黑五美國(guó)VPS,免費(fèi)先開(kāi)通測(cè)試,滿(mǎn)意后付款!支持tiktok美區(qū)

閱讀 3871·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3802·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3904·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3580·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過(guò)多的解決方法

閱讀 6184·2021-11-29 11:00

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

HTML

一、WEB本質(zhì)

Hello world!

二、HTML介紹

1、HTML是什么？

2、HTML VS Python