點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

前端之html語言

來源：懂視網責編：小采時間：2020-11-27 15:36:30

前端之html語言

前端之html語言:前端概述超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。服務端代碼：#!/usr/bin/env python # -

推薦度：

點擊下載本文 文檔為doc格式

導讀前端之html語言:前端概述超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。服務端代碼：#!/usr/bin/env python # -

前端概述

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

服務端代碼：

#!/usr/bin/env python
# -*- coding:utf-8 -*- 
#Author: nulige

import socket

def main():
 sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
 sock.bind(('localhost',8080))
 sock.listen(5)

 while True:
 connection, address = sock.accept()
 buf = connection.recv(1024)
 f=open("test.html","rb") #以讀的方式打開test.html文件
 data=f.read()
 connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))

 connection.sendall(data)

 connection.close()

if __name__ == '__main__':

 main()

test.html代碼

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>nulige</title>
 <title>oldboy</title>
 <link rel="icon" href="http://www.jd.com/favicon.ico">
 <link rel="stylesheet" href="css.css">
 <script src="hello.js"></script>　
</head>
<body>
<h1>hello world</h1>>
<h2>hello world</h2>>
<input type="text" readonly>
<p>img src="file:///D:/python/day42/1.jpg" width="120" height="80" align=</p>

<h1 style="color:red">hello h1</h1>
<div>style</div>

</body>

<!--<script>-->
 <!--alert(window.top.document.compatMode)-->
<!--</script>-->

</html>

客戶端就是瀏覽器,通過瀏覽器去訪問test.html,得到的效果如下：

前端之html語言

示例2：訪問京東網站

前端之html語言

從瀏覽器訪問京東的服務器原理圖

html css js 稱為：網絡三劍客

上網：其實就是下載網頁
瀏覽器：就是一個解釋器

常見模式有兩種：

一種是cs模式：c: client s:server
一種是bs模式：b: browser s: server

標簽語言：<>

標簽分為：自閉合標簽和不閉合標簽

塊級標簽:只占自己字體的一小塊

內聯標簽:占用一行

HTML 是什么？

htyper text markup language 即超文本標記語言

超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。

標記語言: 標記（標簽）構成的語言.

網頁==HTML文檔，由瀏覽器解析，用來展示的

靜態網頁：靜態的資源，如xxx.html

動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的

html文檔樹形結構圖：

前端之html語言

什么是標簽

是由一對尖括號<>包裹的單詞構成例如: <html> *所有標簽中的單詞不可能以數字開頭.

標簽不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.

標簽分為兩部分: 開始標簽<a> 和結束標簽</a>. 兩個標簽之間的部分我們叫做標簽體.

有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉標簽.例如: <br/> <hr/> <input /> <img />

標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>

標簽的屬性

通常是以鍵值對形式出現的. 例如 name="alex"

屬性只能出現在開始標簽或自閉和標簽中.

屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹例如 name="alex"

如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly

示例：

 <body>
<input type="text" readonly>
</body>

<!DOCTYPE html>標簽

由于歷史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在
W3C標準出臺以前，瀏覽器在對頁面的渲染上沒有統一規范，產生了差異(Quirks mode或者稱為Compatibility
Mode)；由于W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱為Strict mode也有叫做Standars
mode)，這就是二者最簡單的區別。
W3C標準推出以后，瀏覽器都開始采納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來以前，
很多頁面都是根據舊的渲染方法編寫的，如果用的標準來渲染，將導致頁面顯示異常。為保持瀏覽器渲染的兼容性，使以
前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode
和Standars mode，兩種渲染方法共存在一個瀏覽器上。

window.top.document.compatMode：
//BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。 
//CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

用法示例：

 <script>
 alert(window.top.document.compatMode)
 </script>

　這個屬性會被瀏覽器識別并使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat,

這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那么，在不同的瀏覽器就會顯示不同的樣式。

如果你的頁面添加了<!DOCTYPE html>那么，那么就等同于開啟了標準模式，那么瀏覽器就得老老實實的按照W3C的

