HTML入門(mén)這一篇就夠了

前言

我把HTML的知識(shí)點(diǎn)做了簡(jiǎn)單歸納碎连，后續(xù)如果想到有其他要講的茫陆，應(yīng)該也會(huì)添加到文章中哈误，知識(shí)點(diǎn)很少，只要勤加練習(xí)相信你很快就能掌握拖叙，如內(nèi)容有誤，請(qǐng)大佬及時(shí)糾正

一赂乐、HTML基礎(chǔ)概念認(rèn)知

1.網(wǎng)頁(yè)組成和本質(zhì)

1.1網(wǎng)頁(yè)由哪些部分組成薯鳍？

==文字、圖片挨措、音頻挖滤、視頻、超鏈接==

1.2我們看到的網(wǎng)頁(yè)背后本質(zhì)是什么浅役？

==程序員寫(xiě)的代碼==

1.3前端的代碼是通過(guò)什么軟件轉(zhuǎn)換成看到的頁(yè)面的斩松？

==通過(guò)瀏覽器轉(zhuǎn)化（解析和渲染）成用戶(hù)看到的頁(yè)面，跨平臺(tái)性==

2.瀏覽器（了解）

2.1五大瀏覽器

瀏覽器：是網(wǎng)頁(yè)顯示觉既、運(yùn)行的平臺(tái)惧盹、是前端開(kāi)發(fā)必備利器
常見(jiàn)的五大瀏覽器：IE瀏覽器、火狐瀏覽器（Firefox）瞪讼、谷歌瀏覽器（Chrome）钧椰、Safari瀏覽器、歐朋瀏覽器（Opera）

2.2渲染引擎（了解）

前端日常推薦谷歌瀏覽器

3.web標(biāo)準(zhǔn)

因?yàn)闉g覽器各廠(chǎng)商內(nèi)核不同符欠，所以不同瀏覽器的渲染引擎不同嫡霞，對(duì)于相同代碼解析的效果會(huì)存在差異
web標(biāo)準(zhǔn)：讓不同瀏覽器按照相同的標(biāo)準(zhǔn)顯示結(jié)果，讓展示的效果統(tǒng)一
web標(biāo)準(zhǔn)中分成三個(gè)希柿，也通常被稱(chēng)為前端三劍客：

4.HTML骨架

HTML的全稱(chēng)為超文本標(biāo)記語(yǔ)言诊沪，是一種標(biāo)記語(yǔ)言。不屬于編程語(yǔ)言曾撤。
下面是一個(gè)完整的HTML骨架結(jié)構(gòu)

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

    </body>
</html>

標(biāo)簽	說(shuō)明
!DOCTYPE	定義文檔類(lèi)型
html	網(wǎng)頁(yè)的整體
head	網(wǎng)頁(yè)的頭部
body	網(wǎng)頁(yè)的主體
title	網(wǎng)頁(yè)的標(biāo)題

二HTML基礎(chǔ)標(biāo)簽

前言

HTML中不區(qū)分大小寫(xiě)端姚，但是我們一般都使用小寫(xiě)
HTML標(biāo)簽必須結(jié)構(gòu)完整，要么成對(duì)出現(xiàn)挤悉，要么單標(biāo)簽
代碼注釋
注釋后的代碼或文字不生效渐裸，不顯示。不管是個(gè)人還是團(tuán)隊(duì)尖啡，都要養(yǎng)成良好的注釋習(xí)慣橄仆，可以提高代碼閱讀速度，提高整體工作效率衅斩，不至于花時(shí)間去分析某一個(gè)封裝的函數(shù)是什么功能

例：

//單行注釋

<!-- 多行注釋-->

1.排版標(biāo)簽

1.1標(biāo)題標(biāo)簽

特點(diǎn)：文字加粗盆顾，由大到小，獨(dú)占一行

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

1.2段落標(biāo)簽

特點(diǎn)：獨(dú)占一行畏梆，段落間存在間隙

<p>我是一段文字</p>
<p>我是一段文字</p>

1.3換行標(biāo)簽

特點(diǎn)：讓文字強(qiáng)制換行

