HTML基礎(chǔ)（六）-表單（下）

lt;input> 元素的輸入類型

大家學(xué)習(xí)了表單之后，有木有發(fā)現(xiàn)input通過(guò)定義不同的type屬性，描述不同的輸入類型。今天小編帶大家總結(jié)一下input常用的輸入類型。

1.文本輸入

設(shè)置 type 屬性值為 'text'

<input type="text">

文本輸入框

2.密碼輸入

設(shè)置 type 屬性值為 ‘password’

<input type="password">

密碼輸入框

3.提交表單按鈕

設(shè)置 type 屬性值為 ‘submit’

<input type="submit">

定義提交表單數(shù)據(jù)至表單處理程序的按鈕

4.單選按鈕

設(shè)置 type 屬性值為 ‘radio’

<input type="radio">true

單選按鈕

5.復(fù)選框

設(shè)置 type 屬性值為 ‘checkbox’

<input type="checkbox">

6.按鈕

設(shè)置 type 屬性值為 ‘button’

<input type="button" value="確定">

<input>元素輸入屬性

在講input的輸入屬性之前，給大家講講HTML屬性是怎么回事。

可能大家也發(fā)現(xiàn)了，之前文章講得的HTML中，好多加了屬性的元素，例如a標(biāo)簽中加了href屬性定義了鏈接的地址，還有table中加border屬性給表格添加邊框線。

<a >sublime的安裝與使用</a>
<table border="1"></table>

HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。

屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name="value"。屬性總是在 HTML 元素的開(kāi)始標(biāo)簽中規(guī)定。

雖然屬性和屬性值對(duì)大小寫(xiě)不敏感，但是小編還是建議大家用小寫(xiě)的。

后續(xù)課程CSS會(huì)用到屬性給大家總結(jié)一下：

class 規(guī)定元素的類名

id 規(guī)定元素的唯一 id

style 規(guī)定元素的行內(nèi)樣式

好啦，我們開(kāi)始學(xué)習(xí)input的輸入屬性。

看如下例子，

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

type屬性定義了文本的輸入類型，value屬性定義了輸入字段的初始值。

設(shè)置默認(rèn)值

用value設(shè)置初始值往往在你修改輸入值時(shí)遇到麻煩，如果不提前把初始值刪掉的話，你輸入新值后跟在初始值后邊。

修改輸入值

為了解決這個(gè)問(wèn)題，我們可以使用占位符(placeholder)

<input type="text" placeholder="John" >

當(dāng)你輸入新值時(shí)，初始值會(huì)消失。

使用占位符

readonly 屬性

readonly 屬性規(guī)定輸入字段為只讀（不能修改）

<input type="text" value="Sunshin" readonly>

disabled 屬性

disabled 屬性規(guī)定輸入字段是禁用的。
被禁用的元素是不可用和不可點(diǎn)擊的。
被禁用的元素不會(huì)被提交。

<input type="text" value="Sunshin" disabled >

輸入框不可用

required 屬性

required 屬性是布爾屬性。如果設(shè)置，則規(guī)定在提交表單之前必須填寫(xiě)輸入字段。

<input type="text" value="Sunshin" required>

今天內(nèi)容是不是又有點(diǎn)多呢？我控制不住我自己啊(⊙o⊙)…

打開(kāi)編輯器好好練習(xí)一下吧！

你必須非常努力，才能看起來(lái)好不費(fèi)力！

關(guān)注小白前端，才能持續(xù)收到文章推送哦~

, 判斷字符串是否是這樣組成的，第一個(gè)必須是字母，后面可以是字母、數(shù)字、下劃線，總長(zhǎng)度為5-20

　　var reg=/^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

　　reg.test("a1a__a1a__a1a__a1a__");

2，截取字符串a(chǎn)bcdefg的efg

　　var str="abcdefg";

　　if (/efg/.test(str)) {

　　var efg=str.substr(str.indexOf("efg"), 3);

　　alert(efg);

　　}

3，判斷一個(gè)字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計(jì)這個(gè)次數(shù)

