web前端開發(fā)課件第2章 HTML-網(wǎng)頁骨架結(jié)構(gòu)_第1頁
web前端開發(fā)課件第2章 HTML-網(wǎng)頁骨架結(jié)構(gòu)_第2頁
web前端開發(fā)課件第2章 HTML-網(wǎng)頁骨架結(jié)構(gòu)_第3頁
web前端開發(fā)課件第2章 HTML-網(wǎng)頁骨架結(jié)構(gòu)_第4頁
web前端開發(fā)課件第2章 HTML-網(wǎng)頁骨架結(jié)構(gòu)_第5頁
已閱讀5頁，還剩31頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第2章HTML-網(wǎng)頁骨架結(jié)構(gòu)列表標(biāo)記超鏈接標(biāo)記HTML頭部標(biāo)記Web前端開發(fā)基礎(chǔ)主體標(biāo)記1234ContentsHTML基礎(chǔ)文字與分區(qū)標(biāo)記56789多媒體標(biāo)記表格標(biāo)記表單標(biāo)記2.1HTML基礎(chǔ)HTML(HypertextMarkupLanguage，超文本標(biāo)記語言)，是一種使用文本符號(hào)表示，由瀏覽器解釋執(zhí)行的標(biāo)記語言。使用HTML語言編寫的文件稱為HTML文件，也叫網(wǎng)頁文件，擴(kuò)展名為.html或.htm。HTML文件是一種文本文件，可以使用記事本，SublimeText，Editplus等文本編輯器編輯，或者使用可視化編輯環(huán)境來編寫，如Dreamweaver。HTML文件通過瀏覽器解釋執(zhí)行，任何一臺(tái)計(jì)算機(jī)，只要安裝了瀏覽器就可以執(zhí)行HTML文件。HTML文件結(jié)構(gòu)<html> <head> <title>網(wǎng)頁基本結(jié)構(gòu)</title> </head> <body> <palign=”center”>HTML網(wǎng)頁</p> </body></html>4說明www.islide.cc5HTML標(biāo)記說明標(biāo)記是由一對(duì)尖括號(hào)和標(biāo)記名組成的，大多數(shù)標(biāo)記都包括開始標(biāo)記和結(jié)束標(biāo)記HTML標(biāo)記和屬性不區(qū)分大小寫，但是為了書寫標(biāo)準(zhǔn)，最好使用小寫形式書寫文檔的根元素必須是html，并且必須為它指明命名空間屬性值必須用引號(hào)括起來元素必須正確嵌套標(biāo)記屬性可以設(shè)置文本格式，如對(duì)齊方式、字體開始標(biāo)記和結(jié)束標(biāo)記之間的內(nèi)容是HTML標(biāo)記所設(shè)置的內(nèi)容標(biāo)記必須成對(duì)使用XHTML標(biāo)準(zhǔn)www.islide.cc6"/TR/xhtml1/DTD/xhtml1-strict.dtd">嚴(yán)格型"/TR/xhtml1/DTD/xhtml1-transitional.dtd">過渡型"/TR/xhtml1/DTD/xhtml1-frameset.dtd">框架XHTMLXHTML是HTML向XML過渡的一種技術(shù)。它有嚴(yán)格的語法規(guī)則：文檔開始必須通過DOCTYPE聲明，DOCTYPE主要作用是說明html的版本。XHTML提供了三種類型的DOCTYPE，過渡類型、嚴(yán)格類型和框架類型。列表標(biāo)記超鏈接標(biāo)記HTML頭部標(biāo)記Web前端開發(fā)基礎(chǔ)主體標(biāo)記1234ContentsHTML基礎(chǔ)文字與分區(qū)標(biāo)記56789多媒體標(biāo)記表格標(biāo)記表單標(biāo)記xmlns屬性www.islide.cc8xmlns屬性可以在文檔中定義一個(gè)或多個(gè)可供選擇的命名空間。該屬性可以放置在文檔內(nèi)任何元素的開始標(biāo)簽中。該屬性的值類似于URL，它定義了一個(gè)命名空間，瀏覽器會(huì)將此命名空間用于該屬性所在元素內(nèi)的所有內(nèi)容。如果使用符合XML規(guī)范的XHTML文檔，則應(yīng)該在文檔中的<html>標(biāo)簽中至少使用一個(gè)xmlns屬性，以指定整個(gè)文檔所使用的主要命名空間：<htmlxmlns="/1999/xhtml">頭部標(biāo)簽的子標(biāo)簽9為頁面上的所有鏈接設(shè)置默認(rèn)地址或默認(rèn)目標(biāo)<base>標(biāo)記定義當(dāng)前文檔與外部資源之間的關(guān)系<link>標(biāo)記用來設(shè)置網(wǎng)頁的標(biāo)題<title>標(biāo)記描述網(wǎng)頁相關(guān)的信息元標(biāo)記定義客戶端腳本<script>標(biāo)記<meta>元標(biāo)記100102030504語法：<metaname=”keywords”content=”keywords1…,keywordsn”>keywords表示關(guān)鍵字，多個(gè)關(guān)鍵字之間用英文逗號(hào)分割。設(shè)定網(wǎng)頁關(guān)鍵字<metahttp-equiv=”refresh”content=”x;url=weburl”>網(wǎng)頁自動(dòng)跳轉(zhuǎn)語法：<metaname=”discription”content=”somecontents”>設(shè)置網(wǎng)頁描述信息<metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8”>設(shè)置網(wǎng)頁字符集<metahttp-equiv=”refresh”content=”x”>設(shè)定網(wǎng)頁自動(dòng)刷新時(shí)間06<title>標(biāo)記www.islide.cc11

