《html教程講義》課件_第1頁
《html教程講義》課件_第2頁
《html教程講義》課件_第3頁
《html教程講義》課件_第4頁
《html教程講義》課件_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

?一、HTML簡介1.1HTML的定義HTML(HyperTextMarkupLanguage,超文本標(biāo)記語言)是用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。1.2HTML的作用HTML用于描述網(wǎng)頁的結(jié)構(gòu)和內(nèi)容,使得瀏覽器能夠展示具有特定格式的文本、、圖片等。1.3HTML的發(fā)展歷程HTML1.0(1993年)HTML2.0(1995年)HTML4.01(1997年)XHTML1.0(2000年)HTML5(2014年）二、HTML文檔結(jié)構(gòu)2.1基本結(jié)構(gòu)<!DOCTYPE><><head><metacharset="UTF-8"><>文檔</></head><body><h1>一級</h1><p>段落內(nèi)容</p><!-更多的標(biāo)簽和內(nèi)容--></body></>2.2標(biāo)簽分類語義化標(biāo)簽:`<header>`、`<nav>`、`<section>`、`<article>`、`<footer>`等功能性標(biāo)簽:`<div>`、`<span>`等三、文本格式與排版3.1標(biāo)簽`<h1>`～`<h6>`:依次表示一級到六級3.2段落標(biāo)簽`<p>`:表示一個段落3.3換行與清除浮動`<br>`:表示換行`<wbr>`:表示單詞換行`<clear>`:清除浮動3.4字符實體`<>&"`:分別表示小于號、大于號、引號四、圖片與4.1圖片標(biāo)簽`<img>`:表示圖片<imgsrc="圖片地址"alt="圖片描述"width="寬度"height="高度">4.2標(biāo)簽`<a>`:表示<ahref="地址"target="_blank">文本</a>4.3錨點`<aname="錨點名稱">`:表示錨點`<ahref="錨點名稱">`:到錨點五、列表與表格5.1無序列表`<ul>`:無序列表`<li>`:列表項5.2有序列表`<ol>`:有序列表`<li>`:列表項5.3定義列表`<dl>`:定義列表`<dt>`:定義`<dd>`:定義描述5.4表格`<table>`:表格`<tr>`:表格行`<td>`:單元格`<th>`:表頭單元格六、表單與數(shù)據(jù)驗證6.1表單標(biāo)簽`<form>`:表單`<input>`:輸入框`<textarea>`:文本域`<select>`:下拉菜單`<option>`:下拉菜單選項6.2數(shù)據(jù)驗證`required`:必填字段`pattern`:正則表達(dá)式驗證`minlength`、`maxlength`:字符長度限制`type="e"、type="number"、type="":輸入類型限制七、CSS樣式7.1內(nèi)聯(lián)樣式在HTML標(biāo)簽內(nèi)使用`style`屬性添加樣式7.2內(nèi)部樣式表在`<head>`標(biāo)簽內(nèi)使用`<style>`標(biāo)簽添加樣式7.3外部樣式表使用`.css`文件作為樣式表,通過`<link>`標(biāo)簽引入7.4CSS選擇器標(biāo)簽選擇器:`h1{}`類選擇器:`.classname{}`ID選擇器:`idname{}`屬性選擇器:`[attribute="value"]{}`八、盒子模型與布局8.1盒子模型`margin`:外邊距`border`:邊框`padding`:內(nèi)邊距`width`、`height`:寬度和高度8.2布局方式標(biāo)準(zhǔn)流布局浮動布局:`float`屬性定位布局:`position`屬性彈性盒模型（Flexbox）:`display:flex;`九、響應(yīng)式設(shè)計9.1媒體查詢使用`media`查詢不同設(shè)備屏幕大小時的樣式9.2移動端布局使用百分比、視口單位(vw、vh)、rem等實現(xiàn)響應(yīng)式布局9.3圖片響應(yīng)式使用`<picture>`標(biāo)簽或`srcset`屬性實現(xiàn)圖片響應(yīng)式十、HTML5新特性10.1視頻與音頻`<video>`:視頻`<audio>`:音頻10.2畫布(Canvas)`<canvas>`:繪制圖形、動畫等10.3Web存儲`localStorage`:本地存儲`sessionStorage`:會話存儲10.4離線應(yīng)用與緩存使用`manifest`文件實現(xiàn)離線應(yīng)用10.5其他新特性`<nav>`、`<section>`、`<article>`等語義化標(biāo)簽`<inputtype="e">`、`<inputtype="number">`等新輸入類型`<dialog>`:對話框重點和難點解析HTML的基本結(jié)構(gòu)和標(biāo)簽分類文本格式與排版,如、段落、換行等圖片與的使用,包括圖片標(biāo)簽和錨點列表與表格的創(chuàng)建和應(yīng)用表單與數(shù)據(jù)驗證,如必填字段、正則表達(dá)式驗證等CSS樣式的基礎(chǔ)知識,包括內(nèi)聯(lián)樣式、內(nèi)部樣式表和外部樣式表盒子模型、布局方式以及響應(yīng)式設(shè)計的基本概念HTML5的新特性,如視頻與音頻、畫布、Web存儲等HTML5的新特性,如離線應(yīng)用、W

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論