《Web前端開發(fā)技術(shù)》課件T-第一章_第1頁
《Web前端開發(fā)技術(shù)》課件T-第一章_第2頁
《Web前端開發(fā)技術(shù)》課件T-第一章_第3頁
《Web前端開發(fā)技術(shù)》課件T-第一章_第4頁
《Web前端開發(fā)技術(shù)》課件T-第一章_第5頁
已閱讀5頁，還剩30頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第一章

HTML5基礎(chǔ)知識(shí)HTML（HyperTextMarkupLanguage）即超文本標(biāo)簽語言。2014年10月HTML的第5版本標(biāo)準(zhǔn)定稿后，現(xiàn)在使用的基本是該版本，簡(jiǎn)稱HTML5。概述1.1文檔基本結(jié)構(gòu)HTML文檔元素有很多種類型，它們的功能也是多種多樣的。HTML5文檔有嚴(yán)格文檔結(jié)構(gòu)，其中結(jié)構(gòu)元素定義了整個(gè)文檔結(jié)構(gòu)，劃分了HTML文檔的層次。文檔基本結(jié)構(gòu)1.1.1文檔結(jié)構(gòu)元素文檔基本結(jié)構(gòu)元素分為<html>元素、<head>元素、<body>元素、<meta>元素等。如：<html>元素由<html>和</html>標(biāo)簽對(duì)表示文檔基本結(jié)構(gòu)1.1.2文檔語義元素HTML5新增了很多新的文檔語義元素。文檔語義元素能讓瀏覽器更好地讀取頁面結(jié)構(gòu)，更便于團(tuán)隊(duì)開發(fā)和維護(hù)。常用的文檔語義元素包括<header>（頭部）、<nav>（導(dǎo)航欄）、<section>（區(qū)塊）、<article>（主要內(nèi)容）、<aside>（側(cè)邊欄）、<footer>（底部）等。有了語義元素，HTML文檔大致可以按圖1-2所示設(shè)計(jì)擺放的塊。語義元素不帶渲染格式，渲染格式還依賴于CSS或者內(nèi)聯(lián)style屬性。文檔基本結(jié)構(gòu)1.1.3行內(nèi)元素和塊級(jí)元素HTML5行內(nèi)元素在瀏覽器上顯示的時(shí)候通常不會(huì)以新行開始，如：<b>,<td>,<a>,<img>等元素等。如例1-3塊級(jí)元素在顯示時(shí)會(huì)另起新行，典型的塊級(jí)元素如<p>和<div>。如果與CSS一同使用，<div>元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。<div>元素的一個(gè)常見的用途是文檔布局，如例1-4.文檔基本結(jié)構(gòu)1.2文字排版頁面制作時(shí)需要對(duì)內(nèi)容進(jìn)行排版，主要涉及如何在瀏覽器中輸出文本，以及設(shè)置文本輸出的格式和文本輸出的字體，如斜體、黑體字、下加一劃線等等。文字排版1.2.1分段在網(wǎng)頁進(jìn)行排版時(shí)經(jīng)常要在HTML5文檔中創(chuàng)建自然段，<p>元素是用來創(chuàng)建一個(gè)段落。文字排版1.2.1分段在網(wǎng)頁進(jìn)行排版時(shí)經(jīng)常要在HTML5文檔中創(chuàng)建自然段，<p>元素是用來創(chuàng)建一個(gè)段落。例1-5.文字排版1.2.2換行HTML文檔的換行效果必須通過<br>元素實(shí)現(xiàn)，<br>用來告訴瀏覽器在此處創(chuàng)建一個(gè)換行符。<br>是一個(gè)很簡(jiǎn)單的元素，它沒有結(jié)束標(biāo)簽。例1-6.文字排版塊引用頁面中塊引用效果是<blockquote>元素實(shí)現(xiàn)，該元素作用是對(duì)加入<blockquote></blockquote>之間文本在瀏覽器中按兩邊縮進(jìn)的方式顯示出來，如例1-7。文字排版塊引用頁面中塊引用效果是<blockquote>元素實(shí)現(xiàn)，該元素作用是對(duì)加入<blockquote></blockquote>之間文本在瀏覽器中按兩邊縮進(jìn)的方式顯示出來，如例1-7。文字排版1.2.4預(yù)定義有時(shí)頁面中希望出現(xiàn)特定排版格式的內(nèi)容，如帶多層縮進(jìn)的程序代碼，此時(shí)使用<pre>元素來對(duì)文本進(jìn)行預(yù)處理操作，這使得瀏覽器上渲染出的內(nèi)容帶預(yù)定義格式。例1-8.文字排版1.2.5標(biāo)題頁面中經(jīng)常需要出現(xiàn)分多級(jí)標(biāo)題排版的情形，HTML語言提供了一系列對(duì)文本中的標(biāo)題進(jìn)行操作的元素：<h1>……<h6>，即一共有六級(jí)標(biāo)題的標(biāo)題元素。例1-9.文字排版1.2.6字體在HTML文檔中需用特定元素來表示特定的字體形式。<b>元素和<strong>元素用來使文本以黑體字的形式輸出；<i>元素和<em>元素用來使文本以斜體字的形式輸出；<u>元素用來使文本以下加一劃線的形式輸出。而<sub>元素則表示內(nèi)部文本是下標(biāo)，<sup>元素則表示內(nèi)部文本為上標(biāo)，<q>元素則表示內(nèi)部?jī)?nèi)容是引用別人的話語，如例1-10所示。文字排版1.3表單制作表單在Web網(wǎng)頁中用來讓訪問者輸入數(shù)據(jù)，當(dāng)提交表單時(shí)，表單中輸入的數(shù)據(jù)被打包傳遞給Web服務(wù)器端的程序進(jìn)行處理，從而使得Web服務(wù)器與用戶之間具有交互功能。表單制作1.3.1表單HTML5中使用<form>元素來創(chuàng)建一個(gè)表單，也即定義表單的開始和結(jié)束位置，在標(biāo)簽對(duì)之間的一切都屬于表單的內(nèi)容。<form>標(biāo)簽具有action、method和target屬性。例1-11.表單制作1.3.2輸入框頁面中用戶錄入信息時(shí)，需要使用<input>元素來創(chuàng)建輸入框。按input的類型可以為把表單元素分為有文本框、密碼框、單選按鈕、復(fù)選框、圖片按鈕、文件域、郵箱、網(wǎng)址、數(shù)字、滑動(dòng)條、搜索框等，用戶通過指定<input>的type屬性。詳見表1-1.例1-12，各種<input>的type屬性類型使用開發(fā)實(shí)例。表單制作<input>元素除了type屬性之外還有很多其他屬性。表1-2.各種<input>元素的屬性值用法實(shí)例如例1-13所示。

