前端基礎(chǔ) 01裤纹、HTML5 入門(mén)

1. 初識(shí) HTML

  • HyperTextMarkupLanguage(超文本標(biāo)記語(yǔ)言)
    • 超文本包括:文字委刘、圖片、音頻鹰椒、視頻锡移、動(dòng)畫(huà)。
  • HTML5的優(yōu)勢(shì)
    • 世界知名瀏覽器廠商對(duì)HTML5的支持
    • 市場(chǎng)的需求
    • 跨平臺(tái)
  • W3C標(biāo)準(zhǔn)
    • W3C
      • 萬(wàn)維網(wǎng)聯(lián)盟 (World Wide Web Consortium) 漆际。
      • 成立于1994年罩抗,Web領(lǐng)域最權(quán)威和最具影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。
      • https://www.w3.org/
      • https://www.chinaw3c.org/
    • W3C標(biāo)準(zhǔn)包括
      • 結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言(HTML灿椅、XML)
      • 表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言(CSS)
      • 行為標(biāo)準(zhǔn)語(yǔ)言(DOM、ECMAScript)
  • 常見(jiàn)IDE
    • 記事本
    • Dreamweaver
    • IDEA
    • WebStorm
    • ……
  • < body >钞支、< /body>等成對(duì)的標(biāo)簽茫蛹,分別叫做 開(kāi)放標(biāo)簽閉合標(biāo)簽
  • 單獨(dú)呈現(xiàn)的標(biāo)簽(空元素)烁挟,如< hr/ >婴洼,意為用/來(lái)關(guān)閉空元素。
  • html注釋?zhuān)?lt; !–注釋內(nèi)容–>
<!--DOCTYPE:告訴瀏覽器使用什么規(guī)范(默認(rèn)是html)-->
<!DOCTYPE html>
<!--語(yǔ)言 zh中文 en英文-->
<html lang="en">
<!-- head 標(biāo)簽代表網(wǎng)頁(yè)頭部-->
<head>
    <!-- meta 描述性標(biāo)簽撼嗓,表示用來(lái)描述網(wǎng)站的一些信息-->
    <!-- 一般用來(lái)做 SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML5,關(guān)鍵字">
    <meta name="description" content="學(xué)前端Html5">
    <!--網(wǎng)站標(biāo)題-->
    <title>我的第一個(gè)網(wǎng)頁(yè)</title>
</head>
<!-- body代表主體-->
<body>
Hello HTML5!
</body>
</html>

2. 網(wǎng)頁(yè)基本標(biāo)簽

  • 標(biāo)題標(biāo)簽
  • 段落標(biāo)簽
  • 換行標(biāo)簽
  • 水平線標(biāo)簽
  • 字體樣式標(biāo)簽
  • 注釋和特殊符號(hào)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本標(biāo)簽</title>
</head>
<body>
<!--標(biāo)題標(biāo)簽 -->
<h1>一級(jí)標(biāo)簽</h1>
<h2>二級(jí)標(biāo)簽</h2>
<h3>三級(jí)標(biāo)簽</h3>
<h4>四級(jí)標(biāo)簽</h4>
<h5>五級(jí)標(biāo)簽</h5>
<h6>六級(jí)標(biāo)簽</h6>
<!--段落標(biāo)簽-->
<p>p換行1</p>
<p>p換行2</p>
<!--水平線標(biāo)簽-->
<hr/>
<!--換行標(biāo)簽-->
換行1 <br/>
換行2 <br/>
<!--換行標(biāo)簽比較緊湊柬采,段落標(biāo)簽有明顯段間距-->
<!--粗體 斜體-->
<h1>字體樣式標(biāo)簽</h1>
粗體:<strong>I am CSS. </strong><br/>
斜體:<em>HTML5 and CSS3 </em><br/>
<!--特殊符號(hào)-->
空格:1&nbsp;2&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;4<br/>
空格:1 2 3 4<br/>
大于號(hào):&gt;<br/>
小于號(hào):&lt;<br/>
版權(quán)符號(hào):&copy;<br/>
<!--特殊符號(hào)記憶:'&'開(kāi)頭;結(jié)尾,只要在idea中&敲出后就有提示-->
</body>
</html>