標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。

這就是<!DOCTYPE html>的作用。

head標簽

<meta>

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

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

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
 
<meta name="description" content="快維工作室培訓機構是由一個努力哥創建的">

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

<meta http-equiv="Refresh"content="2;URL=https://www.baidu.com"> //(注意后面的引號，分別在秒數的前面和網址的后面)
 
<meta http-equiv="content-Type"charset=UTF8">
 
<meta http-equiv = "X-UA-Compatible"content = "IE=EmulateIE7" />

注意：X-UA-Compatible(兼容：IE6 and IE7)

每個主要版本IE新增的功能都是為了讓瀏覽器更容易使用、增加安全性及更支持業界標準。以這些作為IE的特色，其中
一個風險就是舊版本網站無法正確的顯示。

為了將這個風險降到最低，IE6允許網頁開發人員選擇IE編譯和顯示他們網頁的方式。"Quirks mode"為預設，這會
使頁面以舊版本瀏覽器的視點顯示，"Standards mode"(也稱為"strict mode")特點是支持業界標準最為完善。
然而要利用這個增強的支持功能，網頁必須包含恰當的<!DOCTYPE>指令。

若一個網頁沒有包含<!DOCTYPE>指令，IE6會將它以quirks mode顯示。若網頁包含有效的<!DOCTYPE>指令但瀏
覽器無法辨識，IE6會將它以IE6 standards mode顯示。因為少數網站已經包含<!DOCTYPE>指令，兼容性模式的
切換相當成功。這使網頁開發人員能選擇將他們的網頁轉移為standards mode的最佳時機。

隨著時間經過，更多網站開始使用standards mode。它們也開始使用IE6的特性和功能來檢測IE。舉例來說，IE6
不支持universal selector(即css之全局選擇器 * {})，一些網站便使用它來針對IE做特定的對應。

當 IE7增加了對全域選擇器的支持，那些依賴IE6特點的網站便無法偵測出這個新版本的瀏覽器。因此那些針對IE的
特定對應無法應用于IE7，造成這些網站便無法如他們預期的顯示。由于<!DOCTYPE>只支持兩種兼容性模式，受到影
響的網站擁有者被迫更新他們的網站使其能支持IE7。

IE8 比之前的任何版本瀏覽器都更支持業界標準，因此針對舊版本瀏覽器設計的網頁可能無法如預期般呈現。為了幫
助減輕所有問題，IE8引入文件兼容性的概念，使你能選擇你的網頁設計要對應的特定IE版本。文件兼容性在IE8增加
了一些新的模式，這些模式能告訴瀏覽器如何解析和編譯一個網頁。若你的網頁無法在 ie8正確的顯示，你可以更新
你的網站使它支持最新的網頁標準(優先選項)或在你的頁面上新增一個meta元素用于告訴IE8如何依照舊版本瀏覽器
編譯你的頁面。

這能讓你選擇將你的網站更新支持IE8新特點的時機。

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用 <!DOCTYPE> 指令來確
定如何顯示該網頁。 如果該指令丟失或未指定基于標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式
（Quirks 模式）顯示該網頁。

非meta標簽

 <title>nulige</title>
 <link rel="icon" href="http://www.jd.com/favicon.ico">
 <link rel="stylesheet" href="css.css">
 <script src="hello.js"></script>

body標簽

設置標簽背景色

<h3 style="padding: 2px 0px 2px 10px; font-size: 15px; line-height: 24px; background: #009acd; color: #ffffff; font-family: 'comic sans ms', 微軟雅黑, 宋體, 黑體, Arial; height: 24px; width: 507.47px; margin: 12px 0px !important;">body標簽</h3>

一基本標簽（塊級標簽和內聯標簽）

<hn>: n的取值范圍是1~6; 從大到小. 用來表示標題. <h1> hello world <h1>

<p>: 段落標簽. 包裹的內容被換行.并且也上下內容之間有一行空白. （塊級標簽）

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

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