代碼：<br>

示例：

        <p>我是一段文<br>字</p>

1.4水平線(xiàn)標(biāo)簽

作用：在頁(yè)面顯示一條水平線(xiàn)

代碼：<hr>

示例：

    <p>我是一段文字</p>
        <hr>
        <p>我是一段文字</p>

2.文本格式化標(biāo)簽

標(biāo)簽	說(shuō)明
b	加粗
u	下劃線(xiàn)
i	傾斜
s	刪除線(xiàn)

示例：

        <b>加粗</b><br>
        <u>下劃</u><br>
        <i>傾斜</i><br>
        <s>刪除</s><br>

下面效果一樣您宪，突出重要性的強(qiáng)調(diào)

標(biāo)簽	說(shuō)明
strong	加粗
ins	下劃線(xiàn)
em	傾斜
del	刪除線(xiàn)

3.媒體標(biāo)簽

3.1圖片標(biāo)簽

代碼  <img src="" alt="">

屬性	說(shuō)明
src	圖像路徑
alt	圖片顯示不出來(lái)時(shí)的提示文字
title	鼠標(biāo)移到圖片上提示文字

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <img src="tu.png" alt="這是一只貓"title="貓">
    </body>
</html>

如果src路徑錯(cuò)誤奈懒，不能正常讀取圖片則

3.2 路徑

路徑分為兩種：相對(duì)路徑和絕對(duì)路徑

3.2.1相對(duì)路徑:

分為三種：同級(jí)，上級(jí)宪巨，下級(jí)磷杏。

1同級(jí)目錄

如圖per.png圖片和index.html都在Texitong目錄文件下，且per.png不在其他目錄文件下捏卓，則和html文件在同級(jí)极祸，表示為

    <img src="./per.png">

或者可以表示為下面這樣，可省略'./'

    <img src="per.png">

2.上級(jí)目錄

圖片per.png在walt文件ing文件下怠晴，我們的html文件在Texitong文件下遥金，兩個(gè)文件不在同一目錄，所以我們要用要往上找蒜田，你可能會(huì)問(wèn)walt文件在Texitong的下面位置為啥要往上找稿械，你可以理解為他們不在同一個(gè)文件里面所以我們要往外找，而只有一種方法就是往上查找冲粤，只要不是在同一個(gè)總文件下美莫，都用上級(jí)就完事了，靈活運(yùn)用咯
默認(rèn)路徑寫(xiě)法為'./文件.png'梯捕，雖然'./'可以在省略厢呵，但是在上級(jí)目錄時(shí)，就不能省略科阎，因此
上一級(jí)目錄則表示為'../'述吸，上兩級(jí)則為'.../'忿族，則上面的寫(xiě)法應(yīng)該為

        <img src="../walt/img/per.png">

下級(jí)目錄
如圖锣笨，文件都在相同Texitong文件夾下

其中圖片文件為'per.png'在img文件下，則表示為

<img src="./img/per.png" >

其中./表示當(dāng)前目錄下可以省略道批，因此我們可以這樣寫(xiě)

<img src="img/per.png" >

3.2.2絕對(duì)路徑:

從盤(pán)符出發(fā)错英，或者文件鏈接
絕對(duì)路徑：是從盤(pán)符開(kāi)始的路徑，如

C:\windows\system32\cmd.exe
鏈接如 'baidu.com';

<img src="baidu.com" >

3.3音頻標(biāo)簽

屬性名	功能
src	音頻的路徑
controls	顯示播放的控件
autoplay	自動(dòng)播放（部分瀏覽器不支持）
loop	循環(huán)播放

示例：

        <audio src="img/BGM.mp3"controls></audio>

3.4視頻標(biāo)簽

屬性名	功能
src	音頻的路徑
controls	顯示播放的控件
autoplay	自動(dòng)播放（部分瀏覽器不支持）
loop	循環(huán)播放

示例：

<video width="200px" height="200px" src="img/par.mp4"controls></video>

width是寬隆豹，height是高

視頻標(biāo)簽?zāi)壳爸С值娜N格式：mp4椭岩、WebM、Ogg