　　//將字符串的字符保存在一個(gè)hash table中，key是字符，value是這個(gè)字符出現(xiàn)的次數(shù)

　　var str="abcdefgaddda";

　　var obj={};

　　for (var i=0, l=str.length; i < l; i++) {

　　var key=str[i];

　　if (!obj[key]) {

　　obj[key]=1;

　　} else {

　　obj[key]++;

　　}

　　}

　　/*遍歷這個(gè)hash table，獲取value最大的key和value*/

var max=-1;

　　var max_key="";

　　var key;

　　for (key in obj) {

　　if (max < obj[key]) {

　　max=obj[key];

　　max_key=key;

　　}

　　}

　　alert("max:"+max+" max_key:"+max_key);

　　4，IE與FF腳本兼容性問(wèn)題

　　(1) window.event：

　　表示當(dāng)前的事件對(duì)象，IE有這個(gè)對(duì)象，F(xiàn)F沒(méi)有，F(xiàn)F通過(guò)給事件處理函數(shù)傳遞事件對(duì)象

　　(2) 獲取事件源

　　IE用srcElement獲取事件源，而FF用target獲取事件源

　　(3) 添加，去除事件

　　IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

　　FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

　　(4) 獲取標(biāo)簽的自定義屬性

　　IE：div1.value或div1[“value”]

　　FF：可用div1.getAttribute(“value”)

　　(5) document.getElementByName()和document.all[name]

　　IE;document.getElementByName()和document.all[name]均不能獲取div元素

　　FF：可以

　　(6) input.type的屬性

　　IE：input.type只讀

　　FF：input.type可讀寫(xiě)

　　(7) innerText textContent outerHTML

　　IE：支持innerText, outerHTML

　　FF：支持textContent

　　(8) 是否可用id代替HTML元素

　　IE：可以用id來(lái)代替HTML元素

　　FF：不可以

　　這里只列出了常見(jiàn)的，還有不少，更多的介紹可以參看JavaScript在IE瀏覽器和Firefox瀏覽器中的差異總結(jié)

5，規(guī)避javascript多人開(kāi)發(fā)函數(shù)重名問(wèn)題

　　(1) 可以開(kāi)發(fā)前規(guī)定命名規(guī)范，根據(jù)不同開(kāi)發(fā)人員開(kāi)發(fā)的功能在函數(shù)前加前綴

　　(2) 將每個(gè)開(kāi)發(fā)人員的函數(shù)封裝到類中，調(diào)用的時(shí)候就調(diào)用類的函數(shù)，即使函數(shù)重名只要類名不重復(fù)就ok

6，javascript面向?qū)ο笾欣^承實(shí)現(xiàn)

　　javascript面向?qū)ο笾械睦^承實(shí)現(xiàn)一般都使用到了構(gòu)造函數(shù)和Prototype原型鏈，簡(jiǎn)單的代碼如下：

　　function Animal(name) {

　　this.name=name;

　　}

　　Animal.prototype.getName=function() {alert(this.name)}

　　function Dog() {};

　　Dog.prototype=new Animal("Buddy");

　　Dog.prototype.constructor=Dog;

　　var dog=new Dog();

7，F(xiàn)F下面實(shí)現(xiàn)outerHTML

　　FF不支持outerHTML，要實(shí)現(xiàn)outerHTML還需要特殊處理

　　思路如下：

　　在頁(yè)面中添加一個(gè)新的元素A，克隆一份需要獲取outerHTML的元素，將這個(gè)元素append到新的A中，然后獲取A的innerHTML就可以了。

　　SPANDIV

　　SPAN

8，編寫(xiě)一個(gè)方法求一個(gè)字符串的字節(jié)長(zhǎng)度

　　假設(shè)：

　　一個(gè)英文字符占用一個(gè)字節(jié)，一個(gè)中文字符占用兩個(gè)字節(jié)