寫法

<title>網(wǎng)頁標(biāo)題</title>title<title>標(biāo)記嵌套在<head>中，用來設(shè)置網(wǎng)頁的標(biāo)題，這個(gè)標(biāo)題將顯示在瀏覽器標(biāo)題欄中。在所有HTML文檔中<title>標(biāo)記是必需的，它可以提供頁面被添加到收藏夾時(shí)顯示的標(biāo)題，也可以提供搜索引擎顯示結(jié)果的頁面標(biāo)題。<base>標(biāo)記www.islide.cc12

寫法

<basehref="/"/><basetarget="_blank"/>base<base>標(biāo)簽為頁面上的所有鏈接設(shè)置默認(rèn)地址或默認(rèn)目標(biāo)（target）。<link>標(biāo)記www.islide.cc13

寫法

<linkrel="stylesheet"type="text/css"href="style.css"/>link<link>標(biāo)簽定義當(dāng)前文檔與外部資源之間的關(guān)系，最典型的應(yīng)用為連接外部樣式表。<script>標(biāo)記www.islide.cc14

寫法

<scripttype="text/javascript">document.write("Hellojavascript!");</script>script<script>標(biāo)簽用來定義客戶端腳本，比如JavaScript。<style>標(biāo)記www.islide.cc15

寫法

