HTML零基礎(chǔ)學(xué)習(xí)Web前端網(wǎng)頁制作需要知道哪些?
時(shí)間:2023-07-24 23:39:02 | 來源:網(wǎng)站運(yùn)營
時(shí)間:2023-07-24 23:39:02 來源:網(wǎng)站運(yùn)營
HTML零基礎(chǔ)學(xué)習(xí)Web前端網(wǎng)頁制作需要知道哪些?:
版權(quán)歸作者鑫韭緣設(shè)計(jì)所有,任何形式轉(zhuǎn)載請(qǐng)聯(lián)系作者
HTML零基礎(chǔ)學(xué)習(xí)Web前端網(wǎng)頁制作,首先是要掌握一些常用標(biāo)簽的使用和他們的各個(gè)屬性,常用的標(biāo)簽我總結(jié)了一下有以下這些:
html:頁面的根元素。
head:頁面的頭部標(biāo)簽,是所有頭部元素的容器。
body:頁面的主體標(biāo)簽,頁面展現(xiàn)的內(nèi)容就放置在這里面。
script:腳本標(biāo)簽,可以把js腳本代碼放置在這個(gè)標(biāo)簽內(nèi),也可以使用這個(gè)標(biāo)簽的src屬性引入一個(gè)外部標(biāo)簽。
title:頁面的標(biāo)題。我們有一個(gè)HTML的學(xué)習(xí)交流群,搜索四八七中間是一七一最后是839,平時(shí)提供大家一起學(xué)習(xí)HTML,每天有免費(fèi)HTML課程知識(shí)講解。有問題相互交流。
meta:位于文檔的頭部,提供頁面的元信息,包括關(guān)鍵字、描述等等。
link:定義文檔與外部資源的關(guān)系,最常用的用途就是引入樣式表。
style:樣式標(biāo)簽,可以把css代碼寫在這個(gè)標(biāo)簽中。
a:超鏈接,href屬性代表要鏈接到的地方,target屬性代表打開方式。
img:圖像標(biāo)簽,src屬性表示圖片的位置。
form:表單元素,它內(nèi)部的input、select、textarea等標(biāo)簽都是比較重要的。
div:定義文檔中的分區(qū)或節(jié),可以使用div來進(jìn)行頁面的布局等操作。
另外還有ul、li、p、button、iframe、p、table等標(biāo)簽也很常用,nav、section、article、header、aside、footer等語義化標(biāo)簽也需要了解一下。
還有一些要知道的知識(shí)點(diǎn):
1.doctype的作用。
2.unicode、utf8等編碼的原理和區(qū)別。
3.如何進(jìn)行頁面性能優(yōu)化。
4.png、jpg、webp、gif等圖片格式的不同的優(yōu)勢(shì)。
5.HTML行內(nèi)元素與塊級(jí)元素的區(qū)別。
6.移動(dòng)web端開發(fā)常用head標(biāo)簽。
7.web語義化。
8.瀏覽器中的緩存原理
另外,除了要了解上面這一些標(biāo)簽之外,還需要對(duì)一些新的HTML5的API有一定的了解:
比如:audio、video標(biāo)簽。
Canvas:定義圖形,比如圖表和其他圖像。
input標(biāo)簽的accept屬性,email、phone、url等類型。
getElementByClassName根據(jù)class名來獲取一個(gè)元素結(jié)點(diǎn)。
Multiple file selection多文件選擇屬性。
html的import、template
process標(biāo)簽,webGL等內(nèi)容。
其他下面這些HTML5網(wǎng)頁制作更為詳細(xì)的基礎(chǔ)知識(shí)。是必須知道的,對(duì)將來找工作,面試時(shí)筆試都有用處。
1.對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí),標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件,容易維護(hù)、改版方便,不需要變動(dòng)頁面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性;
2.要弄清XHTML和HTML有什么區(qū)別?HTML是一種基本的WEB網(wǎng)頁設(shè)計(jì)語言,而XHTML是一個(gè)基于XML的置標(biāo)語言,最主要的不同:XHTML 元素必須被正確地嵌套。XHTML 元素必須被關(guān)閉。標(biāo)簽名必須用小寫字母。XHTML 文檔必須擁有根元素。
3.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式,區(qū)分它們有何意義?
用于聲明文檔使用那種規(guī)范(HTML/XHTML)一般為 嚴(yán)格 過度 基于框架的html文檔。加入XMl聲明可觸發(fā),解析方式更改為IE5.5 擁有IE5.5的bug。
4.CSS引入的方式有哪些? link和@import的區(qū)別是?內(nèi)聯(lián) 內(nèi)嵌 外鏈 導(dǎo)入
區(qū)別 :同時(shí)加載。前者無兼容性,后者CSS2.1以下瀏覽器不支持Link 支持使用javascript改變樣式,后者不可。
5.CSS選擇符有哪些?標(biāo)簽選擇符 類選擇符 id選擇符。繼承不如指定 Id>class>標(biāo)簽選擇。內(nèi)聯(lián)和important優(yōu)先級(jí)算法中,important優(yōu)先級(jí)高。
6.前端頁面有哪三層構(gòu)成,分別是什么?作用是什么?
結(jié)構(gòu)層 HTML 表示層 CSS 行為層 js
7.CSS的基本語句構(gòu)成是?
選擇器{屬性1:值1;屬性2:值2;……}
8.做的頁面流覽器Ie(Ie內(nèi)核) 火狐(Gecko) 谷歌(webkit) opear(Presto)測(cè)試,這些瀏覽器的內(nèi)核要有分別。
9.一般IE6 BUG的幾種解決方法是下面這幾條
1.雙邊距BUG float引起的 使用display
2.3像素問題 使用float引起的 使用dislpay:inline -3px
3.超鏈接hover 點(diǎn)擊后失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 給父級(jí)添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 !Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.為什么沒有辦法定義1px左右的寬度容器(IE6默認(rèn)的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
9.ie 6 不支持!important
HTML5零基礎(chǔ)學(xué)習(xí)Web前端需要知道哪些?
10.描述css reset的作用和用途是:
Reset重置瀏覽器的css默認(rèn)屬性 瀏覽器的品種不同,樣式不同,然后重置,讓他們統(tǒng)一
11.解釋css sprites,如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上,減輕服務(wù)器對(duì)圖片的請(qǐng)求數(shù)量
12.瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是:
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什么模式。
13.要理解什么是語義化的HTML:
直觀的認(rèn)識(shí)標(biāo)簽 對(duì)于搜索引擎的抓取有好處
14.清除浮動(dòng)的幾種方式,各自的優(yōu)缺點(diǎn)分別是這3點(diǎn):
1.使用空標(biāo)簽清除浮動(dòng) clear:both(理論上能清楚任何標(biāo)簽,增加無意義的標(biāo)簽)
2.使用overflow:auto(空標(biāo)簽元素清除浮動(dòng)而不得不增加無意代碼的弊端,,使用zoom:1用于兼容IE)
3.是用afert偽元素清除浮動(dòng)(用于非IE瀏覽器)。
15.css hack
_marging //IE 6
+margin //IE 7
Marging:0 auto /9 所有Ie
Margin /0 //IE 8
零基礎(chǔ)小白想學(xué)習(xí)HTML5前端Web網(wǎng)頁制作的。我們有一個(gè)HTML網(wǎng)頁制作的學(xué)習(xí)交流qq群 487171839。有學(xué)習(xí)資料跟課程視頻。平時(shí)提供大家一起學(xué)習(xí)網(wǎng)頁制作,每天晚上有免費(fèi)前端網(wǎng)頁制作課程知識(shí)講解。有問題相互交流。點(diǎn)擊鏈接加入群【HTML網(wǎng)頁制作學(xué)習(xí)交流群】學(xué)習(xí)
關(guān)鍵詞:學(xué)習(xí),基礎(chǔ)