HTML技術(shù)
HTML（Hyper Text Markup Language）即超文本標(biāo)記語(yǔ)言圆兵，是用來(lái)編寫網(wǎng)頁(yè)文件的標(biāo)準(zhǔn)，定義了一組標(biāo)記（tag枢贿，也稱標(biāo)簽）用來(lái)描述Web文檔數(shù)據(jù)殉农。
-
網(wǎng)頁(yè)內(nèi)容包含：HTML代碼、CSS代碼局荚、JavaScript代碼等內(nèi)容超凳。
HTML代碼：用于展示需要顯示的數(shù)據(jù)
CSS代碼：使顯示的數(shù)據(jù)更好看
JavaScript代碼：使整個(gè)頁(yè)面顯示的數(shù)據(jù)具有動(dòng)畫效果
-
網(wǎng)頁(yè)根據(jù)內(nèi)容是否改變分為：靜態(tài)頁(yè)面、動(dòng)態(tài)頁(yè)面
靜態(tài)頁(yè)面：編寫之后在瀏覽器不再改變的網(wǎng)頁(yè)耀态。HTML就是用于編寫靜態(tài)網(wǎng)頁(yè)的轮傍。
動(dòng)態(tài)網(wǎng)頁(yè)：會(huì)根據(jù)不同的情況展示不同的內(nèi)容。例如:登錄成功后右上角顯示用戶名茫陆。
-
HTML語(yǔ)言特點(diǎn)
HTML文件不需要編譯金麸，直接使用留言器閱讀
HTML文件的擴(kuò)展名是*.html或 *.html
-
HTML結(jié)都是由標(biāo)簽組成
標(biāo)簽名預(yù)先定義好的，只需要了解功能
標(biāo)簽名不區(qū)分大小寫
通常由開始標(biāo)簽和結(jié)束標(biāo)簽組成簿盅。例如：<a></a>
如果沒有結(jié)束標(biāo)簽挥下，建議以/結(jié)尾揍魂。例如：<img/>
HTML結(jié)構(gòu)包括兩部分：頭head和體body
-
常用標(biāo)簽
表格標(biāo)簽<table>
-
表單標(biāo)簽<form>
<form name="表單名稱" method="提交方法" action="處理程序">各項(xiàng)表單域</form> -
輸入域標(biāo)簽<input>
- type屬性可取值：text（文本）、radio（單選）棚瘟、checkbox（多選）现斋、hidden（隱藏輸入界面）、password（密碼*回顯）偎蘸、file（文件上傳）庄蹋、email、url迷雪、date（日期或時(shí)間） pickers限书、search（搜索）、submit（提交）章咧、reset（重置）
<input type="類型" name="輸入項(xiàng)名稱" value="輸入項(xiàng)值"/> -
下拉列表標(biāo)簽<select>和選項(xiàng)標(biāo)簽<option>
<select name="名稱"> <option value="value1">選項(xiàng)1</option> <option value="value2">選項(xiàng)2</option> ... </select> -
文本域標(biāo)簽<textarea>
<textarea rows="行數(shù)" cols="列數(shù)" name="名稱">文本內(nèi)容</textarea> -
塊標(biāo)簽<div>
<div position=absolute|relative visibility=visible|hidden|inherit top="像素" right="像素" bottom="像素" margin="像素" height="像素" width="像素">文本塊</div> -
超鏈接標(biāo)簽<a>
- target屬性指打開目標(biāo)頁(yè)面方式倦西，共_blank（新瀏覽器打開頁(yè)面）、_self（當(dāng)前瀏覽器打開頁(yè)面）赁严、_parent扰柠、_top、framename五種疼约。默認(rèn)為_self卤档。
<a href="目標(biāo)頁(yè)面" target="打開方式">超鏈接名稱或圖片</a>
CSS
-
CSS樣式表的定義
標(biāo)記選擇器——通過HTML標(biāo)簽定義樣式表
類別選擇器——使用class定義樣式表
ID選擇器——使用id定義樣式表
-
樣式表的使用
- 行內(nèi)式（不需要定義選擇器）：利用style屬性直接為元素設(shè)置樣表，只對(duì)當(dāng)前的標(biāo)簽起作用程剥。
<p style="color:#000000;font-style:italic;">正文內(nèi)容</p>內(nèi)嵌式:先定義有關(guān)選擇器劝枣，再使用。
鏈接式：將定義好的CSS單獨(dú)放到一個(gè)以.css為擴(kuò)展名的文件中倡缠，再使用<link>標(biāo)簽鏈接到要使用的網(wǎng)頁(yè)中哨免，在<head></head>之間。
<link href=".css文件路徑" type="text/css" rel="stylesheet"> -
CSS常用屬性
- 字體屬性
屬性名 | 屬性含義 | 屬性值
---|---|---
font-family | 字體 | 取值（如“宋體”）
font-size | 字體大小 | 取值單位：pt（點(diǎn)數(shù)）,如12pt
font-style | 字體風(fēng)格 | normal（普通昙沦，默認(rèn)）琢唾，italic斜體，oblique中間狀態(tài)
font-weight | 字體加粗 | normal（默認(rèn)）盾饮，bold（一般）采桃，bolder（重），lighter（輕）丘损，number：100-900之間
font | 字體復(fù)合屬性 | 用來(lái)簡(jiǎn)化CSS代碼普办，可以為以上所有屬性值，之間用空格分開
- **顏色背景屬性**
屬性名 | 屬性含義 | 屬性值
---|---|---
color | 顏色 | 顏色值是英文名稱或十六進(jìn)制RGB值徘钥，如red為#ff000
background-color | 背景顏色 | 同color屬性
background-image | 背景圖像 | none：不用背景衔蹲；url：圖像地址
background-position | 背景圖片位置 | top、left、right舆驶、bottom橱健、center等
background |背景復(fù)合屬性 | 用來(lái)簡(jiǎn)化CSS代碼，可以為以上所有屬性值沙廉，之間用空格分開
- **文本段落屬性**
屬性名 | 屬性含義 | 屬性值
---|---|---
text-decoration | 文字屬性 | none拘荡，underline：下劃線，overline：上劃線撬陵，line-through：刪除線珊皿，blink：文字閃爍
vertical-align | 垂直對(duì)齊 | baseline、super巨税、sub蟋定、top、text-top草添、middle溢吻、text-bottom
text-align | 水平對(duì)齊 | left，right果元，center，justify：兩端對(duì)齊
text-indent | 文本縮進(jìn) | 長(zhǎng)度或百分比
line-height | 文本行高 | 長(zhǎng)度或百分比
white-space | 處理空白 | normal：將連續(xù)的多個(gè)空格合并犀盟，nowrap：強(qiáng)制在同一行內(nèi)顯示所有文本