4鏈接標(biāo)簽

稱(chēng)呼：a標(biāo)簽璃赡、超鏈接判哥、錨鏈接
特點(diǎn)：內(nèi)部可以包裹內(nèi)容，點(diǎn)擊后跳轉(zhuǎn)指定頁(yè)面
代碼

<a href="index.html">文本</a>

屬性名	功能
href	目標(biāo)地址

target屬性	功能
_self	當(dāng)前窗口打開(kāi)
_blank	新的窗口打開(kāi)

示例:新窗口打開(kāi)

<a href="soul.html"target="_blank">點(diǎn)擊跳轉(zhuǎn)</a>

練習(xí)題

題1：要求頁(yè)面標(biāo)題標(biāo)簽碉考，用到視頻塌计，段落換行顯示，超鏈接跳轉(zhuǎn)到音頻頁(yè)面

跳轉(zhuǎn)后

答案
視頻和音頻文件自行尋找侯谁，注意路徑別弄錯(cuò)了
index.html主文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h1>潮涌東方丨杭州亞運(yùn) 大圣來(lái)也</h1>
        <video src="img/par.mp4" width="500px" controls></video>
        <p>話(huà)說(shuō)锌仅，花果山的大圣聽(tīng)得孩兒來(lái)報(bào)章钾，東方有地，名曰杭州热芹，眾健兒匯集于此贱傀，大展手腳，不禁技癢難耐伊脓，于是決定前去挑戰(zhàn)一番府寒。此番戰(zhàn)果如何，且看視頻分解报腔。</p>
        <p>總監(jiān)制丨過(guò) 彤<br>
            監(jiān) 制丨魏驅(qū)虎 唐曉艷<br>
            制片人丨蘭 軍<br>
            策 劃丨周小敏 吳冰鈺<br>
            作 曲｜陳滌非<br>
            視 覺(jué)｜朱 意 冀骋琿<br>
            手 繪｜楊 軒 蒲永琦
            動(dòng) 畫(huà)｜胡梁三 呂紅濤 李佳昊 沈俊峰等<br>
            鳴 謝｜北京民族樂(lè)團(tuán)<br>
        </p>
        <b>視頻非原文章視頻</b><br>
        <a href="soul.html"target="_blank">點(diǎn)擊跳轉(zhuǎn)</a>
    </body>
</html>

跳轉(zhuǎn)后的soul.html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <u>已跳轉(zhuǎn)</u><br>
        <hr>
        <audio src="img/BGM.mp3" controls></audio>
    </body>
</html>

小結(jié)

