整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
面渲染的全過程
輸入url后，先拿到html文件，html下載完以后會(huì)開始對(duì)它進(jìn)行解析
html在解析的過程中，如果文本里有外部資源鏈接，比如css、js和img時(shí)，會(huì)立即啟用其他線程下載這些靜態(tài)資源。
特殊的是當(dāng)遇到j(luò)s文件的時(shí)候，html解析會(huì)停下來，等js文件下載結(jié)束并且執(zhí)行完，再進(jìn)行html執(zhí)行。
在html解析的同時(shí)，解析器會(huì)把解析完的html轉(zhuǎn)化成DOM對(duì)象，構(gòu)建成DOM樹。
當(dāng)css下載完，css解析器開始對(duì)css解析，把css解析成css對(duì)象，把css組裝起來，構(gòu)建CSSOM樹。
DOM和CSSOM樹構(gòu)建完畢，瀏覽器根據(jù)兩棵樹建一顆渲染樹。
HTML
Hyper Text Markup Language 超文本標(biāo)記語言
html5為什么只需要寫<! DOCTYPE HTML>
答:這是w3c制定的規(guī)則,是文檔類型聲明,語義化說是告訴瀏覽器和其他開發(fā)者,這個(gè)文檔使用的是html5標(biāo)準(zhǔn)。
2.html5新特性有哪些
答:header、footer、aside、nav、video、audio、canvas、localStorage、sessionStorage、cookie、output、datalist、keygen、data、time、email、url、search···
< img > 的 title 和 alt 有什么區(qū)別？
答： alt 是圖片加載失敗時(shí)，顯示在網(wǎng)頁上的替代文字；
title 是鼠標(biāo)放上面時(shí)顯示的文字。
這些都是表面上的區(qū)別，alt是img必要的屬性，而title不是。
XHTML和HTML有什么區(qū)別
答:XHTML:
1)所有的標(biāo)記都必須有一個(gè)相應(yīng)的結(jié)束標(biāo)記;
2)所有標(biāo)簽的元素和屬性的名字都必須使用小寫;
3)所有的XHTML標(biāo)記都必須合理嵌套;
4)所有的屬性都必須用引號(hào)""括起來;
5)XHTML文檔必須擁有根元素。
如何在 html 頁面上展示 < div> < /div> 這幾個(gè)字符
答：使用忽略HTML標(biāo)記< xmp>，
如：<p><xmp><div></div></xmp></p>
什么是漸進(jìn)式渲染
答:指打開頁面先加載首頁顯示內(nèi)容;,之后再隨著時(shí)間或者滾動(dòng)頁面進(jìn)行后面的加載。
前端頁面有哪三層構(gòu)成,分別是什么?作用是什么?
結(jié)構(gòu)標(biāo)準(zhǔn):制作網(wǎng)頁按照html標(biāo)準(zhǔn)結(jié)構(gòu)寫網(wǎng)頁;
表現(xiàn)標(biāo)準(zhǔn):用來美化網(wǎng)頁CSS;
行為標(biāo)準(zhǔn):用來實(shí)現(xiàn)網(wǎng)頁中用戶的動(dòng)作處理JavaScript。
瀏覽器的內(nèi)核有哪些
答:
Trident(IE內(nèi)核):IE、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等;
Gecko(firefox):火狐瀏覽器
webkit(Safari):Apple
Blink:谷歌瀏覽器
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。
什么是語義化的HTML
答:就是寫出的HTML代碼符合內(nèi)容的結(jié)構(gòu),選擇合適的標(biāo)簽,能夠便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼,比如頁面結(jié)構(gòu)寫頂部用header標(biāo)簽,導(dǎo)航有nav標(biāo)簽等,同時(shí)也讓瀏覽器的爬蟲和機(jī)器更好的解析。
實(shí)體字符
CSS
Cascading Style Sheets 層疊樣式表
特性
層疊性、繼承性、優(yōu)先級(jí)
塊級(jí)元素
特點(diǎn):塊級(jí)獨(dú)占一行;可以設(shè)置寬高;如果沒設(shè)置寬度,那么其寬度等于父元素的寬度。
比如:div,p,ul,ol,dl,li,dd,h1-h6
轉(zhuǎn)換:display:block;
行內(nèi)元素
特點(diǎn):都在一行顯示,不能設(shè)置寬度和高度。
比如:a b em font i img input br label span small select textarea
轉(zhuǎn)換:display:inline
行內(nèi)塊元素
特點(diǎn):都在一行上顯示,可以設(shè)置寬度和高度。
比如:
轉(zhuǎn)換:display:inline-block;
選擇器優(yōu)先級(jí)
!important>行內(nèi)樣式>id選擇器(#)>類選擇器(class)>標(biāo)簽選擇器>通配符選擇器
CSS3新特性有哪些
答:顏色--RGBA、文字陰影--text-shadow、邊框圓角--border-radius、邊框陰影--box-shadow、盒子模型--box-sizing、設(shè)置背景圖片的尺寸--background-size、漸變--linear-gradient、過渡動(dòng)畫--transition、媒體查詢多欄布局、伸縮布局、transform:translate···
清除浮動(dòng)的幾種方式
1)父級(jí)div設(shè)置height;
2)結(jié)尾處加空div標(biāo)簽clear:both;
3)父級(jí)div定義偽類:after和zoom;
4)父級(jí)div定義overflow:hidden或者auto;
link和@import有什么區(qū)別
@import引用的css會(huì)等到頁面被加載完畢后再加載，link在頁面加載時(shí)會(huì)同時(shí)被加載。
link是html標(biāo)簽，無兼容問題。link方式的樣式權(quán)重高于@import
transition和animation的區(qū)別
他們都是隨時(shí)間改變?cè)氐膶傩灾担饕獏^(qū)別是transition需要觸發(fā)一個(gè)事件才能改變屬性，而animation不需觸發(fā)任何事件就會(huì)隨時(shí)間改變屬性值。
meta viewport標(biāo)簽相關(guān)
<!DOCTYPE html> H5標(biāo)準(zhǔn)聲明，使用 HTML5 doctype，不區(qū)分大小寫 <head lang=”en”> 標(biāo)準(zhǔn)的 lang 屬性寫法 <meta charset=’utf-8′> 聲明文檔使用的字符編碼,防亂碼 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 優(yōu)先使用 IE 最新版本和 Chrome <meta name=”description” content=”不超過150個(gè)字符”/> 頁面描述 <meta name=”keywords” content=””/> 頁面關(guān)鍵詞 <meta name=”author” content=”name, email@gmail.com”/> 網(wǎng)頁作者 <meta name=”robots” content=”index,follow”/> 搜索引擎抓取 <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 為移動(dòng)設(shè)備添加 viewport <meta name=”apple-mobile-web-app-title” content=”標(biāo)題”> iOS 設(shè)備 begin <meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的標(biāo)題（iOS 6 新增） 是否啟用 WebApp 全屏模式，刪除蘋果默認(rèn)的工具欄和菜單欄 <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> <meta name=”format-detection” content=”telphone=no, email=no”/> 設(shè)置蘋果工具欄顏色 <meta name=”renderer” content=”webkit”> 啟用360瀏覽器的極速模式(webkit) <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用兼容模式 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不讓百度轉(zhuǎn)碼 <meta name=”HandheldFriendly” content=”true”> 針對(duì)手持設(shè)備優(yōu)化，主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器，比如黑莓 <meta name=”MobileOptimized” content=”320″> 微軟的老式瀏覽器 <meta name=”screen-orientation” content=”portrait”> uc強(qiáng)制豎屏 <meta name=”x5-orientation” content=”portrait”> QQ強(qiáng)制豎屏 <meta name=”full-screen” content=”yes”> UC強(qiáng)制全屏 <meta name=”x5-fullscreen” content=”true”> QQ強(qiáng)制全屏 <meta name=”browsermode” content=”application”> UC應(yīng)用模式 <meta name=”x5-page-mode” content=”app”> QQ應(yīng)用模式 <meta name=”msapplication-tap-highlight” content=”no”> windows phone 點(diǎn)擊無高光 設(shè)置頁面不緩存 <meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″>
< meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
詳細(xì)的描述一下position
1)position:absolute--絕對(duì)定位的元素,相對(duì)于其父元素進(jìn)行定位。
2)position:relative--生成相對(duì)定位的元素,相對(duì)于其正常位置進(jìn)行定位。
3)position:fixed--固定定位,相對(duì)于瀏覽器窗口進(jìn)行定位。
4)position:static--默認(rèn)值,沒有定位,元素在正常的文檔流
JavaScript
JavaScript的組成
1)ECMAScript:是JS的核心,描述了語言的基本語法和數(shù)據(jù)類型,是JS的語法規(guī)范
2)BOM:瀏覽器對(duì)象模型,通過BOM可以操作瀏覽器窗口,如:彈出框
3)DOM:文檔對(duì)象模型,一套操作頁面元素的API
JavaScript的輸入、輸出方式
輸出:
1)alert() --彈出一個(gè)提示框(提示/警告文字)
2)document.write() --會(huì)將輸入的內(nèi)容放置到body標(biāo)簽內(nèi)部,作為html內(nèi)容
3)console.log() --代碼后臺(tái)
輸入:
prompt('提示文字', 默認(rèn)值);
對(duì)象的創(chuàng)建方式
1)對(duì)象字面量
var o={
name: 'jay',
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};2)new Object()創(chuàng)建對(duì)象
var person=new Object();
person.name='Jolin';
person.age=16;
person.job='actor';
person.sayHi=function() {
console.log('Hello,everyBody');
}3)工廠函數(shù)創(chuàng)建對(duì)象
function createPerson(name, age, job) {
var person=new Object();
person.name=name;
person.age=age;
person.job=job;
person.sayHi=function(){
console.log('Hello,everybody');
}
return person;
}
var p1=createPerson('Jay', 18, 'actor');4)自定義構(gòu)造函數(shù)
function Person(name, age, job){
this.name=name; //this是關(guān)鍵字，這里代表“自己”，“當(dāng)前對(duì)象”
this.age=age;
this.job=job;
this.sayHi=function(){
console.log('Hello,everybody');
}
}
var p1=new Person('Jay', 18, 'actor');new關(guān)鍵字運(yùn)行機(jī)制
1)new會(huì)在內(nèi)存中創(chuàng)建一個(gè)新的空對(duì)象
2)new會(huì)讓this指向這個(gè)新的對(duì)象
3)執(zhí)行構(gòu)造函數(shù) 目的是給這個(gè)新對(duì)象加屬性和方法
4)new會(huì)返回這個(gè)新對(duì)象
this的使用場(chǎng)景
1)普通函數(shù)調(diào)用時(shí),指向全局window
2)構(gòu)造函數(shù)調(diào)用時(shí),指向?qū)嵗龑?duì)象
3)對(duì)象方法調(diào)用時(shí),指向該方法的對(duì)象
4)事件綁定時(shí),指向綁定事件的對(duì)象
5)箭頭函數(shù)中this指向外部函數(shù)作用域的this
==和===有什么區(qū)別
=是賦值
==（相等）返回一個(gè)布爾值，相等返回true，不相等返回false，允許不同數(shù)據(jù)類型的轉(zhuǎn)換。
===（全等）只要數(shù)據(jù)類型不一樣，就會(huì)返回false。
JavaScript內(nèi)置對(duì)象之Math(求絕對(duì)值,取整,隨機(jī)數(shù))
Math.random() 生成一個(gè)0-1之間的隨機(jī)小數(shù)
Math.floor()/Math.ceil() 向下取整/向上取整
Math.round() 取整,四舍五入
Math.abs() 絕對(duì)值
Math.max()/Math.min() 求最大值/最小值
Math.sin()/Math.cos() 正弦/余弦
Math.pow/Math.sqrt() 求指數(shù)次冪/求平方根
JavaScript內(nèi)置對(duì)象之Date(處理時(shí)間和日期,基于1970年1月1日)
getTime() 返回毫秒數(shù)和valueOf()結(jié)果一樣
getMilliseconds()
getSeconds() 返回0-59
getMinutes() 返回0-59
getHours() 返回0-23
getDay() 返回星期幾 0代表是周日 6代表是周六
getDate() 返回當(dāng)前月的第幾天
getMonth() 返回月份,從0開始
getFullYear() 返回4位的年份 如 2016
JavaScript內(nèi)置對(duì)象之Array
push()/pop() 加入數(shù)組的末端/刪除數(shù)組的最后一項(xiàng)
unshift()/shift() 在數(shù)組最前面插入項(xiàng)/刪除數(shù)組中前面項(xiàng)
reverse() 翻轉(zhuǎn)數(shù)組
sort() 根據(jù)字符,從小到大排序
slice() 從當(dāng)前數(shù)組中截取一個(gè)新的數(shù)組，不影響原來的數(shù)組，參數(shù)start從0開始,end從1開始
splice() 刪除或替換當(dāng)前數(shù)組的某些項(xiàng)目，參數(shù)start, deleteCount, options(要替換的項(xiàng)目)
indexOf() 索引位置
forEach() 遍歷數(shù)組不返回值,返回參數(shù)
join() 把數(shù)組中的所有元素放入一個(gè)字符串
JavaScript內(nèi)置對(duì)象之String
concat() 拼接字符串,等效于'+','+'更常用
slice(start,end) 從start位置開始,截取到end位置,end取不到
substring() 方法同slice
substr(start,length) 從start位置開始,截取到length個(gè)字符,如果沒有l(wèi)ength參數(shù),則截取到最后
toUpperCase() 轉(zhuǎn)換為大寫
toLowerCase() 轉(zhuǎn)換為小寫
search() 查找,返回找到的位置
replace() 替換,注意:一次只能替換一個(gè)
split() 將字符串以指定的字符分割為數(shù)組
JavaScript中動(dòng)態(tài)操作DOM的方法
createElement 創(chuàng)建一個(gè)元素節(jié)點(diǎn)
creatTextNode 創(chuàng)建一個(gè)文本節(jié)點(diǎn)
appendChild 向元素的末尾追加一個(gè)節(jié)點(diǎn)
inserBefore(a,b) 意思是a節(jié)點(diǎn)會(huì)插入b節(jié)點(diǎn)的前面
removeChild 刪除一個(gè)子節(jié)點(diǎn)
cloneChild 復(fù)制節(jié)點(diǎn),接收布爾值參數(shù),true表示深復(fù)制(復(fù)制節(jié)點(diǎn)及其所有子節(jié)點(diǎn)),false表示淺復(fù)制(復(fù)制節(jié)點(diǎn)本身,不復(fù)制子節(jié)點(diǎn))
replaceChild 替換節(jié)點(diǎn)
document.getElementsByTagName() 通過標(biāo)簽名稱查找節(jié)點(diǎn)
document.getElementsByName() 通過元素的Name屬性的值查找節(jié)點(diǎn)
document.getElementById() 通過元素ID查找節(jié)點(diǎn)
事件的三個(gè)階段,如何阻止事件冒泡
答:目標(biāo)、捕獲、冒泡
event.stopPropagation
call,apply,bind有什么區(qū)別
三者都是用來改變函數(shù)的this對(duì)象指向，調(diào)用其方法改變函數(shù)執(zhí)行的上下文，從而改變this指向。
call()和apply()的第一個(gè)參數(shù)相同,是指定的對(duì)象,這個(gè)對(duì)象是該函數(shù)的執(zhí)行上下文
call()可以接受多個(gè)參數(shù)，在第一個(gè)參數(shù)之后的后續(xù)所有參數(shù)就是傳入該函數(shù)的值
apply()只有兩個(gè)參數(shù),第一個(gè)是對(duì)象,第二個(gè)是數(shù)組
bind()不會(huì)立即執(zhí)行該函數(shù),他的參數(shù)和call()相同
閉包函數(shù)
1.什么是閉包?
當(dāng)函數(shù)執(zhí)行時(shí),首先會(huì)形成一個(gè)私有作用域,這個(gè)私有作用域保護(hù)私有變量不收外界的干擾,我們把這個(gè)體制稱為閉包。閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中變量的函數(shù)。
2.閉包優(yōu)點(diǎn):
1)保護(hù)函數(shù)內(nèi)的變量安全,加強(qiáng)了封裝性;
2)在內(nèi)存中維持一個(gè)變量,方便調(diào)用上下文的局部變量;
3.閉包缺點(diǎn):
1)內(nèi)存消耗;
2)濫用閉包函數(shù)會(huì)造成內(nèi)存泄露,不能被垃圾回收機(jī)制所回收。
遞歸函數(shù)
1.什么是遞歸函數(shù)
答:遞歸函數(shù)即自調(diào)用函數(shù),在函數(shù)體內(nèi)直接或者調(diào)用自己本身函數(shù)
2.遞歸函數(shù)的優(yōu)點(diǎn)
答:代碼更加簡(jiǎn)潔清晰,可讀性更好
3.遞歸函數(shù)的缺點(diǎn)
答:大量使用遞歸函數(shù),會(huì)消耗空間,造成系統(tǒng)卡頓,非必要時(shí)建議不要使用遞歸函數(shù)。
面向?qū)ο蠛兔嫦蜻^程
答:面向?qū)ο?開發(fā)過程中分析大體步驟,找到輔助的開發(fā)工具
面向過程:開發(fā)過程中專注于每個(gè)功能的具體實(shí)現(xiàn)方式
面向?qū)ο蟮娜齻€(gè)特征
封裝性:多個(gè)相同操作的功能封裝到一個(gè)對(duì)象中
繼承性:讓功能復(fù)用
多態(tài)性:增強(qiáng)功能使用性靈活性
正則表達(dá)式
答:對(duì)字符串進(jìn)行操作的一組工具,作用:匹配,替換,提取功能
/^$/ 這個(gè)是個(gè)通用的格式。
^ 匹配輸入字符串的開始位置；$匹配輸入字符串的結(jié)束位置
*匹配前面的子表達(dá)式零次或多次；
+匹配前面的子表達(dá)式一次或多次；
?匹配前面的子表達(dá)式零次或一次；
\d 匹配一個(gè)數(shù)字字符，等價(jià)于[0-9]
校驗(yàn)11位手機(jī)號(hào)案例:
function checkPhone(){
var phone=document.getElementById('phone').value;
if(!(/^1[35678]\d{9}$/.test(phone))){
alert("手機(jī)號(hào)碼有誤，請(qǐng)重新填寫");
return false;
}
}校驗(yàn)郵箱案例:
function isEmail(str){
var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
return reg.test(str);
}原型三者關(guān)系
實(shí)例對(duì)象：實(shí)例對(duì)象都具有__proto__,就是原型對(duì)象
原型對(duì)象：原型對(duì)象都具有constructor屬性，就是構(gòu)造函數(shù)
構(gòu)造函數(shù)：構(gòu)造函數(shù)都具有prototype屬性，就是原型對(duì)象
如何在JS中清空數(shù)組
如：var list=[1,2,3,4]
list=[]; //設(shè)置一個(gè)新的空數(shù)組，如果從另一個(gè)變量引用到這個(gè)數(shù)組，那么原始的引用數(shù)組將保持不變。
list.length=0; //這種方式會(huì)更新指向原始數(shù)組的所有引用變量。
list.splice（0,list.length）; //也將更新對(duì)原始數(shù)組的所有引用。
while(list.length){
list.pop();
};
//不建議經(jīng)常使用該方式。JS中的轉(zhuǎn)義字符是什么
能夠在不破壞應(yīng)用程序的情況下編寫特殊字符，轉(zhuǎn)義字符（\）用于處理特殊字符，如單引號(hào)、雙引號(hào)、撇號(hào)和&號(hào)，在字符前放置。
如：console.log(" I am a \"beautiful\"girl")原文鏈接：https://juejin.im/post/5cf725d6f265da1b8608754a
作者：HoneyCC魚瑜于
lt;hr>水平線
<hr size="9" /> 水平線(設(shè)定大小,單位:像素)
<hr width="80%" /> 水平線(設(shè)定寬度,單位:像素或百分比)
<hr color="#ff0000" /> 水平線對(duì)齊方式
<hr align="left" /> 水平線水平位置
<hr noshade /> 去掉水平線的陰影
align屬性值:center(默認(rèn)值) left right
<hr width="30%" color="blue" size="9" align="left"/>
<center></center>水平居中.
<br/> 換行
<p></p> 標(biāo)簽定義段落
<p align=""></p>將段落按左、中、右對(duì)齊;
align屬性值:left(默認(rèn)值) right center justify
注意：
<h1>...<h6>標(biāo)題標(biāo)記與<p>段落標(biāo)記都只有一個(gè)屬性align
<pre></pre> 定義預(yù)格式化的文本
<blockquote></blockquote> 設(shè)置段落縮進(jìn)(可以縮進(jìn)5個(gè)字符)
手冊(cè)上沒有的標(biāo)記
<xmp></xmp> 忽略HTML標(biāo)記
<nobr>…</nobr> 禁止換行
<wbr> 指定軟換行（或單詞換行），用在nobr標(biāo)記中，即使用 <nobr> 禁止了換行，使用 <wbr> 仍然可以換行
<nobr>中華人民共和國(guó)上海市<wbr>黃浦區(qū)</wbr></nobr>
信所有已經(jīng)步入Web前端開發(fā)領(lǐng)域的同學(xué)們，對(duì)于HTML超文本標(biāo)記語言都不會(huì)感覺陌生。即便是正準(zhǔn)備開始系統(tǒng)學(xué)習(xí)Web前端開發(fā)的同學(xué)，也多多少少了解這門語言。HTML語言由W3C互聯(lián)網(wǎng)聯(lián)盟制定其使用規(guī)范并對(duì)外發(fā)布。嚴(yán)格來說，HTML并不屬于編程語言，更多的是一種帶有“標(biāo)記”性質(zhì)的代碼集合。HTML語言所書寫的HTML文檔也都是由標(biāo)記或標(biāo)記對(duì)組成的。這種語言沒有邏輯流程，也就是說只要書寫正確，瀏覽器就可以直接將最終的效果呈現(xiàn)在頁面中。
W3C 互聯(lián)網(wǎng)聯(lián)盟
這里，小海老師想帶領(lǐng)大家重溫HTML語言，對(duì)前端開發(fā)中常用的HTML標(biāo)記或標(biāo)記對(duì)進(jìn)行總結(jié)，對(duì)于標(biāo)記或標(biāo)記對(duì)中用到的屬性進(jìn)行闡述。對(duì)于已經(jīng)在前端開發(fā)領(lǐng)域摸爬滾動(dòng)數(shù)年的老手們，這些內(nèi)容一定是已經(jīng)爛熟于心了，因此這篇文章更適合哪些剛剛接觸這個(gè)行業(yè)的新人們。
首先我要說明，本文章只收錄了HTML 4版本中包括的常用標(biāo)記對(duì)和屬性，對(duì)于HTML 5新增的標(biāo)記對(duì)和屬性，小海老師會(huì)在后續(xù)的文章中專門進(jìn)行講解。
1、HTML文檔的基本結(jié)構(gòu)：
HTML（Hyper Text Markup Language，超文本標(biāo)記語言）在書寫時(shí)應(yīng)該滿足它最基本的結(jié)構(gòu)。HTML文檔就好像人體的結(jié)構(gòu)似的，被分為“文件頭”和“文件體”兩部分。文件頭利用<head></head>標(biāo)記對(duì)來實(shí)現(xiàn)，文件體利用<body></body>標(biāo)記對(duì)來實(shí)現(xiàn)。
HTML語言的基本結(jié)構(gòu)
2、HTML對(duì)標(biāo)記和標(biāo)記對(duì)的規(guī)定：
HTML語言中大部分的標(biāo)記都是成對(duì)出現(xiàn)的，被人們稱為“標(biāo)記對(duì)”，書寫時(shí)利用尖括號(hào)（也就是小于號(hào)和大于號(hào)）來進(jìn)行包裹。格式為：
<標(biāo)記對(duì)></標(biāo)記對(duì)>
為了和早期的HTML版本兼容，W3C（World Wide Web Consortium，互聯(lián)網(wǎng)聯(lián)盟）在制定HTML標(biāo)準(zhǔn)的同時(shí)還保留了一小部分不成對(duì)的標(biāo)記。因?yàn)椴怀蓪?duì)，所以被人們稱為“標(biāo)記”，書寫時(shí)在標(biāo)記的結(jié)束位置應(yīng)該添加一個(gè)反斜杠。格式為：
<標(biāo)記 />
3、HTML對(duì)屬性的規(guī)定：
屬性是為了拓展標(biāo)記的功能書寫在起始標(biāo)記中的，屬性分為“屬性名”和“屬性值”兩部分。屬性之間利用空格隔開，屬性值應(yīng)該用雙引號(hào)引住，屬性名和屬性值之間利用等號(hào)連接。帶有屬性的標(biāo)記對(duì)格式為：
<標(biāo)記 屬性名1=“屬性值1” 屬性名2=“屬性值2”> </標(biāo)記>
說到這里，我們應(yīng)該繼續(xù)介紹HTML中包括的常用標(biāo)記對(duì)與其對(duì)應(yīng)的屬性。這里，首先我們將HTML標(biāo)記對(duì)劃分為以下幾類：
HTML結(jié)構(gòu)標(biāo)記
文本段落標(biāo)記
列表標(biāo)記
超級(jí)鏈接標(biāo)記
圖像標(biāo)記
表格標(biāo)記
表單標(biāo)記
塊標(biāo)記
一、HTML結(jié)構(gòu)標(biāo)記
支撐起HTML文檔結(jié)構(gòu)的標(biāo)記對(duì)包括以下幾個(gè)：
<html></html>：所有的HTML代碼必須書寫在該標(biāo)記對(duì)內(nèi)部。
<head></head>：文件頭標(biāo)記對(duì)。
<body></body>：文件體標(biāo)記對(duì)。
<title></title>：文檔標(biāo)題標(biāo)記對(duì)。
<meta />：元信息標(biāo)記。
<link />：用于加載外部CSS文件的標(biāo)記。
<style></style>：用于書寫內(nèi)部CSS代碼的標(biāo)記對(duì)。
<script></script>：用于書寫或加載腳本代碼的標(biāo)記對(duì)。
HTML 結(jié)構(gòu)標(biāo)記
下面羅列了一些常用的結(jié)構(gòu)用法：
1、加載字符集：<meta charset=“utf-8”/>
2、加載地址欄圖標(biāo)：<link rel=“shortcut icon” href=“ico_URL” />
3、加載外部CSS文件：<link rel=“stylesheet” type=“text/css” href=“*.css” />
4、加載js文件：<script type=“text/javascript” src=“*.js”></script>
二、文本段落標(biāo)記
用于在頁面中輸入文本和段落的標(biāo)記對(duì)包括以下幾個(gè)：
<h1></h1>：標(biāo)題標(biāo)記對(duì)。共有六個(gè)，<h1>到<h6>。
<p></p>：段落標(biāo)記對(duì)。
<font></font>：字體標(biāo)記對(duì)。
<pre></pre>：預(yù)格式化文本標(biāo)記對(duì)。
<center></center>：居中標(biāo)記對(duì)。
<xmp></xmp>：忽略HTML標(biāo)簽標(biāo)記對(duì)。
<!--注釋內(nèi)容-->：注釋標(biāo)記。
文本段落標(biāo)記
除了上述標(biāo)記對(duì)之外，HTML還提供了一部分代碼用于在頁面中輸入特殊字符。這里我列舉了一部分常用的特殊字符，可以從下圖中看到。
特殊符號(hào)的表示
同時(shí)，HTML還提供了一組有關(guān)文本修飾的標(biāo)記對(duì)，可以從下圖中看到。
文本修飾標(biāo)記對(duì)
三、列表標(biāo)記
用于在頁面中顯示列表的標(biāo)記對(duì)包括以下幾個(gè)：
<ul></ul>：用于實(shí)現(xiàn)無序列表的標(biāo)記對(duì)。
<ol></ol>：用于實(shí)現(xiàn)有序列表的標(biāo)記對(duì)。
<li></li>：用于實(shí)現(xiàn)無序列表和有序列表列表項(xiàng)的標(biāo)記對(duì)。
<dl></dl>：用于實(shí)現(xiàn)定義列表的標(biāo)記對(duì)。
<dt></dt>：用于在定義列表列表項(xiàng)中實(shí)現(xiàn)定義名詞的標(biāo)記對(duì)。
<dd></dd>：用于在定義列表列表項(xiàng)中對(duì)定義名詞進(jìn)行解釋的標(biāo)記對(duì)。
列表標(biāo)記對(duì)
四、超級(jí)鏈接
用于在頁面中實(shí)現(xiàn)超級(jí)鏈接的標(biāo)記對(duì)只有一個(gè)：
<a></a>：實(shí)現(xiàn)超級(jí)鏈接的標(biāo)記對(duì)。
超級(jí)鏈接標(biāo)記對(duì)有以下常用的屬性：
href：用于指定超級(jí)鏈接的目標(biāo)地址。
title：用于指定當(dāng)鼠標(biāo)經(jīng)過超級(jí)鏈接時(shí)給出的提示語。
target：用于指定打開鏈接地址頁面的方式。
name：用于指定錨的名稱。
超級(jí)鏈接標(biāo)記對(duì)的屬性
五、圖像
用于在頁面中實(shí)現(xiàn)圖像的標(biāo)記只有一個(gè)：
<img />：實(shí)現(xiàn)圖像的標(biāo)記。
圖像標(biāo)記有以下常用的屬性：
src：用于指定圖片所在的路徑和文件名。
width：用于指定圖片的寬度，單位為像素。
height：用于指定圖片的高度，單位為像素。
border：用于指定圖片的邊框粗細(xì)，單位為像素。
alt：用于指定圖片的替代文本。
align：用于指定圖片相對(duì)于周圍元素的對(duì)齊方式。
vspace：用于指定圖片與環(huán)繞在其一側(cè)的周圍元素之間的垂直距離。
hspace：用于指定圖片與環(huán)繞在其一側(cè)的周圍元素之間的水平距離。
圖像標(biāo)記
由于篇幅問題，以上只是HTML常用標(biāo)記對(duì)和屬性的第一部分，接下來我還會(huì)繼續(xù)發(fā)布第二部分，供廣大前端愛好者學(xué)習(xí)與參考。
由于考慮到大部分人對(duì)HTML語言的基本使用還是比較熟練的，所以本文僅僅是單純的列出了標(biāo)記對(duì)的名稱和屬性名稱，并沒有詳細(xì)的講解這些標(biāo)記對(duì)和屬性的使用方法。如果您大部分內(nèi)容都是已經(jīng)掌握了的，甚至是已經(jīng)達(dá)到熟練使用的程度，可以略讀本文甚至忽略本文。如果您剛剛涉足HTML語言，對(duì)本文這種帶有列舉性質(zhì)的具體使用方法并不清除，可以私信我，我可以為您免費(fèi)發(fā)一份我自己編寫的關(guān)于HTML語言較為詳盡的PDF教材。歡迎廣大學(xué)習(xí)者索取。
【未完待續(xù)】
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
