最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

前端之html語言

來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 15:36:30
文檔

前端之html語言

前端之html語言:前端概述超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。您可以使用 HTML 來建立自己的 WEB 站點,HTML 運行在瀏覽器上,由瀏覽器來解析。服務(wù)端代碼:#!/usr/bin/env python # -
推薦度:
導(dǎo)讀前端之html語言:前端概述超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。您可以使用 HTML 來建立自己的 WEB 站點,HTML 運行在瀏覽器上,由瀏覽器來解析。服務(wù)端代碼:#!/usr/bin/env python # -
前端概述

超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。

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

服務(wù)端代碼:

#!/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:訪問京東網(wǎng)站

前端之html語言

從瀏覽器訪問京東的服務(wù)器原理圖

html css js 稱為:網(wǎng)絡(luò)三劍客

上網(wǎng):其實就是下載網(wǎng)頁
瀏覽器:就是一個解釋器

常見模式有兩種:

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

標簽語言:<>

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

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

內(nèi)聯(lián)標簽:占用一行

HTML 是什么?

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

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

標記語言: 標記(標簽)構(gòu)成的語言.

網(wǎng)頁==HTML文檔,由瀏覽器解析,用來展示的

靜態(tài)網(wǎng)頁:靜態(tài)的資源,如xxx.html

動態(tài)網(wǎng)頁:html代碼是由某種開發(fā)語言根據(jù)用戶請求動態(tài)生成的

html文檔樹形結(jié)構(gòu)圖:

前端之html語言

什么是標簽

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

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

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

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

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

標簽的屬性

通常是以鍵值對形式出現(xiàn)的. 例如 name="alex"

屬性只能出現(xiàn)在開始標簽 或 自閉和標簽中.

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

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

示例:

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

<!DOCTYPE html>標簽

由于歷史的原因,各個瀏覽器在對頁面的渲染上存在差異,甚至同一瀏覽器在不同版本中,對頁面的渲染也不同。在
W3C標準出臺以前,瀏覽器在對頁面的渲染上沒有統(tǒng)一規(guī)范,產(chǎn)生了差異(Quirks mode或者稱為Compatibility
Mode);由于W3C標準的推出,瀏覽器渲染頁面有了統(tǒng)一的標準(CSScompat或稱為Strict mode也有叫做Standars
mode),這就是二者最簡單的區(qū)別。
W3C標準推出以后,瀏覽器都開始采納新標準,但存在一個問題就是如何保證舊的網(wǎng)頁還能繼續(xù)瀏覽,在標準出來以前,
很多頁面都是根據(jù)舊的渲染方法編寫的,如果用的標準來渲染,將導(dǎo)致頁面顯示異常。為保持瀏覽器渲染的兼容性,使以
前的頁面能夠正常瀏覽,瀏覽器都保留了舊的渲染方法(如:微軟的IE)。這樣瀏覽器渲染上就產(chǎn)生了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 屬性,不同的屬性又有不同的參數(shù)值,這些不同的參數(shù)值就實現(xiàn)了不同的網(wǎng)頁功能。

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

<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)">
 
<meta name="description" content="快維工作室培訓(xùn)機構(gòu)是由一個努力哥創(chuàng)建的">

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

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

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

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

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

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

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

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

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

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

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

非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標簽

設(shè)置標簽背景色

<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>

一 基本標簽(塊級標簽和內(nèi)聯(lián)標簽)

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

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

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

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

<em>: 文字變成斜體.

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

<br>:換行.

<hr>:水平線

<div>

<div> hello world</div> 就是什么都不做(重點)

<span> :只占一小塊空間 (內(nèi)聯(lián)標簽)

內(nèi)聯(lián)標簽:只能嵌套內(nèi)聯(lián)標簽

塊級標簽:可以嵌套內(nèi)聯(lián)標簽

示例:演示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>

內(nèi)聯(lián)標簽:<a><input><img><sub><sup><textarea><span>

block(塊)元素的特點

總是在新行上開始;
寬度缺省是它的容器的100%,除非設(shè)定一個寬度。
它可以容納內(nèi)聯(lián)元素和其他塊元素

inline元素的特點