3. 圖像且警、超鏈接粉捻、網(wǎng)頁(yè)布局

  • 圖像標(biāo)簽
<img src="path" alt="text" title="text" width="x" height="y">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖像標(biāo)簽</title>
</head>
<body>
<!--img
    src:圖片地址(必填)
        相對(duì)地址(推薦使用),絕對(duì)地址
        ../     --上級(jí)地址
    alt:在圖片加載失敗的時(shí)候斑芜,就會(huì)用文字代替
    title:鼠標(biāo)懸停在圖片上時(shí)肩刃,所顯示的名字
    width height:圖片的高和寬
-->
<img src="../resources/image/01.jpg" alt="風(fēng)景圖片" title="懸停文字" width="200" height="200">
</body>
</html>
  • 鏈接標(biāo)簽
    • href: 必填,表示要跳轉(zhuǎn)到那個(gè)頁(yè)面;
    • target:表示窗口在哪里打開(kāi)盈包;
      • _blank:在新標(biāo)簽中打開(kāi)沸呐;
      • _self: 在自己的網(wǎng)頁(yè)中打開(kāi);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鏈接標(biāo)簽</title>
</head>
<body>
<!-- a 標(biāo)簽
    href:跳轉(zhuǎn)頁(yè)面的地址
    a 標(biāo)簽內(nèi)文字:即顯示的文字
    可以把圖片放在a標(biāo)簽內(nèi)呢燥,點(diǎn)擊圖片跳轉(zhuǎn)網(wǎng)頁(yè)
    target:表示在哪打開(kāi)新網(wǎng)頁(yè)
            _self:當(dāng)前標(biāo)簽打開(kāi)
            _blank:新的頁(yè)面中打開(kāi)
-->
<a  target="_blank" title="懸停文字">點(diǎn)擊跳轉(zhuǎn)百度</a>
<br/>
<!-- 圖片鏈接-->
<a href="003.圖像標(biāo)簽.html">
    <img src="../resources/image/01.jpg" alt="風(fēng)景圖片" title="懸停文字" width="200" height="200">
</a>
<!--錨鏈接
    1.需要一個(gè)標(biāo)記錨
    2.跳轉(zhuǎn)到標(biāo)記
    #頁(yè)面內(nèi)跳轉(zhuǎn)
-->
<a name="top"></a>

<br/>
<!--可以在網(wǎng)址后添加#號(hào)跳到對(duì)應(yīng)網(wǎng)站的對(duì)應(yīng)位置-->
<a >百度底部</a> <br/>
<!--功能性鏈接
    郵箱鏈接:mailto
    qq鏈接
-->
<a href="mailto:xxxxx@qq.com">點(diǎn)擊聯(lián)系我</a>
<a target="_blank"
   />
<a target="_blank" >
    <img src="http://wpa.qq.com/pa?p=2:88888888:52" alt="有事您Q我" title="有事您Q我"/>
</a>
<img src="../resources/image/01.jpg" alt="風(fēng)景圖片" title="懸停文字" width="200" height="2000">
<a href="#top">回到頂部</a>
</body>
</html>
  • 行內(nèi)元素和塊元素
    • 塊元素:無(wú)論內(nèi)容多少崭添,該元素獨(dú)占一行。

      <p></p><hr/> <h1>...<h6>
      
    • 行內(nèi)元素:內(nèi)容撐開(kāi)寬度叛氨,左右都是行內(nèi)元素的可以排在一行呼渣。

      <a><strong><em>
      

4. 列表、表格力试、媒體元素

1. 列表

什么是列表

  • 列表:就是信息資源的一種展示形式徙邻。它可以使信息結(jié)構(gòu)化和條理化,并以列表的樣式顯示出來(lái)畸裳,以便瀏覽者能更快捷地獲得相應(yīng)的信息缰犁。