<styletype="text/css">p{color:red}</style>style<style>標(biāo)簽可以為HTML文檔定義樣式（格式）。列表標(biāo)記超鏈接標(biāo)記HTML頭部標(biāo)記Web前端開發(fā)基礎(chǔ)主體標(biāo)記1234ContentsHTML基礎(chǔ)文字與分區(qū)標(biāo)記56789多媒體標(biāo)記表格標(biāo)記表單標(biāo)記主體標(biāo)記<body><body>標(biāo)簽表示網(wǎng)頁的主體內(nèi)容，其中包含網(wǎng)頁中的所有內(nèi)容，比如文本、超鏈接、多媒體元素、表格和列表等。<body>標(biāo)簽可用的屬性有：bgcolor、background、leftmargin、rightmargin、topmargin、bottommargin、text、link、vlink、alink?！纠?.6】body標(biāo)簽的應(yīng)用列表標(biāo)記超鏈接標(biāo)記HTML頭部標(biāo)記Web前端開發(fā)基礎(chǔ)主體標(biāo)記1234ContentsHTML基礎(chǔ)文字與分區(qū)標(biāo)記56789多媒體標(biāo)記表格標(biāo)記表單標(biāo)記2.4文字與分區(qū)標(biāo)記19用來設(shè)置文字的字體，大小，顏色。語法：<fontsize=”字號(hào)”color=”顏色”face=”字體”>文字</font><font>標(biāo)記hn標(biāo)記中的n可以取1-6之間的值，n值越大，標(biāo)題文字越小?；菊Z法：<hn>標(biāo)題文字</hn>屬性：align表示對(duì)齊方式，可選left，right，center值，分別表示左對(duì)齊，右對(duì)齊，居中對(duì)齊。<hn>標(biāo)題標(biāo)記段落標(biāo)記<p>換行標(biāo)記<br/>預(yù)格式化標(biāo)記<pre>居中標(biāo)記<center>縮排標(biāo)記<blockquote>水平線標(biāo)記<hr>分區(qū)標(biāo)記文字標(biāo)記2019網(wǎng)頁中的文本形式：(1)普通字符，可以直接錄入。(2)空格，使用“ ”表示一個(gè)半角空格。(3)特殊字符，如雙引號(hào)，貨幣符號(hào)，版權(quán)信息。特殊符號(hào)是在鍵盤上沒有的字符，可以通過輸入對(duì)應(yīng)的命名實(shí)體進(jìn)行錄入。列表標(biāo)記超鏈接標(biāo)記HTML頭部標(biāo)記Web前端開發(fā)基礎(chǔ)主體標(biāo)記1234ContentsHTML基礎(chǔ)文字與分區(qū)標(biāo)記56789多媒體標(biāo)記表格標(biāo)記表單標(biāo)記<a>超鏈接標(biāo)記www.islide.cc21

語法

<ahref=”target_url”target=”_blank”>超鏈接元素</a><a>href屬性表示鏈接目的地址。target_url是目標(biāo)文件的路徑或者網(wǎng)址，此路徑可以用絕對(duì)路徑或相對(duì)路徑表示。target屬性定義了被鏈接的文檔將在哪里打開，_blank表示打開一個(gè)新的瀏覽器窗口。列表標(biāo)記超鏈接標(biāo)記HTML頭部標(biāo)記Web前端開發(fā)基礎(chǔ)主體標(biāo)記1234ContentsHTML基礎(chǔ)文字與分區(qū)標(biāo)記56789多媒體標(biāo)記表格標(biāo)記表單標(biāo)記列表標(biāo)記www.islide.cc23

語法