標(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>
換行標(biāo)簽
<br>

水平線(xiàn)標(biāo)簽
<hr>

文本格式化標(biāo)簽
b   加粗
u   下劃線(xiàn)
i   傾斜
s   刪除線(xiàn)

strong  加粗
ins 下劃線(xiàn)
em  傾斜
del 刪除線(xiàn)

圖片標(biāo)簽
<img src="" alt="">

音頻標(biāo)簽
<audio src=" "controls></audio>

視頻標(biāo)簽
<video src=" "controls></video>

超鏈接
<a href=" "> </a>

三、HTML列表榄笙、表格標(biāo)簽

1.列表標(biāo)簽

列表標(biāo)簽分為三個(gè)：
1.無(wú)序列表
2.有序列表
3.自定義列表

ul,ol標(biāo)簽中只允許包含li標(biāo)簽,li標(biāo)簽可以包含任何內(nèi)容
dl 只允許包含dt/dd標(biāo)簽邪狞，,dt/dd標(biāo)簽可以包含任何內(nèi)容

列表符號(hào)均由==list-style-type==定義，后續(xù)學(xué)到css就可以自己定義序列表的小圖標(biāo)啦

1.1無(wú)序列表

標(biāo)簽	說(shuō)明
ul	無(wú)序列表
li	表示無(wú)序列表的每一項(xiàng)

type屬性	序號(hào)類(lèi)型
disc	默認(rèn)值實(shí)心圓“●”
circle	空心圓“○”
square	實(shí)心正方形“■”

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <ul>
            <li>默認(rèn)</li>
        </ul>
        <ul style="list-style: circle;">
            <li>circle</li>
        </ul>
        <ul style="list-style: square;">
            <li>square</li>
        </ul>

    </body>
</html>

1.2有序列表

標(biāo)簽	說(shuō)明
ol	有序列表
li	有序列表的每一項(xiàng)

type屬性值	列表項(xiàng)的序號(hào)類(lèi)型
1	（默認(rèn)屬性）數(shù)字1茅撞、2帆卓、3……
a	小寫(xiě)英文字母a、b米丘、c……
A	大寫(xiě)英文字母A剑令、B、C……
i	小寫(xiě)羅馬數(shù)字i拄查、ii吁津、iii……
I	大寫(xiě)羅馬數(shù)字I、II堕扶、III……

1.3自定義列表

標(biāo)簽	說(shuō)明
dd	默認(rèn)顯示縮進(jìn)效果,可包含任何內(nèi)容
dl	只允許包含dt/dd標(biāo)簽
dt	可以包含任意內(nèi)容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        </style>
    </head>
    <body>
        <dd>
            <dl>標(biāo)題</dl>
        <dt>內(nèi)容</dt>
        <dt>內(nèi)容</dt>
        </dd>
    </body>
</html>

2.表格標(biāo)簽

2.1表格標(biāo)簽

標(biāo)簽	說(shuō)明
table	表格標(biāo)簽
caption	表格整體大標(biāo)題,默認(rèn)在表格整體頂部居中位置顯示
tr	用于于包裹td
th	表示一列小標(biāo)題碍脏，通常用于表格第一行默認(rèn)內(nèi)部文字加粗并居中顯示
td	包裹內(nèi)容

tr標(biāo)簽只能包含td，td標(biāo)簽可以包含所有內(nèi)容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table>
            <caption>課程表</caption>
        <tr>
            <th>星期日</th><th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th>
        </tr>
        <tr><td>語(yǔ)文</td><td>美術(shù)</td><td>語(yǔ)文</td><td>化學(xué)</td><td>數(shù)學(xué)</td><td>語(yǔ)文</td><td>英語(yǔ)</td></tr>
        <tr><td>語(yǔ)文</td><td>英語(yǔ)</td><td>語(yǔ)文</td><td>數(shù)學(xué)</td><td>物理</td><td>歷史</td><td>語(yǔ)文</td></tr>
        <tr><td>數(shù)學(xué)</td><td>美術(shù)</td><td>歷史</td><td>物理</td><td>數(shù)學(xué)</td><td>化學(xué)</td><td>物理</td></tr>
        <tr><td>化學(xué)</td><td>語(yǔ)文</td><td>語(yǔ)文</td><td>數(shù)學(xué)</td><td>物理</td><td>語(yǔ)文</td><td>英語(yǔ)</td></tr>
        <tr><td>歷史</td><td>物理</td><td>化學(xué)</td><td>數(shù)學(xué)</td><td>數(shù)學(xué)</td><td>語(yǔ)文</td><td>英語(yǔ)</td></tr>
    </table>
    </body>
</html>

2.2表格結(jié)構(gòu)標(biāo)簽

注意點(diǎn):表格結(jié)構(gòu)標(biāo)簽內(nèi)部用于包裹tr標(biāo)簽
表格的結(jié)構(gòu)標(biāo)簽可以省略
這個(gè)只是方便我們看代碼的時(shí)候能快速定位表格的結(jié)構(gòu)部分

標(biāo)簽	說(shuō)明
thead	表格頭部
tbody	表格主體
tfoot	表格底部

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table>
            <caption>課程表</caption>
      <thead> //表格頭部
            <tr>
         <th>星期日</th><th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th>
        </tr>
      </thead> 
      <tbody>//表格主體
        <tr><td>語(yǔ)文</td><td>美術(shù)</td><td>語(yǔ)文</td><td>化學(xué)</td><td>數(shù)學(xué)</td><td>語(yǔ)文</td><td>英語(yǔ)</td></tr>
        <tr><td>語(yǔ)文</td><td>英語(yǔ)</td><td>語(yǔ)文</td><td>數(shù)學(xué)</td><td>物理</td><td>歷史</td><td>語(yǔ)文</td></tr>
        <tr><td>數(shù)學(xué)</td><td>美術(shù)</td><td>歷史</td><td>物理</td><td>數(shù)學(xué)</td><td>化學(xué)</td><td>物理</td></tr>
        <tr><td>化學(xué)</td><td>語(yǔ)文</td><td>語(yǔ)文</td><td>數(shù)學(xué)</td><td>物理</td><td>語(yǔ)文</td><td>英語(yǔ)</td></tr>
        <tr><td>歷史</td><td>物理</td><td>化學(xué)</td><td>數(shù)學(xué)</td><td>數(shù)學(xué)</td><td>語(yǔ)文</td><td>英語(yǔ)</td></tr>
  

      </tbody>
      <tfoot>//表格尾部
        <tr><td></td></tr>
      </tfoot>
         </table>
    </body>
</html>

3.3表格相關(guān)屬性

標(biāo)簽	屬性
border	邊框?qū)挾?/td>
width	表格寬度
height	表格高度
cellspacing	單元格間距
cellpadding	單元格填充

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0">
            <caption>課程表</caption>
            <thead>
                <tr>
                    <th>星期日</th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                    <th>星期六</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>語(yǔ)文</td>
                    <td>美術(shù)</td>
                    <td>語(yǔ)文</td>
                    <td>化學(xué)</td>
                    <td>數(shù)學(xué)</td>
                    <td>語(yǔ)文</td>
                    <td>英語(yǔ)</td>
                </tr>
                <tr>
                    <td>語(yǔ)文</td>
                    <td>英語(yǔ)</td>
                    <td>語(yǔ)文</td>
                    <td>數(shù)學(xué)</td>
                    <td>物理</td>
                    <td>歷史</td>
                    <td>語(yǔ)文</td>
                </tr>
                <tr>
                    <td>數(shù)學(xué)</td>
                    <td>美術(shù)</td>
                    <td>歷史</td>
                    <td>物理</td>
                    <td>數(shù)學(xué)</td>
                    <td>化學(xué)</td>
                    <td>物理</td>
                </tr>
                <tr>
                    <td>化學(xué)</td>
                    <td>語(yǔ)文</td>
                    <td>語(yǔ)文</td>
                    <td>數(shù)學(xué)</td>
                    <td>物理</td>
                    <td>語(yǔ)文</td>
                    <td>英語(yǔ)</td>
                </tr>
                <tr>
                    <td>歷史</td>
                    <td>物理</td>
                    <td>化學(xué)</td>
                    <td>數(shù)學(xué)</td>
                    <td>數(shù)學(xué)</td>
                    <td>語(yǔ)文</td>
                    <td>英語(yǔ)</td>
                </tr>
            </tbody>
            <tfoot>
            </tfoot>
        </table>
    </body>