和其他元素都在一行上;
寬度就是它的文字或圖片的寬度,不可改變
內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

特殊字符

大于 = < 小于=>;";©® 空格=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 : 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內(nèi)容.

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

用于跳轉(zhuǎn) href : #id.(錨)

示例:

<body>
<a href="http://www.xiaohuar.com">?;ňW(wǎng)</a>>
<a href="http://www.xiaohuar.com" target="_blank">?;ňW(wǎng)</a>>
<a href="http://www.xiaohuar.com" target="_blank"><img src="1.jpg" alt="">?;ňW(wǎng)</a>> #實現(xiàn)打開圖片自動跳轉(zhuǎn)到?;ňW(wǎng)
</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>第一節(jié)</dd>
 <dd>第二節(jié)</dd>
</dl>

</body>

執(zhí)行效果:

前端之html語言

五 表格標簽: <table>

border: 表格邊框.

cellpadding: 內(nèi)邊距

cellspacing: 外邊距.

width: 像素 百分比.(最好通過css來設(shè)置長寬)

<tr>: table row

 <th>: table head cell

 <td>: table data cell

rowspan: 單元格豎跨多少行

colspan: 單元格橫跨多少列(即合并單元格)

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

示例:

<!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>
 <!--內(nèi)容正常顯示,不加粗-->
 <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>

執(zhí)行結(jié)果:

前端之html語言

六 表單標簽<form>

表單用于向服務(wù)器傳輸數(shù)據(jù)。

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

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

1.表單屬性

  HTML 表單用于接收不同類型的用戶輸入,用戶提交表單時向服務(wù)器傳輸數(shù)據(jù),從而實現(xiàn)用戶與Web服務(wù)器的交互。表單標簽, 要提交的所有內(nèi)容都應(yīng)該在該標簽中.

action: 表單提交到哪. 一般指向服務(wù)器端一個程序,程序接收到表單提交過來的數(shù)據(jù)(即表單元素值)作相應(yīng)處理,比如https://www.sogou.com/web

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

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

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

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

2.表單元素

<input> 標簽的屬性和對應(yīng)值

type: text 文本輸入框

 password 密碼輸入框

 radio 單選框

 checkbox 多選框 

 submit 提交按鈕 

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

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

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



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








 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:就是提交數(shù)據(jù)到服務(wù)端 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="" 隨便輸入一個內(nèi)容-->
<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>

<!--提交:會觸發(fā)事件,提交給服務(wù)端-->
<p><input type="submit" value="提交注冊"></p>

<!--提交按鍵:不會觸發(fā)內(nèi)容-->
<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:就是提交數(shù)據(jù)到服務(wù)端 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="" 隨便輸入一個內(nèi)容-->
<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>
 
<!--提交:會觸發(fā)事件,提交給服務(wù)端-->
<p><input type="submit" value="提交注冊"></p>

<!--提交按鍵:不會觸發(fā)內(nèi)容-->
<p><input type="button" value="提交注冊"></p>

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

</body>
</html>

執(zhí)行結(jié)果:

前端之html語言

實現(xiàn):返回頂部功能

<!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>

執(zhí)行效果:

前端之html語言

示例:實現(xiàn)上傳文件功能

在服務(wù)端里面添加這段代碼:

#實現(xiàn)上傳文件效果

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')

前端頁面代碼:

實現(xiàn):上傳文件功能

<body>

<form>

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

</form>

</body>

<select> 下拉選標簽屬性

name:表單提交項的鍵.

 size:選項個數(shù)

 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>

執(zhí)行結(jié)果:

前端之html語言

<textarea> 文本域

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

<label>

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

<fieldset>

<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>

執(zhí)行結(jié)果:

前端之html語言

最后總結(jié):

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

<form>

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

 <!--input標簽的屬性和對應(yīng)值-->
 <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語言相關(guān)文章請關(guān)注PHP中文網(wǎng)!

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

前端之html語言

前端之html語言:前端概述超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。您可以使用 HTML 來建立自己的 WEB 站點,HTML 運行在瀏覽器上,由瀏覽器來解析。服務(wù)端代碼:#!/usr/bin/env python # -
推薦度:
標簽: 語言 語句 html
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top