列表的分類(lèi)

  • 無(wú)序列表
  • 有序列表
  • 自定義列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表學(xué)習(xí)</title>
</head>
<body>
<!--
    有序列表
    應(yīng)用范圍:試卷,問(wèn)答……
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>前端</li>
    <li>運(yùn)維</li>
    <li>C/C++</li>
    <li>Android</li>
</ol>
<hr/>
<!--
    無(wú)序列表
    應(yīng)用范圍:導(dǎo)航,側(cè)邊欄……
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>前端</li>
    <li>運(yùn)維</li>
    <li>C/C++</li>
    <li>Android</li>
</ul>
<hr/>
<!--
    自定義列表
    dl:標(biāo)簽
    dt:列表名稱(chēng)
    dd:列表內(nèi)容
    應(yīng)用:網(wǎng)站底部
-->
<dl>
    <dt>學(xué)科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>前端</dd>
    <dd>運(yùn)維</dd>
    <dd>C/C++</dd>
    <dd>Android</dd>
</dl>
</body>
</html>
2. 表格

為什么使用表格:

  • 簡(jiǎn)單通用
  • 結(jié)構(gòu)穩(wěn)定

表格的基本結(jié)構(gòu):

  • 單元格
  • 跨行
  • 跨列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格學(xué)習(xí)</title>
</head>
<body>
<!--
    表格:table
    行:tr
    列:td
    跨列:colspan
    跨行:rowspan
    跨行或跨列后,需要將多余的行怖糊、列刪除
-->
<table border="1px">
    <tr><!--colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr><!--rowspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>
3. 媒體元素

視頻和音頻

  • 視頻:video
  • 音頻:audio
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>媒體元素的學(xué)習(xí)</title>
</head>
<body>
<!--
    視頻
    src:資源路徑
    controls:控制面板
    autoplay:自動(dòng)播放
-->
<video src="../resources/video/002.mp4" controls autoplay width="300"></video>
<!--音頻-->
<audio src="../resources/video/001.mp3" controls autoplay></audio>
</body>
</html>

頁(yè)面結(jié)構(gòu)

元素名 描述
header 標(biāo)題頭部區(qū)域的內(nèi)容(用于頁(yè)面或者頁(yè)面中的一塊區(qū)域)
footer 標(biāo)記腳部區(qū)域的內(nèi)容(用于整個(gè)頁(yè)面或頁(yè)面的一塊區(qū)域)
section Web 頁(yè)面中的一塊獨(dú)立區(qū)域
article 獨(dú)立的文章內(nèi)容
aside 相關(guān)內(nèi)容或應(yīng)用
nav 導(dǎo)航類(lèi)輔助內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁(yè)面結(jié)構(gòu)</title>
</head>
<body>
<!--頁(yè)面結(jié)構(gòu)-->
<head>
    <h2>頁(yè)面頭部</h2>
</head>
<section>
    <h2>頁(yè)面主體</h2>
</section>
<footer>
    <h2>頁(yè)面腳部</h2>
</footer>
</body>
</html>

iframe 內(nèi)聯(lián)框架

  • ifram 標(biāo)簽帅容,必須要有 src 屬性即引用頁(yè)面的地址。
  • 給標(biāo)簽加上 name 屬性后伍伤,可以做 a 標(biāo)簽的 target 屬性并徘,即在內(nèi)聯(lián)窗口中打開(kāi)鏈接。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe 內(nèi)聯(lián)框架</title>
</head>
<body>
<!--
  iframe 內(nèi)聯(lián)框架
  src:地址
  w-h:寬度扰魂、高度
  name:框架標(biāo)識(shí)名
-->
<iframe src="地址"></iframe>
<hr/>
<iframe src="" name="mainFrame" width="300px" height="300"></iframe>
<!--通過(guò) target 將鏈接內(nèi)容載入到 iframe 內(nèi)聯(lián)框架-->
<a href="001.第一個(gè)網(wǎng)頁(yè).html" target="mainFrame">點(diǎn)擊跳轉(zhuǎn)</a>
</body>
</html>

