WEB前端 HTML CSS基礎前十題

2021-10-24 22:44:33 字數 2178 閱讀 2604

結構層:由 html 或 xhtml 之類的標記語言負責建立,僅負責語義的表達。解決了頁面」內容是什麼」的問題。

表示層:由css負責建立,解決了頁面「如何顯示內容」的問題。

行為層:由指令碼負責。解決了頁面上「內容應該如何對事件作出反應」的問題。

ie6盒子模型與w3c盒子模型

文件中的每個元素被描繪為矩形盒子。盒子有四個邊界:外邊距邊界margin, 邊框邊界border, 內邊距邊界padding與內容邊界content

css3中有個box-siwzing屬性可以控制盒子的計算方式

content-box:padding和border不被包含在定義的width和height之內。物件的實際寬度等於設定的width值和border、padding之和。(w3c盒子模型)

border-box:padding和border被包含在定義的width和height之內。物件的實際寬度就等於設定的width值。(ie6盒子模型)

a. alt屬性是為了給那些不能看到你文件中影象的瀏覽者提供文字說明的。且長度必須少於100個英文本元或者使用者必須保證替換文字盡可能的短, 下·不支援影象顯示或者影象顯示被關閉的瀏覽器的使用者,視覺障礙的使用者和使用螢幕閱讀器的使用者等

b. title屬性為設定該屬性的元素提供建議性的資訊。使用title屬性提供非本質的額外資訊

src用於替換當前元素

href用於在當前文件和引用資源之間確立聯絡

src是source的縮寫,指向外部資源的位置,指向的內容將會嵌入到文件中當前標籤所在位置

href是hypertext reference的縮寫,指向網路資源所在位置,建立和當前元素(錨點)或當前文件(鏈結)之間的鏈結   

a. 太深的巢狀,比如table>tr>td>h3,會導致搜尋引擎讀取困難,而且,最直接的損失就是大大增加了冗餘**量

b. 靈活性差,比如要將tr設定border等屬性,是不行的,得通過td

c. **臃腫,當在table中套用table的時候,閱讀**會顯得異常混亂

d. 混亂的colspan與rowspan,用來布局時,頻繁使用他們會造成整個文件順序混亂

e. 不夠語義

優點:

a. 解決載入緩慢的第三方內容如圖示和廣告等的載入問題

b.  iframe無重新整理檔案上傳

c. iframe跨域通訊

缺點:

d. iframe會阻塞主頁面的onload事件

e. 無法被一些搜尋引擎索引到

f. 頁面會增加伺服器的http請求

g. 會產生很多頁面,不容易管理

新特性:

k. 純表現的元素:basefont,big,center, s,strike,tt,u

l. 對可用性產生負面影響的元素:frame,frameset,noframes

a. 固定布局

b. 流式布局

c. 彈性布局

d. 浮動布局

e. 定位布局

f. margin和padding

a. css樣式表繼承指的是,特定的css屬性向下傳遞到子孫元素,會被繼承下去的屬性:

b.文字相關:font-family,font-size, font-style,font-variant,font-weight, font,letter-spacing,line-height,color

c. 列表相關:list-style-image,list-style-position,list-style-type, list-style

a. 元素選擇器:* 、e、 e#id、 e.class

b. 關係選擇器:e、f、e>f、e+f、e~f

c. 屬性選擇器:e[att]、e[att="val"]、e[att~="val"]、e[att^="val"]、e[att$="val"]、e[att*="val"]、e[att|="val"]

d. 偽類選擇器:e:link、e:visited、e:hover、e:active、e:focus、e:lang(fr)、e:not(s)、e:root、e:first-child、e:last-chil等

e. 偽物件選擇器:e:first-letter/e::first-letter、e:first-line/e::first-line、e:before/e::before、e:after/e::after、e::selection

web前端之html css基礎

b 加粗 strong 加粗 i 傾斜 em 傾斜 u 下劃線 ins 下劃線 span 不換行 p 段落 換行 div 布局 h1 一級標題 del 刪除線 s 刪除線 href a 超連結 li 無序列表 li 有序列表 專案標題dt 專案描述dd 專案列表 dl 空格字元實體 cellspac...

前端html css基礎

語義化優點 可讀性更高 2.對搜尋引擎更友好,提高seo 設定box sizing border box後,設定的width是包含了內容 padding border justify content 對齊方式 align items flex wrap align self box item ite...

Web前端 HTML CSS詳細概述!

1.什麼是html?w3c定義html全稱hypertext markup language是超文字標記語言,用於定義文件內容結構。2.html元素 html是由多個元素組成。每個元素是由 開始標記.內容.結束標記 組成。例 不是所有元素都是由上面三個部分組成,空元素就不是。空元素又叫自閉和元素 單...