</html>

3.4合并表格

標(biāo)簽	屬性
rowspan	跨行合并
colspan	跨列合并

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0">
            <caption>課程表</caption>
            <thead>
                <tr>
                    <th>星期日</th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                    <th>星期六</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="3">語(yǔ)文</td>
                    <td>美術(shù)</td>
                    <td>語(yǔ)文</td>
                    <td>化學(xué)</td>
                    <td>數(shù)學(xué)</td>
                    <td>語(yǔ)文</td>
                    <td>英語(yǔ)</td>
                </tr>
                <tr>
                    <td>語(yǔ)文</td>
                    <td>數(shù)學(xué)</td>
                    <td>物理</td>
                    <td>歷史</td>
                    <td>語(yǔ)文</td>
                    <td>語(yǔ)文</td>
                </tr>
                <tr>
                    <td>數(shù)學(xué)</td>
                    <td>歷史</td>
                    <td colspan="3" >物理</td>
                    <td>語(yǔ)文</td>
                </tr>
                <tr>
                    <td>化學(xué)</td>
                    <td>語(yǔ)文</td>
                    <td>語(yǔ)文</td>
                    <td>數(shù)學(xué)</td>
                    <td>物理</td>
                    <td>語(yǔ)文</td>
                    <td>英語(yǔ)</td>
                </tr>
                <tr>
                    <td>歷史</td>
                    <td>物理</td>
                    <td>化學(xué)</td>
                    <td>數(shù)學(xué)</td>
                    <td>數(shù)學(xué)</td>
                    <td>語(yǔ)文</td>
                    <td>英語(yǔ)</td>
                </tr>
            </tbody>
            <tfoot>
            </tfoot>
        </table>
    </body>