5. 表單及表單應(yīng)用

標(biāo)簽 說(shuō)明
input 大部分表單元素對(duì)應(yīng)的標(biāo)簽有 text麦乞、password、checkbox劝评、radio姐直、submit、reset蒋畜、file声畏、hidden、image 和 button姻成,默認(rèn)為 text插龄,可以提交用戶名、密碼等
select 下拉選擇框
textarea 文本域
  • from 標(biāo)簽科展,action 屬性均牢,為所提交的目的地址,method 選擇提交方式才睹,可以選擇使用 post 或者 get 方式提交膨处。
    • get 效率高见秤,但在 url 中可以看到提交的內(nèi)容,不安全真椿,不能提交大文件鹃答;
    • post 比較安全,且可以提交大文件突硝。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸注冊(cè)</title>
</head>
<body>
<h1>注冊(cè)</h1>
<!--
    form表單
    action:表單提交的動(dòng)作测摔,可以是交給一個(gè)網(wǎng)址,也可以是交給一個(gè)請(qǐng)求處理地址
    method:post / get 請(qǐng)求方式
        get方式提交:我們可以在 url 中看到我們提交的信息解恰,不安全锋八,高效
        post:比較安全,可以傳輸大文件
-->
<form action="001.第一個(gè)網(wǎng)頁(yè).html" method="post">
    <!--文本輸入框:input type="text" -->
    <p>名字:<input type="text" name="username"></p>
    <!--密碼框:input type="pwd" -->
    <p>密碼:<input type="password" name="password"></p>
    <p>
        <input type="submit">   <!--提交-->
        <input type="reset">    <!--重置-->
    </p>
</form>
</body>
</html>
  • get 方式提交

文本框和單選框

屬性 說(shuō)明
type 指定元素的類(lèi)型护盈。text挟纱、password、checkbox腐宋、radio紊服、submit、reset胸竞、file欺嗤、hidden、image 和 button卫枝,默認(rèn)為 text煎饼。
name 指定表單元素的名稱(chēng)(提交時(shí)所對(duì)應(yīng)的 key)。
value 元素的初始值校赤,radio 必須提供吆玖。
size 指定表單元素的初始寬度。當(dāng) type 為 text 或者 password 時(shí)马篮,以字符為單位沾乘;其他 type 以像素為單位。
maxlength type 為 text 或者 password 時(shí)积蔚,輸入的最大字符數(shù)。
check type 為 radio 或者 checkbox 時(shí)烦周,指定按鈕是否被選中尽爆。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸注冊(cè)</title>
</head>
<body>
<h1>注冊(cè)</h1>
<!--
    form 表單
    action:表單提交的動(dòng)作,可以是交給一個(gè)網(wǎng)址读慎,也可以是交給一個(gè)請(qǐng)求處理地址
    method:post / get 請(qǐng)求方式
        get 方式提交:我們可以在ur1中看到我們提交的信息漱贱,不安全,高效
        post:比較安全夭委,可以傳輸大文件
-->
<form action="001.第一個(gè)網(wǎng)頁(yè).html" method="post">
    <!--
        文本輸入框:input type="text"
        value="前端":默認(rèn)初始值
        maxlength="8":最長(zhǎng)能寫(xiě)幾個(gè)字符
        size="30":文本框的長(zhǎng)度
    -->
    <p>名字:<input type="text" name="username" value="name" maxlength="8" size="20"></p>
    <!--
        密碼框:input type="password"
    -->
    <p>密碼:<input type="password" name="password"></p>
    <!--
        單選框標(biāo)簽:input type="radio"
        value:?jiǎn)芜x框的值
        name:表示組
    -->
    <p>性別:
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    <p>
        <input type="submit">   <!--提交-->
        <input type="reset">    <!--重置-->
    </p>
</form>
</body>
</html>