<em>: 文字變成斜體.

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

<br>:換行.

<hr>:水平線

<div>

<div> hello world</div> 就是什么都不做（重點）

<span> ：只占一小塊空間 （內聯標簽）

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

塊級標簽：可以嵌套內聯標簽

示例:演示div標簽

<div style="color: green; background-color: aquamarine;height: 100px;width: 50%;font-size: 40px;text-align: center">hello</div>

運行效果：

前端之html語言

塊級標簽：<p><h1><table><ol><ul><form><div>

內聯標簽：<a><input><img><sub><sup><textarea><span>

block（塊）元素的特點

總是在新行上開始；
寬度缺省是它的容器的100%，除非設定一個寬度。
它可以容納內聯元素和其他塊元素

inline元素的特點

和其他元素都在一行上；
寬度就是它的文字或圖片的寬度，不可改變
內聯元素只能容納文本或者其他內聯元素

特殊字符

大于 = < 小于=>；"；©® 空格=nbsp

HTML 特殊符號編碼對照表

參考：http://tool.chinaz.com/Tools/HtmlChar.aspx

CSS樣式參考:

http://v3.bootcss.com/

二圖形標簽: <img>

src: 要顯示圖片的路徑.

alt: 圖片沒有加載成功時的提示.

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

示例:打開一張圖片

<body>
<img src="1.jpg" alt="截圖" title="京東" width="200px" height="200">
</body>

三超鏈接標簽(錨標簽) <a>

href:要連接的資源路徑 格式如下: href="http://www.baidu.com" 

target: _blank : 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內容.

name: 定義一個頁面的書簽.

用于跳轉 href : #id.（錨）

示例：

<body>
<a href="http://www.xiaohuar.com">校花網</a>>
<a href="http://www.xiaohuar.com" target="_blank">校花網</a>>
<a href="http://www.xiaohuar.com" target="_blank"><img src="1.jpg" alt="">校花網</a>> #實現打開圖片自動跳轉到校花網
</body>

四列表標簽：

<ul>: 無序列表

<ol>: 有序列表
 <li>:列表中的每一項.

<dl> 定義列表

 <dt> 列表標題
 <dd> 列表項

示例：

<body>

#unorder list
<ul> #快捷鍵，輸入ul，再按tab鍵會自動補全
 <li>111</li>
 <li>222</li>
 <li>333</li>
</ul>

#older list
<ol>
 <li>111</li>
 <li>222</li>
 <li>333</li>
</ol>

#定義列表
<dl>
 <dt>第一章</dt>
 <dd>第一節</dd>
 <dd>第二節</dd>
</dl>

</body>

執行效果：

前端之html語言

五表格標簽: <table>

border: 表格邊框.

cellpadding: 內邊距

cellspacing: 外邊距.

width: 像素 百分比.（最好通過css來設置長寬）

<tr>: table row

 <th>: table head cell

 <td>: table data cell

rowspan: 單元格豎跨多少行

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

<th>: table header <tbody>(不常用): 為表格進行分區.

示例：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

<!--表格-->

<!--布局-->
<table border="1px" cellpadding="5px" cellspacing="5px">
 <thead>
 <tr>
 <!--標題加粗-->
 <th>111</th>
 <th>222</th>
 <th>333</th>
 </tr>

 </thead>

 <tbody>
 <tr>
 <!--內容正常顯示，不加粗-->
 <td rowspan="2">111</td>
 <td>222</td>
 <td>333</td>
 </tr>

 <tr>
 <td>111</td>
 <td>222</td>
 </tr>

 <tr>
 <td>111</td>
 <td colspan="2">222</td>
 </tr>
 </tbody>

</table>

</body>
</html>

執行結果：

前端之html語言

六表單標簽<form>

表單用于向服務器傳輸數據。

表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。

表單還可以包含textarea、select、fieldset和 label 元素。

1.表單屬性

