整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML5新特性

          • 特性
            1.語(yǔ)意特性,添加<header><header/><nav><nav>等標(biāo)簽
            2.多媒體, 用于媒介回放的 video 和 audio 元素
            3.圖像效果,用于繪畫(huà)的 canvas 元素,svg元素等
            4.離線 & 存儲(chǔ),對(duì)本地離線存儲(chǔ)的更好的支持,local Store,Cookies等
            5.設(shè)備兼容特性 ,HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開(kāi)放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連,
            6.連接特性,更有效的連接工作效率,使得基于頁(yè)面的實(shí)時(shí)聊天,更快速的網(wǎng)頁(yè)游戲體驗(yàn),更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù),Server-Sent Event和WebSockets就是其中的兩個(gè)特性,這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能
            7.性能與集成特性,HTML5會(huì)通過(guò)XMLHttpRequest2等技術(shù),幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作

          • 新增標(biāo)簽
            1.多媒體:<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>
            2.新表單元素:<datalist> ,<output> , <keygen>
            3.新文檔節(jié)段和綱要:<header>頁(yè)面頭部、<section>章節(jié)、<aside>邊欄、<article>文檔內(nèi)容、<footer>頁(yè)面底部、<section>章節(jié)、<aside>邊欄、<article>文檔內(nèi)容、<footer>頁(yè)面底部

          • 使用html5shiv可以解決ie低版本不兼容的問(wèn)題,只需要在head中加上,當(dāng)版本低于IE9時(shí),瀏覽器會(huì)加載html5.js腳本,使得支持html5的新功能,也可以將腳本文件下載到本地

            <head> <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'> </script> <![endif]--></head>

          3.input 有哪些新增類型?

          • color,選擇顏色
          • date 選擇日期
          • email 用于檢測(cè)輸入的是否為email格式的地址
          • month 選擇月份
          • number 用于應(yīng)該包含數(shù)值的輸入域,可以設(shè)定對(duì)輸入值的限定
          • range 用于定義一個(gè)滑動(dòng)條,表示范圍
          • search 用于搜索,比如站點(diǎn)搜索或 Google 搜索
          • tel 輸入電話號(hào)碼
            -time 選擇時(shí)間
          • url 輸入網(wǎng)址
          • week 選擇周和年

          4.瀏覽器本地存儲(chǔ)中 cookie 和 localStorage 有什么區(qū)別? localStorage 如何存儲(chǔ)刪除數(shù)據(jù)。

          • 共同點(diǎn):sessionStorage、localStorage和cookie都由瀏覽器存儲(chǔ)在本地的數(shù)據(jù)。
          • 區(qū)別
            1.cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要),即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞,localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存
            2.cookie數(shù)據(jù)還有路徑(path)的概念,可以限制cookie只屬于某個(gè)路徑下,存儲(chǔ)大小限制也不同,cookie數(shù)據(jù)不能超過(guò)4k,同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie,所以cookie只適合保存很小的數(shù)據(jù),如會(huì)話標(biāo)識(shí)。localStorage 雖然也有存儲(chǔ)大小的限制,但比cookie大得多,可以達(dá)到5M或更大。localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器
            3.cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效,即使窗口或?yàn)g覽器關(guān)閉。localStorage:始終有效,窗口或?yàn)g覽器關(guān)閉也一直保存,因此用作持久數(shù)據(jù)
            4.localStorage支持事件通知機(jī)制,可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽(tīng)者。 api 接口使用更方便。而cookie的原生接口不友好,需要程序員自己封裝
          • HTML5中提供了localStorage對(duì)象可以將數(shù)據(jù)長(zhǎng)期保存在客戶端,除非人為清除,localStorage提供了幾個(gè)方法:
          • 1.存儲(chǔ):localStorage.setItem(key,value)如果key存在時(shí),更新value
            2.獲取 localStorage.getItem(key)如果key不存在返回null
            3.刪除 localStorage.removeItem(key)一旦刪除,key對(duì)應(yīng)的數(shù)據(jù)將會(huì)全部刪除
            4.全部清除 localStorage.clear() 使用removeItem逐個(gè)刪除太麻煩,可以使用clear,執(zhí)行的后果是會(huì)清除所有l(wèi)ocalStorage對(duì)象保存的數(shù)據(jù)
          • 注意:localStorage存數(shù)的數(shù)據(jù)是不能跨瀏覽器共用的,一個(gè)瀏覽器只能讀取各自瀏覽器的數(shù)據(jù),儲(chǔ)存空間5M。

          、Html的基本結(jié)構(gòu):

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset=utf-8">

          <title></title>

          </head>

          <body>

          網(wǎng)頁(yè)的文本、圖片等信息;

          </body>

          </html>

          二、Head部分:用于表示網(wǎng)頁(yè)的元數(shù)據(jù)即描述網(wǎng)頁(yè)的基本信息

          其常用標(biāo)簽及屬性有:

          1、title標(biāo)簽:瀏覽器標(biāo)簽頁(yè)顯示的標(biāo)題

          2、meta標(biāo)簽:其常用屬性

          ①charset:設(shè)置文檔的字符集編碼格式。HTML5中設(shè)置字符集編碼:<meta charset="UTF-8">

          常見(jiàn)的字符集編碼格式:

          a.GB-2312:國(guó)標(biāo)碼,簡(jiǎn)體中文

          b.GBK:擴(kuò)展的國(guó)標(biāo)碼

          c.UTF-8:萬(wàn)國(guó)碼 Unicode 常用

          ②http-equiv屬性:將我們的信息寫(xiě)給瀏覽器看,讓瀏覽器按照這里面的要求執(zhí)行,可選屬性值:Content-Type(文檔類型) refresh(網(wǎng)頁(yè)定時(shí)刷新) set-cookie(設(shè)置瀏覽器cookie緩存) 需要配合content屬性使用。(http-equiv屬性只是表明需要設(shè)置哪一部分,具體的設(shè)置內(nèi)容,放到content屬性中)

          ③name屬性:使用方法同“http-equiv”。將我們的信息寫(xiě)給搜索引擎看

          常用且需要掌握的屬性值:author(作者) keywords(網(wǎng)頁(yè)關(guān)鍵字) description(網(wǎng)頁(yè)描述) 這兩個(gè)屬性設(shè)置,網(wǎng)頁(yè)必不可少。

          3、link標(biāo)簽:鏈接網(wǎng)頁(yè)圖標(biāo)(title前的小logo),其常用屬性有:

          ①rel屬性:聲明鏈接文件的類型,此處選icon

          ②type屬性:可以省略

          ③href屬性:表示圖片的路徑地址

          三、body部分:網(wǎng)頁(yè)的文本、圖片等信息

          標(biāo)簽的分類:

          塊級(jí)標(biāo)簽:顯示為塊,前后隔一行(自動(dòng)換行)

          行級(jí)標(biāo)簽:按行從左往右逐一顯示。

          1、 常見(jiàn)的塊級(jí)標(biāo)簽:

          ①<h1></h1>......<h6><h6>:標(biāo)題標(biāo)簽,自動(dòng)加粗,h1最大,h6最小。

          ②<hr/>:水平線標(biāo)簽,添加一條水平線。

          ③<p></p>:段落標(biāo)簽,

          ④<br/>:換行標(biāo)簽,

          ⑤<blockquote/></blockquote>:引用標(biāo)簽,cite屬性,表明引用的來(lái)源,一般引用網(wǎng)址

          瀏覽器默認(rèn)首行縮進(jìn)。

          ⑥<pre></pre>:預(yù)格式標(biāo)簽,用于重載代碼。瀏覽器默認(rèn)顯示樣式:1、顯示為等寬字體。 2、代碼中的換行、

          空格等元素能在瀏覽器中顯示。

          【補(bǔ)充】html 文件中空格的表示:

          2、 基于布局的塊級(jí)標(biāo)簽

          列表:無(wú)序列表、有序列表、定義列表

          ①有序列表:<ol></ol> 列表項(xiàng):<li></li>

          ②無(wú)序列表:<ul></ul> 列表項(xiàng):<li></li>

          ③定義列表(實(shí)現(xiàn)圖文混排):<dl></dl>

          列表標(biāo)題:<dt>一般只有一項(xiàng)</dt>

          列表描述項(xiàng):<dd>可以有很多項(xiàng)</dd>

          3、組合標(biāo)簽:<figure></figure>用于顯示圖片及圖片標(biāo)題

          他有兩個(gè)子標(biāo)簽:<img />圖片

          <figcaption></figcaption>圖片的標(biāo)題

          例如:<figure>

          <img src="img/EZ.jpg" height="20%" width="20%" alt="探險(xiǎn)家"/>

          <figcaption>探險(xiǎn)家 伊澤瑞爾</figcaption>

          </figure>

          4、分區(qū)標(biāo)簽:<div></div>

          5、常見(jiàn)的行級(jí)標(biāo)簽

          <1>span(文本):無(wú)實(shí)際意義,用于包裹某部分文字,修改特定樣式,例如:

          這是<span style="color: red;font-size: 36px;">span</span>中的文字

          img(圖片):其常用屬性:①src:表示引用圖片的地址。

          路徑地址的寫(xiě)法:相對(duì)路徑:以當(dāng)前文件為最準(zhǔn),去尋找圖片地址

          a、與文件處于同一層的圖片,直接寫(xiě)圖片名

          b、圖片在當(dāng)前文件下一層:文件名/圖片名

          c、圖片在當(dāng)前文件上一層:../圖片名

          絕對(duì)路徑:file:///盤(pán)符:/文件夾/圖片名,但 是嚴(yán)禁使用

          圖片網(wǎng)址:網(wǎng)絡(luò)上的圖片鏈接,但是一般不用

          ②height和width:圖片的高度和寬度。可以用CSS樣式代替

          ③title:圖片標(biāo)。當(dāng)鼠標(biāo)指上之后顯示的文字

          ④alt:當(dāng)圖片無(wú)法顯示的時(shí)候,顯示的文字

          <2>em(傾斜強(qiáng)調(diào))

          <3>strong(加粗強(qiáng)調(diào))

          <4>b(加粗)

          <5>i(傾斜)

          Strong、em、b、i的區(qū)別

          1、Strong、em都表示強(qiáng)調(diào),Strong為粗體,em為斜體,而Strong的強(qiáng)調(diào) 程度逗比em高

          2、Strong和b都能加粗,em和i都能傾斜,,但是Strong和em多了一層強(qiáng)調(diào)的語(yǔ)義 。H5要求標(biāo)簽盡可能實(shí)現(xiàn)語(yǔ)義化。

          <6>q(短引用)

          <7>small/big(縮小/放大字體):small和big分別是縮小和擴(kuò)大字體,都可以多層嵌套直至上限或下限

          <8>a(超鏈接)

          1、href:超鏈接的路徑,可以是網(wǎng)絡(luò)鏈接,也可以是本地文件。

          2、target:跳轉(zhuǎn)頁(yè)面打開(kāi)的位置。_self自身頁(yè)面,_blank新頁(yè)面。

          3、title:鼠標(biāo)指在超鏈接上顯示的名稱。

          4、Rel(被鏈接是當(dāng)前的前/后一篇):指定被鏈接文檔與當(dāng)前文檔的關(guān)系,搜索引擎 會(huì)利用該屬性 獲取更多的有關(guān)鏈接的信息:

          rel="prev"被鏈接文檔是當(dāng)前文檔的前一篇文 檔,

          rel="next"被鏈接文檔是當(dāng)前文檔的后一篇文檔,

          rel="icon"被鏈接文檔是當(dāng)前文檔的圖標(biāo)

          rel="stylesheet"被鏈接文檔是當(dāng)前文檔的樣式表

          5、Rev(當(dāng)前是被鏈接的前/后一篇)

          錨鏈接:

          ①本頁(yè)面錨鏈接:a、設(shè)置錨點(diǎn):<a name="top"></a>

          b、跳轉(zhuǎn)錨點(diǎn):#name名

          ①頁(yè)面間錨鏈接:a、在即將跳轉(zhuǎn)頁(yè)面的指定位置設(shè)置錨點(diǎn)

          b、跳轉(zhuǎn)錨點(diǎn):頁(yè)面地址.html#name名

          <a href="02_常見(jiàn)的塊級(jí)標(biāo)簽.html#Hbuilder">頁(yè)面間錨鏈接</a><br/>

          功能性鏈接: mailto用于給指定郵箱發(fā)送郵件

          file:///e:/aaa.png打開(kāi)本地文件

          tencent://message/?uin=1315618220 給指定QQ發(fā)送息

          <9>s標(biāo)簽,有誤文本:刪除線

          <s>這是S標(biāo)簽中的文字</s><br />

          <10>cite標(biāo)簽:瀏覽器顯示為傾斜,常用于書(shū)、畫(huà)作、作品的引用

          <cite>這是cite中的文本</cite><br />

          <11>code:計(jì)算機(jī)代碼,不保留代碼格式

          <pre>

          <code></code>

          </pre>

          <12>bdo:表示文本方向,屬性:dir="ltr"表示從左往右,dir="rtl"表示從右往左

          <bdo dir="rtl">1234567</bdo><br />

          kbd:表示需要用戶用鍵盤(pán)輸入的內(nèi)容,瀏覽器顯示為等寬字體

          請(qǐng)輸入“<kbd>Esc</kbd>”推遲系統(tǒng)<br />

          <13>sup:上標(biāo)文本,sub:下標(biāo)文本

          x<sub>6</sub><br />

          ? ? 空格

          ? ? 空格 <br />

          <14>u:下劃線

          <u>這是下劃線</u><br />

          mark:高亮或標(biāo)記文本,瀏覽器顯示為黃色背景

          <mark>mark</mark><br />

          6、表格:表格的行:tr,每行中的列:td,表格的表頭:th

          表格的常用屬性:

          表格行列屬性:[tr和td的屬性]:

          1、width/heigh:?jiǎn)卧竦膶捀?/p>

          2、bgcolor:單元格的背景顏色

          3、align:left center right 單元格中的文字水平對(duì)齊方式

          4、valign:top center bottom 單元格中的文字垂直對(duì)其方式

          5、nowrap:單元格中文字不換行

          【注意】當(dāng)表格屬性與行列屬性沖突時(shí),行列屬性優(yōu)先級(jí)高

          7、表單(form)

          【兩個(gè)重要屬性】:action-表單提交的服務(wù)器地址 method-表單提交數(shù)據(jù)的方法(get/post)

          get/post區(qū)別:

          1>get使用URL傳參:http://服務(wù)器地址?name1=value1&name2=value2

          (?表示傳遞參數(shù),?后面采用name=value的形式傳遞,多個(gè)參數(shù)之間用&連接) ① URL傳參不安全,所有信息可在地址欄看到,并且別人可以很容易u(yù)rl注入,來(lái) 攻擊自己的數(shù)據(jù)庫(kù)。

          ② URL傳參數(shù)據(jù)量有限,只能傳遞少量數(shù)據(jù)。

          2>post:使用http請(qǐng)求傳遞數(shù)據(jù)。URL地址看不到數(shù)據(jù)信息,安全且傳遞信息量沒(méi)有限制

          綜上所述:大部分使用post傳參,但是get傳參比Post快

          【input標(biāo)簽及屬性】

          ①type:input輸入框的類型,可選值有:

          ②name:input輸入框的別名,必填,因?yàn)閭鲄⒌臅r(shí)候采用name=value的形式傳遞。

          ③value:input輸入框的默認(rèn)值

          ④placeholder:提示內(nèi)容,當(dāng)輸入框有value時(shí),提示內(nèi)容消失。

          【input特殊屬性值】

          ① checked="checked"默認(rèn)選中

          ② disabled="disabled"設(shè)置控制不能使用,按鈕上不能點(diǎn)擊,輸入框上不能修改,而且如果

          輸入框時(shí)disabled,則輸入框信息不傳遞到后臺(tái)

          ③hidden=“hidden”隱藏。等同于<input type="hidden" name="username"value="1234" />

          等同于配合disabled或根據(jù)其他需要,使用隱藏域傳遞信息.

          【input-type屬性詳解】

          ①text:文本輸入框

          ②password:密碼輸入框,內(nèi)容不對(duì)外顯示

          ③radio:?jiǎn)芜x按鈕

          checkbox:復(fù)選按鈕

          a、單選按鈕,name和value屬性需同時(shí)存在,提交時(shí),提交的是value中的屬性值

          例如:<input type="radio" name="sex" value="男"/>提交顯示為"sex=男"

          b、radio憑借name屬性區(qū)分是否為同一組,name相同為同組,且只能選擇一個(gè)

          c、checked="checked"默認(rèn)選中,(radio只可以選一個(gè),checkbox可以選多個(gè))

          ④submit:提交按鈕,提交表單數(shù)據(jù)

          ⑤reset:重置按鈕,重置為默認(rèn)狀態(tài)

          ⑥file:文件上傳按鈕

          ⑦image:圖片提交按鈕,功能同submit,可以提交數(shù)據(jù)

          ⑧button:普通按鈕,沒(méi)什么軟用

          ⑨其他常用屬性值:見(jiàn)下圖

          【select標(biāo)簽】下拉選擇標(biāo)簽

          寫(xiě)法:

          <select name="=city">

          <option>青島</option>

          <option>煙臺(tái)</option>

          <option>北京</option>

          <option>紐約</option>

          <option>羅馬</option>

          </select>

          常用屬性

          ①name屬性:寫(xiě)在select里,所有選項(xiàng)只有一個(gè)name

          ②multiple屬性:multiple="multiple"設(shè)置select為多選,一般不用

          ③option常用屬性:value=""屬性,當(dāng)option沒(méi)有value屬性時(shí),往后臺(tái)傳遞的是<option></option>中間的文字,

          當(dāng)有value屬性時(shí),傳遞的是value的屬性值。

          title=""屬性,鼠標(biāo)之上后現(xiàn)實(shí)的文字

          select="select"默認(rèn)屬性值

          ④optgroup屬性: 用于option屬性分組,用lable屬性表示分組名。

          <optgroup label="中國(guó)">

          <option>青島</option>

          <option>煙臺(tái)</option>

          <option>北京</option>

          </optgroup>

          【textarea】:文本域,其常用屬性 :

          ①設(shè)置寬度高度 style="width: 150px;height: 200px;

          ②readonly="readonly":只讀模式,不允許修改編輯

          ③style="resize: none;"設(shè)置為寬度高度不允許修改

          ④style="overflow:;"設(shè)置文字超出區(qū)域時(shí),如何處置,常用屬性值有:

          hidden 超出區(qū)域的文字,隱藏?zé)o法顯示

          scroll 無(wú)論文字多少,均顯示滾動(dòng)

          auto 自動(dòng),根據(jù)文字多少自動(dòng)決定是否會(huì)顯示為滾動(dòng)條

          【fieldset 、legend】表單的邊框與標(biāo)題

          <fieldset> //邊框

          <legend> //標(biāo)題

          </legend>

          </fieldset>

          如果想讓標(biāo)題嵌入到邊框中,需將標(biāo)題標(biāo)簽寫(xiě)到邊框標(biāo)簽里面

          一個(gè)表單可以有多組標(biāo)題加邊框組合

          【h5智能表單】

          1、H5新增input的form屬性,用于指定特form表單的id,實(shí)現(xiàn)input無(wú)需放在form標(biāo)簽之中,即可通過(guò)表單進(jìn)行提交

          <form id=foo>

          ……

          </form>

          <input type="text" name="" form="foo">

          2、 input元素的新增屬性:

          Autocomplete:自動(dòng)完成功能,記錄用戶之前輸入的內(nèi)容,并在用戶下次輸入時(shí)提示用戶輸入

          》》》屬性值:on/off

          》》》可以再form表單使用,對(duì)整個(gè)表單的所有控件進(jìn)行自動(dòng)完成的開(kāi)關(guān)也可以在input上使用,

          對(duì)特定輸入框進(jìn)行修改

          》》》絕大部分瀏覽器默認(rèn)開(kāi)啟

          Autofocus:自動(dòng)獲得焦點(diǎn),autofocus="autofocus"只能獲得一個(gè)焦點(diǎn)

          Form:所屬表單,通過(guò)id確認(rèn)屬于哪個(gè)表單

          Required:必填,required="required",設(shè)置必填,否則停止提交

          Pattern:使用正則表達(dá)式驗(yàn)證input的模式

          Placeholder:提示,當(dāng)有value時(shí)取消提示。

          1.html中文問(wèn)題

          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
          </head> 
          

          2.標(biāo)簽

          <p> 這是一個(gè)開(kāi)始標(biāo)簽 
          </p> 這是一個(gè)結(jié)束標(biāo)簽 
          <p> Hello World </p> 標(biāo)簽之間的文本叫做內(nèi)容
          <h1>大標(biāo)題</h1>
          <h2>小一點(diǎn)的標(biāo)題</h2>
          <h3>再小一點(diǎn)的標(biāo)題</h3>
          <h4>更小一點(diǎn)的標(biāo)題</h4>
          

          3.元素

          <html> 頭標(biāo)簽
           
           <body> 身體標(biāo)簽 
           
           <h1>標(biāo)題</h1> 
           <br/> 換行
          <hr/> 水平線
          <p>段落表示</p> 
           </body>
           
          </html>
          

          4.屬性

          <h1 align="center">居中標(biāo)題</h1>
          寫(xiě)在開(kāi)始標(biāo)簽里的 align="center" 就叫屬性 
          align 是屬性名 
          center 是屬性值 
          屬性值應(yīng)該使用雙引號(hào)括起來(lái)
          

          5.注釋

          <!--注釋內(nèi)容-->
          

          6.標(biāo)題

          <h1>標(biāo)題1</h1>
          <h2>標(biāo)題2</h2>
          <h3>標(biāo)題3</h3>
          <h4>標(biāo)題4</h4>
          <h5>標(biāo)題5</h5>
          <h6>標(biāo)題5</h6>
          

          7.段落

          <p>段落1 </p>
          <p>段落2 </p>
          <p>段落3 </p>
          

          8.粗體--斜體

          <b>b標(biāo)簽粗體效果</b>
          <strong>strong標(biāo)簽粗體效果</strong> <br/> <!--推薦使用-->
          <i>使用 i 標(biāo)簽帶來(lái)的斜體效果</i>
          <em>使用 em 標(biāo)簽帶來(lái)的斜體效果</em> <!--推薦使用-->
          

          9.預(yù)格式顯示Java代碼

          <pre>
          public class HelloWorld {
           
           public static void main(String[] args) {
           System.out.println("Hello World");
           }
          }
           
          </pre>
          

          10.刪除--下劃線

          <del>使用del標(biāo)簽實(shí)現(xiàn)的刪除效果</del>
          <ins>使用ins標(biāo)簽實(shí)現(xiàn)的下劃線效果</ins>
          

          11.圖像

          <img src="圖片路徑"/>
          <!--圖像大小-->
          <img width="200" height="200" src="圖片路徑"/>
          <!--圖像位置-->
          <div align="left">
           <img src="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808042009780.gif"/>
          </div>
           
          <div align="center">
           <img src="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808042009780.gif"/>
          </div>
           
          <div align="right">
           <img src="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808042009780.gif"/>
          </div>
          <!--替換圖片文字,加載不出圖片時(shí)顯示文字-->
          <img src="http://how2j.cn/example_not_exist.gif" alt="這個(gè)是一個(gè)圖片" />
          

          12.超鏈接

          <a >12306</a>
          <!--target屬性表示在新頁(yè)面打開(kāi)超鏈接-->
          <a  target="_blank">http://www.12306.com</a>
          <!--超鏈接上顯示文字-->
          <a  title="跳轉(zhuǎn)到http://www.12306.com">www.12306.com</a>
          <!--圖片超鏈接-->
          <a >
          <img src="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808042009780.gif"/>
          </a>
          

          13.表格

          <!--
           table:表格
           tr:行
           td:列
           border:帶邊框的表格
           width:表格高度,px及像素的意思
           td-width:單元格寬度絕對(duì)值,也可用百分比顯示(50%)
           algin:單元格水平對(duì)齊(left,right,center)
           valgin:單元格垂直對(duì)齊(top,middle,bottom)
           colspan:水平合并
           rowspan:垂直合并
           bgcolor:背景顏色
          -->
          <table border="1" width="200px">
           <tr>
           <td width="50px">1</td>
           <td algin="center">居中</td>
           <td algin="left">靠左</td>
           <td algin="right">靠右</td>
           <td width="80%">1</td>
           <td valign="middle" >中間</td>
           <td valign="top" >頂部</td>
           <td valign="bottom" >底部</td>
           <td colspan="2" >1,2</td>
           <td rowspan="2">1,3</td>
           <td bgcolor="pink">b</td>
           </tr>
          </table> 
          

          14.列表

          <!--ul無(wú)序,ol有序-->
          <ul>
          <li>無(wú)序</li>
          <li>列表</li>
          </ul>
          <ol>
          <li>有序</li>
          <li>列表</li>
          </ol>
          

          15.div域span

          <!--
          div是塊元素,即自動(dòng)換行 
          常見(jiàn)的塊元素還有h1,table,p 
          span是內(nèi)聯(lián)元素,即不會(huì)換行 
          常見(jiàn)的內(nèi)聯(lián)元素還有img,a,b,strong
          業(yè)界通常結(jié)合css來(lái)控制頁(yè)面布局
          -->
          <div>
           第一個(gè)div
          </div>
           
          <div>
           第二個(gè)div <!--換行-->
          </div>
           
          <span>
           第一個(gè)span
          </span>
           
          <span>
           第二個(gè)span <!--不換行-->
          </span>
          

          16.字體

          <!--color表示顏色,size表示字體大小-->
          <font color="blue" size="+2">藍(lán)色大2號(hào)字體</font>
          

          17.內(nèi)聯(lián)框架

          <!--
          iframe相當(dāng)于瀏覽器里面有個(gè)小瀏覽器,在這個(gè)小瀏覽器中,打開(kāi)另一個(gè)網(wǎng)頁(yè)
          -->
          <iframe src="http://how2j.cn/" width="600px" height="400px">
          </iframe>
          

          18.文本框

          <!--普通文本框-->
          <input type="text">
          <!--設(shè)置文本框長(zhǎng)度-->
          <input type="text" size="10">
          <!--初始值文本框-->
          <input type="text" value="有初始值的文本框">
          <!--有背景文字的文本框,使用屬性placeholder-->
          <input type="text" placeholder="請(qǐng)輸入賬號(hào)">
          

          19.密碼框

          <!--輸入的數(shù)據(jù)會(huì)自動(dòng)顯示為星號(hào)-->
          <input type="password">
          

          20.表單

          <!--
          action獲取數(shù)據(jù)提交后的頁(yè)面,初學(xué)者體驗(yàn)效果就好
          get和post的區(qū)別 
          get 
          是form默認(rèn)的提交方式 
          如果通過(guò)一個(gè)超鏈訪問(wèn)某個(gè)地址,是get方式 
          如果在地址欄直接輸入某個(gè)地址,是get方式 
          提交數(shù)據(jù)會(huì)在瀏覽器顯示出來(lái) 
          不可以用于提交二進(jìn)制數(shù)據(jù),比如上傳文件 
          post 
          必須在form上通過(guò) method="post" 顯示指定 
          提交數(shù)據(jù)不會(huì)在瀏覽器顯示出來(lái) 
          可以用于提交二進(jìn)制數(shù)據(jù),比如上傳文件
          -->
          <form action="http://how2j.cn/study/login.jsp">
          賬號(hào):<input type="text" name="name"> <br/>
          密碼:<input type="password" name="password" > <br/>
          <input type="submit" value="登陸">
          </form>
          

          21.單選框

          <!--兩個(gè)單選,都可以同時(shí)選中。但不能取消-->
          單選1 <input type="radio" >
          單選2 <input type="radio" >
          <!--checked默認(rèn)選中-->
          默認(rèn)選中 <input type="radio" checked="checked" >
          <!--多個(gè)可單選框,activity參數(shù)-->
          學(xué)習(xí)java<input type="radio" name="activity" value="學(xué)習(xí)java" > <br/>
          java<input type="radio" checked="checked" name="activity" value="tokyohot" > <br/>
          dota<input type="radio" name="activity" value="dota" > <br/>
          LOL<input type="radio" name="activity" value="lol"> <br/>
          

          22.復(fù)選框

          <!--復(fù)選框,checkbox-->
          學(xué)習(xí)java<input type="checkbox" value="學(xué)習(xí)java" > <br/>
          學(xué)習(xí)<input type="checkbox" checked="checked" name="activity" value="tokyohot" > <br/>
          dota<input type="checkbox" value="dota" > <br/>
          LOL<input type="checkbox" value="lol"> <br/>
          

          23.下拉列表

          <!--
          <select> 即下拉列表 
          需要配合<option>使用
          size:表示顯示高度
          multiple:可以用ctrl多選中
          selected:默認(rèn)選中
          -->
          <select size="2" multiple="multiple >
           <option >1</option>
           <option >2</option>
           <option selected="selected" >3</option>
          </select>
          

          24.文本域

          <!--
          文本域可以有多行,并且可以有滾動(dòng)條
          cols:顯示寬度
          rows:顯示行數(shù)
          -->
          <textarea cols="30" rows="8">abc
          def
          </textarea>
          

          25.普通按鈕

          <!--參數(shù)button,普通按鈕不具備提交from表單的效果-->
          <input type="button" value="一個(gè)按鈕">
          

          26.提交按鈕

          <!--
          <input type="submit"> 即為提交按鈕 
          用于提交form,把數(shù)據(jù)提交到服務(wù)端
          -->
          <form action="/study/login.jsp" method="get">
          賬號(hào):<input type="text" name="name"> <br/>
          密碼:<input type="password" name="password" > <br/>
          <input type="submit" value="登陸">
          </form>
          

          27.重置按鈕

          <!--
          <input type="reset"> 重置按鈕 可以把輸入框的改動(dòng)復(fù)原
          -->
          <form action="/study/login.jsp">
          賬號(hào):<input type="text" name="name"> <br/>
          密碼:<input type="password" name="password" > <br/>
          <input type="submit" value="提交">
          <input type="reset" value="重置">
          </form>
          

          28.圖像提交

          <!--<input type="image" > 即使用圖像作為按鈕進(jìn)行form的提交-->
          <form action="/study/login.jsp">
          賬號(hào):<input type="text" name="name"> <br/>
          密碼:<input type="password" name="password" > <br/>
          <input type="image" src="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808042009780.gif">
          </form>
          

          29.按鈕

          <!--
          <button></button>即按鈕標(biāo)簽 
          與<input type="button">不同的是,<button>標(biāo)簽功能更為豐富 
          按鈕標(biāo)簽里的內(nèi)容可以是文字也可以是圖像 
          如果button的type=“submit” ,那么它就具備提交form的功能
          -->
          <form action="/study/login.jsp">
          賬號(hào):<input type="text" name="name"> <br/>
          密碼:<input type="password" name="password" > <br/>
          <button type="submit">登陸</button>
           
          </form>
          

          30.html綜合演示

          簡(jiǎn)單登陸注冊(cè)模板.html

          演示結(jié)果:


          主站蜘蛛池模板: 亚洲一区二区久久| 日韩人妻无码免费视频一区二区三区| 日本精品啪啪一区二区三区| 红杏亚洲影院一区二区三区| 国产在线视频一区二区三区| 亚洲av无码片vr一区二区三区| 亚洲日本一区二区| 中文字幕av人妻少妇一区二区| 国产精品自拍一区| 亚洲丶国产丶欧美一区二区三区| 无码人妻精品一区二区三区蜜桃| 亚洲Av无码一区二区二三区| 久久久av波多野一区二区| 亚洲天堂一区二区三区四区| 国产免费一区二区三区| 日韩AV无码一区二区三区不卡| 精品国产一区二区三区香蕉事| 国产乱码精品一区二区三区香蕉| 国产成人欧美一区二区三区| 国产一区中文字幕在线观看| 久久国产精品免费一区| 色国产精品一区在线观看| 学生妹亚洲一区二区| 免费国产在线精品一区| 久久4k岛国高清一区二区| 成人精品一区二区电影 | 亚洲AV无码一区东京热久久 | 中文乱码精品一区二区三区| 久久精品免费一区二区三区| 亚洲福利一区二区精品秒拍| 国产日韩精品一区二区三区| 亚洲av区一区二区三| 国产99久久精品一区二区| 丰满爆乳无码一区二区三区| 国产一区二区在线观看app| 精品人妻系列无码一区二区三区| 福利一区在线视频| 欲色aV无码一区二区人妻 | 亚洲综合色一区二区三区| 国产伦一区二区三区高清| 日韩精品一区二区三区老鸦窝|