　　function GetBytes(str){

　　var len=str.length;

　　var bytes=len;

　　for(var i=0; i

　　if (str.charCodeAt(i) > 255) bytes++;

　　}

　　return bytes;

　　}

　　alert(GetBytes("你好,as"));

9，編寫(xiě)一個(gè)方法去掉一個(gè)數(shù)組的重復(fù)元素

　　var arr=[1 ,1 ,2, 3, 3, 2, 1];

　　Array.prototype.unique=function(){

　　var ret=[];

　　var o={};

　　var len=this.length;

　　for (var i=0; i

　　var v=this[i];

　　if (!o[v]){

　　o[v]=1;

　　ret.push(v);

　　}

　　}

　　return ret;

　　};
  alert(arr.unique());

10，寫(xiě)出3個(gè)使用this的典型應(yīng)用

　　(1)在html元素事件屬性中使用，如

　　(2)構(gòu)造函數(shù)

　　function Animal(name, color) {

　　this.name=name;

　　this.color=color;

　　}

12，如何顯示/隱藏一個(gè)DOM元素?

　　el.style.display="";

　　el.style.display="none";

　　el是要操作的DOM元素

13，JavaScript中如何檢測(cè)一個(gè)變量是一個(gè)String類型?請(qǐng)寫(xiě)出函數(shù)實(shí)現(xiàn)

　　String類型有兩種生成方式：

　　(1)Var str=“hello world”;

　　(2)Var str2=new String(“hello world”);

　　function IsString(str){

　　return (typeof str=="string" || str.constructor==String);

　　}

　　var str="";

　　alert(IsString(1));

　　alert(IsString(str));

　　alert(IsString(new String(str)));

14，網(wǎng)頁(yè)中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒數(shù)計(jì)時(shí)程序，要求網(wǎng)頁(yè)上實(shí)時(shí)動(dòng)態(tài)顯示“××年還剩××天××?xí)r××分××秒”

15，補(bǔ)充代碼，鼠標(biāo)單擊Button1后將Button1移動(dòng)到Button2的后面

16，JavaScript有哪幾種數(shù)據(jù)類型

　　簡(jiǎn)單：Number，Boolean，String，Null，Undefined

　　復(fù)合：Object，Array，F(xiàn)unction

17，下面css標(biāo)簽在JavaScript中調(diào)用應(yīng)如何拼寫(xiě)，border-left-color，-moz-viewport

　　borderLeftColor

　　mozViewport

18，JavaScript中如何對(duì)一個(gè)對(duì)象進(jìn)行深度clone

　　function cloneObject(o) {
　　if(!o || 'object' !==typeof o) {
　　return o;
　　}
　　var c='function'===typeof o.pop ? [] : {};
　　var p, v;
　　for(p in o) {
　　if(o.hasOwnProperty(p)) {
　　v=o[p];
　　if(v && 'object'===typeof v) {
　　c[p]=Ext.ux.clone(v);
　　}
　　else {
　　c[p]=v;
　　}
　　}
　　}
　　return c;
　　};

19，如何控制alert中的換行

　　\n alert(“p\np”);

20，請(qǐng)實(shí)現(xiàn)，鼠標(biāo)點(diǎn)擊頁(yè)面中的任意標(biāo)簽，alert該標(biāo)簽的名稱.(注意兼容性)

　　SPANDIV

　　SPAN

21，請(qǐng)編寫(xiě)一個(gè)JavaScript函數(shù) parseQueryString，它的用途是把URL參數(shù)解析為一個(gè)對(duì)象，如：

　　var url=“http://witmax.cn/index.php?key0=0&key1=1&key2=2″;

　　function parseQueryString(url){

　　var params={};

　　var arr=url.split("?");

　　if (arr.length <=1)

　　return params;

　　arr=arr[1].split("&");

　　for(var i=0, l=arr.length; i

　　var a=arr[i].split("=");

　　params[a[0]]=a[1];

　　}

　　return params;

　　}

　　var url="http://witmax.cn/index.php?key0=0&key1=1&key2=2";

　　var ps=parseQueryString(url);

