前端基礎(chǔ)-- HTML

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

摘要：知識(shí)介紹服務(wù)本質(zhì)瀏覽器發(fā)請(qǐng)求協(xié)議服務(wù)端接收請(qǐng)求服務(wù)端返回響應(yīng)服務(wù)端把文件內(nèi)容發(fā)給瀏覽器瀏覽器渲染頁(yè)面是什么超文本標(biāo)記語(yǔ)言是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)記語(yǔ)言。主要是通過(guò)樣式為其賦予不同的表現(xiàn)。這兩個(gè)元素是專門(mén)為定義樣式而生的。

HTML知識(shí)

HTML介紹

Web服務(wù)本質(zhì)

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

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

HTML不是什么？

HTML是一種標(biāo)記語(yǔ)言（markup language），它不是一種編程語(yǔ)言。

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

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

DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
    body>
html>

通過(guò)觀察我們發(fā)現(xiàn), HTML基本結(jié)構(gòu)中所有的標(biāo)簽都是成對(duì)出現(xiàn)的, 這些成對(duì)出現(xiàn)的標(biāo)簽中有一個(gè)帶/有一個(gè)不帶/, 那么這些不帶/的標(biāo)簽我們稱之為開(kāi)始標(biāo)簽, 這些帶/的我們稱之為結(jié)束標(biāo)簽

聲明為HTML5文檔

html標(biāo)簽

作用：用于告訴瀏覽器這是一個(gè)網(wǎng)頁(yè)，也就是說(shuō)告訴瀏覽器我是一個(gè)HTML文檔
注意：其它所有的標(biāo)簽都必須寫(xiě)在html標(biāo)簽里面, 也就是寫(xiě)在html開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽中間

head標(biāo)簽

作用：用于給網(wǎng)站添加一些配置信息
列如：外掛一些外部的css/js文件；添加一些瀏覽器適配相關(guān)的內(nèi)容
注意：一般情況下，寫(xiě)在head標(biāo)簽內(nèi)部的內(nèi)容不會(huì)顯示給用戶查看，也就是說(shuō)一般情況下寫(xiě)在head標(biāo)簽內(nèi)部的內(nèi)容我們都看不到

title標(biāo)簽

作用：專門(mén)用于指定網(wǎng)站的標(biāo)題，并且這個(gè)指定的標(biāo)題將來(lái)還會(huì)作為用戶保存網(wǎng)站的默認(rèn)標(biāo)題
注意：title標(biāo)簽必須寫(xiě)在head標(biāo)簽里面

body標(biāo)簽

作用：專門(mén)用于定義HTML文檔中需要顯示給用戶查看的內(nèi)容（文字/圖片/音頻/視頻）
注意：雖然說(shuō)有時(shí)候?qū)?nèi)容寫(xiě)到了別的地方在網(wǎng)頁(yè)中也能看到，但是千萬(wàn)不要這么干，一定要將需要顯示的內(nèi)容寫(xiě)在body中；一對(duì)html標(biāo)簽中（一個(gè)html開(kāi)始標(biāo)簽和一個(gè)html標(biāo)簽結(jié)束）只能有一對(duì)body標(biāo)簽

HTML標(biāo)簽

HTML標(biāo)簽格式

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

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

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

幾個(gè)很重要的屬性

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

HTML標(biāo)簽分類

單標(biāo)簽：只有開(kāi)始標(biāo)簽沒(méi)有結(jié)束標(biāo)簽，也就是由一個(gè)<>組成的
```
<meta charset="UTF-8" />
```
雙標(biāo)簽：有開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，也就是由一個(gè)<>和一個(gè)組成的
```
<html>
html>
```

HTML標(biāo)簽關(guān)系分類

并列關(guān)系（兄弟/平級(jí)）
```
<head>
head>
<body>
body>
```

嵌套關(guān)系（父子/上下級(jí)）

<head>
        <meta charset="UTF-8" />
        <title>百度一下,你就知道123title>