按鈕和多選框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸注冊(cè)</title>
</head>
<body>
<h1>注冊(cè)</h1>
<!--
    form 表單
    action:表單提交的動(dòng)作幅狮,可以是交給一個(gè)網(wǎng)址,也可以是交給一個(gè)請(qǐng)求處理地址
    method:post / get 請(qǐng)求方式
        get 方式提交:我們可以在ur1中看到我們提交的信息,不安全崇摄,高效
        post:比較安全擎值,可以傳輸大文件
-->
<form action="001.第一個(gè)網(wǎng)頁(yè).html" method="get">
    <!--
        文本輸入框:input type="text"
        value="前端":默認(rèn)初始值
        maxlength="8":最長(zhǎng)能寫(xiě)幾個(gè)字符
        size="30":文本框的長(zhǎng)度
    -->
    <p>名字:<input type="text" name="username" value="name" maxlength="8" size="20"></p>
    <!--
        密碼框:input type="password"
    -->
    <p>密碼:<input type="password" name="password"></p>
    <!--
        單選框標(biāo)簽:input type="radio"
        value:?jiǎn)芜x框的值
        name:表示組
    -->
    <p>性別:
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--
       多選框:input type="checkbox"
   -->
    <p>愛(ài)好:
        <input type="checkbox" value="sleep" name="hobby">睡覺(jué)
        <input type="checkbox" value="code" name="hobby">敲代碼
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戲
    </p>
    <!--
        按鈕:
        input type="button":普通按鈕
        input type="image":圖像按鈕(可以提交頁(yè)面)
        input type="submit":提交按鈕
        input type="reset":重置按鈕
    -->
    <p>
        <input type="button" name="btn" value="按鈕測(cè)試">
        <input type="image" src="../resources/image/01.jpg" width="200px" height="200px">
    </p>
    <p>
        <input type="submit">   <!--提交-->
        <input type="reset" value="清空表單">    <!--重置-->
    </p>
</form>
</body>
</html>

列表文本框和文件域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸注冊(cè)</title>
</head>
<body>
<h1>注冊(cè)</h1>
<!--
    form 表單
    action:表單提交的動(dòng)作,可以是交給一個(gè)網(wǎng)址逐抑,也可以是交給一個(gè)請(qǐng)求處理地址
    method:post / get 請(qǐng)求方式
        get 方式提交:我們可以在ur1中看到我們提交的信息鸠儿,不安全,高效
        post:比較安全厕氨,可以傳輸大文件
-->
<form action="001.第一個(gè)網(wǎng)頁(yè).html" method="get">
    <!--
        文本輸入框:input type="text"
        value="前端":默認(rèn)初始值
        maxlength="8":最長(zhǎng)能寫(xiě)幾個(gè)字符
        size="30":文本框的長(zhǎng)度
    -->
    <p>名字:<input type="text" name="username" value="name" maxlength="8" size="20"></p>
    <!--
        密碼框:input type="password"
    -->
    <p>密碼:<input type="password" name="password"></p>
    <!--
        單選框標(biāo)簽:input type="radio"
        value:?jiǎn)芜x框的值
        name:表示組
        checked:默認(rèn)選擇
    -->
    <p>性別:
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--
       多選框:input type="checkbox"
       checked:默認(rèn)選擇
    -->
    <p>愛(ài)好:
        <input type="checkbox" value="sleep" name="hobby">睡覺(jué)
        <input type="checkbox" value="code" name="hobby" checked>敲代碼
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戲
    </p>
    <!--
        按鈕:
        input type="button":普通按鈕
        input type="image":圖像按鈕(可以提交頁(yè)面)
        input type="submit":提交按鈕
        input type="reset":重置按鈕
    -->
    <p>
        <input type="button" name="btn" value="按鈕測(cè)試">