　　alert(ps["key1"]);

22，ajax是什么? ajax的交互模型? 同步和異步的區(qū)別? 如何解決跨域問(wèn)題?

　　Ajax是多種技術(shù)組合起來(lái)的一種瀏覽器和服務(wù)器交互技術(shù)，基本思想是允許一個(gè)互聯(lián)網(wǎng)瀏覽器向一個(gè)遠(yuǎn)程頁(yè)面/服務(wù)做異步的http調(diào)用，并且用收到的數(shù)據(jù)來(lái)更新一個(gè)當(dāng)前web頁(yè)面而不必刷新整個(gè)頁(yè)面。該技術(shù)能夠改進(jìn)客戶端的體驗(yàn)。包含的技術(shù)：

　　XHTML：對(duì)應(yīng)W3C的XHTML規(guī)范，目前是XHTML1.0。

　　CSS：對(duì)應(yīng)W3C的CSS規(guī)范，目前是CSS2.0

　　DOM：這里的DOM主要是指HTML DOM，XML DOM包括在下面的XML中

　　JavaScript：對(duì)應(yīng)于ECMA的ECMAScript規(guī)范

　　XML：對(duì)應(yīng)W3C的XML DOM、XSLT、XPath等等規(guī)范

　　XMLHttpRequest：對(duì)應(yīng)WhatWG的Web Applications1.0規(guī)范(http://whatwg.org/specs/web-apps/current-work/)

　　AJAX交互模型

　　同步：腳本會(huì)停留并等待服務(wù)器發(fā)送回復(fù)然后再繼續(xù)

　　異步：腳本允許頁(yè)面繼續(xù)其進(jìn)程并處理可能的回復(fù)

　　跨域問(wèn)題簡(jiǎn)單的理解就是因?yàn)镴S同源策略的限制，a.com域名下的JS無(wú)法操作b.com或c.a.com下的對(duì)象，具體場(chǎng)景如下：

　　PS：(1)如果是端口或者協(xié)議造成的跨域問(wèn)題前端是無(wú)能為力的

　　(2) 在跨域問(wèn)題上，域僅僅通過(guò)URL的首部來(lái)識(shí)別而不會(huì)嘗試判斷相同的IP地址對(duì)應(yīng)的域或者兩個(gè)域是否對(duì)應(yīng)一個(gè)IP

　　前端對(duì)于跨域的解決辦法：

　　(1) document.domain+iframe

　　(2) 動(dòng)態(tài)創(chuàng)建script標(biāo)簽

23，請(qǐng)給出異步加載js方案，不少于兩種

　　默認(rèn)情況javascript是同步加載的，也就是javascript的加載時(shí)阻塞的，后面的元素要等待javascript加載完畢后才能進(jìn)行再加載，對(duì)于一些意義不是很大的javascript，如果放在頁(yè)頭會(huì)導(dǎo)致加載很慢的話，是會(huì)嚴(yán)重影響用戶體驗(yàn)的。

　　異步加載方式：

　　(1) defer，只支持IE

　　(2) async：

　　(3) 創(chuàng)建script，插入到DOM中，加載完畢后callBack，見(jiàn)代碼：

　　function loadScript(url, callback){

　　var script=document.createElement("script")

　　script.type="text/javascript";

　　if (script.readyState){ //IE

　　script.onreadystatechange=function(){

　　if (script.readyState=="loaded" ||

　　script.readyState=="complete"){

　　script.onreadystatechange=null;

　　callback();

　　}

　　};

　　} else { //Others: Firefox, Safari, Chrome, and Opera

　　script.onload=function(){

　　callback();

　　};

　　}

　　script.src=url;

　　document.body.appendChild(script);

　　}

25，請(qǐng)?jiān)O(shè)計(jì)一套方案，用于確保頁(yè)面中JS加載完全。

　　var n=document.createElement("script");

　　n.type="text/javascript";

　　//以上省略部分代碼

　　//ie支持script的readystatechange屬性(IE support the readystatechange event for script and css nodes)