<ul><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li></ul><ol><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li></ol>列表HTML支持有序列表和無序列表。無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。無序列表始于<ul>（unorderlist）標(biāo)簽，在無序列表中嵌套著多個(gè)列表項(xiàng)，每個(gè)列表項(xiàng)使用<li>表示。列表標(biāo)記超鏈接標(biāo)記HTML頭部標(biāo)記Web前端開發(fā)基礎(chǔ)主體標(biāo)記1234ContentsHTML基礎(chǔ)文字與分區(qū)標(biāo)記56789多媒體標(biāo)記表格標(biāo)記表單標(biāo)記多媒體標(biāo)記25語法：<bgsoundsrc=”sound_url”/><bgsound>標(biāo)記語法：<embedsrc=”file_url”/><embed>標(biāo)記<objectclassid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628"id="Slider1"width="100"height="50"><paramname="BorderStyle"value="1"/><paramname="MousePointer"value="0"/><paramname="Enabled"value="1"/><paramname="Min"value="0"/><paramname="Max"value="10"/></object><object>標(biāo)記<imgsrc=”img_url.jpg”alt=”image說明”/>src屬性定義了圖像文件的地址。該地址可以是絕對(duì)路徑或相對(duì)路徑。alt屬性表示替換文字，當(dāng)瀏覽器無法讀取圖像時(shí)用來替代圖像的文字。<img>圖像標(biāo)記語法：<bodybackground=”img_url.jpg”/>說明：當(dāng)插入的圖像尺寸小于網(wǎng)頁的大小，圖像默認(rèn)水平，垂直方向重復(fù)顯示。background（屬性）語法：<bodybgcolor=”color”/>bgcolor（屬性）列表標(biāo)記超鏈接標(biāo)記HTML頭部標(biāo)記Web前端開發(fā)基礎(chǔ)主體標(biāo)記1234ContentsHTML基礎(chǔ)文字與分區(qū)標(biāo)記56789多媒體標(biāo)記表格標(biāo)記表單標(biāo)記2.8表格標(biāo)記27表格是一種結(jié)構(gòu)性對(duì)象，包括行、列、單元格。表格使用<table></table>表示表格標(biāo)題使用<caption></caption>表示行用<tr></tr>表示單元格用<td></td>表示表格常用標(biāo)記widthheightalignvalignborderbgcolorbackgroundcellspacingcellpadding表格常用屬性在表格的單元格中插入文字，圖像，音視頻資源，通過表格布局使元素整齊排列。表格的嵌套布局。表格布局表格2019網(wǎng)頁中可以使用表格制作數(shù)據(jù)表格，如制作成績表，工資表等。在網(wǎng)頁中表格更重要的用途是排版頁面內(nèi)容?？梢詫⒕W(wǎng)頁元素，如段落文字、圖像、視頻等資源放置在表格的單元格中，使網(wǎng)頁中的各個(gè)部分整齊而有條理。列表標(biāo)記超鏈接標(biāo)記HTML頭部標(biāo)記Web前端開發(fā)基礎(chǔ)主體標(biāo)記1234ContentsHTML基礎(chǔ)文字與分區(qū)標(biāo)記56789多媒體標(biāo)記表格標(biāo)記表單標(biāo)記2.9表單標(biāo)記www.islide.cc29<form>表單域標(biāo)記<input>設(shè)置表單輸入元素<select>下拉列表標(biāo)記<textarea>文本域標(biāo)記表單是一種特殊的網(wǎng)頁容器標(biāo)簽，在這個(gè)容器中可以插入各種表單交互組件，如文本框，密碼框，單選按鈕，從而獲取用戶輸入的信息。利用表單可以將網(wǎng)頁中的數(shù)據(jù)通過特定的方式進(jìn)行提交。提交后，由服務(wù)器端腳本對(duì)信息進(jìn)行處理。表單可以與jsp或者asp等編程語言結(jié)合，同時(shí)也可以與前臺(tái)的javascript合作，通過腳本來控制用戶輸入的信息的合法性。表單可以收集瀏覽者提交的信息或者實(shí)現(xiàn)搜索等功能。網(wǎng)站上的在線注冊，登錄等功能都是通過表單實(shí)現(xiàn)的。要實(shí)現(xiàn)表單功能，必須包含兩部分：1.頁面上的表單元素。2.服務(wù)器端用于處理客戶端填寫信息的程序。<form>標(biāo)記屬性www.islide.cc3001020304nameactionmethodonsubmit表單域名稱name鏈接跳轉(zhuǎn)action表單的跳轉(zhuǎn)方法method指定處理表單的腳本程序onsubmit<input>標(biāo)記31文本框密碼框單選按鈕復(fù)選框提交按鈕文本框提交按鈕復(fù)選框單選按鈕密碼框密碼框<inputtype=”password”name=”pw_name”id=”pwd_id”/>單選按鈕<inputtype=”radio”name=”radiogroup_name”value=”radiovalue”checked=”checked”/>文本框語法：<inputtype=”text”name=”text_name”id=”text_id”/>復(fù)選框<inputtype=”checkbox”name=”checkgroup_name”value=”checkvalue”checked=”checked”/>提交按鈕<inputtype=”submit”name=”submit_name”value=”submittext”/><input>標(biāo)記32重置按鈕普通按鈕文件域隱藏域重置按鈕隱藏域文件域普通按鈕普通按鈕<inputtype=”button”name=”button_name”value=”buttontext”onclick=”javascript_function”/>文件域<inputtype=”file”name=”file_name”/>重置按鈕語法：<inputtype=”reset”name=”reset_name”value=”resettext”/>隱藏域<inputtype=”hidden”name=”hidden_name”value=”hidden_value”/><select>下拉列表標(biāo)記www.islide.cc33

語法

<selectname=”selectname”><optionvalue=”value1”selected=”selected”>1</option><option

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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ì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論