<!--        <input type="image" src="../resources/image/01.jpg" width="200px" height="200px">-->
    </p>
    <!--
       下拉框,列表框
       selected:默認(rèn)選擇
    -->
    <p>國(guó)家:
        <select name="列表名稱(chēng)">
            <option value="China" selected>中國(guó)</option>
            <option value="USA">美國(guó)</option>
            <option value="Russia">俄羅斯</option>
            <option value="UK">英國(guó)</option>
            <option value="France">法國(guó)</option>
        </select>
    </p>
    <!--
        文本域
        textarea name="textarea"
        cols="40":列
        rows="10":行
    -->
    <p>反饋:
        <textarea name="textarea" cols="40" rows="10">文本內(nèi)容</textarea>
    </p>
    <!--
        文件域
        input type="file"
        name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上傳">
    </p>
    <p>
        <input type="submit">   <!--提交-->
        <input type="reset" value="清空表單">    <!--重置-->
    </p>
</form>
</body>
</html>

搜索框滑塊和簡(jiǎn)單驗(yàn)證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸注冊(cè)</title>
</head>
<body>
<h1>注冊(cè)</h1>
<!--
    form 表單
    action:表單提交的動(dòng)作进每,可以是交給一個(gè)網(wǎng)址,也可以是交給一個(gè)請(qǐng)求處理地址
    method:post / get 請(qǐng)求方式
        get 方式提交:我們可以在ur1中看到我們提交的信息命斧,不安全田晚,高效
        post:比較安全,可以傳輸大文件
-->
<form action="001.第一個(gè)網(wǎng)頁(yè).html" method="get">
    <!--
        文本輸入框:input type="text"
        value="前端":默認(rèn)初始值
        maxlength="8":最長(zhǎng)能寫(xiě)幾個(gè)字符
        size="30":文本框的長(zhǎng)度
    -->
    <p>名字:<input type="text" name="username" value="name" maxlength="8" size="20"></p>
    <!--
        密碼框:input type="password"
    -->
    <p>密碼:<input type="password" name="password"></p>
    <!--
        單選框標(biāo)簽:input type="radio"
        value:?jiǎn)芜x框的值
        name:表示組
        checked:默認(rèn)選擇
    -->
    <p>性別:
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--
       多選框:input type="checkbox"
       checked:默認(rèn)選擇
    -->
    <p>愛(ài)好:
        <input type="checkbox" value="sleep" name="hobby">睡覺(jué)
        <input type="checkbox" value="code" name="hobby" checked>敲代碼
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戲
    </p>
    <!--
        按鈕:
        input type="button":普通按鈕
        input type="image":圖像按鈕(可以提交頁(yè)面)
        input type="submit":提交按鈕
        input type="reset":重置按鈕
    -->
    <p>
        <input type="button" name="btn" value="按鈕測(cè)試">
        <!--        <input type="image" src="../resources/image/01.jpg" width="200px" height="200px">-->
    </p>
    <!--
       下拉框,列表框
       selected:默認(rèn)選擇
    -->
    <p>國(guó)家:
        <select name="列表名稱(chēng)">
            <option value="China" selected>中國(guó)</option>
            <option value="USA">美國(guó)</option>
            <option value="Russia">俄羅斯</option>
            <option value="UK">英國(guó)</option>
            <option value="France">法國(guó)</option>
        </select>
    </p>
    <!--
        文本域
        textarea name="textarea"
        cols="40":列
        rows="10":行
    -->
    <p>反饋:
        <textarea name="textarea" cols="40" rows="10">文本內(nèi)容</textarea>
    </p>
    <!--
        文件域
        input type="file"
        name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上傳">
    </p>
    <!--
       type="email":(郵件)會(huì)簡(jiǎn)單驗(yàn)證是否是郵箱地址
       type="url":(url)會(huì)簡(jiǎn)單驗(yàn)證是否是網(wǎng)絡(luò)地址
       type="number":(number)數(shù)字驗(yàn)證
       type="range":滑塊
       type="search":搜索
   -->
    <p>
        郵箱:<input type="email" name="email">
        url:<input type="url">
    </p>
    <!--
        數(shù)字驗(yàn)證
        max:最大數(shù)量
        min:最小數(shù)量
        step(步長(zhǎng)):每次點(diǎn)擊增加或減少的數(shù)量
    -->
    <p>
        商品數(shù)量:<input type="number" name="數(shù)量" max="100" min="1" step="1">
    </p>
    <!--滑塊-->
    <p>
        音量:<input type="range" min="0" max="100" name="voice" step="2">
    </p>
    <!--搜索框-->
    <p>
        搜索:<input type="search">
    </p>
    <p>
        <input type="submit">   <!--提交-->
        <input type="reset" value="清空表單">    <!--重置-->
    </p>