　　if(ua.ie){

　　n.onreadystatechange=function(){

　　var rs=this.readyState;

　　if('loaded'===rs || 'complete'===rs){

　　n.onreadystatechange=null;

　　f(id,url); //回調(diào)函數(shù)

　　}

　　};

　　//省略部分代碼

　　//safari 3.x supports the load event for script nodes(DOM2)

　　n.addEventListener('load',function(){

　　f(id,url);

　　});

　　//firefox and opera support onload(but not dom2 in ff) handlers for

　　//script nodes. opera, but no ff, support the onload event for link

　　//nodes.

　　}else{

　　n.onload=function(){

　　f(id,url);

　　};

　　}

26，js中如何定義class,如何擴(kuò)展prototype?

　　Ele.className=“***”; //***在css中定義，形式如下：.*** {…}

　　A.prototype.B=C;

　　A是某個(gè)構(gòu)造函數(shù)的名字

　　B是這個(gè)構(gòu)造函數(shù)的屬性

　　C是想要定義的屬性的值

27，如何添加html元素的事件,有幾種方法.

　　(1) 為HTML元素的事件屬性賦值

　　(2) 在JS中使用ele.on***=function() {…}

　　(3) 使用DOM2的添加事件的方法 addEventListener或attachEvent

28，documen.write和 innerHTML的區(qū)別

　　document.write只能重繪整個(gè)頁(yè)面

　　innerHTML可以重繪頁(yè)面的一部分

29，多瀏覽器檢測(cè)通過(guò)什么?

　　(1) navigator.userAgent

　　(2) 不同瀏覽器的特性，如addEventListener

30，js的基礎(chǔ)對(duì)象有那些, window和document的常用的方法和屬性列出來(lái)

　　String,Number,Boolean

　　Window:

　　方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open

　　屬性：name,parent,screenLeft,screenTop,self,top,status

　　Document

　　方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln

　　屬性：cookie,doctype,domain,documentElement,readyState,URL,

31，前端開(kāi)發(fā)的優(yōu)化問(wèn)題

　　(1) 減少http請(qǐng)求次數(shù)：css spirit,data uri

　　(2) JS，CSS源碼壓縮

　　(3) 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)

　　(4) 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能

　　(5) 用setTimeout來(lái)避免頁(yè)面失去響應(yīng)

　　(6) 用hash-table來(lái)優(yōu)化查找

　　(7) 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style

　　(8) 少用全局變量

　　(9) 緩存DOM節(jié)點(diǎn)查找的結(jié)果

　　(10) 避免使用CSS Expression

　　(11) 圖片預(yù)載

　　(12) 避免在頁(yè)面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來(lái)，顯示比div+css布局慢

32，如何控制網(wǎng)頁(yè)在網(wǎng)絡(luò)傳輸過(guò)程中的數(shù)據(jù)量

　　啟用GZIP壓縮

　　保持良好的編程習(xí)慣，避免重復(fù)的CSS，JavaScript代碼，多余的HTML標(biāo)簽和屬性

　　33，F(xiàn)lash、Ajax各自的優(yōu)缺點(diǎn)，在使用中如何取舍?

　　Ajax的優(yōu)勢(shì)

　　(1) 可搜索型

　　(2) 開(kāi)放性

　　(3) 費(fèi)用

　　(4) 易用性

　　(5) 易于開(kāi)發(fā)

　　Flash的優(yōu)勢(shì)

　　(1) 多媒體處理

　　(2) 兼容性

　　(3) 矢量圖形比SVG，Canvas優(yōu)勢(shì)大很多

　　(4) 客戶端資源調(diào)度，比如麥克風(fēng)，攝像頭

Sdd;d’dsdsdsd

.標(biāo)簽

1.1meta標(biāo)簽

meta主要用于設(shè)置網(wǎng)頁(yè)中的一些元數(shù)據(jù)，元數(shù)據(jù)不是給用戶看 charset 指定網(wǎng)頁(yè)的字符集 name 指定的數(shù)據(jù)的名稱 content 指定的數(shù)據(jù)的內(nèi)容

