.圖片標(biāo)簽ing
2.H標(biāo)題系列
3.分段標(biāo)簽p
4.換行標(biāo)簽br
5.分割線標(biāo)簽HR
6.特殊字符
(1)It--小于號(hào)
(2)Gt--大于號(hào)
(3)Nbsp--空格
(4)amp--符號(hào)
(5)quot--雙引號(hào)
7.a標(biāo)簽做超鏈接
8.a標(biāo)簽做錨點(diǎn)
常見的標(biāo)簽屬性
1.ID標(biāo)簽的身份號(hào)在一個(gè)頁面中,程序員應(yīng)保證不存在重復(fù)的ID
2.Title用于設(shè)置標(biāo)簽的提示內(nèi)容
3.Src用于設(shè)置圖片的路徑
4.Href用于設(shè)置a標(biāo)簽超鏈接跳轉(zhuǎn)路徑
TML是一種用來描述網(wǎng)頁的標(biāo)記性語言。學(xué)習(xí)HTML可能并不難,主要是要記一些HTML標(biāo)簽和標(biāo)簽代表的含義。下面PHP程序員雷雪松根據(jù)使用的情況,整理出平時(shí)常用的HTML標(biāo)簽。
HTML基礎(chǔ)之HTML常用標(biāo)簽-PHP程序員雷雪松的博客
<!--<!DOCTYPE> 是HTML5聲明,<!DOCTYPE> 必須是 HTML 文檔的第一行,位于 <html> 標(biāo)簽之前。<!DOCTYPE>是指示 web 瀏覽器關(guān)于頁面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。-->
<!DOCTYPE html>
<html>
<!-- head標(biāo)簽是所有頭部元素的容器。head標(biāo)簽內(nèi)的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標(biāo)簽都可以添加到 head 部分:title、base、link、meta、script 以及style。頭部的內(nèi)容不會(huì)顯示在瀏覽器的。 -->
<head>
<!-- 設(shè)置字符集,如果字符集不對(duì),可能導(dǎo)致亂碼。一般建議utf-8國際編碼 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相關(guān)標(biāo)簽,title定義文檔的標(biāo)題,百度建議一般不要超過32位,meta定義頁面關(guān)鍵詞和頁面的描述-->
<title>網(wǎng)頁標(biāo)題</title>
<meta name="keywords" content="PHP程序員,技術(shù)博客,個(gè)人博客,雷雪松" />
<meta name="description" content="PHP程序員,雷雪松(Raykaeso)的博客是一個(gè)優(yōu)秀的個(gè)人技術(shù)博客。PHP程序員雷雪松的博客記錄了Linux學(xué)習(xí),PHP開發(fā)與編程,Web前端開發(fā),MySQL學(xué)習(xí)和教程,NoSQL數(shù)據(jù)庫教程以及個(gè)人的人生經(jīng)歷和觀點(diǎn)。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分,所有在瀏覽器上可見的內(nèi)容必須寫在body標(biāo)簽內(nèi)部 -->
<body>
</body>
</html>
a、布局標(biāo)簽
div標(biāo)簽定義文檔中的分區(qū)或節(jié)(division/section),可以把文檔分割為獨(dú)立的、不同的部分,主要用于布局。
aside標(biāo)簽的內(nèi)容可用作文章的側(cè)欄,<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
header標(biāo)簽定義頁面的頭部(介紹信息),<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
section標(biāo)簽定義文檔中的節(jié)(section、區(qū)段)。比如章節(jié)、頁眉、頁腳或文檔中的其他部分,<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
footer 標(biāo)簽定義文檔或節(jié)的頁腳,通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等等,<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
article標(biāo)簽規(guī)定文章獨(dú)立的其他內(nèi)容,比如:標(biāo)題、內(nèi)容、評(píng)論,<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
b、文本標(biāo)簽
h1-h6標(biāo)簽可定義標(biāo)題
p標(biāo)簽定義段落
b/strong標(biāo)簽加粗
em標(biāo)簽來表示強(qiáng)調(diào)的文本,斜體
strong標(biāo)簽表示重要文本
u標(biāo)簽下劃線
s標(biāo)簽刪除線
br標(biāo)簽表示回車換行
hr標(biāo)簽表示水平線
span標(biāo)簽被用來組合文檔中的行內(nèi)元素。
blockquote標(biāo)簽表示塊引用
pre標(biāo)簽可定義預(yù)格式化的文本,保持原有格式的一種標(biāo)簽。
sub標(biāo)簽下標(biāo),
sup>標(biāo)簽上標(biāo)
表示一個(gè)空格
©表示版權(quán)符
<表示<
>表示>
c、a標(biāo)簽定義超鏈接,指定頁面間的跳轉(zhuǎn)。鏈接可以指向外部鏈接或者頁面內(nèi)部id錨點(diǎn),可以在當(dāng)前頁面打開,新開窗口。
<a href="指向的鏈接地址或者網(wǎng)址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒體標(biāo)簽
img標(biāo)簽主要在網(wǎng)頁中插入圖像,可以定義圖片替換文本、顯示寬度和高度、是否帶邊框,建議等比例設(shè)置,否則圖像會(huì)變形。
<img src="圖片地址" alt="替換文本,圖片打不開的時(shí)候顯示" width="圖片寬度" height="高度" border="0" />
audio標(biāo)簽定義聲音,比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
<audio src="someaudio.wav">您的瀏覽器不支持 audio 標(biāo)簽。</audio>
video標(biāo)簽定義視頻,比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標(biāo)簽。</video>
e、序列化標(biāo)簽
ul和li無序列表標(biāo)簽
<ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
ol和li有序列表標(biāo)簽,可以使用type屬性規(guī)定有序列表符號(hào)的類型。1 按數(shù)字有序排列,為默認(rèn)值,(1、2、3、4);a 按小寫字母有序排列,(a、b、c、d);A 按字母大寫有序排列,(A、B、C、D)。i 按小寫羅馬字母有序,(i, ii, iii, iv);I 按小寫羅馬字母有序,(I, II, III, IV)。
<ol>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ol>
dl標(biāo)簽定義了定義列表(definition list),dl標(biāo)簽用于結(jié)合 dt(定義列表中的項(xiàng)目)和 dd(描述列表中的項(xiàng)目)。
<dl>
<dt>計(jì)算機(jī)</dt>
<dd>用來計(jì)算的儀器 ... ...</dd>
</dl>
f、表格標(biāo)簽
table標(biāo)簽和tr標(biāo)簽,th標(biāo)簽和td標(biāo)簽,合并單元格。
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>標(biāo)題</th>
<th>標(biāo)題</th>
</tr>
<tr>
<!-- 合并橫向單元格 -->
<td colspan="2" nowrap="nowrap">&nbsp;</td>
</tr>
<tr>
<td></td>
<!-- 合并縱向單元格 -->
<td rowspan="2"> </td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>
g、表單標(biāo)簽
form標(biāo)簽定義提交方式、提交地址、表單字符集以及如何對(duì)其進(jìn)行編碼,需要提交的表單一定要放在form標(biāo)簽內(nèi)。
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
input標(biāo)簽用于搜集用戶信息
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
密碼,輸入的字符會(huì)被掩碼(顯示為星號(hào)或原點(diǎn))
<input name="pwd" type="password" maxlength="5" size="100" value="" />
文件類型的表單,上傳文件時(shí),form表單一定要設(shè)置為enctype="multipart/form-data"
<input type="file" name="file" />
隱藏表單
<input type="hidden" name="country" value="China" />
提交
<input type="submit" name="Submit" value="提交" disabled="disabled" />
重置
<input type="reset" name="Submit2" value="重置" />
radio單選
<input name="sex" type="radio" value="1" />男
<input name="sex" type="radio" value="2" checked="checked" />女
checkbox多選
<input name="skill" type="checkbox" value="1" checked="checked" />PHP
<input name="skill" type="checkbox" value="2" />前端
<input name="skill" type="checkbox" value="2" />數(shù)據(jù)庫
<span style="color: #ff0000;">注:checked="checked"可以簡寫成checked</span>
label標(biāo)簽為input元素定義標(biāo)注,如果您點(diǎn)擊label元素文本,就會(huì)觸發(fā)此input控件。
textarea標(biāo)簽,設(shè)置文本區(qū)內(nèi)的可見行數(shù)和寬度
<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>
button標(biāo)簽定義一個(gè)按鈕
提交按鈕
<button type="submit" value="提交">提交</button>
重置按鈕
<button type="reset" value="重置">重置</button>
select標(biāo)簽和option標(biāo)簽下拉列表
單選菜單列表框
<select name="user">
<option value="1">ray</option>
<option value="2" selected="selected">raykaeso</option>
</select>
多選列表下拉框,shift加鼠標(biāo)單擊,可以連續(xù)選擇多個(gè)選擇,CTRL+鼠標(biāo)點(diǎn)擊,可以點(diǎn)擊多個(gè)。
<select name="user" size="10" multiple="multiple">
<option value="1">雷雪松</option>
<option value="2" selected="selected">ray</option>
<option value="3">raykaeso</option>
</select>
注:selected="selected"可簡寫成selected,表示選中
a、HTML標(biāo)簽和屬性是不區(qū)分大小寫的,建議HTML標(biāo)簽和屬性都小寫,屬性值必須用雙引號(hào)包圍。
b、HTML標(biāo)簽都是以開始標(biāo)簽起始,以結(jié)束標(biāo)簽終止。大部分HTML標(biāo)簽都是成對(duì)出現(xiàn)的,稱為雙標(biāo)簽,比如:p標(biāo)簽、div標(biāo)簽,也有的HTML標(biāo)簽在開始標(biāo)簽中結(jié)束的標(biāo)簽,稱為單標(biāo)簽,比如:hr標(biāo)簽、br標(biāo)簽。大多數(shù) HTML 元素可擁有屬性,文本內(nèi)容都是寫在開始標(biāo)簽與結(jié)束標(biāo)簽之間。
c、HTML標(biāo)簽之間盡量縮進(jìn)與換行,每行代碼不要過長,方便閱讀和維護(hù)。
d、HTML標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則。禁止a標(biāo)簽嵌套a標(biāo)簽,p標(biāo)簽嵌套div標(biāo)簽。
e、建議不使用HTML已經(jīng)廢棄的或者不贊成使用的標(biāo)簽,少使用table布局、iframe框架嵌套以及flash播放器。
來源:PHP程序員雷雪松的博客 -HTML基礎(chǔ)之HTML常用標(biāo)簽(http://www.leixuesong.cn/2045)
avaScript一種直譯式腳本語言,是一種動(dòng)態(tài)類型、弱類型、基于原型的語言,內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶端的腳本語言,最早是在HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用)網(wǎng)頁上使用,用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。
JavaScript 顯示數(shù)據(jù)
JavaScript 可以通過不同的方式來輸出數(shù)據(jù):
使用 window.alert() 彈出警告框。
使用 document.write() 方法將內(nèi)容寫到 HTML 文檔中。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制臺(tái)。
使用 window.alert()
你可以彈出警告框來顯示數(shù)據(jù):
實(shí)例
nbsp;html>
我的第一個(gè)頁面
我的第一個(gè)段落。
操作 HTML 元素
如需從 JavaScript 訪問某個(gè) HTML 元素,您可以使用 document.getElementById(id) 方法。
請(qǐng)使用 “id” 屬性來標(biāo)識(shí) HTML 元素,并 innerHTML 來獲取或插入元素內(nèi)容:
實(shí)例
nbsp;html>
我的第一個(gè) Web 頁面
"demo">我的第一個(gè)段落
以上 JavaScript 語句(在 標(biāo)簽中)可以在 web 瀏覽器中執(zhí)行:
document.getElementById(“demo”) 是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼 。
innerHTML = “段落已修改?!?是用于修改元素的 HTML 內(nèi)容(innerHTML)的JavaScript 代碼。
在本教程中
在大多數(shù)情況下,在本教程中,我們將使用上面描述的方法來輸出:
上面的例子直接把 id=”demo” 的
元素寫到 HTML 文檔輸出中:
寫到 HTML 文檔
出于測(cè)試目的,您可以將JavaScript直接寫在HTML 文檔中:
實(shí)例
nbsp;html>
我的第一個(gè) Web 頁面
我的第一個(gè)段落。
Fri Apr 22 2022 16:20:12 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)
請(qǐng)使用 document.write() 僅僅向文檔輸出寫內(nèi)容。
如果在文檔已完成加載后執(zhí)行 document.write,整個(gè) HTML 頁面將被覆蓋。
實(shí)例
nbsp;html>
我的第一個(gè) Web 頁面
我的第一個(gè)段落。
"MYFUNCTION()">點(diǎn)我
寫到控制臺(tái)
如果您的瀏覽器支持調(diào)試,你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。
瀏覽器中使用 F12 來啟用調(diào)試模式, 在調(diào)試窗口中點(diǎn)擊 “Console” 菜單。
nbsp;html>
我的第一個(gè) Web 頁面
實(shí)例 console 截圖:
您知道嗎?
程序中調(diào)試是測(cè)試,查找及減少bug(錯(cuò)誤)的過程。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。