</html>

注意點(diǎn):==只有同一個(gè)結(jié)構(gòu)的標(biāo)簽中的單元格才能合并稍算，不能跨結(jié)構(gòu)合并（不能跨上面說(shuō)的結(jié)構(gòu)標(biāo)簽：thead典尾、tbody、tfoot）==

小結(jié)

列表圖標(biāo)可用list-style-type自定義
表格結(jié)構(gòu)標(biāo)簽可省略不影響整體效果
合并單元格糊探，不能跨表格結(jié)構(gòu)標(biāo)簽合并

四钾埂、HTML表單

前言

用到表單的三種情況：
1.注冊(cè)頁(yè)面
2.登入頁(yè)面
3.搜索頁(yè)面
下面講一些常用的標(biāo)簽即屬性

1.input標(biāo)簽

input可以根據(jù)type屬性的不同，展示不同的效果

type屬性值	說(shuō)明
text	文本框用于輸入單行文本
password	密碼框科平，用于輸入密碼
dio	單選框褥紫，用于多選一
checkbox	多選框，用于多選多個(gè)
file	文件選擇瞪慧，用于上傳文件
submit	提交按鈕髓考，用于提交
reset	重置按鈕，用于重置
button	普通按鈕汞贸，默認(rèn)無(wú)功能绳军，配合js添加功能

1.1文本框

        <input type="text"value="123">