keywords 表示網(wǎng)站的關(guān)鍵字，可以同時(shí)指定多個(gè)關(guān)鍵字，關(guān)鍵字間使用,隔開(kāi)

<meta name="Keywords" content="網(wǎng)上購(gòu)物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,CD,VCD,DV,相機(jī),數(shù)碼,配件,手表,存儲(chǔ)卡,京東"/>

description 用于指定網(wǎng)站的描述

<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購(gòu)物商城,銷售家電、數(shù)碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書(shū)、食品等數(shù)萬(wàn)個(gè)品牌優(yōu)質(zhì)商品.便捷、誠(chéng)信的服務(wù)，為您提供愉悅的網(wǎng)上購(gòu)物體驗(yàn)!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

將頁(yè)面重定向到另一個(gè)網(wǎng)站

1.2title標(biāo)簽

title標(biāo)簽的內(nèi)容會(huì)作為搜索結(jié)果的超鏈接上的文字顯示

<title>Document</title>

1.3標(biāo)題

h1 ~ h6 一共有六級(jí)標(biāo)題
從h1~h6重要性遞減，h1最重要，h6最不重要
h1在網(wǎng)頁(yè)中的重要性僅次于title標(biāo)簽，一般情況下一個(gè)頁(yè)面中只會(huì)有一個(gè)h1
標(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>
hgroup標(biāo)簽用來(lái)為標(biāo)題分組，可以將一組相關(guān)的標(biāo)題同時(shí)放入到hgroup
<hgroup>
<h1>回鄉(xiāng)偶書(shū)二首</h1>
<h2>其一</h2>
</hgroup>
其他標(biāo)簽

p標(biāo)簽表示頁(yè)面中的一個(gè)段落
<p>在p標(biāo)簽中的內(nèi)容就表示一個(gè)段落</p>
em標(biāo)簽用于表示語(yǔ)音語(yǔ)調(diào)的一個(gè)加重
<p>今天天氣<em>真</em>不錯(cuò)！</p>
strong表示強(qiáng)調(diào)，重要內(nèi)容！
<p>你今天必須要<strong>完成作業(yè)</strong>！</p>
blockquote 表示一個(gè)長(zhǎng)引用
<blockquote>
這句話我是從來(lái)沒(méi)有說(shuō)過(guò)的！
</blockquote>
q表示一個(gè)短引用
子曰<q>學(xué)而時(shí)習(xí)之，樂(lè)呵樂(lè)呵！</q>
br標(biāo)簽表示頁(yè)面中的換行
<br>

1.4布局標(biāo)簽

header 表示網(wǎng)頁(yè)的頭部 main 表示網(wǎng)頁(yè)的主體部分(一個(gè)頁(yè)面中只會(huì)有一個(gè)main) footer 表示網(wǎng)頁(yè)的底部 nav 表示網(wǎng)頁(yè)中的導(dǎo)航 aside 和主體相關(guān)的其他內(nèi)容（側(cè)邊欄） article 表示一個(gè)獨(dú)立的文章 section 表示一個(gè)獨(dú)立的區(qū)塊，上邊的標(biāo)簽都不能表示時(shí)使用section

div 沒(méi)有語(yǔ)義，就用來(lái)表示一個(gè)區(qū)塊，目前來(lái)講div還是我們主要的布局元素

span 行內(nèi)元素，沒(méi)有任何的語(yǔ)義，一般用于在網(wǎng)頁(yè)中選中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分類

1.1.1.1有序列表

使用ol標(biāo)簽來(lái)創(chuàng)建無(wú)序列表，使用li表示列表項(xiàng)

<ul>
       <li>結(jié)構(gòu)</li>
       <li>表現(xiàn)</li>
       <li>行為</li>
   </ul>

1.1.1.2 無(wú)序列表

使用ul標(biāo)簽來(lái)創(chuàng)建無(wú)序列表，使用li表示列表項(xiàng)

<ol>
       <li>結(jié)構(gòu)</li>
       <li>表現(xiàn)</li>
       <li>行為</li>
   </ol>

1.1.1.3定義列表

使用dl標(biāo)簽來(lái)創(chuàng)建一個(gè)定義列表，使用dt來(lái)表示定義的內(nèi)容，使用dd來(lái)對(duì)內(nèi)容進(jìn)行解釋說(shuō)明

<dl>
       <dt>結(jié)構(gòu)</dt>
       <dd>結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)，結(jié)構(gòu)用來(lái)規(guī)定網(wǎng)頁(yè)中哪里是標(biāo)題，哪里是段落</dd>
       <dd>結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)，結(jié)構(gòu)用來(lái)規(guī)定網(wǎng)頁(yè)中哪里是標(biāo)題，哪里是段落</dd>
       <dd>結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)，結(jié)構(gòu)用來(lái)規(guī)定網(wǎng)頁(yè)中哪里是標(biāo)題，哪里是段落</dd>
   </dl>

