HTML:htper text markup language超文本標(biāo)記(標(biāo)簽)語言
由各種標(biāo)簽組成,用來制作網(wǎng)頁(yè),告訴瀏覽器如何顯示頁(yè)面
w3c:world wide web consortium萬維網(wǎng)聯(lián)盟,制定web技術(shù)相關(guān)標(biāo)準(zhǔn)和規(guī)范的組織,HTML技術(shù)hi由w3c制定的標(biāo)準(zhǔn)
兩個(gè)版本:HTML4.0.1、HTML5.0-----通常H5
官網(wǎng):http://www.W3shcool.com.cn
HTML文檔是以.html或.htm結(jié)尾
記事本notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等
使用步驟:
使用技巧:
常見的瀏覽器:IE瀏覽器微軟、chrome谷歌瀏覽器、fifirefox火狐、safari蘋果
瀏覽器的作用是讀取html文件,并以網(wǎng)頁(yè)的形式來顯示
瀏覽器不會(huì)直接顯示html標(biāo)簽,而是使用標(biāo)簽來解釋網(wǎng)頁(yè)的內(nèi)容
一個(gè)完整的html標(biāo)簽的組成:
<標(biāo)簽名 屬性名="屬性值">內(nèi)容</標(biāo)簽名>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)簽</title>
</head>
<body bgcolor="red" text="blue">
html從入門到精通!
</body>
</html>
12345678910
屬性值要用雙撇號(hào)括起來,一般用雙引號(hào)
根據(jù)標(biāo)簽是否關(guān)閉,分為,關(guān)閉型和非關(guān)閉型
<html></html>
<head></head>
<title></title>
非關(guān)閉型:沒有結(jié)束標(biāo)簽
<meta>
<br>
<h1>....<h6>
根據(jù)標(biāo)簽是否獨(dú)占一行,分為塊級(jí)標(biāo)簽和行級(jí)標(biāo)簽
塊級(jí)標(biāo)簽:顯示為塊狀,獨(dú)占一行
<h1>大家好</h1>
<hr>
行級(jí)標(biāo)簽:在行內(nèi)顯示,可與其他內(nèi)容在同一行顯示
<span></span>
注釋在瀏覽器中不會(huì)顯示,是用來標(biāo)注解釋html語句,但通過查看源代碼的方式可以看到
語法:
<--注釋內(nèi)容-->
也稱為特殊字符,用于顯示一些特殊符號(hào),如<>&空格等
語法:
<&實(shí)體字符的名稱>
在html文檔的第一行,使用<!DOCTYPE html>
聲明HTML文檔的類型用來告訴瀏覽器頁(yè)面的文檔嘞型,用來制定html版本的規(guī)范
目前基本上最常用的html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
12345678910
1.基本標(biāo)簽
1.1 有序列表
ol:ordered listli:list item默認(rèn)使用阿拉伯?dāng)?shù)字、從1開始標(biāo)記,可以通過屬性進(jìn)行修改
· type屬性:設(shè)置列表的符號(hào)標(biāo)記、取值;數(shù)字1(默認(rèn))、字母(a或A)、羅馬數(shù)字(i或I) · start屬性:設(shè)置起始值,值必須是數(shù)字
1.2 無序列表
ul:unodered list
li:list item
默認(rèn)情況下使用實(shí)心圓表作為符號(hào)標(biāo)記,可以通過屬性進(jìn)行修改
· type屬性:設(shè)置列表的符號(hào)標(biāo)記、取值:disc實(shí)心圓(默認(rèn))、circle空心圓、square正方形、none不 顯示項(xiàng)目符號(hào)
1.3 定義列表
dl:definition list
dt:definition title
dd:definition description
1.4 水平線標(biāo)簽
hr:horizontal
常用屬性:
· color:顏色
兩種方式:
顏色名稱:如red、green、blue、white、black、pink、orange等
16進(jìn)制的RGB表示法:Red、Green、Blue用法:#RRGGBB 每種顏色的取值范值0-255,轉(zhuǎn)換為16 進(jìn)制00-FF
如: #FF0000 紅色 #00FF00綠色 #0000FF藍(lán)色 #FFFFFF白色、#CCCCCC #FF7300桔色
· size:粗細(xì),數(shù)值
· width寬度
兩種寫法:
? 像素:絕對(duì)值(固定值)
? 百分比:相對(duì)值,相對(duì)于水平線標(biāo)簽所在父容器寬度的百分比
· align對(duì)齊
? 取值:center居中 left right
1.5圖像標(biāo)簽
img:image
常見的圖片格式:.jpg .png .gif .bmp
常見的屬性:
· src:source指定圖片的路徑(來源),必選叁數(shù)
如果圖片與html源代碼在同一個(gè)文件夾中,可以直接在src中寫圖片名稱即可
習(xí)慣上,我們會(huì)將多個(gè)圖片與html代碼文檔分別放在同一個(gè)文件夾project中的不同目錄下,此時(shí)需要 在src中指定圖片的路徑為相對(duì)路徑
路徑的分類:
? · 相對(duì)路徑
? 表示: ./當(dāng)前路徑
…/當(dāng)前位置的上一級(jí)文件夾
? 提示:…/image
? · alt:當(dāng)圖片無法顯示時(shí)顯示的提示信息
? · title:當(dāng)鼠標(biāo)放到圖片上時(shí)顯示的提示信息
? · width和 height:設(shè)置圖片的寬度和高度
默認(rèn)圖片以原始尺寸顯示
? 如果只設(shè)置其中一個(gè),則另一個(gè)會(huì)按比例縮放
? 如果同時(shí)設(shè)置寬和高,可能導(dǎo)致圖片變形
? 兩種寫法:
? 像素:絕對(duì)值(固定值)
? 百分比:相對(duì)值,相對(duì)于父容器的尺寸的百分比
2.其他標(biāo)簽
為了更好語義化
3.頭部標(biāo)簽
· meta定義網(wǎng)頁(yè)的摘要信息,如字符編碼,關(guān)鍵詞,描述,作者等
· title定義網(wǎng)頁(yè)的標(biāo)題
· style定義內(nèi)容css樣式
· link引用外部css樣式
· script定義或引用腳本
· base定義基礎(chǔ)路徑
默認(rèn)以當(dāng)前頁(yè)面文件所在的位置為相對(duì)路徑參照
4.標(biāo)簽嵌套
一個(gè)標(biāo)簽中嵌套另外一個(gè)標(biāo)簽
標(biāo)簽不能亂嵌套
瀏覽器渲染后顯示的頁(yè)面代碼與編碼時(shí)有所不同
chrome瀏覽器提供的開發(fā)工具:幫助開發(fā)人員查看和調(diào)試頁(yè)面的
如何打開:
· Elements:從瀏覽器的角度來看頁(yè)面,瀏覽器渲染頁(yè)面時(shí)內(nèi)部的結(jié)構(gòu)
· console:控制臺(tái),顯示各種警告和錯(cuò)誤信息
· network:查看網(wǎng)絡(luò)請(qǐng)求信息,瀏覽器向服務(wù)器請(qǐng)求了哪些資源,資源大小,
加載資源所消耗的時(shí)間
四、超鏈接
1.簡(jiǎn)介
使用超鏈接可以從一個(gè)頁(yè)面跳轉(zhuǎn)到另外一個(gè)頁(yè)面,實(shí)現(xiàn)頁(yè)面之間導(dǎo)航
當(dāng)鼠標(biāo)移動(dòng)到超鏈接文本或圖片時(shí),鼠標(biāo)箭頭會(huì)變成一只小手
超鏈接有三種類型:
普通鏈接/頁(yè)面間的鏈接,跳轉(zhuǎn)到另一個(gè)頁(yè)面 錨鏈接:鏈接到錨點(diǎn)(鏈接到同一個(gè)頁(yè)面的指定位置) 功能鏈接:實(shí)現(xiàn)特殊功能(發(fā)郵件,下載)
2.基本用法
使用 標(biāo)簽來創(chuàng)建超鏈接
語法格式:
常用屬性:
href:鏈接地址或路徑,鏈接地址
world
鏈接文本或圖片
1 2 3 4 5 1 target:鏈接打開的位置,取值
路徑分類:
絕對(duì)路徑 以根開始的路徑
file:///D:/software/b.html https://www.baidu.com/img/bd_logo1.png
相對(duì)路徑 相對(duì)于當(dāng)前頁(yè)面文件所在的路徑,不是以根開始的路徑 ./ 當(dāng)前路徑 …/ 當(dāng)前位置上一級(jí)目錄
3.錨鏈接
3.1簡(jiǎn)介
點(diǎn)擊鏈接后跳轉(zhuǎn)到某一個(gè)頁(yè)面的指定位置(錨點(diǎn)anchor)
錨鏈接的分類:
頁(yè)面內(nèi)的錨鏈接 頁(yè)面間的錨鏈接
3.2 頁(yè)面內(nèi)的錨鏈接
步驟:
3.3 頁(yè)面間的錨鏈接
4.功能鏈接
5.URL
5.1 簡(jiǎn)介
URL:Uniform Resource Locator 統(tǒng)一資源定位器,用來定位資源所在的位置,最常見的就是網(wǎng)址
5.2 組成
一個(gè)完整的URL由8個(gè)部分組成:
協(xié)議:prococol 如 http:超文本傳輸協(xié)議,用來訪問WEB網(wǎng)站Hyper text Transfer protocal https:更加安全的協(xié)議 SSL安全套接子層 ftp文件傳輸協(xié)議,用來訪問服務(wù)器上的文件,實(shí)現(xiàn)文件的上傳和下載File Transfer protocol file:文件協(xié)議,用來訪問本地文件 主機(jī)名hostname服務(wù)器地址或服務(wù)器Netbios名稱,如www.baidu.com ftp://10.255.254.254 端口:port位于主機(jī)名的后面,使用冒號(hào)進(jìn)行分隔 不同的協(xié)議使用不同的端口,如http使用80端口,https使用的443端口,ftp使用20和21 如果使用的是默認(rèn)端口,則端口可以省略 如果使用的不是默認(rèn)端口,則必須指定端口http://59.49.32.213:7070/ 路徑:path目標(biāo)文件所在的路徑結(jié)構(gòu),如:www.baidu.com/img/ 資源resource要訪問的目標(biāo)文件,如bd_logo1.png 查詢字符串:query string 也稱為參數(shù) 在資源后面使用?開頭的一組名稱/值
鏈接文本
鏈接文本
https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male https://www.w3school.com.cn/html/html_quotation_elements.asp file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html http://www.sxgjpx.net/ ftp://10.255.254.253/
1
1
1 2 3
4 5
名稱和值之間以=分隔,多個(gè)之間用&分隔,如:name=tom&age=2&sex=male 錨點(diǎn)anchor,在資源后面使用#開頭的文本,如#6 身份認(rèn)證authentication,指定身份信息,如:ftp://賬戶:密碼@ftp.bbshh010.com
五、表格
1.簡(jiǎn)介
表格是一個(gè)規(guī)則的行列結(jié)構(gòu),每個(gè)表格是由若干行組成,每行由若干個(gè)單元格組成
table row column
2.基本結(jié)構(gòu)
2.1 table標(biāo)簽
用來定義表格
常用屬性:
border:表格邊框 默認(rèn)為0 width/height:寬度/高度 bordercolor:邊框的顏色 align:對(duì)齊方式,取值:left(默認(rèn)) center居中 right居右 bgcolor:背景顏色 background:背景圖片 cellspacing間距:?jiǎn)卧衽c單元格之間的距離 cellpadding邊距:?jiǎn)卧裰械膬?nèi)容到邊界之間的距離
2.2 tr標(biāo)簽
用來定義行:table row
常用屬性:
align:水平對(duì)齊 取值:left(默認(rèn)) center right valign垂直對(duì)齊 取值:top center bottom bgcolor:背景顏色 background:背景圖片
2.3 td標(biāo)簽
用來定義單元格,table data
常用屬性:align、valign、bgcolor、background
注意:表格必須是由行組成,行必須由單元格來組成,數(shù)據(jù)必須放到單元格中
3.合并單元格
合并單元格也稱為單元格的跨行跨列
兩個(gè)屬性:
rowspan 設(shè)置單元格所跨的行數(shù) colspan 設(shè)置單元格所跨的列數(shù)
步驟:
六、表單
1.簡(jiǎn)介
表單是一個(gè)包含若干個(gè)表單元素的區(qū)域,用于獲取瑣類型的用戶數(shù)據(jù)
表單元素是允許用戶在表單輸入信息的元素,如文本框、密碼框、單選按鈕、復(fù)選框、下拉列表、按鈕等
2.表單結(jié)構(gòu)
2.1表單語法
1
2.2form標(biāo)簽
用來定義表單,可以包含多個(gè)表單元素
常用屬性:
action:提交數(shù)據(jù)給誰處理,即處理數(shù)據(jù)的程序,默認(rèn)為當(dāng)前頁(yè)面 method:提交數(shù)據(jù)的方式或方法,取值:get(默認(rèn)),post get和post的區(qū)別: get:以查詢字符串的形式提交,在地址欄中能看到,長(zhǎng)度有限制,不安全 post以表單數(shù)據(jù)組的形式進(jìn)行提交,在地址欄中看不到,長(zhǎng)度無限制,安全 enctype(encode type)編碼類型:提交數(shù)據(jù)的編碼,取值:application/X-www-form-urlencoded(默 認(rèn))、multipart/form-data(文件上傳)
3.表單元素
大多數(shù)的表單元素都是使用 標(biāo)簽來定義的,通過設(shè)置屬性type來定義不同的表單元素
1
3.1單行文本框
常用屬性:
·name名稱,很重要,如果沒有定義name屬性,則該表單元素的數(shù)據(jù)是無法提交的
·value初始值
·size顯示寬度
·maxlength:大字符數(shù),默認(rèn)是沒有限制
·readonly只讀:readonly=“readonly”,可簡(jiǎn)寫readonly,即只寫屬性名
·disabled禁用:disabled=“disabled”, 可簡(jiǎn)寫disabled完全禁用
表單元素被提交的兩個(gè)條件,1.有name屬性2.非disabled
3.2 單選按鈕
常用屬性:
·name名稱:多個(gè)radio的name屬性必須相同,才能實(shí)現(xiàn)互斥(單選)
·value值
·checked:是否被選中,兩種狀態(tài),選中,未選中 checked=“checked” 簡(jiǎn)寫 checked
3.3 復(fù)選框
常用屬性與單選按鈕radio類似
3.4 文件選擇器
常用屬性:
·name:名稱
·accept設(shè)置可選擇的文件類型,用來限制上傳的文件類型
使用MIME格式字符串對(duì)資源類型進(jìn)行限制
常見的MIME類型:
·純文本:text/plain text/xml text/html
· 圖像:image/png image/jpeg image/gif
4.特殊表單元素
4.1下拉列表
select常用屬性:
·name名稱
·size行數(shù),同時(shí)顯示多個(gè)選項(xiàng)
·multiple允許同時(shí)選擇多個(gè)
option常用屬性:
·value選項(xiàng)值
·selected設(shè)置默認(rèn)選中項(xiàng)
optgroup常用屬性:
·label分組的標(biāo)簽
4.2文本域
·name名稱
·rows行數(shù)
·cols列數(shù)
5、其他標(biāo)簽
5.1 label標(biāo)簽
為表單元素提供標(biāo)簽,當(dāng)選中l(wèi)abel標(biāo)簽中的文本內(nèi)容時(shí)會(huì)自動(dòng)將光標(biāo)切換到與之相關(guān)聯(lián)的表單元素。
常用屬性:
·for必須將該屬性值設(shè)置為與相關(guān)聯(lián)的表單元素的Id屬性值相同。
注:幾乎所有HTML標(biāo)簽都具有id屬性,且id值必須唯一。
5.2 button標(biāo)簽
也表示按鈕,與input按鈕類似
語法:
1按鈕文字或圖像
常用屬性:
·type按鈕的類型,取值: submit(默認(rèn))、reset、button
5.3 fieldset和legend標(biāo)簽
fieldset標(biāo)簽,對(duì)表單元素進(jìn)行分組
legend標(biāo)簽,對(duì)分組添加標(biāo)題
七、內(nèi)嵌框架
1、簡(jiǎn)介
使用iframe可以在一個(gè)頁(yè)面中引用另一個(gè)頁(yè)面,實(shí)現(xiàn)復(fù)用、靈活
2、基本用法
語法:
1
常用屬性:
· src:引用的頁(yè)面
· width/height寬度/高度 ,像素或百分比
· frameborder是否顯示邊框,取值:1(yes) 0(no)—默認(rèn)
· scrolling是否顯示滾動(dòng)條,取值:yes no auto
· name屬性 為框架定義名稱
3、在框架中打開鏈接
1
2
3鏈接的文本或圖像
八、HTML5簡(jiǎn)介
1、發(fā)展
W3C于1992年12月發(fā)布了HTML4.0.1標(biāo)準(zhǔn)
W3C于2014年10月發(fā)布了HTML5標(biāo)準(zhǔn)
2、特點(diǎn)
· 取消了過時(shí)的標(biāo)簽,如font、center等,它們僅具有展示外觀的功能
· 增加了一些更具有語義化的標(biāo)簽,如header、footer、aside等
· 增加了一些新功能標(biāo)簽,如canvas、audio、video
· 增加了一些表單控件,如email、date、time、url、search等
· 可以直接在瀏覽器中繪畫(canvas),無需flash
· 增加了本地存儲(chǔ)的支持
3、兼容性
http://caniuse.com
提供了各種瀏覽器版本對(duì)HTML5和CSS規(guī)范的支持度
九、HTML5新增內(nèi)容
1、結(jié)構(gòu)相關(guān)的標(biāo)簽
用來進(jìn)行頁(yè)面結(jié)構(gòu)布局,本身無任何特殊樣式,需要使用CSS進(jìn)行樣式設(shè)置
· article定義一個(gè)獨(dú)立的內(nèi)容,完整的文章
· section定義文檔的章節(jié)、段落
· header文章的頭部、頁(yè)眉、標(biāo)題
· footer文章的底部、頁(yè)腳、標(biāo)注
· aside定義側(cè)邊欄
· figure圖片區(qū)域
· figcaption為圖片區(qū)域定義標(biāo)題
· nav定義導(dǎo)航菜單
結(jié)構(gòu)標(biāo)簽只是表明各部分的角色,并無實(shí)際的外觀樣式,與普通div相同
2、語義相關(guān)的標(biāo)簽
2.1 mark標(biāo)簽
標(biāo)注,用來突出顯示文本,默認(rèn)添加黃色背景
2.2 time標(biāo)簽
定義日期和時(shí)間,便于搜索引擎智能查找
2.3 details和 summary標(biāo)簽
默認(rèn)顯示summary中的內(nèi)容,點(diǎn)擊后顯示details中的內(nèi)容
注:并不是所有的瀏覽器都兼容,chrome、opera支持、Firefox、IE瀏覽器不支持
2.4 meter標(biāo)簽
計(jì)數(shù)儀,表示度量
常用屬性:
· max定義大值,默認(rèn)為1
· min定義小值,默認(rèn)為0
· value定義當(dāng)前值
· high定義限定為高的值
· low定義限定為低的值
· optimum定義佳值
規(guī)則:
當(dāng)value大于high時(shí)為綠色
當(dāng)value在low與high之間時(shí)為黃色
當(dāng)value小于low時(shí)為紅色
當(dāng)value小于low時(shí)為綠色
當(dāng)value在low與high之間時(shí)為黃色
當(dāng)value大于high時(shí)為紅色
2.5 progress標(biāo)簽
進(jìn)度條,表示運(yùn)行中的進(jìn)度
常用屬性:
· value定義當(dāng)前值
· max定義完成的值
3.表單相關(guān)
3.1 新增表單元素
新增以下type類型:
· email接收郵箱
· url接收URL
· tel接收電話號(hào)碼,目前僅在移動(dòng)設(shè)備上有效
· search搜索文框
· number/range接收數(shù)字/數(shù)字滑塊,包含min,max,step屬性
· date/month/week/time/datetime日期時(shí)間選擇器,兼容性不好
· color顏色拾取
作用:
· 具有格式校驗(yàn)的功能
· 可以與移動(dòng)設(shè)備的鍵盤相關(guān)聯(lián)
3.2新增表單屬性
form標(biāo)簽的屬性:
· autocomplete是否啟動(dòng)表單的自動(dòng)完成功能, 取值:on(默認(rèn))、o?
· novalidate提交表單時(shí)不進(jìn)行校驗(yàn),默認(rèn)會(huì)進(jìn)行表單校驗(yàn)
3.3 新增表單元素的屬性
新增表單元素屬性:input/select/textarea等
· placeholder提示文字
· required是否必填
· autocomplete是否啟用該表單元素的自動(dòng)完成功能
· autofocus設(shè)置初始焦點(diǎn)元素
· pattern使用正則表達(dá)式(RegExp后面會(huì)講解),進(jìn)行數(shù)據(jù)校驗(yàn)
· list使文本元素具有下拉列表的功能,需要配合datalist和option標(biāo)簽一起使用
· form可以將表單元素寫在form標(biāo)簽外面,然后通過該屬性關(guān)聯(lián)指定的表單
4、多媒體標(biāo)簽
4.1audio標(biāo)簽
在頁(yè)面中插入音頻,不同的瀏覽器對(duì)音頻格式的支持不一樣
audio常用屬性:
· src音頻文件的來源
· controls是否顯示控制面板,默認(rèn)不顯示
· autoplay是否自動(dòng)播放,默認(rèn)不自動(dòng)播放
· loop是否循環(huán)播放
· muted是否靜音
· preload是否預(yù)加載,取值:none不預(yù)加載、auto預(yù)加載(默認(rèn))、metadata只加載元數(shù)據(jù)
如果設(shè)置了autoplay屬性,則該屬性無效
可以結(jié)合source標(biāo)簽使用,指定多個(gè)音頻文,瀏覽器會(huì)檢測(cè)并使用第一個(gè)可用的音頻文件
4.2 video標(biāo)簽
在頁(yè)面中插入視頻,不同的瀏覽器對(duì)視頻格式的支持不一樣
用法與audio標(biāo)簽基本相同,增加屬性:
· widht/height視頻播放器的寬度/高度
· poster在視頻加載前顯示的圖片
<html>
<body>
<tiele>HTML技術(shù)</tiele>
</body>
<body>
大家好,歡迎學(xué)習(xí)html技術(shù)!
</body>
</html>1234567
效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-h271e4v6-1593240920352)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例1.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)簽</title>
</head>
<body text="blue">
標(biāo)簽的組成
<br>
html從入門到精通!
<hr>
<h1>標(biāo)簽的分類</h1>
<hr>
<h2>標(biāo)簽的分類</h2>
<hr>
<h6>標(biāo)簽的分類</h6>
<hr>
<span>哈哈</span>嘿嘿
</body>
</html>1234567891011121314151617181920212223
效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-jx6zJE1P-1593240920354)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例2.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
圖書:<<HTML從入門到精通<<
<hr>
北京 上海 廣州
<hr>
在HTML中用<表示<小于號(hào)
<hr>
“HTML語言” 或 &qout;HTML語言&qout;
<hr>
版權(quán)所有? 2000-2020 高教培訓(xùn)
<hr>
×關(guān)閉符號(hào)
</body>
</html>123456789101112131415161718192021222324
效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-nuFLl3hm-1593240920355)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁(yè)2\案例\result\案例3.png)]
(剩下的下期出)
原文鏈接:https://blog.csdn.net/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html
作者:WanXuang
出處:從CSDN
們先來看一下案例:
在瀏覽器中輸入網(wǎng)址可以看到需要瀏覽的網(wǎng)頁(yè),那這個(gè)網(wǎng)頁(yè)是怎么生成的呢?那我們先了解一下什么是web(互聯(lián)網(wǎng)總稱):Web:web(World Wide Web)即全球廣域網(wǎng),也稱為萬維網(wǎng),它是一種基于超文本和HTTP的、全球性的、動(dòng)態(tài)交互的、跨平臺(tái)的分布式圖形信息系統(tǒng)。是建立在Internet上的一種網(wǎng)絡(luò)服務(wù),為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問的直觀界面,其中的文檔及超級(jí)鏈接將Internet上的信息節(jié)點(diǎn)組織成一個(gè)互為關(guān)聯(lián)的網(wǎng)狀結(jié)構(gòu)。
Web又分為Web前端和Web后端。
什么又是Web前端和Web后端呢?前端:就是在Web應(yīng)用中用戶可以看得見碰得著的東西。包括Web頁(yè)面的結(jié)構(gòu)、Web的外觀視覺表現(xiàn)以及Web層面的交互實(shí)現(xiàn)。后端:更多的是與數(shù)據(jù)庫(kù)進(jìn)行交互以處理相應(yīng)的業(yè)務(wù)邏輯。我們這里著重介紹web前端相關(guān)的知識(shí)點(diǎn)。
web前端分為網(wǎng)頁(yè)設(shè)計(jì)師、web前端開發(fā)工程師。
網(wǎng)頁(yè)設(shè)計(jì)師是對(duì)網(wǎng)頁(yè)的架構(gòu)、色彩負(fù)責(zé);網(wǎng)站得做的漂亮,客戶滿意。主要需要有美術(shù)功底,會(huì)photoshop等。
web前端開發(fā)工程師是負(fù)責(zé)交互設(shè)計(jì)的,需要和后臺(tái)程序猿進(jìn)行交互設(shè)計(jì)的配合。需要掌握的有腳本技術(shù)javascript、HTML+CSS現(xiàn)下最流行的頁(yè)面搭建技術(shù),ajax和jquery等。
我們此階段就是web前端開發(fā)工程師。
大家都上過網(wǎng),都瀏覽過網(wǎng)頁(yè),那什么是網(wǎng)站,什么又是網(wǎng)頁(yè),網(wǎng)站或者網(wǎng)頁(yè)是怎么形成的呢?
網(wǎng)站是用于展示相關(guān)內(nèi)容的網(wǎng)頁(yè)的集合。
網(wǎng)頁(yè)是網(wǎng)站中的任何一頁(yè)面,通常文件擴(kuò)展名為html、或htm ,那我們要實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)首先需要學(xué)習(xí)哪些技術(shù)呢?那就是HTML,其次是CSS,還有還javascript等一些相關(guān)的技術(shù)。
我們了解了網(wǎng)站從無到有的過程,總之就是設(shè)計(jì)要給我們一個(gè)設(shè)計(jì)好的效果,我們需要用相關(guān)技術(shù)把它生成網(wǎng)頁(yè)。那我們來學(xué)習(xí)一下如何生成吧。生成網(wǎng)頁(yè)要從以下幾方面入手學(xué)習(xí)。
√什么是HTML
√HTML的發(fā)展史
√HTML的特點(diǎn)
√HTML的基本組成單位
√HTML的基本結(jié)構(gòu)
√HTML的常用標(biāo)簽
√ HTML4.0及XHMTL1.0及HTML5的基本規(guī)范
√HTML4.0及HTML5.0的區(qū)別
√ Photoshop的基本使用
一、什么是HTML
HTML(Hyper Text Mark-up Language)即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言,是目前網(wǎng)絡(luò)上應(yīng)用最廣泛的語言,也是構(gòu)成網(wǎng)頁(yè)文檔的主要語言。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字、圖形、動(dòng)畫、聲音、表格、鏈接等。也就是說文字、圖片、表格、音視頻都被看成是文本,這些部分都是用HTML的標(biāo)簽生成的。
二、HTML的發(fā)展史
三、HTML的特點(diǎn)
1.簡(jiǎn)易性
2.可擴(kuò)展性
3.平臺(tái)無關(guān)
四、HTML的基本組成單位
HTML的基本組成單位-----標(biāo)簽。那什么是標(biāo)簽,標(biāo)簽有那些特點(diǎn)呢?我們一一介紹一下。
標(biāo)簽:“標(biāo)簽”是一些符號(hào),用來區(qū)分文檔中的不同部分 。
標(biāo)簽的分類
–單標(biāo)簽
–雙標(biāo)簽
標(biāo)簽的基本寫法
單標(biāo)簽 :某些標(biāo)簽只需單獨(dú)使用就能完整地表達(dá)意思,控制網(wǎng)頁(yè)效果,這類標(biāo)簽的語法是:
<標(biāo)簽名/>
雙標(biāo)簽:標(biāo)簽成對(duì)使用,由一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽構(gòu)成。開始標(biāo)簽告訴Web瀏覽器從此處開始執(zhí)行該標(biāo)簽所代表的功能,而結(jié)束標(biāo)簽告訴Web瀏覽器在這里結(jié)束該功能,結(jié)束標(biāo)簽的形式是在開始標(biāo)簽前加上一個(gè)斜杠。語法:
<標(biāo)簽名></標(biāo)簽名>
標(biāo)簽屬性
在單標(biāo)簽和雙標(biāo)簽的開始標(biāo)簽里,還可以包含一些屬性,以達(dá)到個(gè)性化的效果。
<標(biāo)簽 屬性=""屬性="">內(nèi)容</標(biāo)簽>
標(biāo)簽的組成
標(biāo)簽和標(biāo)簽屬性及標(biāo)簽內(nèi)容組成。
五、HTML的基本結(jié)構(gòu)
了解了以上的知識(shí)我們開學(xué)習(xí)HTML吧。應(yīng)該那里寫HTML呢?在那里運(yùn)行呢?
HTML的編輯工具 :
HTML的運(yùn)行環(huán)境:
我們可以用這么多的瀏覽器可以瀏覽頁(yè)面,每個(gè)瀏覽器對(duì)HTML代碼的解析是會(huì)有差異的地方的,那我們?cè)趯懘a的時(shí)候要兼容五大主流瀏覽器(IE、Chrome、FF、Safari 、Opera)。看看這些瀏覽器的市場(chǎng)占有率吧!
好了開始寫HTML吧!首先要先寫個(gè)HTML的基本結(jié)構(gòu)。
網(wǎng)頁(yè)的標(biāo)題、其它的說明信息及不需要在瀏覽器中顯示的內(nèi)容放在head這對(duì)標(biāo)簽中。
在瀏覽器中需要顯示的內(nèi)容放在body這對(duì)標(biāo)簽中。
另外我們?cè)谡嬲龑懢W(wǎng)頁(yè)時(shí)除了以上的標(biāo)簽之外,我們還需要添加其它的標(biāo)簽,比如文檔聲明,中文編碼聲明等,為什么加這些呢?因?yàn)槲覀兇蠹叶贾罏g覽器特別多對(duì)吧。瀏覽器對(duì)HTML的代碼解析不一樣,不加文檔聲明,不同的瀏覽器會(huì)按自己的標(biāo)準(zhǔn)去解析HTML代碼!所以我們?cè)贖TML最開始的位置加<!DOCTYPE HTML>這句話,每個(gè)瀏覽器都會(huì)按著符合標(biāo)準(zhǔn)的HTML代碼去解析,說到標(biāo)準(zhǔn),我們還要知道HTML是應(yīng)該遵循誰的標(biāo)準(zhǔn),HTML要遵循W3C標(biāo)準(zhǔn),那W3C標(biāo)準(zhǔn)又是什么呢?
W3C標(biāo)準(zhǔn):萬維網(wǎng)聯(lián)盟創(chuàng)建于1994年。到目前為止,W3C已發(fā)布了200多項(xiàng)影響深遠(yuǎn)的Web技術(shù)標(biāo)準(zhǔn)及實(shí)施指南,(W3C)標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn),而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁(yè)主要由三部分組成:結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和行為(Behavior)。
對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面:結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括HTML和XML,表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS,行為標(biāo)準(zhǔn)主要包括對(duì)象模型(如W3C DOM)、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布。
另外加中文編碼聲明,是為了瀏覽器解析中文時(shí)以簡(jiǎn)體中文形式顯示。
那中文編碼有那些呢?有UTF-8(用在網(wǎng)頁(yè)上可以統(tǒng)一頁(yè)面顯示中文簡(jiǎn)體繁體及其它語言)、GB2312(信息交換用漢字編碼字符集)等。完整的HTM基本結(jié)構(gòu)如下:
/面包理想
一轉(zhuǎn)眼已經(jīng)2018年,前端行業(yè)也風(fēng)風(fēng)雨雨地走過了10多年,網(wǎng)頁(yè)布局也從最原始的文檔變成了精彩紛呈的交互。當(dāng)我看到第四代CSS布局技術(shù)的時(shí)候,在驚嘆互聯(lián)網(wǎng)發(fā)展如此突飛猛進(jìn)的同時(shí),不禁會(huì)有一個(gè)疑問:CSS經(jīng)歷1.0到3.0的版本變遷,最終又將走向哪里?
今天我們就回顧一下CSS簡(jiǎn)史和四次布局技術(shù)的躍遷。
1.CSS簡(jiǎn)史
為什么我們需要回顧一下CSS簡(jiǎn)史呢?
1.了解過去能夠更好地預(yù)測(cè)未來,畢竟太陽底下沒有什么新鮮事。
2.相比預(yù)測(cè)未來,通過了解CSS發(fā)展演變趨勢(shì),能夠科學(xué)合理地評(píng)判CSS的發(fā)展,指導(dǎo)我們學(xué)習(xí)CSS的核心技術(shù),讓我們?cè)谟邢薜木蜁r(shí)間內(nèi)學(xué)對(duì)知識(shí),學(xué)好知識(shí)。
那是1989年的第一場(chǎng)雪,比1988年來的更早一些,伯納斯·李(Tim Berners-Lee)以超人的智慧和消耗了前額無數(shù)濃密的頭發(fā)為代價(jià)發(fā)明了World Wide Web,沒有他就沒有我們今天互聯(lián)網(wǎng)相關(guān)的工作,也就沒有了這個(gè)專欄教程,請(qǐng)?jiān)试S我代表廣大前端致以崇高的敬意。我們先一睹大神的風(fēng)采。
對(duì)互聯(lián)網(wǎng)之父,我只想對(duì)他說一句話,有一款洗發(fā)水增發(fā)效果挺好的,我一直用,你要不要試試?
互聯(lián)網(wǎng)誕生了以后,最初的網(wǎng)頁(yè)僅僅是純文本,但是隨著互聯(lián)網(wǎng)的發(fā)展,大家意識(shí)到web的原始版本根本就沒有提供一種裝飾網(wǎng)頁(yè)的方法。這就好比一個(gè)嬰兒不會(huì)穿著衣服出生一樣,孩子大了,總不能裸奔吧?這個(gè)時(shí)候兩個(gè)大神提供了解決方案Pei Yaun Wei和Andreesen。
Pei Yaun Wei說,這個(gè)好辦,我們可以給孩子穿上紙尿褲。
Pei-Yuan Wei在1991年創(chuàng)建圖形瀏覽器 ViolaWWW ,他整合了自己提出的樣式語言到自己開發(fā)的瀏覽器中,還期望自己的樣式語法最終能成為web關(guān)于樣式的官方標(biāo)準(zhǔn)。雖然這個(gè)目標(biāo)并未達(dá)到,但是他提出的樣式語法確實(shí)為其它的一些樣式語法提供了一些靈感。
Andreesen說,那玩意得換多麻煩,我給孩子畫一身衣服吧,當(dāng)然你懂的,最后Pei Yaun Wei的方案被采用了,但是我們還是看看Andreessen畫出來的情況有多亂。
與此同時(shí),Andreessen 在他開發(fā)的網(wǎng)景瀏覽器中進(jìn)行了不同的嘗試。他并沒有創(chuàng)建一種分離式的標(biāo)記語言,而是采取拓展HTML標(biāo)簽的方法來包含非標(biāo)準(zhǔn)化的HTML標(biāo)簽已達(dá)到裝飾網(wǎng)頁(yè)的目的。不幸的是,沒過多久,網(wǎng)頁(yè)就失去了所有的語義化并看起來像下面這樣混亂:
<MULTICOL COLS="3" GUTTER="25"> <P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P></MULTICOL>
最終被大家采納的語言是由Hakon Wium 在 1994年 10月提出的樣式語法。它被稱為樣式層疊表,簡(jiǎn)稱CSS,但是直到1996年的時(shí)候,CSS才演變成我們熟悉的樣子。
html { margin-left: 2cm; font-family: "Times", serif; }h1 { font-size: 24px; }
然后在1998年5月W3C發(fā)表了CSS2,緊接著一個(gè)讓我們深惡痛覺的瀏覽器誕生了!對(duì)沒錯(cuò),就是你深惡痛絕的那個(gè)萬能的IE6,2001年微軟發(fā)布了IE6,不過搞笑的是,IE6最初的出現(xiàn)確實(shí)很大程度推動(dòng)了CSS發(fā)展。那時(shí)候的網(wǎng)頁(yè)已經(jīng)變成跟現(xiàn)在很接近了。
按照常理你肯定會(huì)想,后面我就知道了,你不用說了,然后就是CSS3.0了。好吧,如果是我,我也這樣想,但是國(guó)際友人的腦回路可能跟我們不一樣,事實(shí)上,CSS3早于1999年已經(jīng)開始制訂,直到2011年6月7日,CSS 3 Color Module終于發(fā)布為W3C Recommendation。這個(gè)故事告訴我們兩件事:
1.w3c這個(gè)組織活的真夠長(zhǎng),甚至比很多讀者年齡都大。
2.不是CSS正式版發(fā)布了你才放心使用,如果等到那個(gè)時(shí)候使用,你的項(xiàng)目可能未曾綻放就枯萎了。
細(xì)心的讀者可能會(huì)問了,CSS3正式版什么時(shí)候發(fā)布啊?另外CSS4.0什么時(shí)候發(fā)布?
好吧,我只能告訴你隨緣吧……而且沒有CSS4.0了,也不會(huì)有CSS5.0了。
來我們?cè)倏纯磭?guó)際友人的腦回路:
簡(jiǎn)單地說,就是從CSS3開始,CSS規(guī)范就被拆成眾多模塊(module)單獨(dú)進(jìn)行升級(jí),或者將新需求作為一個(gè)新模塊來立項(xiàng)并進(jìn)行標(biāo)準(zhǔn)化。因此今后不會(huì)再有CSS4、CSS5這種所謂大版本號(hào)的變更,有的只是CSS某個(gè)模塊級(jí)別的躍遷。
按照CSS工作組的說法,CSS歷史上并沒有版本的概念,有的只是“級(jí)別”(level)的概念。比如,CSS3其實(shí)是CSS Level 3,CSS2是CSS Level 2,而CSS Level 1當(dāng)然就是CSS1。每個(gè)級(jí)別都以上一個(gè)級(jí)別為基礎(chǔ)。
大家可能說這個(gè)命名好亂啊,這事兒我只想跟你說,你就把CSS工作組當(dāng)成你女朋友就好了,她開心就好,她說的都是對(duì)的,她說啥就是啥……
至于我們,會(huì)用就好了。
CSS出現(xiàn)的好處就是讓結(jié)構(gòu)和表現(xiàn)分離,可以更靈活的修飾網(wǎng)頁(yè),學(xué)習(xí)也很簡(jiǎn)單。這里我更想說說它的不足。
1.CSS只有一個(gè)全局的命名空間,所以是無法避免出現(xiàn)選擇器沖突的。
2.模塊化做的不夠好,所以造成嵌套和覆蓋混亂,容易產(chǎn)生一大堆亂糟糟的樣式。
所以現(xiàn)在CSS也在向“模塊化、JS化發(fā)展”
不過客觀地說,CSS的出現(xiàn)確實(shí)是互聯(lián)網(wǎng)里程碑式的進(jìn)步。
CSS其實(shí)就做了兩件事:
1.如何布局
2.元素怎么表現(xiàn)
說直白一點(diǎn)就是兩件事,一個(gè)房子是蓋成兩室一廳還是三室兩廳,另一件事是精裝修。
這里大家就會(huì)看到如果一個(gè)房子180平米隔成1個(gè)10平米的主臥170平米的廁所,你再怎么精裝修也不會(huì)是一個(gè)宜居的房間。所以布局在CSS中是極其重要的。與CSS發(fā)展簡(jiǎn)史類似,CSS布局也經(jīng)歷了一代又一代的迭代,才成為當(dāng)前的樣子。
接下來我們就說說CSS布局簡(jiǎn)史。
2.CSS布局簡(jiǎn)史
初代table布局
在1997年的時(shí)候,David Siegel 改變了web,他自己研究出了一項(xiàng)網(wǎng)頁(yè)布局技術(shù),利用html中的table元素和gif圖片縫合在一起,創(chuàng)造了表格布局技術(shù),之后他就猶如一頭猛獸泛濫起來。
優(yōu)點(diǎn):布局容易、快捷、兼容性好
缺點(diǎn):改動(dòng)不便,需要重新調(diào)整,工作量大
由于互聯(lián)網(wǎng)網(wǎng)站越來越復(fù)雜,內(nèi)容和業(yè)務(wù)更新頻繁,所以table布局是完全不能勝任的,以至于table布局的發(fā)明人都說:
“我把炸醬和面倒在了一起,并且沒法分開它。”
不過這個(gè)真不是我杜撰出來的,原文:
David Siegel:“有人說我毀掉了Web,我回答他們,的確如此。我毀掉了Web是因?yàn)槲野亚煽肆突ㄉu混合在一起卻再也不能把它們分開。我犯下了把結(jié)構(gòu)跟表現(xiàn)混合在一起的錯(cuò)誤。”
然后第二代布局技術(shù)登場(chǎng)了,
CSS+div布局
CSS+div布局總結(jié)起來有三大優(yōu)點(diǎn),
1.省時(shí),學(xué)習(xí)容易,寫代碼也很容易,很快,效率高
2.省事,如果業(yè)務(wù)邏輯變了,改起來特別方便快捷
3.省錢,代碼量少,省帶寬,適合seo
基于這三年不難看出CSS+div布局人畜無害,人見人愛,也就不難解釋為什么被廣泛地使用成為目前主流的布局技術(shù)了。當(dāng)然了他也有缺點(diǎn):
1.需要考慮平臺(tái)兼容性,對(duì)制作人員的技能要求較高。
2.在移動(dòng)端布局顯得有些力不從心,如未知寬高float內(nèi)部元素居中、垂直水平布局、響應(yīng)式布局等方面略顯繁瑣。
基于此,第三代布局技術(shù)應(yīng)運(yùn)而生。
Flex布局
優(yōu)點(diǎn):
1.CSS3的布局方式,可以在不使用其他框架的情況下,簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局 2.移動(dòng)端布局簡(jiǎn)直太友好
缺點(diǎn):
兼容性較差,IE瀏覽器版本在9.0以上,基本要10.0 對(duì)于其他瀏覽器,要求兼容性寫法
Flex布局日漸成為移動(dòng)端主流布局技術(shù),但是它是單一維度的布局,這個(gè)我會(huì)在專欄后面講到,有時(shí)候也會(huì)捉襟見肘,所以目前出現(xiàn)了第四代的布局技術(shù):
grid布局
因?yàn)槟壳按蟛糠譃g覽器并不支持這種技術(shù),但是它代表了網(wǎng)絡(luò)發(fā)展,這里大家保持關(guān)注就好,這里我重點(diǎn)說下它為什么可以稱為第四代網(wǎng)絡(luò)布局技術(shù)。首先一個(gè)觀點(diǎn)大家先記住:
它并不會(huì)取代第三代的布局技術(shù),而是顛覆和突破。就好像Flex遠(yuǎn)比div+CSS布局更方便,但是div+CSS依然有用武之地。
我們說下它的突破之處:
1.flex對(duì)標(biāo)的是float,本質(zhì)上還是一維布局,這就跟別人開著夏利,你開奔馳都是地面上跑沒啥本質(zhì)區(qū)別一樣。但是grid升維了,grid是飛機(jī),在地面馬路這條線一維之上讓人能夠思考高度這個(gè)維度,以前是汽車一維交通工具(你只能在水平方向一個(gè)方向開),飛機(jī)是二維(能俯沖了(橫向、縱向同時(shí))),所以grid可以說是拓寬了CSS布局的維度。不排除將來會(huì)有三維布局的出現(xiàn)。到時(shí)候CSS不僅僅能控制橫向布局,縱向布局,還可以深度布局(這個(gè)要依賴于三維展示的出現(xiàn),如VR,AR三維立體的展示設(shè)備出現(xiàn))。
2.grid布局里面采用了“可視化布局(template部分,所見即所得)”,這個(gè)是顛覆了傳統(tǒng)的,寫一句代碼刷一下瀏覽器這樣的開發(fā)方式,不排除以后會(huì)出現(xiàn)代碼即效果的開發(fā)模式。比如你在一個(gè)設(shè)備上畫一個(gè)區(qū)域,然后畫輪播圖。
這種方式類似于vc++控件方式,但是更智能,也更友好。誰說不可能呢?大家不要忘了grid布局的來源是早就廢棄的table布局。說到這里我多說一句搞笑的微軟,frontpage沒火,dreamwaver火了,最早提出“canvas”概念的 VML沒火,最后html5的canvas火了,連CSS3網(wǎng)格布局也是由微軟創(chuàng)建的一個(gè)模塊 ,最后火起來居然沒人認(rèn)識(shí)它。心疼微軟一秒鐘。
說到這里大家對(duì)CSS簡(jiǎn)史和布局也有所了解了,我們總結(jié)下,通過本文你應(yīng)該學(xué)到:
(1)CSS的發(fā)展歷史。
(2)熟知布局的發(fā)展歷史,以便對(duì)未來布局技術(shù)的發(fā)展有一個(gè)客觀的判斷,來選擇是否學(xué)習(xí)。
通過本文的學(xué)習(xí)大家已經(jīng)對(duì)CSS相關(guān)基礎(chǔ)知識(shí)有所了解,接下來我們就開始真正的進(jìn)入技術(shù)的學(xué)習(xí),大家是不是迫不及待了呢?
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。