　　HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標簽, 要提交的所有內容都應該在該標簽中.

action: 表單提交到哪. 一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/web

method: 表單的提交方式 post/get 默認取值就是 get（信封）

get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內容的長度有限制.

post:1.提交的鍵值對不在地址欄，數據封裝在form Data 請求體里面。 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

get/post是常見的兩種請求方式.

2.表單元素

<input> 標簽的屬性和對應值

type: text 文本輸入框

 password 密碼輸入框

 radio 單選框

 checkbox 多選框 

 submit 提交按鈕 

 button 按鈕(需要配合js使用.) button和submit的區別？

 file 提交文件：form表單需要加上屬性enctype="multipart/form-data" 

 name: 表單提交項的鍵.注意和id屬性的區別：name屬性是和服務器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客
 戶端編程，而在css和javascript中使用的
 value: 表單提交項的值.對于不同的輸入類型，value 屬性的用法也不同：
2
4



type="button", "reset", "submit" - 定義按鈕上的顯示的文本
 
type="text", "password", "hidden" - 定義輸入字段的初始值
 
type="checkbox", "radio", "image" - 定義與輸入相關聯的值　　








 checked: radio 和 checkbox 默認被選中

 readonly: 只讀. text 和 password

 disabled: 對所用input都好使.

示例：寫一個注冊頁面

代碼1：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<h1>注冊頁面</h1>

<!--action:就是提交數據到服務端 method{get,post}默認:get-->
<!--<form action="http://127.0.0.1:8080/index" method="post">-->

<!--上傳文件加這句-->
<form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data">

<!--輸入框-->
<!--type="" 隨便輸入一個內容-->
<p>用戶名:<input type="test" name="username" placeholder="姓名"></p>

<!--password:不顯示密碼-->
<p>密碼:<input type="password" name="password" placeholder="密碼"></p>

<!--password:不顯示密碼,只讀不能寫密碼-->
<!--<p>密碼:<input type="password" name="password" placeholder="密碼" readonly="readonly"></p>-->

<!--多選框-->
<p>愛好： 音樂<input type="checkbox" name="hobby" value="music"> 電影<input type="checkbox" name="hobby" value="movie"></p>

<!--單選框-->
<p>性別： 男<input type="radio" name="gender" value="men"> 女<input type="radio" name="gender" value="women"></p>

<!--重置 -->
<p><input type="reset" value="重置"></p>

<!--提交：會觸發事件，提交給服務端-->
<p><input type="submit" value="提交注冊"></p>

<!--提交按鍵：不會觸發內容-->
<p><input type="button" value="提交注冊"></p>

<!--選擇文件-->
<p><input type="submit" value="提交注冊"></p>


</form>

</body>
</html>

代碼2 1 <!DOCTYPE html>

<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>

<body>

<h1>注冊頁面</h1>
<!--<strike>用戶注冊</strike>--> #劃掉“用戶注冊”幾個字
<!--action:就是提交數據到服務端 method{get,post}默認:get-->
<!--<form action="http://127.0.0.1:8080/index" method="post">-->

<!--上傳文件加這句-->
<form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data">

<!--輸入框-->
<!--type="" 隨便輸入一個內容-->
<p>用戶名:<input type="test" name="username" placeholder="姓名" disabled></p>

<!--password:不顯示密碼-->
<p>密碼:<input type="password" name="password" placeholder="密碼"></p>

<!--password:不顯示密碼,只讀不能寫密碼-->
<!--<p>密碼:<input type="password" name="password" placeholder="密碼" readonly="readonly"></p>-->

<!--多選框-->
<p>愛好： 音樂<input type="checkbox" name="hobby" value="music" checked> 電影<input type="checkbox" name="hobby" value="movie"></p>

<!--單選框-->
<p>性別： 男<input type="radio" name="gender" value="men"> 女<input type="radio" name="gender" value="women"></p>

<!--重置 -->
<p><input type="reset" value="重置"></p>
 
