




版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
Web應(yīng)用系統(tǒng)安全開發(fā)
使用
H
T
M
L
定義網(wǎng)頁(yè)內(nèi)容2.1.1
HTML超文本標(biāo)記語(yǔ)言概述1.
HTML基本概念?HTML(Hyper
Text
Markup
Language)超文本標(biāo)記語(yǔ)言,不是一種編程語(yǔ)言,而是一種標(biāo)記語(yǔ)言(MarkupLanguage),用一套標(biāo)記標(biāo)簽(Markup
Tag)來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。HTML文件以
“.htm”或“.html”為擴(kuò)展名。?網(wǎng)頁(yè)文件本身是一種文本文件,通過(guò)在文本文件中添加標(biāo)記符,可以告訴瀏覽器如何顯示其中的內(nèi)容,如:文字如何處理,畫面如何安排,圖片如何顯示等。瀏覽器按順序閱讀網(wǎng)頁(yè)文件,然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容,對(duì)書寫出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤,且不停止其解釋執(zhí)行過(guò)程,編制者只能通過(guò)顯示效果來(lái)分析出錯(cuò)原因和出錯(cuò)部位。?HTML從1993年誕生以來(lái),不斷地在發(fā)展與完善。從HTML2.0、HTML3.2、HTML4.0、HTML4.01,直到最新的HTML5.0,其功能是越來(lái)越強(qiáng)大,表現(xiàn)越來(lái)越完美。實(shí)例2-12.1.2
用標(biāo)簽規(guī)定元素屬性和位置1.
文檔標(biāo)簽HTML的主要語(yǔ)法是元素和標(biāo)簽:?元素指的是從開始標(biāo)簽(start
tag)到結(jié)束標(biāo)簽(end
tag)的所有代碼,是符合DTD(文檔類型定義)的文檔組成部分,如title(文檔標(biāo)題)、IMG(圖象)、table(表格)等等。元素名不區(qū)分大小寫的。?HTML用標(biāo)簽來(lái)規(guī)定元素的屬性和它在文檔中的位置。標(biāo)簽分單獨(dú)出現(xiàn)的標(biāo)簽和成對(duì)出現(xiàn)的標(biāo)簽兩種。大多數(shù)的標(biāo)簽是成對(duì)出現(xiàn)的,有首標(biāo)簽和尾標(biāo)簽組成。首標(biāo)簽的格式為<元素名>,尾標(biāo)簽的格式為</元素名>。成對(duì)標(biāo)簽用于規(guī)定元素所含的范圍,如<title>和</title>標(biāo)簽用來(lái)界定標(biāo)題元素的范圍,也就是說(shuō)。<title>與</title>之
間的部分是該HTML文檔的標(biāo)題。單獨(dú)標(biāo)簽的格式為<元素名>,它的作用是在相應(yīng)的位置插入元素。如<br>標(biāo)簽表示在該標(biāo)簽所在位置插入一個(gè)換行符。1.<html>標(biāo)簽<html>標(biāo)簽是文檔標(biāo)識(shí)符,它是成對(duì)出現(xiàn)的,首標(biāo)簽<html>和尾標(biāo)簽</html>分別位于文檔的最前面和最后面,明確地表示文檔是以超文本標(biāo)識(shí)語(yǔ)言編寫的。2.<head>標(biāo)簽把HTML文檔分為文檔頭<head>和文檔主體<body>兩個(gè)部分。文檔的主體部分就是在瀏覽器用戶區(qū)中看到的內(nèi)容了。
而文檔頭部分用來(lái)規(guī)定該文檔的標(biāo)題(出現(xiàn)在瀏覽器窗口的標(biāo)題欄中)和文檔的一些屬性。HTML文檔的標(biāo)簽是可以嵌套的,即在一對(duì)標(biāo)簽中可以嵌套另一對(duì)子標(biāo)簽。用來(lái)規(guī)定母標(biāo)簽所含范圍的屬性和其中某一部分內(nèi)容,嵌套在<head>標(biāo)簽中使用的子標(biāo)簽主要有<title>、<meta>、<link>和
<style>。3.<body>標(biāo)簽<body>標(biāo)簽是成對(duì)標(biāo)簽。在<body></body>之間的內(nèi)容將顯示在瀏覽器窗口的
用戶區(qū)內(nèi),它是HTML文檔的主體部分。4.文檔類型<!DOCTYPE>標(biāo)簽<!DOCTYPE>聲明必須位于HTML5文檔中的第一行,也就是位于<html>標(biāo)簽之前。該標(biāo)簽告知瀏覽器文檔所使用的HTML規(guī)范。<!DOCTYPE>聲明不屬
于HTML標(biāo)簽,它是一條指令,告訴瀏覽器編寫頁(yè)面所用的標(biāo)記的版本。5.注釋標(biāo)簽<!--...-->注釋標(biāo)簽<!--...-->用于在源代碼中插入注釋。注釋不會(huì)顯示在瀏覽器中。2.
布局標(biāo)簽?HTML頁(yè)面主要用以下標(biāo)簽來(lái)進(jìn)行布局3.
格式標(biāo)簽?HTML頁(yè)面常用的文章標(biāo)簽?HTML頁(yè)面常用的短語(yǔ)元素標(biāo)簽?HTML頁(yè)面常用的字體樣式標(biāo)簽4.
列表標(biāo)簽1.列表標(biāo)簽(1)<ul>定義無(wú)序列表。可使用CSS來(lái)定義列表的類型。(2)<ol>定義有序列表。有序列表可以是數(shù)字或字母順序??墒褂?lt;li>標(biāo)簽來(lái)定義列表項(xiàng),使用CSS來(lái)設(shè)置列表的樣式。其屬性“start”,規(guī)定有序列表的起始值;
屬性“reversed”,規(guī)定列表順序?yàn)榻敌?;屬性“type”,其值為“1”、“A”、
“a”、“I”或“i”,規(guī)定在列表中使用的標(biāo)記類型。(3)<li>定義列表項(xiàng),有序列表和無(wú)序列表中都使用<li>
標(biāo)簽。實(shí)例2-2<img>定義圖像,注意加上“alt”屬性。比如:<imgsrc="smile.gif"alt="微笑"/>5.
圖像標(biāo)簽6.
超鏈接標(biāo)簽<a>定義超鏈接,用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面,它最重要的屬性是“href”屬性,它指定鏈接的目標(biāo)。<ahref=“http://www.sziit.edu.cn/”onclick="_addDynClicks("wbimage",1877551418,64121)"target="_blank">學(xué)校主頁(yè)</a>屬性“target”,其值為“_blank”、“_parent”、“_self”或“_top”,表示在何處打開目標(biāo)URL,它僅在“href”屬性存在時(shí)使用。7.
表格標(biāo)簽在HTML頁(yè)面中,大多數(shù)頁(yè)面都是使用表格進(jìn)行排版的。使用表格可以把文字和圖片等內(nèi)容按照行和列排列起來(lái),使得整個(gè)網(wǎng)頁(yè)更加清晰和條理化,有利于信息的表達(dá)。實(shí)例2-32.1.3
用表單收集用戶輸入信息1.表單介紹?HTML表單用于搜集不同類型的用戶輸入信息。?輸入信息有:文本域、下拉列表、單選框、復(fù)選框等元素。?一個(gè)表單至少包括:說(shuō)明性文字、表單控件、提交和重置按鈕等內(nèi)容,如圖所示。2.創(chuàng)建HTML表單?<form>標(biāo)簽用于創(chuàng)建供用戶輸入的HTML
表單<form
name="frmLogin"
action="returnLoginInformation.php"
method="post"
onsubmit="return
check()">
action:要提交的地點(diǎn);
method
:表單發(fā)送方式:
post:1)請(qǐng)求數(shù)據(jù)在瀏覽器不可見,比較安全;2)提交的數(shù)據(jù)沒(méi)有長(zhǎng)度限制;3)不可收藏為書簽。
get:1)請(qǐng)求數(shù)據(jù)在瀏覽器可見,不安全;2)最多255個(gè)字符長(zhǎng)度。3)可將字符串添加到URL中,可收藏為書簽。?<form>標(biāo)簽用于創(chuàng)建供用戶輸入的HTML表單,<form>標(biāo)簽的屬性見表2-7所示。3.表單元素表單<form>標(biāo)簽需要跟各種元素搭配來(lái)共同完成用戶輸入信息的收集,以下是表單的各種常見元素。1
.
<input>元素最重要的表單元素是<input>元素。如下HTML代碼定義了供文本輸入的單行輸入字段。
<form>Firstname:<input
type="text"name="firstname"><br>Last
name:<input
type="text"name="lastname"></form>以上HTML代碼在瀏覽器中看上去是這樣的:<input>是表單中最常用的標(biāo)簽之一,該標(biāo)簽中有Type和Name兩個(gè)屬性,分別代表了輸入域的類型和名稱。<input>元素根據(jù)不同的type屬性,可以變化為多種形態(tài)。在Type屬性中,包含的屬性值見表2-8。2
.
<select>
元素(下拉列表)下拉列表是一種節(jié)省網(wǎng)頁(yè)空間的方式,下拉列表標(biāo)簽的基本語(yǔ)法是:<selectname="cars"><optionvalue="volvo">Volvo</option><optionvalue="saab">Saab</option><optionvalue="fiat">Fiat</option><optionvalue="audi">Audi</option></select>以上HTML代碼在瀏覽器中看上去是這樣的:下拉列表標(biāo)簽的屬性見表2-9所示。3
.
<option>
元素<option>元素定義待選擇的選項(xiàng)。列表通常會(huì)把首個(gè)選項(xiàng)顯示為被選選項(xiàng)。您可以通過(guò)selected屬性預(yù)選擇某些選項(xiàng)?;菊Z(yǔ)法如下:<optionvalue="fiat"selected>Fiat</option>以上HTML代碼在瀏覽器中看上去是這樣的:4
.
<textarea>
元素<textarea>元素定義多行輸入字段(文本域)。用戶可在此文本區(qū)域中寫文本,在一個(gè)文本區(qū)中,可輸入無(wú)限數(shù)量的文本?;菊Z(yǔ)法如下:<textareaname="message"rows="10"cols="30">The
cat
was
playing
in
thegarden.</textarea>以上HTML代碼在瀏覽器中顯示為:
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 生物技術(shù)藥物研發(fā)合同
- 私人訂制戶外探險(xiǎn)活動(dòng)服務(wù)協(xié)議
- 智能家居系統(tǒng)與節(jié)能照明合作協(xié)議
- 數(shù)據(jù)挖掘技術(shù)在企業(yè)決策支持系統(tǒng)中的應(yīng)用合作協(xié)議
- 精密電子元器件采購(gòu)合同
- 離婚標(biāo)準(zhǔn)協(xié)議書車輛分配
- 裝修公司合同保密協(xié)議
- 信用社借款展期合同協(xié)議書
- 教育培訓(xùn)合作項(xiàng)目實(shí)施協(xié)議
- 建筑施工臨時(shí)承包合同
- 西漢-北京大學(xué)歷史學(xué)系教學(xué)課件
- DB3202-T 1026-2022 無(wú)錫市安全生產(chǎn)技術(shù)服務(wù)單位等級(jí)評(píng)定規(guī)范
- 產(chǎn)品設(shè)計(jì)材料及工藝PPT完整版全套教學(xué)課件
- 2006年度銀行業(yè)金融機(jī)構(gòu)信息科技風(fēng)險(xiǎn)評(píng)價(jià)審計(jì)要點(diǎn)
- 反恐C-TPAT程序文件整套(通用)
- 2022年全國(guó)高考詩(shī)歌鑒賞試題-教學(xué)課件
- 教師資格證幼兒教育真題及答案近五年合集
- 化學(xué)檢驗(yàn)工高級(jí)工理論知識(shí)試題題及答案
- 廣東省五年一貫制語(yǔ)文試卷
- 收養(yǎng)協(xié)議書真實(shí)范本模板
- 國(guó)家電網(wǎng)公司電力安全工作規(guī)程 配電部分 試行
評(píng)論
0/150
提交評(píng)論