1.1.1.4列表之間可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超鏈接

1.6.1 作用

超鏈接可以讓我們從一個(gè)頁(yè)面跳轉(zhuǎn)到其他頁(yè)面，或者是當(dāng)前頁(yè)面的其他的位置

1.6.2 定義

使用 a 標(biāo)簽來(lái)定義超鏈接

<a href="https://www.baidu.com">超鏈接</a>

1.6.3 屬性

1.6.3.1屬性1：href

指定跳轉(zhuǎn)的目標(biāo)路徑

值可以是一個(gè)外部網(wǎng)站的地址

也可以寫(xiě)一個(gè)內(nèi)部頁(yè)面的地址

超鏈接是也是一個(gè)行內(nèi)元素，在a標(biāo)簽中可以嵌套除它自身外的任何元素

1.6.3.2 屬性2：target

用來(lái)指定超鏈接打開(kāi)的位置

_self 默認(rèn)值在當(dāng)前頁(yè)面中打開(kāi)超鏈接

_blank 在一個(gè)新的要么中打開(kāi)超鏈接

<a href="07.列表.html" target="_blank">超鏈接</a>

1.6.4其他

將#作為超鏈接的路徑的展位符使用

javascript：; 來(lái)作為href的屬性，此時(shí)點(diǎn)擊這個(gè)超鏈接什么也不會(huì)發(fā)生

將超鏈接的href屬性設(shè)置為#，這樣點(diǎn)擊超鏈接以后頁(yè)面不會(huì)發(fā)生跳轉(zhuǎn)，而是轉(zhuǎn)到當(dāng)前頁(yè)面的頂部的位置

跳轉(zhuǎn)到頁(yè)面的指定位置，只需將href屬性設(shè)置 #目標(biāo)元素的id屬性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三個(gè)自然段</a>
   <br><br>
<p>
  內(nèi)容多一點(diǎn)
</p>
<a href="#">這是一個(gè)新的超鏈接</a>
   <br><br>
<a href="javascript：;">這是一個(gè)新的超鏈接</a>
   <br><br>
<a id="bottom" href="#">回到頂部</a>

1.7圖片標(biāo)簽

img標(biāo)簽來(lái)引入外部圖片，img標(biāo)簽是一個(gè)自結(jié)束標(biāo)簽

屬性：src 屬性指定的是外部圖片的路徑（路徑規(guī)則和超鏈接是一樣的）

alt 圖片的描述，這個(gè)描述默認(rèn)情況下不會(huì)顯示，有些瀏覽器會(huì)圖片無(wú)法加載時(shí)顯示

<img src="./img/1.gif" alt="松鼠">

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

用于向當(dāng)前頁(yè)面中引入一個(gè)其他頁(yè)面

src 指定要引入的網(wǎng)頁(yè)的路徑
frameborder 指定內(nèi)聯(lián)框架的邊框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音視頻標(biāo)簽

1.8.1音頻

audio 標(biāo)簽用來(lái)向頁(yè)面中引入一個(gè)外部的音頻文件的