<!--提交：會觸發事件，提交給服務端-->
<p><input type="submit" value="提交注冊"></p>

<!--提交按鍵：不會觸發內容-->
<p><input type="button" value="提交注冊"></p>

<!--選擇文件-->
<p><input type="submit" value="提交注冊"></p>
 
</form>

</body>
</html>

執行結果：

前端之html語言

實現:返回頂部功能

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="www"></div>
<img src="1.jpg" alt="截圖" title="京東" width="800" height="800"><br>
<a href="#www">返回頂部</a>
</body>
</html>

執行效果：

前端之html語言

示例：實現上傳文件功能

在服務端里面添加這段代碼：

#實現上傳文件效果

def index(request):
 print request.POST
 print request.GET
 print request.FILES
 for item in request.FILES:
 fileObj = request.FILES.get(item)
 f = open(fileObj.name, 'wb')
 iter_file = fileObj.chunks()
 for line in iter_file:
 f.write(line)
 f.close()
 return HttpResponse('ok')

前端頁面代碼：

實現：上傳文件功能

<body>

<form>

<!--上傳文件-->
<p><input type="file" ></p>

</form>

</body>

<select> 下拉選標簽屬性

name:表單提交項的鍵.

 size：選項個數

 multiple：multiple 

 <option> 下拉選中的每一項 屬性：

 value:表單提交項的值. selected: selected下拉選默認被選中

 <optgroup>為每一項加上分組

示例:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

 省<select name="" id="">
 <option value="">北京市</option>
 <option value="">河北市</option>
 <option value="">河南市</option>
 <option value="">山西市</option>
 </select>


 省<select name="province" multiple size="2">
 <option value="beijing">北京市</option>
 <option value="hebei">河北市</option>
 <!--默認選中河南省selected-->
 <option value="henan" selected="selected">河南市</option>
 <option value="shanxi">山西市</option>
 </select>

 <!--選擇框-->
 省<select name="province" >
 <optgroup label="廣東省">
 <option value="beijing">廣州</option>
 <option value="hebei">東莞</option>
 <!--默認選中河南省selected-->
 <option value="henan" selected="selected">中山市</option>
 <option value="shanxi">珠海市</option>
 </optgroup>
 </select>

</body>
</html>

執行結果:

前端之html語言

<textarea> 文本域

name: 表單提交項的鍵.
cols: 文本域默認有多少列
rows: 文本域默認有多少行

<label>

<label for="www">姓名</label>
<input id="www" type="text">

<fieldset>
 <legend>登錄吧</legend> 
 <input type="text">
</fieldset>

示例：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

 <!--文本框-->
 簡介<textarea name="desc" id="" cols="30" rows="10"></textarea>

 <fieldset>
 <legend>登錄吧</legend>
 <input type="text">
 </fieldset>

 <!--特效-->
 <label for="www">姓名</label>
 <input id="www" type="text">

</body>
</html>

執行結果:

前端之html語言

最后總結：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

<form>

 <!--提交數據到服務端(方式有get and post)-->
 <form action="http://127.0.0.1:8080/index" method="post">

 <!--input標簽的屬性和對應值-->
 <input type="test" name="username">
 <input type="password" name="pwd">
 <input type="checkbox" name="hobby" value="musci">
 <input type="radio" name="gender" value="man">
 <input type="file" name="filename" >
 <input type="submit" name="提交" >
 <input type="button" name="提交" >
 <input type="reset" name="重置" >


 <!--下拉選標簽屬性-->
 <select name="">
 <option value=""></option>
 <option value=""></option>
 </select>

 <!--文本域-->
 簡介<textarea name="" id="" cols="30" rows="10"></textarea>
 
</form>

</body>
</html>

更多前端之html語言相關文章請關注PHP中文網！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

前端之html語言

推薦度：

點擊下載本文 文檔為doc格式

標簽：語言語句 html

熱門焦點

前端之html語言

前端之html語言

前端之html語言

最新推薦

猜你喜歡

熱門推薦