![文本框
](https://img-blog.csdnimg.cn/20fadba0876c44b9a9885adac2438217.png =200x45)
value為默認(rèn)給輸入框設(shè)定的內(nèi)容印机，可忽略

1.2密碼框

        <input type="password">

1.3input占位符

placeholder 用于提示信息

    <input type="password" placeholder="請(qǐng)輸入密碼">

1.4單選框

<input type="radio"name="sex" checked>單選框<br>
<input type="radio" name="sex">單選框

==checked==為默認(rèn)選中值
==name定義名稱(chēng)==，相同名稱(chēng)的為一組门驾，可實(shí)現(xiàn)多選一

1.5多選框

<input type="checkbox"name="tre">跑步
<input type="checkbox"name="tre"checked>讀書(shū)
<input type="checkbox"name="tre">音樂(lè)

同上==checked==為默認(rèn)選中值
==name定義名稱(chēng)==射赛，相同名稱(chēng)的為一組，方便后續(xù)提取內(nèi)容

1.6文件選擇

multiple 多文件提交,不添加則單文件

<input type="file" multiple>

1.7input按鈕

1.7.1提交按鈕

    <input type="submit">

1.7.2重置按鈕

    <input type="reset">

2. button按鈕

    <button>普通按鈕</button>

==普通按鈕無(wú)任何功能奶是，配合js使用==
同樣可以給他添加type屬性楣责，同input系列按鈕
舉例

    <button type="submit">提交</button>

3.select下拉菜單標(biāo)簽

<select name="">
 <option value="">下拉列表1</option>
 <option value="">下拉列表2</option>
</select>

當(dāng)我們加入size屬性時(shí)


<select name=""size="5">
   <option value="">下拉列表1</option>
   <option value="">下拉列表2</option>
</select>

4.textarea文本域

==cols水平的文字字符長(zhǎng)度，rows垂直文字字符長(zhǎng)度==

    <textarea name="" id="" cols="30" rows="10"></textarea>

右下角可以自由拉伸大小

5. label標(biāo)簽

    <label for=""></label>

==for用于綁定id聂沙，當(dāng)點(diǎn)擊label標(biāo)簽的文字時(shí)執(zhí)行被綁定id的事件==
示例：

<input type="radio"name="sex"id="male"checked><label for="male">男</label>
<input type="radio"name="sex"id="female"><label for="female">女</label>

如上秆麸，當(dāng)點(diǎn)擊文字時(shí)也會(huì)選擇單選框

6form標(biāo)簽

<form action="" method="post">
            
<input type="submit" value=""/>
</form>

屬性	說(shuō)明
action	發(fā)送去的地址
method	提交方式，get或post

用于處理的元素都應(yīng)放在form標(biāo)簽里及汉，否則部分控件失效沮趣，如重置，提交按鈕
get一般用于搜索坷随，post相對(duì)安全性高常用于提交信息

練習(xí)

如圖房铭，單選框默認(rèn)屬性選擇男，單擊男或女能實(shí)現(xiàn)選中温眉，能上傳多個(gè)文件缸匪，重置信息功能正常

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form action="" method="post">
            <table border="1" cellspacing="0" cellpadding="0" width="380">
                <tr bgcolor="cornflowerblue">
                    <td>個(gè)人信息</td>
                </tr>
                <tr>
                    <td>姓名:<input type=" text" name="name" id="" value="" />
                    </td>
                </tr>
                <tr>
                    <td>郵箱:<input type="text" name="youxiang" id="" value="" />
                        <select name="qcm">
                            <option value="@qq.com">@qq.com</option>
                            <option value="@163.com">@163.com</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label>手機(jī)號(hào)碼:</label><input type="text" name="sjh" id="" value="" /></td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="sex" id="male" checked><label for="male">男</label>
                        <input type="radio" name="sex" id="female"><label for="female">女</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>愛(ài) 好:</label>
                        <input type="checkbox" name="uk1" id="" value="游泳" />游泳
                        <input type="checkbox" name="uk2" id="" value="讀書(shū)" />讀書(shū)
                        <input type="checkbox" name="uk3" id="" value="跑步" />跑步
                    </td>
                </tr>
                <tr>
                    <td><label>學(xué)校:</label><select name="xuexiao">
                            <option value="未選擇">請(qǐng)選擇</option>
                            <option value="復(fù)旦大學(xué)">復(fù)旦大學(xué)</option>
                            <option value="清華大學(xué)">清華大學(xué)</option>
                            <option value="武漢大學(xué)">武漢大學(xué)</option>
                        </select></td>
                </tr>
                <tr>
                    <td>自我介紹:<br>
                        <textarea rows="8" cols="50" name="zwjs"></textarea>
                        <input type="file" name="" id="" multiple>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="reset">
                    </td>
                </tr>
            </table>
        </form>

    </body>
</html>

小結(jié)

占位符 ==placeholder== 用于提示信息。
單選和多選框的屬性：
==checked==為默認(rèn)選中值
==name==定義名稱(chēng)类溢，相同名稱(chēng)的為一組凌蔬，方便后續(xù)提取內(nèi)容。
多文件提交我們可以添加==multiple==來(lái)實(shí)現(xiàn)
當(dāng)下拉列表添加==size==屬性時(shí)闯冷，可無(wú)需下拉顯示元素
==label的for==屬性用于綁定id砂心，常和選擇框一起綁定

今天不學(xué)習(xí)，明天變垃圾
==一定要親手殺死那個(gè)懦弱無(wú)能頹廢的自己==

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末窃躲，一起剝皮案震驚了整個(gè)濱河市计贰，隨后出現(xiàn)的幾起案子钦睡，更是在濱河造成了極大的恐慌蒂窒，老刑警劉巖，帶你破解...
沈念sama閱讀 218,204評(píng)論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件荞怒，死亡現(xiàn)場(chǎng)離奇詭異洒琢，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)褐桌，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,091評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)衰抑，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人荧嵌，你說(shuō)我怎么就攤上這事呛踊±剩” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 164,548評(píng)論 0贊 354
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵谭网，是天一觀的道長(zhǎng)汪厨。經(jīng)常有香客問(wèn)我，道長(zhǎng)愉择，這世上最難降的妖魔是什么劫乱？我笑而不...
開(kāi)封第一講書(shū)人閱讀 58,657評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮锥涕，結(jié)果婚禮上衷戈，老公的妹妹穿的比我還像新娘。我一直安慰自己层坠，他們只是感情好殖妇，可當(dāng)我...
茶點(diǎn)故事閱讀 67,689評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著破花，像睡著了一般拉一。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上旧乞，一...
開(kāi)封第一講書(shū)人閱讀 51,554評(píng)論 1贊 305
城市分裂傳說(shuō)
那天蔚润，我揣著相機(jī)與錄音，去河邊找鬼尺栖。笑死嫡纠，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的延赌。我是一名探鬼主播除盏，決...
沈念sama閱讀 40,302評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼挫以！你這毒婦竟也來(lái)了者蠕？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 39,216評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤掐松，失蹤者是張志新（化名）和其女友劉穎踱侣，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體大磺，經(jīng)...
沈念sama閱讀 45,661評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡抡句，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,851評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了杠愧。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片待榔。...
茶點(diǎn)故事閱讀 39,977評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖流济，靈堂內(nèi)的尸體忽然破棺而出锐锣，到底是詐尸還是另有隱情腌闯，我是刑警寧澤，帶...
沈念sama閱讀 35,697評(píng)論 5贊 347
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布雕憔，位于F島的核電站绑嘹，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏橘茉。R本人自食惡果不足惜工腋，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,306評(píng)論 3贊 330
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望畅卓。院中可真熱鬧擅腰，春花似錦、人聲如沸翁潘。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 31,898評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)拜马。三九已至渗勘，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間俩莽，已是汗流浹背旺坠。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,019評(píng)論 1贊 270
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留扮超，地道東北人取刃。一個(gè)月前我還...
沈念sama閱讀 48,138評(píng)論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像出刷，于是被迫代替她去往敵國(guó)和親璧疗。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,927評(píng)論 2贊 355