</form>
</body>
</html>

表單的應(yīng)用

屬性 說(shuō)明
readonly 只讀国葬,不可更改
disable 禁用
hidden 隱藏贤徒,雖然不可見(jiàn)但是會(huì)提交
id 標(biāo)識(shí)符,可以配合 label 的 for 屬性胃惜,增加鼠標(biāo)的可用性
placehoder text 文字域等輸入框內(nèi)的提示信息
required 不能為空
patten 正則表達(dá)式驗(yàn)證
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸注冊(cè)</title>
</head>
<body>
<h1>注冊(cè)</h1>
<!--
    form 表單
    action:表單提交的動(dòng)作泞莉,可以是交給一個(gè)網(wǎng)址,也可以是交給一個(gè)請(qǐng)求處理地址
    method:post / get 請(qǐng)求方式
        get 方式提交:我們可以在ur1中看到我們提交的信息船殉,不安全鲫趁,高效
        post:比較安全,可以傳輸大文件
-->
<form action="001.第一個(gè)網(wǎng)頁(yè).html" method="get">
    <!--
        文本輸入框:input type="text"
        value="前端":默認(rèn)初始值
        maxlength="8":最長(zhǎng)能寫(xiě)幾個(gè)字符
        size="30":文本框的長(zhǎng)度
        readonly:設(shè)置只讀(不能修改內(nèi)容)
        hidden:隱藏
        disabled:禁用
    -->
    <p>名字:<input type="text" name="username" value="name" maxlength="8" size="20" readonly></p>
    <!--
        密碼框:input type="password"
    -->
    <p>密碼:<input type="password" name="password" hidden value="123456"></p>
    <!--
        單選框標(biāo)簽:input type="radio"
        value:?jiǎn)芜x框的值
        name:表示組
        checked:默認(rèn)選擇
    -->
    <p>性別:
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex" disabled>女
    </p>
    <!--
       多選框:input type="checkbox"
       checked:默認(rèn)選擇
    -->
    <p>愛(ài)好:
        <input type="checkbox" value="sleep" name="hobby">睡覺(jué)
        <input type="checkbox" value="code" name="hobby" checked>敲代碼
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戲
    </p>
    <!--
        按鈕:
        input type="button":普通按鈕
        input type="image":圖像按鈕(可以提交頁(yè)面)
        input type="submit":提交按鈕
        input type="reset":重置按鈕
    -->
    <p>
        <input type="button" name="btn" value="按鈕測(cè)試">
        <!--        <input type="image" src="../resources/image/01.jpg" width="200px" height="200px">-->
    </p>
    <!--
       下拉框,列表框
       selected:默認(rèn)選擇
    -->
    <p>國(guó)家:
        <select name="列表名稱(chēng)">
            <option value="China" selected>中國(guó)</option>
            <option value="USA">美國(guó)</option>
            <option value="Russia">俄羅斯</option>
            <option value="UK">英國(guó)</option>
            <option value="France">法國(guó)</option>
        </select>
    </p>
    <!--
        文本域
        textarea name="textarea"
        cols="40":列
        rows="10":行
    -->
    <p>反饋:
        <textarea name="textarea" cols="40" rows="10">文本內(nèi)容</textarea>
    </p>
    <!--
        文件域
        input type="file"
        name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上傳">
    </p>
    <!--
       type="email":(郵件)會(huì)簡(jiǎn)單驗(yàn)證是否是郵箱地址
       type="url":(url)會(huì)簡(jiǎn)單驗(yàn)證是否是網(wǎng)絡(luò)地址
       type="number":(number)數(shù)字驗(yàn)證
       type="range":滑塊
       type="search":搜索
   -->
    <p>
        郵箱:<input type="email" name="email">
        url:<input type="url">
    </p>
    <!--
        數(shù)字驗(yàn)證
        max:最大數(shù)量
        min:最小數(shù)量
        step(步長(zhǎng)):每次點(diǎn)擊增加或減少的數(shù)量
    -->
    <p>
        商品數(shù)量:<input type="number" name="數(shù)量" max="100" min="1" step="1">
    </p>
    <!--滑塊-->
    <p>
        音量:<input type="range" min="0" max="100" name="voice" step="2">
    </p>
    <!--搜索框-->
    <p>
        搜索:<input type="search">
    </p>
    <!--增強(qiáng)鼠標(biāo)可用性-->
    <p>
        <label for="mark">點(diǎn)擊標(biāo)簽可選擇文本框:</label>
        <input type="text" id="mark">
    </p>
    <p>
        <input type="submit" disabled>   <!--提交-->
        <input type="reset" value="清空表單">    <!--重置-->
    </p>
