《HTML語言框架》課件

HTML語言框架HTML語言簡介超文本標記語言HTML是超文本標記語言(HyperTextMarkupLanguage)的縮寫，它是一種用于創(chuàng)建網(wǎng)頁的標記語言。網(wǎng)頁結構HTML用于定義網(wǎng)頁的結構和內容，包括標題、段落、圖像、鏈接等元素。瀏覽器解析瀏覽器可以理解并解析HTML代碼，將網(wǎng)頁內容呈現(xiàn)給用戶。HTML發(fā)展歷程1HTML5(2014)新增語義化標簽、多媒體支持、性能優(yōu)化2HTML4(1997)完善標簽規(guī)范、新增表格、框架等功能3HTML3.2(1997)引入樣式表，提高網(wǎng)頁可讀性和可維護性4HTML2.0(1995)建立基本標簽體系，推動網(wǎng)頁快速發(fā)展5HTML1.0(1993)網(wǎng)頁誕生，開啟網(wǎng)絡信息時代HTML語法規(guī)則標簽標簽由尖括號括起來，例如``、``和``。屬性屬性在標簽中定義，用于提供有關元素的額外信息，例如`src`、`href`和`alt`。嵌套標簽可以嵌套，例如``標簽可以包含``標簽。HTML基本元素標簽(Tags)標簽是HTML語言的核心，用于定義網(wǎng)頁內容的結構和語義。屬性(Attributes)屬性是標簽的附加信息，用于提供額外的描述或控制元素的行為。文本內容(Content)文本內容是標簽之間包含的實際文本，如標題、段落和列表項。HTML常用標簽段落標簽用于創(chuàng)建段落。標題標簽用于定義標題。圖像標簽用于插入圖像。超鏈接標簽用于創(chuàng)建鏈接。HTML屬性使用1屬性名稱屬性名稱區(qū)分大小寫，如：`class`和`Class`是不同的屬性。2屬性值屬性值必須用引號括起來，可以是字符串、數(shù)字或布爾值。3屬性作用屬性可以為元素提供額外的信息，例如：`id`用于標識元素、`style`用于設置元素的樣式。HTML文檔結構1DOCTYPE聲明告訴瀏覽器使用哪個版本的HTML標準。2HTML根元素包含整個HTML文檔的所有內容。3頭部元素包含元數(shù)據(jù)信息，例如標題、字符集和樣式表。4主體元素包含用戶可見的HTML文檔內容，例如文本、圖片和鏈接。HTML文檔頭部元數(shù)據(jù)文檔標題、、日期、編碼等。鏈接文件引入CSS樣式表和JavaScript腳本。字符集指定網(wǎng)頁使用的字符編碼。HTML文檔主體主體內容主體部分包含網(wǎng)頁中所有可見內容,例如文本、圖片、視頻等.標簽結構主體內容由各種HTML標簽組成,用來描述網(wǎng)頁的結構和內容.邏輯組織主體部分通常使用標題、段落、列表等標簽來組織內容,提升可讀性.HTML標題標簽標題級別HTML提供了六個級別的標題標簽，從H1到H6，級別越高越重要。文本格式標題標簽用于標記網(wǎng)頁中的標題，使用不同的標簽可以表示不同級別的標題，例如H1代表一級標題，H2代表二級標題。語法結構標題標簽的語法結構為`標題文本`，其中``為開始標簽，``為結束標簽，標題文本是需要顯示的標題內容。HTML段落標簽作用用于定義一段文本。瀏覽器會自動在段落前后添加空格，使文本更易讀。語法<p>段落內容</p>HTML格式化標簽粗體標簽使用標簽表示粗體文本。斜體標簽使用標簽表示斜體文本。下劃線標簽使用標簽表示下劃線文本。HTML圖像標簽HTML圖像標簽使用<img>標簽，用于在網(wǎng)頁中插入圖片。<img>標簽是一個空標簽，沒有結束標簽，其屬性用來定義圖片的屬性。常見的屬性包括：src屬性指定圖片的路徑，alt屬性指定圖片的描述信息，用于圖片無法顯示時的替代文本，title屬性指定圖片的標題，用于鼠標懸停時的提示文本。width和height屬性指定圖片的寬度和高度，用于控制圖片的大小。HTML超鏈接標簽定義鏈接使用<a>標簽定義鏈接設置目標使用href屬性指定鏈接地址顯示文本鏈接文本內容HTML列表標簽無序列表使用UL標簽和LI標簽創(chuàng)建無序列表，每個列表項使用LI標簽表示。有序列表使用OL標簽和LI標簽創(chuàng)建有序列表，每個列表項使用LI標簽表示。嵌套列表可以在列表項中嵌套其他列表，創(chuàng)建多層級的列表結構。HTML表格標簽表格標簽TABLE標簽用于創(chuàng)建表格，TR標簽定義表格行，TD標簽定義表格單元格。表格屬性BORDER屬性設置表格邊框，CELLPADDING屬性設置單元格內邊距，CELLSPACING屬性設置單元格間距。表格示例使用表格標簽可以方便地展示數(shù)據(jù)，例如產(chǎn)品列表，價格信息等。HTML表單標簽1輸入框用于收集用戶輸入的文本信息，例如用戶名、密碼或地址。2按鈕用于提交表單或執(zhí)行其他操作，例如“提交”或“重置”。3下拉列表提供預定義選項供用戶選擇，例如國家、性別或產(chǎn)品類型。4復選框允許用戶選擇多個選項，例如興趣愛好或服務類型。HTML框架標簽框架標簽框架標簽（<iframe>）允許在當前網(wǎng)頁中嵌入另一個網(wǎng)頁?？蚣苡梅ㄊ褂每蚣軜撕灴梢詣?chuàng)建網(wǎng)頁內的獨立區(qū)域，展示其他內容或網(wǎng)站。HTML多媒體標簽音頻標簽使用<audio>標簽嵌入音頻文件，支持MP3、WAV等格式，并可設置播放、暫停、音量等控制。視頻標簽使用<video>標簽嵌入視頻文件，支持MP4、WebM等格式，并可設置播放、暫停、全屏等控制。HTML布局標簽DIV標簽用于將網(wǎng)頁內容分成不同的區(qū)域，方便進行樣式控制。SPAN標簽用于將網(wǎng)頁內容的某些部分進行標記，方便進行樣式控制。TABLE標簽用于創(chuàng)建表格，方便進行數(shù)據(jù)展示和布局。HTML樣式應用內聯(lián)樣式直接在HTML元素中使用style屬性。嵌入式樣式將樣式代碼嵌入到HTML文檔的<style>標簽中。外部樣式表將樣式代碼獨立存放在CSS文件中，然后通過<link>標簽引入HTML文檔。CSS選擇器1元素選擇器根據(jù)標簽名選擇元素，例如`p`選擇所有段落。2ID選擇器根據(jù)元素的id屬性選擇元素，例如`#header`選擇id為`header`的元素。3類選擇器根據(jù)元素的class屬性選擇元素，例如`.important`選擇所有class為`important`的元素。4后代選擇器選擇父元素內部的所有子孫元素，例如`divp`選擇所有`div`元素內部的`p`元素。CSS文本樣式字體系列選擇適當?shù)淖煮w系列可以提升文本的可讀性和視覺效果。字體大小根據(jù)內容和頁面布局調整字體大小，確保文本清晰易讀。字體顏色使用顏色來強調重點內容，并保持一致性。字體粗細通過設置粗細來突出重要信息，并保持視覺平衡。CSS字體樣式字體系列選擇不同的字體系列，例如"TimesNewRoman"、"Arial"、"Helvetica"等，來改變文本的外觀和風格。字體大小使用"font-size"屬性來設置字體的大小，例如"12px"、"16pt"等。字體粗細通過"font-weight"屬性來控制字體的粗細，例如"normal"、"bold"、"lighter"等。字體樣式使用"font-style"屬性來指定字體的樣式，例如"normal"、"italic"、"oblique"等。CSS背景樣式背景顏色使用background-color屬性設置元素的背景顏色。例如：background-color:#FF0000;設置背景顏色為紅色。背景圖片使用background-image屬性設置元素的背景圖片。例如：background-image:url('image.jpg');設置背景圖片為image.jpg。背景重復使用background-repeat屬性設置背景圖片的重復方式。例如：background-repeat:no-repeat;設置背景圖片不重復。背景位置使用background-position屬性設置背景圖片的位置。例如：background-position:center;設置背景圖片居中顯示。CSS盒模型內容區(qū)內容區(qū)是盒模型的最內層，包含元素的實際內容，例如文本、圖片等。內邊距內邊距是內容區(qū)與邊框之間的空白區(qū)域，用于控制內容與邊框之間的距離。邊框邊框是圍繞內容區(qū)和內邊距的線，用于定義元素的外觀。外邊距外邊距是邊框與其他元素之間的空白區(qū)域，用于控制元素之間的間隔。CSS定位1靜態(tài)定位默認定位方式，不影響元素的布局。2相對定位相對于元素本身的位置進行偏移。3絕對定位相對于最近的祖先元素進行定位。4固定定位相對于瀏覽器窗口進行定位。CSS浮動布局控制CSS浮動允許元素脫離文檔流，控制其在頁面上的位置。文本環(huán)繞浮動元素可以使文本環(huán)繞在周圍，創(chuàng)造出靈活的版式設計。多列布局通過浮動，可以輕松實現(xiàn)多列布局，并將元素排列在不同的列中。CSS實例演示將學習到的