HTML入門(mén)這一篇就夠了

前言

一赂乐、HTML基礎(chǔ)概念認(rèn)知

1.網(wǎng)頁(yè)組成和本質(zhì)

1.1網(wǎng)頁(yè)由哪些部分組成薯鳍？

1.2我們看到的網(wǎng)頁(yè)背后本質(zhì)是什么浅役？

1.3前端的代碼是通過(guò)什么軟件轉(zhuǎn)換成看到的頁(yè)面的斩松？

2.瀏覽器（了解）

2.1五大瀏覽器

2.2渲染引擎（了解）

3.web標(biāo)準(zhǔn)

4.HTML骨架

二HTML基礎(chǔ)標(biāo)簽

前言

1.排版標(biāo)簽

1.1標(biāo)題標(biāo)簽

1.2段落標(biāo)簽

1.3換行標(biāo)簽

1.4水平線(xiàn)標(biāo)簽

2.文本格式化標(biāo)簽

3.媒體標(biāo)簽

3.1圖片標(biāo)簽

3.2 路徑

3.2.1相對(duì)路徑:

3.2.2絕對(duì)路徑:

3.3音頻標(biāo)簽

3.4視頻標(biāo)簽

4鏈接標(biāo)簽

練習(xí)題

小結(jié)

三、HTML列表榄笙、表格標(biāo)簽

1.列表標(biāo)簽

1.1無(wú)序列表

1.2有序列表

1.3自定義列表

2.表格標(biāo)簽

2.1表格標(biāo)簽

2.2表格結(jié)構(gòu)標(biāo)簽

3.3表格相關(guān)屬性

3.4合并表格

小結(jié)

四钾埂、HTML表單

前言

1.input標(biāo)簽

1.1文本框

1.2密碼框

1.3input占位符

1.4單選框

1.5多選框

1.6文件選擇

1.7input按鈕

1.7.1提交按鈕

1.7.2重置按鈕

2. button按鈕

3.select下拉菜單標(biāo)簽

4.textarea文本域

5. label標(biāo)簽

6form標(biāo)簽

練習(xí)

小結(jié)

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