1.8.1.1 屬性

controls 是否允許用戶控制播放
autoplay 音頻文件是否自動(dòng)播放

如果設(shè)置了autoplay 則音樂(lè)在打開(kāi)頁(yè)面時(shí)會(huì)自動(dòng)播放

loop 音樂(lè)是否循環(huán)播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通過(guò)src來(lái)指定外部文件的路徑以外，還可以通過(guò)source來(lái)指定文件的路徑

<audio controls>
       <!-- 對(duì)不起，您的瀏覽器不支持播放音頻！請(qǐng)升級(jí)瀏覽器！-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2視頻

與 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>

2.表格table

在table中使用tr表示表格中的一行，有幾個(gè)tr就有幾行
在tr中使用td表示一個(gè)單元格，有幾個(gè)td就有幾個(gè)單元格
rowspan 縱向的合并單元格
colspan 橫向的合并單元格

<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

長(zhǎng)表格

可以將一個(gè)表格分成三個(gè)部分：

頭部 thead
主體 tbody
底部 tfoot

th 表示頭部的單元格

<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合計(jì)</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合計(jì)</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格樣式

border-spacing: 指定邊框之間的距離

border-spacing: 0px;

border-collapse: collapse; 設(shè)置邊框的合并

border-collapse: collapse;

如果表格中沒(méi)有使用tbody而是直接使用tr，那么瀏覽器會(huì)自動(dòng)創(chuàng)建一個(gè)tbody，并且將tr全都放到tbody中tr不是table的子元素

3.表單（form）

使用form標(biāo)簽來(lái)創(chuàng)建一個(gè)表單
action 表單要提交的服務(wù)器的地址
數(shù)據(jù)要提交到服務(wù)器中，必須要為元素指定一個(gè)name屬性值

<input type="text" name="username">

單選按鈕

像這種選擇框，必須要指定一個(gè)value屬性，value屬性最終會(huì)作為用戶的填寫(xiě)的值傳遞給服務(wù)器
checked 可以將單選按鈕設(shè)置為默認(rèn)選中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

多選框

<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>

下拉列表

<select name="haha">
          <option value="i">選項(xiàng)一</option>
          <option selected value="ii">選項(xiàng)二</option>
          <option value="iii">選項(xiàng)三</option>
      </select>

提交按鈕

<input type="submit" value="注冊(cè)">

屬性

autocomplete="off" 關(guān)閉自動(dòng)補(bǔ)全
readonly 將表單項(xiàng)設(shè)置為只讀，數(shù)據(jù)會(huì)提交
disabled 將表單項(xiàng)設(shè)置為禁用，數(shù)據(jù)不會(huì)提交
autofocus 設(shè)置表單項(xiàng)自動(dòng)獲取焦點(diǎn)

<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按鈕 -->
      <input type="reset">
      <!-- 普通的按鈕 -->
      <input type="button" value="按鈕">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按鈕</button>
  </form>

4.注釋

<!--
我是注釋中的注釋 注釋不能嵌套
-->

5.屬性

屬性，在標(biāo)簽中（開(kāi)始標(biāo)簽或自結(jié)束標(biāo)簽）還可以設(shè)置屬性
屬性是一個(gè)名值對(duì)（x=y）
屬性用來(lái)設(shè)置標(biāo)簽中的內(nèi)容如何顯示
屬性和標(biāo)簽名或其他屬性應(yīng)該使用空格隔開(kāi)
屬性不能瞎寫(xiě)，應(yīng)該根據(jù)文檔中的規(guī)定來(lái)編寫(xiě)，有些屬性有屬性值，有些沒(méi)有。如果有屬性值，屬性值應(yīng)該使用引號(hào)引起來(lái)

6.文檔聲明

<!doctype html>

在線咨詢

上一篇：Web前端JavaScript面向?qū)ο箝]包實(shí)現(xiàn)封裝小
下一篇：ASP.NET Web Forms-HTML 頁(yè)面

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

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