表單制作1.3.3下拉列表和選項(xiàng)用戶在固定選項(xiàng)中選擇的時(shí)候，是由<select>元素和<option>元素來共同完成的。<select>元素來創(chuàng)建一個(gè)下拉列表框或可以復(fù)選的列表框。<select>和</select>標(biāo)簽對(duì)用于<form>和</form>標(biāo)簽對(duì)之間。<select>具有multiple、name和size屬性。例1-14.表單制作1.3.4文本域頁面中經(jīng)常要錄入大段的文字，使用<textarea>元素用來創(chuàng)建一個(gè)可以輸入多行的文本域，<textarea></textarea>標(biāo)簽對(duì)用于<form>和</form>標(biāo)簽對(duì)之間。<textarea>具有name、cols和rows屬性。例1-15所示。表單制作1.3.5數(shù)據(jù)列表頁面中使用datalist元素來創(chuàng)建數(shù)據(jù)列表，使得數(shù)據(jù)列表在頁面中可以復(fù)用，是輔助表單中文本框輸入的，它本身是隱藏的，與表單文本框的list屬性綁定，即將list屬性值設(shè)置為datalist元素的id值。如例1-16。表單制作1.3.5輸出框頁面中經(jīng)常需要輸出計(jì)算結(jié)果，使用<output>元素來顯示各種不同內(nèi)容，如輸入的值、JavaScript代碼執(zhí)行后的結(jié)果等。該元素必須從屬于某個(gè)表單，或通過屬性指定某個(gè)表單。如例1-17所示。表單制作1.3.6表單綜合案例使用表單做一個(gè)用戶信息登記頁面開發(fā)實(shí)例。需求分析：使用<input>標(biāo)簽實(shí)現(xiàn)圖1-19的用戶信息登記頁面，其中<input>的類型分別有text、number、checkbox、radio等類型，還有下拉框和文本域，必要的時(shí)候使用<select>和textarea等標(biāo)簽。例1-18。表單制作1.4表格和列表頁面中經(jīng)常出現(xiàn)表格和列表，兩者都經(jīng)常用來展示數(shù)據(jù)，或者用來進(jìn)行頁面布局。表格和列表1.4.1表格表格對(duì)于制作網(wǎng)頁是很重要的，表格主要用于展示頁面數(shù)據(jù)，也有利用表格的規(guī)整性進(jìn)行布局的，現(xiàn)在很多網(wǎng)頁都是使用多重表格，主要是因?yàn)楸砀癫坏梢怨潭ㄎ谋净驁D像的輸出，而且還可以任意的進(jìn)行背景和前景顏色的設(shè)置。一個(gè)HTML表格需要用到<table>元素、<th>元素、<tr>元素、<td>元素等。表格和列表2.表頭、行、單元格<th>元素表示表頭，<th>和</th>標(biāo)簽對(duì)須置于<table>元素內(nèi)部，在瀏覽器上輸出為表格的一行。如例1-19.表格和列表3.表格應(yīng)用有時(shí)表格用于布局或者在表單中排列組件，不需要邊框，一般<table>對(duì)齊方式用居中對(duì)齊，表單和表單控件就自然美觀。具體開發(fā)實(shí)例如例1-20所示。表格和列表1.4.2列表頁面中經(jīng)常使用到的列表分為序列表和有序列表，分別用<ul>元素和<ol>元素來實(shí)現(xiàn)。1.無序列表<ul>元素用于創(chuàng)建一個(gè)含項(xiàng)目符號(hào)的列表，type屬性能夠用來設(shè)置項(xiàng)目符號(hào)的類型，type=”circle”項(xiàng)目符號(hào)為空心圓，type=”disc”項(xiàng)目符號(hào)為實(shí)心圓，type=”square”項(xiàng)目符號(hào)為為方塊，type=”none”沒有項(xiàng)目符號(hào)。<li>元素用來創(chuàng)建無序列表的列表項(xiàng)，<li></li>標(biāo)簽對(duì)只能在<ul></ul>（或者<ol></ol>）標(biāo)簽對(duì)之間使用。如例1-22。表格和列表2.有序列表<ol>元素用于創(chuàng)建一個(gè)標(biāo)有數(shù)字的列表。<li>元素也可用來創(chuàng)建有序列表的列表項(xiàng)，<li></li>放在<ol></ol>之間。如例1-23.表格和列表3.自定義列表<dl></dl>用于創(chuàng)建一個(gè)自定義列表，<dt></dt>用于創(chuàng)建列表中的上層項(xiàng)目，<dd></dd>用于創(chuàng)建列表中最下層項(xiàng)目，<dt></dt>和<dd></dd>都必須放在<dl></dl>標(biāo)簽對(duì)之間。如例1-24.表格和列表4.列表應(yīng)用列表常用于控制表單的控件擺放，在對(duì)要求分行擺放工整的表單，通常使用<ul>和<li>進(jìn)行控件布局。如例1-25.常見的導(dǎo)航條很多都是使用<ul>和<li>元素完成效果（指的是什么效果），下例就是一個(gè)使用<ul>元素和<li>元素來完成導(dǎo)航條的一個(gè)例子，并且為了把其做成水平導(dǎo)航條，設(shè)置了<a>元素的style屬性。如例1-26.表格和列表1.5超鏈接超鏈接是互聯(lián)網(wǎng)賴以生成的一個(gè)基本原理，也是HTML語言的最基本的一個(gè)功能和特色，正因?yàn)橛辛怂?，我們?duì)內(nèi)容的瀏覽才能夠具有靈活性和網(wǎng)絡(luò)性。HTML語言中以<a>元素生成超鏈接。超鏈接的動(dòng)作是點(diǎn)擊該超鏈接時(shí)，頁面的轉(zhuǎn)向的頁面或者執(zhí)行的程序，用<a>元素的屬性href來表示的。如例1-27.超鏈接1.6圖文混排頁面設(shè)計(jì)中，圖文混排情況非常常見，主要通過<img>元素的設(shè)置來完成。1.6.1圖像導(dǎo)入<img>元素向網(wǎng)頁中嵌入一幅圖像。從技術(shù)上講，<img>元素并不會(huì)在網(wǎng)頁中生成圖像，而是從網(wǎng)頁上鏈接圖像。<img>元素創(chuàng)建的是被引用圖像的占位空間。<img>元素有兩個(gè)必需的屬性：src屬性

和alt屬性。<img>標(biāo)簽的src屬性是必需的。它的值是圖像文件的URL，也就是引用該圖像的文件的絕對(duì)路徑或相對(duì)路徑。<img>元素的alt屬性指定了替代文本，用于在圖像無法顯示或者用戶禁用

溫馨提示

  • 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)論