文檔聲明和HTML樣式表_ZenDei技術網路在線

文檔聲明和HTML樣式表

-Advertisement-

文檔聲明不是註釋也不是元素，總是在HTML的第一行書寫格式：<!DOCTYPE HTML> 是用於通知瀏覽器目前文檔正使用哪一個HTML版本（相關屬性 lang）若不寫文檔聲明，瀏覽器渲染頁面時會進入怪異模式 HTML元素又叫根元素或根標記，是所有元素的祖先元素例：<html lang="e ...

文檔聲明

不是註釋也不是元素，總是在HTML的第一行

書寫格式：<!DOCTYPE HTML> 是用於通知瀏覽器目前文檔正使用哪一個HTML版本（相關屬性 lang）

若不寫文檔聲明，瀏覽器渲染頁面時會進入怪異模式

HTML元素又叫根元素或根標記，是所有元素的祖先元素

例：<html lang="en"></html>表示該文檔中的文字用英語

<html lang="zh-cmn-hans"></html>表示該文檔中的文字用簡體中文

head元素又叫文檔頭，他是HTML的第一個子元素

head元素通常包含以下元素<title>\<meta|>\<style>\<link>

<meta charset="UTF-8">指示瀏覽器使用字元編碼集UTF-8解析頁面（meta是一個空元素）

body元素又叫文檔體，網頁上所有可見內容都放置在該元素中

快速添加內容的快捷方式：lorem+N+tab或p>loremN+tab

導入外部樣式表

例：<link rel="stylesheet" href="./main.css">

外部樣式表是寫在head元素範圍中的

link空元素表示引用外部資源 stylesheet表示導入的文件類型 href表示添加路徑 main.css表示css相對於HTML的路徑

路徑中的./表示同級的文件，../表示要返回上級

特點：實現結構與樣式分離，方便維護

導入內部樣式表

例：<style type="text/css"> <p>.......</p></style>

內部樣式表也是寫head元素範圍中的

導入行內樣式表

例：<p style="color:red;">............</p>

行內樣式表是寫在body元素範圍內的

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Chimee - 簡單易用的H5視頻播放器解決方案

Chimee是由奇舞團開源的一套H5視頻播放器解決方案，由奇舞團視頻雲前端團隊結合在業務和視頻編解碼方向的沉澱積累傾心打造。Chimee支持MP4、M3U8、FLV等多種媒體格式，同時它也幫我們解決了大部分的相容性、差異化問題，包括全屏、自動播放、內聯播放、直播解碼等常見媒體播放需求。 ...
js的一些相容性易錯的的問題

一、屬性相關我們通常把特征(attribute)和屬性(property)統稱為屬性，但是他們確實是不同的概念，特征(attribute)會表現在HTML文本中，對特征的修改一定會表現在元素的outerHTML中，並且特征只存在於元素節點中；屬性(property)是對於JS對象進行修改，除了瀏覽 ...
underscore源碼解析（一）

留存root javascript // Establish the root object, ( ) in the browser, // on the server, or in some virtual machines. We use // instead of for support. v ...
javascript小結

時間:2017年12月17日 20:53:43 用於:個人總結 javascript知識點總結:1.獲取對象:document.getElementById("id")/document.getElementsTagName("li")2.事件滑鼠事件: onclick 點擊 onmouseove ...
利用window.performance.timing進行性能分析

性能分析。。。 window.performance.timing中相關屬性語義： 1.主要性能分析指標一般指標：實際前端更關註的指標（需要在實際中結合自身代碼）： console.log('首屏圖片載入完成 : ',window.lastImgLoadTime - window.perform ...
javascript設計模式——適配器模式

前面的話適配器模式的作用是解決兩個軟體實體間的介面不相容的問題。使用適配器模式之後，原本由於介面不相容而不能工作的兩個軟體實體可以一起工作。適配器的別名是包裝器（wrapper），這是一個相對簡單的模式。在程式開發中有許多這樣的場景：當試圖調用模塊或者對象的某個介面時，卻發現這個介面的格式並不符合 ...
移動端真機調試方法

最近要分析web頁面，在安卓和ios上的性能差異，除了操作系統本身不同之外，應該還多地方要探究的，第一步就是要在真機上分析。所以總結一下幾個方法。 1.Mac+iPhone+ Lightning+Safari 瀏覽器步驟： 1）用：Lighting線將mac與iphone相連 2）iphone打開 ...
你不知道的javaScript上捲(第一章作用域是什麼)

在寫這篇博客時這本書我已經是看過一遍了，為了加深印象和深入學習於是打算做這系列的前端經典書籍導讀博文，大家如果覺得這本書講的好可以自己買來看看，我是比較喜歡看紙質版書的，因為這樣才有讀書的那種感覺。本期我給大家講述的是前端經典js書籍 <<你不知道的javaScript(上捲)>> 第一章內容的 ...