摘要:定義表格中的表注內(nèi)容腳注樣式節(jié)標(biāo)簽描述屬性定義文檔的樣式信息。原始值是由從對象下來的所有對象繼承的。方法通常由在后臺自動進(jìn)行調(diào)用,而不是顯式地處于代碼中。
HTML常用標(biāo)簽
其實在w3school上都有詳細(xì)的總結(jié)和描述,寫在這里是為了理清自己的思路,整理比較常用的標(biāo)簽。
原地址:http://www.w3school.com.cn/ta...
基礎(chǔ)標(biāo)簽//tag
標(biāo)簽 | 描述 |
---|---|
定義文檔類型。 | |
定義 HTML 文檔。 | |
定義文檔的標(biāo)題。 | |
定義文檔的主體。 | |
to |
定義 HTML 標(biāo)題,塊級元素。 |
p | 定義段落,塊級元素。 |
br | 定義簡單的折行。 |
hr | 定義水平線。 |
定義注釋。 |
標(biāo)簽 | 描述 |
---|---|
b | 文本加粗 |
strong | 語義化,文本加粗 |
i | 文本傾斜 |
em | 語義化,文本傾斜 |
s | 文本添加刪除線(不贊成) |
del | 文本添加刪除線 |
u | 文本添加下劃線(不贊成) |
文本添加下劃線 | |
center | 定義居中文本(不贊成) |
font | 定義文本的字體、顏色、尺寸(不建議) |
sup | 上標(biāo)文本 |
sub | 下標(biāo)文本 |
說明:標(biāo)簽后面帶*,說明是單標(biāo)簽
標(biāo)簽 | 描述 | 屬性 |
---|---|---|
form | 為用戶輸入創(chuàng)建HTML表單,用于向服務(wù)器傳輸數(shù)據(jù),塊級元素 | action/method |
input* | 文本輸入框,行內(nèi)塊 | type(text/button/checkbox/password/radio/submit)/value |
textarea* | 多行文本輸入框 | rows/cols |
button* | 按鈕 | type="button"/value |
select | 下拉選擇列表,內(nèi)嵌option標(biāo)簽 | / |
option | select選擇列表中的選項 | value |
optgroup | 選擇列表中選項的組合,不能選中,內(nèi)嵌option標(biāo)簽 | label="華北" |
label | 為input元素定義標(biāo)記 | for(類似id) |
fieldset | 在form中,定義圍繞表單中元素的邊框,可分類打包 | / |
legend | 為fieldset元素定義標(biāo)題 | / |
標(biāo)簽 | 描述 | 屬性 |
---|---|---|
frameset | 框架集,內(nèi)嵌frame | rows/cols |
frame | 框架 | src |
noframes | 在frameset中添加非frame標(biāo)簽,用于在瀏覽器不支持frame的時候顯示文本,包括在body標(biāo)簽內(nèi)部 | / |
iframe | 創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架(即行內(nèi)框架 | src/scrolling/width/height |
標(biāo)簽 | 描述 | 屬性 |
---|---|---|
img* | 圖像,行內(nèi)塊 | src/alt(替代文本) |
canvas | 圖形容器,必須用JS腳本來繪制圖形 | width/height |
標(biāo)簽 | 描述 | 屬性 |
---|---|---|
audio | 音頻 | src/controls(顯示控件) |
source* | 內(nèi)嵌于 | src/type |
video | 視頻 | src/controls(顯示控件) |
標(biāo)簽 | 描述 | 屬性 |
---|---|---|
a | 超鏈接,行元素 | href |
link* | 鏈接外部樣式 | rel="stylesheet"/type="text/css"/href="main.css" |
nav | 導(dǎo)航鏈接,內(nèi)嵌a標(biāo)簽 | / |
標(biāo)簽 | 描述 | 屬性 |
---|---|---|
ul-li | 無序列表 | / |
ol-li | 有序列表 | / |
dl-dt-dd | 自定義列表 | / |
標(biāo)簽 | 描述 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
//給SEO搜索引擎看的 //給用戶搜索看的簡介 //網(wǎng)頁重定向編程
body { background: #00FF00 url(bgimage.gif) no-repeat fixed top;//簡寫屬性,可設(shè)置background-color,background-image,background-repeat,background-attachment,background-position背景屬性 } body { background-image: url(bgimage.gif);//背景圖像 background-attachment: fixed;//背景圖像是否固定/隨著頁面其他部分滾動 background-repeat:no-repeat;//水平或垂直方向重復(fù)方式:repeat/repeat-x/repeat-y/no-repeat background-position:center;//背景圖像起始位置,top left center bottom right中的兩個組合,如果只規(guī)定一個,另一個默認(rèn)為center background-size:80px 60px;//背景圖像寬度和高度,不設(shè)置則默認(rèn)為auto } body { background-color:yellow;//顏色名稱 } h1 { background-color:#00ff00;//十六進(jìn)制 } p { background-color:rgb(255,0,255);//rgb代碼 } div { background-color:transparent;//默認(rèn)值,透明 }邊框?qū)傩?/b> p { border:5px solid red;//簡寫屬性,順序:border-width border-style border-color } border-radius:25px;//四個角的形狀,也可以設(shè)置某個角的形狀,栗子:border-top-left-radius div { box-shadow: 10px 10px 5px #888888;//添加陰影 } //box-shadow: h-shadow v-shadow blur spread color inset; //水平陰影,垂直隱形,(模糊距離),(陰影尺寸),(陰影顏色),() border-top/right/bottom/left:;//可以設(shè)置多帶帶邊框的屬性 div { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; //border-image-source/slice/width/outset/repeat }CSS字體屬性 font: font-style font-weight font-size/line-height font-family;//文字大小和字體為必寫項 font-weight:normal(400)|bold(700)|bolder|lighter|100-900CSS 外邊距屬性(Margin) margin: top right bottom left; margin: top left/right bottom; margin: top/bottom left/right;CSS 內(nèi)邊距屬性(Padding) padding: top right bottom left; padding: top left/right bottom; padding: top/bottom left/right;transform div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ }JS String 屬性 legth var str = "123"; str.length;//3方法 substring() stringObject.substring(start,stop) //提取子字符串,從 start 處到 stop-1 處的所有字符 //如果 start 比 stop 大,那么該方法在提取子串之前會先交換這兩個參數(shù) //不接受負(fù)的參數(shù) var str="How are you doing today?" str.substring(2,3);//"ow" slice() stringObject.slice(start,end) //從 start 開始(包括 start)到 end 結(jié)束(不包括 end)為止的所有字符 //如果start/end是負(fù)數(shù),則該參數(shù)規(guī)定的是從字符串的尾部開始算起的位置。也就是說,-1 指字符串的最后一個字符,-2 指倒數(shù)第二個字符,以此類推。 var str="How are you doing today?" str.slice(-3,-1)//"ay" //(-1,-3)返回的時"" split() stringObject.split(separator,howmany) //返回一個字符串?dāng)?shù)組,從參數(shù)separator指定的地方分割 stringObject //如果 separator 是包含子表達(dá)式的正則表達(dá)式,那么返回的數(shù)組中包括與這些子表達(dá)式匹配的字串(但不包括與整個正則表達(dá)式匹配的文本) 注釋:String.split() 執(zhí)行的操作與 Array.join 執(zhí)行的操作是相反的 indexOf() stringObject.indexOf(searchvalue,fromindex) //檢索指定的字符串值searchvalue在字符串中首次出現(xiàn)的位置,fromindex指的是開始檢索的位置 //不存在的時候返回-1 lastindexOf() stringObject.lastIndexOf(searchvalue,fromindex) //返回一個指定的字符串值最后出現(xiàn)的位置,在一個字符串中的指定位置從后向前搜索。 charAt() stringObject.charAt(index) //返回指定位置的字符 contact() stringObject.concat(stringX,stringX,...,stringX) //連接兩個或多個字符串 match() stringObject.match(searchvalue) stringObject.match(regexp) //在字符串內(nèi)檢索指定的值,或找到一個或多個正則表達(dá)式的匹配. //與indexOf()不同,match返回的是匹配到的值,而indexOf返回的是位置 replace() stringObject.replace(regexp/substr,replacement) //在字符串中用一些字符替換另一些字符,或替換一個與正則表達(dá)式匹配的子串 //對大小寫不敏感 search() stringObject.search(regexp) //返回stringObject 中第一個與 regexp 相匹配的子串的起始位置 //從字符串的開始進(jìn)行檢索 valueOf() stringObject.valueOf() //valueOf() 方法可返回 String 對象的原始值。 //原始值是由從 String 對象下來的所有對象繼承的。 //valueOf() 方法通常由 JavaScript 在后臺自動進(jìn)行調(diào)用,而不是顯式地處于代碼中。 toString() stringObject.toString() //返回原始字符串值 今日頭條面試題: var arry = str.split(".")-->var newArry = arry.reverse()-->newArry.join(".")Array (2019.1.7更) 創(chuàng)建數(shù)組的方法數(shù)組字面量法 var array = [1,2,3]; 構(gòu)造函數(shù)法 var array = new Array(/n/1,2,3);屬性 length array.length;方法 concat() arrayObject.concat(arrayX,arrayX,......,arrayX) //在arrayObject后面連接兩個或多個數(shù)組,返回一個新數(shù)組 //不改變現(xiàn)有數(shù)組 join() arrayObject.join(separator) //以separator作為分隔符,把數(shù)組中的元素放入字符串 //與String對象的split()方法相反 pop() arrayObject.pop() //刪除數(shù)組的最后一個元素,并返回該元素 shift() arrayObject.shift() //刪除數(shù)組的第一個元素,并返回該元素 push() arrayObject.push(newelement1,newelement2,....,newelementX) //添加一個或更多元素到數(shù)組的末尾,并返回新的數(shù)組長度 unshift() arrayObject.unshift(newelement1,newelement2,....,newelementX) //添加一個或更多元素到數(shù)組的開頭,并返回新的數(shù)組長度 reverse() arrayObject.reverse() //反轉(zhuǎn)數(shù)組 //注意:改變的是原來的數(shù)組,不會創(chuàng)建新數(shù)組 slice() arrayObject.slice(start,end) //返回已有數(shù)組從start到end(不包括)的元素 //返回一個子數(shù)組,不改變原數(shù)組 splice() arrayObject.splice(index,howmany,item1,.....,itemX) //刪除從index開始的howmany(可以為0)個元素,并從刪除的位置開始添加新的元素到原數(shù)組 //返回數(shù)組,改變原數(shù)組 sort() arrayObject.sort(sortby) //對數(shù)組元素排序,在原數(shù)組上進(jìn)行 //默認(rèn)按照字母順序進(jìn)行排序 如果想按照其他標(biāo)準(zhǔn)進(jìn)行排序,就需要提供比較函數(shù),該函數(shù)要比較兩個值,然后返回一個用于說明這兩個值的相對順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個參數(shù) a 和 b,其返回值如下: - 若 a 小于 b,在排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在 b 之前,則返回一個小于 0 的值。 - 若 a 等于 b,則返回 0。 - 若 a 大于 b,則返回一個大于 0 的值。 function sortNum(a,b) { return a - b;//升序 //return b - a;//降序 } array.sort(sortNum);//數(shù)值字符串?dāng)?shù)組按照數(shù)值的大小對數(shù)字排序 toString() array.toString() //把數(shù)組轉(zhuǎn)換為字符串,并返回該字符串
array.valueOf() //返回數(shù)組對象的原始值
注意:Array里面slice和splice的區(qū)別——slice返回子數(shù)組,且不會改變原數(shù)組;splice從某個位置刪除數(shù)組內(nèi)元素,并添加新元素,改變原數(shù)組。 文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/53530.html 相關(guān)文章
發(fā)表評論0條評論lastSeries男|高級講師TA的文章閱讀更多
閱讀需要支付1元查看
|