head>

HTML注釋

注釋是代碼之母。

HTML常用標(biāo)簽

head內(nèi)常用的標(biāo)簽

標(biāo)簽	意義
	定義網(wǎng)頁(yè)標(biāo)題
	定義內(nèi)部樣式表
	定義JS代碼或引入外部JS文件
	引入外部樣式表文件
	定義網(wǎng)頁(yè)原信息

Meta標(biāo)簽

Meta標(biāo)簽介紹：

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

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

http-equil屬性：相當(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.oldboyedu.com">

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

<meta http-equiv="x-ua-compatible" content="IE=edge">
```
name屬性：主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。
```
<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)">
<meta name="description" content="老男孩教育Python學(xué)院">
```

body內(nèi)常用的標(biāo)簽

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

<b>加粗b>
<i>斜體i>
<u>下劃線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>

特殊字符

內(nèi)容	對(duì)應(yīng)代碼
空格
>	>
<	<
&	&
¥	¥
版權(quán)	©
注冊(cè)	®

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

div：div標(biāo)簽用來(lái)定義一個(gè)塊級(jí)元素，并無(wú)實(shí)際的意義。主要通過(guò)CSS樣式為其賦予不同的表現(xiàn)。
span：span標(biāo)簽用來(lái)定義內(nèi)聯(lián)（行內(nèi)）元素，并無(wú)實(shí)際的意義。主要是通過(guò)CSS樣式為其賦予不同的表現(xiàn)。

div和span有什么區(qū)別?

1.div會(huì)多帶帶的占領(lǐng)一行,而span不會(huì)多帶帶占領(lǐng)一行
2.div是一個(gè)容器級(jí)的標(biāo)簽, 而span是一個(gè)文本級(jí)的標(biāo)簽

塊級(jí)元素與行內(nèi)元素的區(qū)別

所謂塊級(jí)元素，是以另起一行開(kāi)始渲染的元素，行內(nèi)元素則不需要另起一行。如果多帶帶在網(wǎng)頁(yè)中插入這兩個(gè)元素，不會(huì)對(duì)頁(yè)面產(chǎn)生任何的影響。

這兩個(gè)元素是專門(mén)為定義CSS樣式而生的。

注意：

關(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)簽。

img標(biāo)簽

作用：在網(wǎng)頁(yè)上插入一張圖片

格式：

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

屬性：

屬性名稱	作用
src(source)	告訴瀏覽器需要`插入`的圖片路徑, 以便于瀏覽器到該路徑下找到需要插入的圖片
alt(alternate)	規(guī)定圖像的替代文本, `只有`在src指定的路徑下`找不到圖片`,才會(huì)顯示alt指定的文本
title	懸停文本(介紹這張圖片, 只有在鼠標(biāo)移動(dòng)到圖片上時(shí)才會(huì)顯示)
height	設(shè)置圖片顯示的高度
width	設(shè)置圖片顯示的寬度

注意點(diǎn)：img標(biāo)簽添加的圖片默認(rèn)的不是占一整行空間；如果想讓圖片等比拉伸，只寫(xiě)高度或者寬度即可；如果img標(biāo)簽沒(méi)有指定需要顯示的圖片的寬高, 那么系統(tǒng)會(huì)按照?qǐng)D片默認(rèn)的寬高來(lái)顯示；如果img標(biāo)簽指定的寬高, 那么系統(tǒng)會(huì)按照指定的寬高來(lái)顯示。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img標(biāo)簽title>
head>
<body>


<img src="images/QRCode.jpg">

<img src="images/QRCode.jpg" width="300" height="478">

<img src="images/QRCode.jpg" width="100" height="478">

<img src="images/QRCode.jpg" height="178">
<img src="images/QRCode.jpg" width="100">

<img src="images/QRCode.jpg" width="100" title="這個(gè)是圖片">

<img src="images/QRCode1.jpg" width="100" alt="對(duì)不起, 你需要查看的圖片不見(jiàn)了">
body>
html>

img示例

a標(biāo)簽

作用：用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面
格式：
```
<a href="http://www.baidu.com">百度a>
```

屬性：

屬性名稱	作用
href(hypertext reference)	指定跳轉(zhuǎn)的目標(biāo)地址
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è)
title	懸停文本(介紹這個(gè)鏈接, 只有在鼠標(biāo)移動(dòng)到超鏈接上時(shí)才會(huì)顯示)

注意點(diǎn)：在a標(biāo)簽之間一定要寫(xiě)上文字, 如果沒(méi)有, 那么在頁(yè)面上找不到這個(gè)標(biāo)簽；a標(biāo)簽也叫做超級(jí)鏈接或者超鏈接；a標(biāo)簽不僅可以讓文字可以點(diǎn)擊, 還可以讓圖片也能夠被點(diǎn)擊；一個(gè)a標(biāo)簽必須有一個(gè)href屬性, 否則a標(biāo)簽不知道要跳轉(zhuǎn)到什么地方；如果通過(guò)a標(biāo)簽的href屬性指定一個(gè)URL地址, 那么必須在地址前面加上http://或https://；a標(biāo)簽的href屬性除了可以指定一個(gè)網(wǎng)絡(luò)地址以外, 還可以指定一個(gè)本地地址

a標(biāo)簽的其它用法：

假鏈接（本質(zhì)是跳轉(zhuǎn)到當(dāng)前頁(yè)面）
```
格式<a href="#">百度a>
格式<a href="javascript:">百度a>
```

跳轉(zhuǎn)到當(dāng)前頁(yè)面指定位置（錨點(diǎn)鏈接）

格式<a href="#location">跳轉(zhuǎn)到指定位置a>
在頁(yè)面的指定位置給任意標(biāo)簽添加一個(gè)id屬性
例如 <p id="location">這個(gè)是目標(biāo)p>

跳轉(zhuǎn)到指定頁(yè)面的指定位置

格式: <a href="01-錨點(diǎn)鏈接.html#location">跳轉(zhuǎn)到指定位置a>
只需要在01-錨點(diǎn)鏈接.html頁(yè)面添加一個(gè)id位置即可

下載（極力不推薦使用）

例如<a href="girl.zip">下載福利資源<a/>

列表標(biāo)簽

列表標(biāo)簽的作用：給一堆數(shù)據(jù)添加列表語(yǔ)義，也就是告訴搜索引擎告訴瀏覽器這一堆數(shù)據(jù)是一個(gè)整體

分類：無(wú)序列表；有序列表；定義列表

無(wú)序列表

給一堆數(shù)據(jù)添加列表語(yǔ)義, 并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都沒(méi)有先后之分

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

type屬性

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

注意

ul標(biāo)簽和li標(biāo)簽是一個(gè)整體, 是一個(gè)組合. 所以一般情況下ul標(biāo)簽和li標(biāo)簽都是一起出現(xiàn), 不會(huì)單個(gè)出現(xiàn). 也就是說(shuō)不會(huì)多帶帶使用一個(gè)ul標(biāo)簽或者多帶帶使用一個(gè)li 標(biāo)簽, 都是結(jié)合在一起使用；由于ul標(biāo)簽和li標(biāo)簽是一個(gè)組合, 所以u(píng)l標(biāo)簽中不推薦包含其它標(biāo)簽, 也就是說(shuō)以后你在ul標(biāo)簽中只會(huì)看到li標(biāo)簽

應(yīng)用場(chǎng)景：1.新聞列表；2.商品列表；3導(dǎo)航條

有序列表

有序列表的作用: 給一堆數(shù)據(jù)添加列表語(yǔ)義, 并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都有先后之分

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

type屬性

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

定義列表

給一堆數(shù)據(jù)添加列表語(yǔ)句；先通過(guò)dt標(biāo)簽定義列表中的所有標(biāo)題，然后再通過(guò)dd標(biāo)簽給每個(gè)標(biāo)題添加描述信息

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

注意

dl和dt/dd是一個(gè)整體，所以他們一般情況下不會(huì)多帶帶出現(xiàn)，都是一起出現(xiàn)；由于dl和dt/dd是一個(gè)組合標(biāo)簽，所以dl中建議只放dt和dd標(biāo)簽。

應(yīng)用場(chǎng)景：做網(wǎng)站尾部的相關(guān)信息；做圖文混排。

表格標(biāo)簽

表格是一個(gè)二維數(shù)據(jù)空間，一個(gè)表格由若干行組成，一個(gè)行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數(shù)字符號(hào)、預(yù)置文本和其它的表格等內(nèi)容。
表格最重要的目的是顯示表格類數(shù)據(jù)。表格類數(shù)據(jù)是指最適合組織為表格格式（即按行和列組織）的數(shù)據(jù)。

完整結(jié)構(gòu)

<table>
    <caption>表格的標(biāo)題caption>
    <thead>
        <tr>
            <th>每一列的標(biāo)題th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>數(shù)據(jù)td>
        tr>
    tbody>
    <tfoot>
        <tr>
            <td>數(shù)據(jù)td>
        tr>
    tfoot>
table>

caption作用: 指定表格的標(biāo)題
thead作用:   指定表格的表頭信息
tbody作用:   指定表格的主體信息
tfoot作用:   指定表格的附加信息

格式

table定義表格
tr定義行
td定義單元格

<table>
  <thead>
  <tr>
    <th>序號(hào)th>
    <th>姓名th>
    <th>愛(ài)好th>
  tr>
  thead>
  <tbody>
  <tr>
    <td>1td>
    <td>Egontd>
    <td>杠娘td>
  tr>
  <tr>
    <td>2td>
    <td>Yuantd>
    <td>日天td>
  tr>
  tbody>
table>

屬性

border：默認(rèn)情況下表格的邊框?qū)挾葹?看不到, 通過(guò)border屬性給表格指定邊框?qū)挾?/span>
width：默認(rèn)情況下表格的寬度是由內(nèi)容自動(dòng)計(jì)算出來(lái)的, 可以通過(guò)width屬性指定表格的寬度
height：默認(rèn)情況下表格的高度是由內(nèi)容自動(dòng)計(jì)算出來(lái)的, 可以通過(guò)height屬性指定表格的高度
cellspacing：外邊距. 默認(rèn)情況下單元格之間有2個(gè)像素的間隙, 可以通過(guò)cellpadding指定表格之間的間隙
cellpadding：內(nèi)邊距. 默認(rèn)情況下單元格邊緣距離內(nèi)容有1個(gè)像素的內(nèi)邊距, 可以通過(guò)cellpadding屬性指定單元格邊緣和內(nèi)容之間的內(nèi)邊距
rowspan：?jiǎn)卧褙Q跨多少行
colspan：?jiǎn)卧駲M跨多少列（即合并單元格）

form標(biāo)簽

功能：

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

表單屬性

屬性	描述
accept-charset	規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁(yè)面字符集）。
action	規(guī)定向何處提交表單的地址（URL）（提交頁(yè)面）。
autocomplete	規(guī)定瀏覽器應(yīng)該自動(dòng)完成表單（默認(rèn)：開(kāi)啟）。
enctype	規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）。
method	規(guī)定在提交表單時(shí)所用的 HTTP 方法（默認(rèn)：GET）。
name	規(guī)定識(shí)別表單的名稱（對(duì)于 DOM 使用：document.forms.name）。
novalidate	規(guī)定瀏覽器不驗(yàn)證表單。
target	規(guī)定 action 屬性中地址的目標(biāo)（默認(rèn)：_self）。

表單元素

基本概念：
HTML表單是HTML元素中較為復(fù)雜的部分，表單往往和腳本、動(dòng)態(tài)頁(yè)面、數(shù)據(jù)處理等功能相結(jié)合，因此它是制作動(dòng)態(tài)網(wǎng)站很重要的內(nèi)容。
表單一般用來(lái)收集用戶的輸入信息
表單工作原理：
訪問(wèn)者在瀏覽有表單的網(wǎng)頁(yè)時(shí)，可填寫(xiě)必需的信息，然后按某個(gè)按鈕提交。這些信息通過(guò)Internet傳送到服務(wù)器上。
服務(wù)器上專門(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接收上傳文件代碼

input標(biāo)簽

元素會(huì)根據(jù)不同的 type 屬性，變化為多種形態(tài)。如果說(shuō)td是表格最核心的標(biāo)簽, 那么input就是表單最核心的標(biāo)簽. nput標(biāo)簽有一個(gè)type屬性, 這個(gè)屬性有很多類型的取值, 取值的不同就決定了input標(biāo)簽的功能和外觀不同

type屬性值	表現(xiàn)形式	對(duì)應(yīng)代碼
text	單行輸入文本
password	密碼輸入框
date	日期輸入框
checkbox	復(fù)選框
radio	單選框
submit	提交按鈕
reset	重置按鈕
button	普通按鈕
hidden	隱藏輸入框
file	文本選擇框

屬性說(shuō)明：

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)值, 前提是同一組內(nèi)容必須設(shè)置相同name屬性
readonly：text和password設(shè)置為只讀
disabled：所有input均適用


"en">

    "UTF-8">
    34-表單練習(xí)



"http://www.baidu.com">
    
        注冊(cè)界面
        
            賬號(hào): "text" name="account">
        
        
            密碼: "password" name="pwd">
        
    
        
            性別:
            "radio" name="gender" value="male">男
            "radio" name="gender" value="female">女
            "radio" checked="checked" name="gender" value="yao">保密
        
        
            愛(ài)好:
            "checkbox" name="sport" value="basketball">籃球
            "checkbox" name="sport" value="football">足球
            "checkbox" checked="checked" name="sport" value="crazy">足浴
        
        
            簡(jiǎn)介:
            "</span><span style="color: #800000;">30</span><span style="color: #800000;">"</span> rows=<span style="color: #800000;">"</span><span style="color: #800000;">10</span><span style="color: #800000;">"</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">desc</span><span style="color: #800000;">"</span>>
        
        
            生日:
            "date" name="birthday">
        
        
            郵箱:
            "email" name="email">
        
        
            電話:
            "number" name="phone">
        
        
            "submit" value="注冊(cè)">     &nbsp;
            "reset" value="清空">

表單和input標(biāo)簽練習(xí)

label標(biāo)簽

作用：label標(biāo)簽不會(huì)向用戶呈現(xiàn)任何特殊效果。不過(guò)，它為鼠標(biāo)用戶改進(jìn)了可用性

注意：表單元素要有一個(gè)id，然后label標(biāo)簽就有一個(gè)for屬性，for屬性和id相同就表示綁定了；所有表單元素都可以通過(guò)label綁定


for="account">賬號(hào):
"text" id="account" />


"radio" name="sex" id="man" /> for="man">男


"checkbox" id="basketball" />
for="basketball">籃球

datalist標(biāo)簽

作用：給輸入框綁定待選項(xiàng)


"en">

    "UTF-8">
    31-Datalist標(biāo)簽




請(qǐng)輸入你的車型: "text" list="cars">

"cars">

示例

select標(biāo)簽

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京option>
    <option selected="selected" value="2">上海option>
    <option value
                 
                                                                                                                    
                         云服務(wù)器
                                             
                         GPU云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               前端基礎(chǔ)
                                                                                                           前端基礎(chǔ)教程
                                                                                                           前端零基礎(chǔ)
                                                                                                           零基礎(chǔ)前端

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/1694.html

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

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

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

TA的文章

tensor

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

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

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

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

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

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

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

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

資訊專欄INFORMATION COLUMN

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