建站
咨詢
售后
建站咨詢
新聞中心
html5常用標(biāo)記總結(jié)
一、文本標(biāo)簽
成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供神池網(wǎng)站建設(shè)、神池做網(wǎng)站、神池網(wǎng)站設(shè)計(jì)、神池網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、神池企業(yè)網(wǎng)站模板建站服務(wù)，十載神池做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
1.1 標(biāo)題標(biāo)記：hn align=”對齊方式”標(biāo)題文本/hn
注意：
1.標(biāo)題準(zhǔn)備了h1----h6的標(biāo)題，按照字號依次遞減(塊級元素)
2.align表示對齊方式，其值為left,center,right
1.2 字體標(biāo)記：font face=”字體名稱” size=”字號” color=”字體顏色” 文字/font
注意：中文網(wǎng)頁以黑體，宋體，3號字的效果顯示
1.3 段落標(biāo)記：p align=”對齊方式” 段落內(nèi)容/p
注意：p可以作為單標(biāo)記或雙標(biāo)記：
單標(biāo)記：段落與上文產(chǎn)生一個(gè)空行的間距。
雙標(biāo)記：段落與上下文之間產(chǎn)生一個(gè)空行的間距
1.4 換行標(biāo)記：
注意：br /表示換行，多次換行多次使用br /
1.5 預(yù)格式化標(biāo)記：pre...../pre
注意：預(yù)格式化標(biāo)記可將空格、制表符、回車符等忽略
1.6 轉(zhuǎn)義字符：轉(zhuǎn)義字符讓特殊字符顯示出來。
語法：實(shí)體名稱;
二、列表標(biāo)記
2.1 無序列表
ul type=”列表項(xiàng)的標(biāo)簽符”
li項(xiàng)目一/li
li項(xiàng)目二/li
li項(xiàng)目三/li
......
/ul
注意： type表示了項(xiàng)目符號：
disc(默認(rèn)) 實(shí)心圓
circle：空心圓
square：實(shí)心方塊
2.2 有序列表：
ol type=”列表項(xiàng)的標(biāo)記符” start=”起始值”
li項(xiàng)目一/li
li項(xiàng)目二/li
li項(xiàng)目三/li
......
/ol
注意：1. 1:1,2,3,.......
a:a,b,c,d,e.......
A:A,B,C,D,E.......
i:i,ii,iii,iv......
I:I,II,III,IV......
2.start表示起始值,從第幾個(gè)數(shù)開始計(jì)算
2.3 嵌套排列
ol type="1"
lih/li
lit/li
ul type="disc"
lim/li
lil/li
/ul
li5/li
/ol
2.4 分割線標(biāo)記：hr align=”對齊方式” size=”水平線高度” width=”水平線寬度”
color=”水平線顏色”
三、超鏈接標(biāo)記
3.1 文本鏈接：a href=”目標(biāo)URL” target=”目標(biāo)窗口”指針文本/a
注意： 1.href表示文本鏈接的目標(biāo)資源的URL
絕對地址和相對地址
絕對地址：在任何情況下都可以找到的地址（例如：網(wǎng)址）
相對地址：必須知道當(dāng)前所在，才能找到（../表示上一級目錄，/表示下級目錄）例子：../img/baidu.jpg 表示在當(dāng)前位置的上一層目錄下的img文件夾中的baidu.jpg 文件。
3.2 圖片標(biāo)記：img src=”圖片文件路徑” alt=”提示文本” height=”圖片高度” width=”圖片寬度”/
3.3 多媒體標(biāo)記
3.3.1 滾動(dòng)字幕標(biāo)記：marquee可以實(shí)現(xiàn)文字或圖片的跑馬燈效果
marquee..../marquee
marquee的屬性：
behavior 指定了跑馬燈的效果：scroll(滾動(dòng))、slide(滑動(dòng))、alternate(交替)
bgcolor:跑馬燈的背景顏色
direction:跑馬燈的移動(dòng)方向，left（左）、right(右)、up(上)、down(下)
scrolldelay:每次移動(dòng)的延遲時(shí)間，單位毫秒
loop:跑馬燈運(yùn)行次數(shù)，-1表示無限循環(huán)
height、width
hspace:左右空白寬度
vspace:上下空白寬度
3.3.2 嵌入音樂文件
audio src=”文件地址” 提示文字/audio
3.3.3 嵌入視頻文件
video src=”視頻文件地址” controls=”controls”提示文字/video
四、表格
4.1 表格基本語法：
table
tr
......
td單元格內(nèi)容/td
......
/tr
/table
注意：
table:聲明一個(gè)表格對象
tr:聲明一行
td:聲明一個(gè)單元格
4.2 表格的基本屬性
1.align 對齊方式：left、center、right
2.border:表格邊框
3.bordercolor:邊框顏色
4.bgcolor:表格背景顏色
5.background:背景圖片
6.height、width
4.3 單元格合并
1.rowspan:所跨的行數(shù)
2.colspan:所跨的列數(shù)
五、表單
5.1 表單標(biāo)簽：form action=”URL” method=”get|post” target=”...”/form
注意：form：該標(biāo)記中包含的數(shù)據(jù)將被提交到服務(wù)器或者電子郵件中
action:指定服務(wù)器端處理提交表單信息的程序是什么。URL地址或電子郵件地址
method:get/post:數(shù)據(jù)傳輸?shù)椒?wù)器的傳遞方法
target:服務(wù)器返回文檔結(jié)果的顯示位置：_blank:在新的瀏覽器窗口中打開
_self:在當(dāng)前瀏覽器中顯示
5.2 表單標(biāo)記
5.2.1 input標(biāo)簽：input type=”類型” name=”服務(wù)器 獲取用戶輸入信息的名字” value=”初始值”
注意：1.type類型（輸入類型）:
1. text:單行文本框
2. password:密碼輸入框
3. radio:單選按鈕 checked表示默認(rèn)
4. checkbox:復(fù)選框 checked表示默認(rèn)
5. submit:提交按鈕
6. reset:重置按鈕
7. button:普通按鈕
2.maxlength：輸入的最大長度
5.2.2 select標(biāo)簽
select name=”” size=”” multiple
option value=”選項(xiàng)1” 選項(xiàng)1
.......
option value=”選項(xiàng)n” 選項(xiàng)n
/select
注意：name:服務(wù)器 獲取用戶輸入信息的名字
value ：初始值
option：下拉框的內(nèi)容
multiple:多選，若沒有multiple則是單選
selected:表示默認(rèn)選項(xiàng)
size:表示長度
5.2.3 textarea 標(biāo)簽：textarea name=”...” cols=”...” rows=”...” wrap=”off/virtual/physical”
/textarea
注意: name：多行文本框的名稱
cols：一行可容納的字符數(shù)
rows：表示可顯示額的行數(shù)
wrap:virtual和phycal控制自動(dòng)換行
html5語法
基本沿用了html基礎(chǔ)語法。但更簡潔更人性化,主要有以下5點(diǎn)：
!doctype html
字符集設(shè)置
meta charset="utf-8"
不允許寫的結(jié)束符的標(biāo)簽： area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
可以省略結(jié)束符的標(biāo)簽： li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th
新增結(jié)構(gòu)化標(biāo)簽 ：
? ? 從div...div/派生而出
(1)header標(biāo)簽 :顧名思義，header標(biāo)簽用于將 HTML 頁面的一部分標(biāo)記為頁眉。
(2)section標(biāo)簽 :section標(biāo)簽用于標(biāo)識頁面上的重要內(nèi)容部分。該標(biāo)簽有點(diǎn)類似于將一本書分成幾個(gè)章節(jié)。
(3)article標(biāo)簽 :article標(biāo)簽標(biāo)識了 Web 頁面中的主要內(nèi)容。以博客為例，每篇帖子都構(gòu)成一個(gè)重要內(nèi)容。
(4)aside標(biāo)簽 :aside標(biāo)簽表示標(biāo)簽中包含的內(nèi)容與頁面主要內(nèi)容相關(guān)，但不是該頁面的一部分。這有點(diǎn)類似于使用括弧對正文進(jìn)行注釋（就像這樣）。括弧中的內(nèi)容提供關(guān)于該元素的一些附加信息。
(5)footer標(biāo)簽 :footer標(biāo)簽將所包含的元素內(nèi)容標(biāo)記為文檔的頁腳。
( 6)nav標(biāo)簽 :nav標(biāo)簽中包含的內(nèi)容主要用于導(dǎo)航。
示例：
新增媒體標(biāo)簽：
video
audio
embed
input type="checkbox" checked/
寫明表示true；否則false
不區(qū)分大小寫，與xhtml不同
單雙引號皆可，有空格時(shí)不行。
html5中怎么用空格播放和暫停視頻
var isplay = true;//默認(rèn)是播放的
var video = document.getElementById("myVideo");
document.onkeyup=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e e.keyCode==8){ // 按 空格并讓它彈起
//要做的事情
if(isplay) {//判斷當(dāng)前播放狀態(tài)
isplay = false;
video.pause();
}else {
isplay = true;
video.play();
}
};
寫HTML代碼時(shí)，縮進(jìn)選用一個(gè)Tab鍵還是4個(gè)空格？
業(yè)內(nèi)有過縮進(jìn)選用Tab還是空格的爭論。在縮進(jìn)方面，Tab鍵和空格這兩種方法的特點(diǎn)并不相同。
1、??????? Tab鍵與空格縮進(jìn)的特點(diǎn)
Tab鍵：在書寫代碼時(shí)會很方便，但是在不同編輯器當(dāng)中，距離大小有可能不同。在編輯器當(dāng)中，一個(gè)Tab鍵的長度大小存在一個(gè)默認(rèn)值，這個(gè)默認(rèn)值可以是兩個(gè)空格長度，也可以是4個(gè)，還可以是8個(gè)。由于團(tuán)隊(duì)開發(fā)當(dāng)中，每個(gè)人的編輯器默認(rèn)情況下可能不一致，從而有可能造成A的代碼放到B的編輯器中時(shí)，縮進(jìn)的長度發(fā)生變化。
4個(gè)空格：在每個(gè)編輯器中，空格大小一致，其不足之處在于：代碼書寫時(shí)會比較麻煩，需要按多次空格鍵。
2、??????? 如何選擇縮進(jìn)方式
其實(shí)并不需要糾結(jié)這個(gè)問題，各個(gè)編輯器都提供了“空格”和Tab鍵的相互轉(zhuǎn)換。因此，完全可以使用Tab鍵進(jìn)行書寫，在書寫完畢之后，將Tab鍵轉(zhuǎn)換為空格，之后生成最終文件即可。當(dāng)然，有些公司并不要求使用空格，那開發(fā)工程師就更方便了。
最終文件采用哪種方式，需要根據(jù)公司要求而定。如果公司沒有硬性要求，那么自己的代碼一定要保持一致性，不要出現(xiàn)“10個(gè)文件中，3個(gè)使用的是空格進(jìn)行縮進(jìn)，7個(gè)使用的是Tab鍵進(jìn)行縮進(jìn)”這種現(xiàn)象。
如圖所示，在Sublime編輯器中，可以進(jìn)行選項(xiàng)卡寬度的設(shè)定，也可以實(shí)現(xiàn)空格與Tab鍵的互相轉(zhuǎn)換。
資料來源：《HTML5布局之路》
html空格怎么寫
通常情況下，我們用空格鍵來打出多個(gè)空格，而在編寫代碼時(shí)，通過空格鍵、Tab鍵以及回車鍵打出的空格，都會被HTML（超文本標(biāo)記語言）自動(dòng)忽略。HTML將這樣的鍵視為空白字符，并顯示為單個(gè)空白間隔。盡管CSS提供了多種樣式的空格和縮進(jìn)，但是在HTML中也有一些工具可以讓你自己定義空格。
1、插入一個(gè)非間斷空格
一般來說，無論你按多少次空格鍵，HTML也只會在單詞之間顯示一個(gè)空白間隔。當(dāng)你需要插入多個(gè)空格時(shí)，請輸入nbsp;或#160;代碼。[1]?它們名為“空格占位符”，你輸入幾個(gè)，就能在頁面中顯示幾個(gè)空格。之所以稱之為非間斷空格，是因?yàn)檫@樣不會產(chǎn)生換行符。如果你濫用這種空格，瀏覽器可能無法以整齊易讀的方式插入換行符。
2、插入不同寬度的空格
有多種字符實(shí)體可以讓瀏覽器顯示空格。不同的瀏覽器在顯示方式上可能會有一點(diǎn)不同，但是和nbsp;不同，它們不會影響換行：
ensp;?— “en空格”是根據(jù)字體排印學(xué)的計(jì)量單位命名，寬度是兩個(gè)普通空格的寬度
emsp;?— “em空格”大概是四個(gè)普通空格的寬度
3、使用非間斷空格模擬制表符
生成段落的一種方式就是在第一行前插入幾個(gè)空格：nbsp;nbsp;nbsp;nbsp;。這個(gè)方法只適用于HTML，如果你使用CSS的話，不推薦這一方法（在其它步驟中會介紹別的方法）。如果段落的內(nèi)容是富文本，請使用“pre”標(biāo)簽。
4、使用CSS生成段落。
CSS的內(nèi)邊距或外邊距給瀏覽器指明了具體的顯示格式，所以顯示效果的一致性較高。即使你不是很了解CSS，手邊也沒有說明表，也可以很容易地添加。下面將具體說明如何將整個(gè)段落移到右邊：[5]
在HTML文檔的head/head部分，插入以下命令：
stylep.indent{ padding-left: 1.8em }/style
“p.indent”定義了一個(gè)叫“indent”（可以隨意命名）的段落（標(biāo)簽為p）。剩下的命令則是給段落左側(cè)添加內(nèi)邊距空格。
返回HTML文檔的主體。每當(dāng)你想添加段落時(shí)，在標(biāo)簽中插入以下內(nèi)容：
p class="indent"/p
要調(diào)整縮進(jìn)的數(shù)量，只需要更改CSS命令中的數(shù)字“1.8”即可。后面的“em”要保留，它是表示寬度的單位。
本文題目：html5空格,html5空格字符
標(biāo)題鏈接：http://ef60e0e.cn/article/dsggshc.html