</form>
</body>
</html>

6. 表單初級(jí)驗(yàn)證

  • 常用方式
    • placeholder:提示信息
    • required:非空判斷
    • pattern:正則表達(dá)式
<!--正則表達(dá)式-->
<p>自定義郵箱:
    <input type="text" name="myEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>

7. HTML5 總結(jié)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末利虫,一起剝皮案震驚了整個(gè)濱河市挨厚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌糠惫,老刑警劉巖疫剃,帶你破解...
    沈念sama閱讀 222,865評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異硼讽,居然都是意外死亡巢价,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)固阁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)壤躲,“玉大人,你說(shuō)我怎么就攤上這事备燃〉锟耍” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,631評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵并齐,是天一觀的道長(zhǎng)漏麦。 經(jīng)常有香客問(wèn)我客税,道長(zhǎng),這世上最難降的妖魔是什么撕贞? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,199評(píng)論 1 300
  • 正文 為了忘掉前任更耻,我火速辦了婚禮,結(jié)果婚禮上麻掸,老公的妹妹穿的比我還像新娘酥夭。我一直安慰自己,他們只是感情好脊奋,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布熬北。 她就那樣靜靜地躺著,像睡著了一般诚隙。 火紅的嫁衣襯著肌膚如雪讶隐。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,793評(píng)論 1 314
  • 那天久又,我揣著相機(jī)與錄音巫延,去河邊找鬼。 笑死地消,一個(gè)胖子當(dāng)著我的面吹牛炉峰,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播脉执,決...
    沈念sama閱讀 41,221評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼疼阔,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了半夷?” 一聲冷哼從身側(cè)響起婆廊,我...
    開(kāi)封第一講書(shū)人閱讀 40,174評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎巫橄,沒(méi)想到半個(gè)月后淘邻,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,699評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡湘换,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評(píng)論 3 343
  • 正文 我和宋清朗相戀三年宾舅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片彩倚。...
    茶點(diǎn)故事閱讀 40,918評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡筹我,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出署恍,到底是詐尸還是另有隱情崎溃,我是刑警寧澤蜻直,帶...
    沈念sama閱讀 36,573評(píng)論 5 351
  • 正文 年R本政府宣布盯质,位于F島的核電站袁串,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏呼巷。R本人自食惡果不足惜囱修,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望王悍。 院中可真熱鬧嫁赏,春花似錦掺炭、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,749評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至髓堪,卻和暖如春竞思,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背刮刑。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,862評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工喉祭, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人雷绢。 一個(gè)月前我還...
    沈念sama閱讀 49,364評(píng)論 3 379
  • 正文 我出身青樓泛烙,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親翘紊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蔽氨,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容