dtd前端開發_Web前端課程都學什麼

⑴ Web前端課程都學什麼

html、CSS3、js、node開發、vue、React、微信小程序等等。

⑵ 下面這串代碼在html裡面的作用是什麼啊

DOCTYPE是document type(文檔類型)的簡寫，在Web設計中用來說明你用的XHTML或者HTML是什麼版本。
要建立符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE，否則你的標識和CSS都不會生效。

語法
HTML 頂級元素可用性 "注冊//組織//類型標簽//定義語言""URL"

頂級元素指定 DTD 中聲明的頂級元素類型。這與聲明的 SGML 文檔類型相對應。 HTML 默認。HTML。

可用性指定正式公開標識符(FPI)是可公開訪問的對象還是系統資源。 PUBLIC 默認。可公開訪問的對象。
SYSTEM 系統資源，如本地文件或 URL。

注冊指定組織是否由國際標准化組織(ISO)注冊。 + 默認。組織名稱已注冊。
- 組織名稱未注冊。Internet 工程任務組(IETF)和萬維網協會(W3C)並非注冊的 ISO 組織。

組織指定表明負責由 !DOCTYPE 聲明引用的 DTD 的創建和維護的團體或組織的名稱，即 OwnderID。 IETF IETF。
W3C W3C。

類型指定公開文本類，即所引用的對象類型。 DTD 默認。DTD。

標簽指定公開文本描述，即對所引用的公開文本的唯一描述性名稱。後面可附帶版本號。 HTML 默認。HTML。

定義指定文檔類型定義。

Frameset 框架集文檔。
Strict 排除所有 W3C 專家希望逐步淘汰的代表性屬性和元素，因為樣式表已經很完善了。
Transitional 包含除 frameSet 元素的全部內容。

語言指定公開文本語言，即用於創建所引用對象的自然語言編碼系統。

該語言定義已編寫為 ISO 639 語言代碼(大寫兩個字母)。 EN 默認。英語。

URL 指定所引用對象的位置。

在W3C標准中使用DOCTYPE聲明和使用建議
嚴格標準的html 4.01 (html 4.01 strict)
這個dtd包含所有的html元素和屬性，但不包括過時的元素（如字體），同時框架是不允許的。
<!doctype html public "-//w3c//dtd html 4.01//en"

"http://www.w3.org/tr/html4/strict.dtd">

過渡性的html 4.01 (html 4.01 transitional)
這個dtd包含所有的html元素和屬性。包括過時的元素（如字體）。但是框架是不允許的
<!doctype html public "-//w3c//dtd html 4.01 transitional//en"

"http://www.w3.org/tr/html4/loose.dtd">

集成框架的html 4.01 (html 4.01 frameset)
這個dtd基本和過渡性的html 4.01相同，但是允許使用框架
<!doctype html public "-//w3c//dtd html 4.01 frameset//en"

"http://www.w3.org/tr/html4/frameset.dtd">

嚴格的xhtml 1.0(xhtml 1.0 strict)
這個dtd包含所有的html元素和屬性，但不包括過時的元素（如字體），框架是不允許的。而且必須使整個文檔符合xml標准。
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"

"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

過渡性xhtml 1.0(xhtml 1.0 transitional)
這個dtd包含所有的html元素和屬性。包括過時的元素（如字體）。但是框架是不允許的。而且必須使整個文檔符合xml標准
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"

"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

集成框架的xhtml 1.0 (xhtml 1.0 frameset)
這個dtd基本和過渡性的xhtml1.0相同，但是允許使用框架. 而且必須使整個文檔符合xml標准
<!doctype html public "-//w3c//dtd xhtml 1.0 frameset//en"

"http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

xhtml1.1
這個dtd基本和嚴格型的xhtml相同，但是允許添加一些自定義標記

<!doctype html public "-//w3c//dtd xhtml 1.1//en"

"http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">

⑶ 前端代碼DIV+CSS關於定位

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>關於定位</title>
<styletype="text/css">
body{
margin-left:0px;
margin-top:0px;
margin-right:00px;
}
#header{
width:800px;
height:30px;
background-color:#9F9;
}
#main{
width:800px;
height:auto;
background-color:#FF6;
position:relative;
}
#one{
width:300px;
height:200px;
background-color:#F30;
position:absolute;
left:0px;
top:0px;
}
#tow{
width:490px;
height:200px;
background-color:#93F;
position:absolute;
left:310px;
top:0px;
}
#three{
width:400px;
height:200px;
background-color:#390;
position:absolute;
left:0px;
top:210px;
}
#four{
width:390px;
height:200px;
background-color:#66F;
position:absolute;
left:410px;
top:210px;
}
#foot{
width:960px;
height:30px;
background-color:#3C9;
}
</style>
<scripttype="text/javascript"src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<divalign="center">
<divid="header"align="center">頭部</div>
<divid="main">
<divid="one">one</div>
<divid="tow">tow</div>
<divid="three">three</div>
<divid="four">four</div>
</div>
<divid="foot"align="left">版權</div>
</div>
</body>
<scripttype="text/javascript">
$(document).ready(function(){
varlast=$("#main>div").last();
vartop=last.css("top").replace("px","");
top=parseInt(top);
varheight=last.css("height").replace("px","");
height=parseInt(height);
varmainHeight=top+height;
$("#main").css("height",mainHeight+"px");
});
</script>
</html>

你的布局style都不用改，只需要在頁面載入完成後，計算出div#main中的div佔用的實際高度，並賦值給div#main。

計算原理：div#main中的每一個div都是設置了固定的top和height的，那麼最後一個div的top+height肯定就是div#main的實際佔用高度。

代碼中，我引用了jquery的css方法，你如果不jquery也可以自己用js原生寫。還有什麼問題就追問哈。

⑷ html5和html有什麼區別啊

1、文檔聲明區別：

HTML：超文本標記語言，一種純文本類型的語言。

HTML5.0：文檔聲明HTML5方便書寫，精簡，有利於程序員快速的閱讀和開發。

2、結構語義區別

html：沒有體現結構語義化的標簽，如：<div id="nav"></div>

html5：添加了許多具有語義化的標簽，如：<article>、<aside>、<audio>、<bdi>...

3、繪圖區別

HTML：指可伸縮矢量圖形，用於定義網路的基於矢量的圖形。

HTML5：HTML5的canvas元素使用腳本（通常使用JavaScript）在網頁上繪制圖像，可以控制畫布每一個像素。

(4)dtd前端開發擴展閱讀

HTML5的特徵

1、語義特性（Class：Semantic）

HTML5賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa的，微數據與微格式等方面的支持，構建對程序、對用戶都更有價值的數據驅動的Web。

2、本地存儲特性（Class: OFFLINE & STORAGE）

基於HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益於HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術之一）和API說明文檔。

參考資料

網路-HTML5

⑸ HTML和HTML5有什麼區別呀

一、指代不同

1、html5：是Web中核心語言HTML的規范。

2、html：稱為超文本標記語言，是一種標識性的語言。

二、特點不同

1、html5：用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。

2、html：包括一系列標簽．通過這些標簽可以將網路上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。

三、構成不同

1、html5：由不同的技術構成，其在互聯網中得到了非常廣泛的應用，提供更多增強網路應用的標准機

2、html：是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。

⑹ 做前端遇到寫不出的特效該怎麼辦

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>標題文檔</title>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
@charset "utf-8";
/* CSS Document */
*{
padding: 0px;
margin: 0px;
font-size:12px;
font-family:Arial;
}
li{
list-style: none;
}
a{
color: #333;
text-decoration: none;
}

#hotbox{
margin: 0 auto;
margin-top: 80px;
width: 388px;
height: 15px;
line-height:31px;
position:relative;
overflow: hidden;
}
#hotbox #hotbox_{
width: 350px;
height: 15px;
line-height:15px;
position:absolute;
top:0px;
right:-24px;
}

</style>

</head>

<body>
<div id="hotbox">
<ul id="hotbox_">
<li><a href="#">1揭星整容前比 S楊冪臉殘</a></li>
<li> <a href="#">2伊能靜夜潘粵明披巾掩胸赴高檔</a></li>
<li><a href="#">3今課我啊啊啊啊啊啊</a></li>
</ul>
</div>
<script>
$(function(){
var box=$("#hotbox_")
box.html(box.html()+box.html());
var height=$("#hotbox_ li").height();
var box_h=$("#hotbox_ li").length*height;
box.css("height",box_h+"px");
function lunbo(){
if(parseInt(box.css("top"))<-box.height()/2){
box.css("top","0px");
};
box.css("top",parseInt(box.css("top"))-2+"px")
};
time=setInterval(lunbo,100);
});
</script>
</body>
</html>

原前沒做復制處理位置判斷錯誤

⑺ web前端都要學習什麼課程

WEB前端學習應該要學習那些課程？

在這里我們把前端學習分為9個階段，進行學習：

第一階段：

HTML+CSS:

HTML進階、CSS進階、div+css布局、HTML+css整站開發、

JavaScript基礎：

Js基礎教程、js內置對象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。

JS基本特效：

常見特效、例如：tab、導航、整頁滾動、輪播圖、JS製作幻燈片、彈出層、手風琴菜單、瀑布流布局、滾動事件、滾差視圖。

JS高級特徵：

正則表達式、排序演算法、遞歸演算法、閉包、函數節流、作用域鏈、基於距離運動框架、面向對象基礎、

JQuery：基礎使用

懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。

第二階段：

HTML5和移動Web開發

HTML5：

HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、WebSocket、Canvas.

CSS3:

CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作。

Bootstrap:

響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS。

移動Web開發：

跨終端WEB和主流設備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機聚劃算頁面、手機滾屏。

第三階段：

HTTP服務和AJAX編程

WEB伺服器基礎：

伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹。

PHP基礎：

PHP基礎語法、使用PHP處理簡單的GET或者POST請求、

AJAX上篇：

Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用。

AJAX下篇：

JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例額。

第四階段：

面向對象進階

面向對象終極篇：

從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器。

面向對象三大特徵：

繼承性、多態性、封裝性、介面。

設計模式：

面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。

第五階段：

封裝一個屬於自己的框架

框架封裝基礎：

事件流、冒泡、捕獲、事件對象、事件框架、選擇框架。

框架封裝中級：

運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝。

框架封裝高級和補充：

JQuery框架雛形、可擴展性、模塊化、封裝屬於傳智自己的框架。

第六階段：

模塊化組件開發

面向組件編程：

面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序。

面向模塊編程：

AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS。

第七階段：

主流的流行框架

Web開發工作流：

GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：

Angular.js、Backbone.js、Knockout/Ember。

常用庫：

React.js、Vue.js、Zepto.js。

第八階段：

HTML5原生移動應用開發

Cordova：

WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關系、開發環境搭建、Cordova實戰(創建項目，配置，編譯，調試，部署發布)。

Ionic：

Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)。

ReactNative：

ReactNative簡介、ReactNative環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API。

HTML5+：

HTML5+中國產業聯盟、HTML5PlusRuntime環境、HBuilder開發工具、MUI框架、H5+開發和部署。

第九階段：

Node.js全棧開發：

快速入門：

Node.js發展、生態圈、Io.js、Linux/Windows/OSX環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試。

核心模塊和對象：

全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務端與客戶端。

Web開發基礎：

HTTP協議，請求響應處理過程、關系型資料庫操作和數據訪問、非關系型資料庫操作和數據訪問、原生的Node.js開發Web應用程序、Web開發工作流、Node.js開發Blog案例。

快速開發框架：

Express簡介+MVC簡介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構Blog案例、Koa等其他常見MVC框架。

最後學習計劃有啦，那就趕快開始學習吧！

⑻ 前端學習筆記style，currentStyle，getComputedStyle的區別和用法

在看博客的時候看到了這個這3個傢伙-style，currentStyle，getComputedStyle。以前學習的時候沒碰到過，既然現在碰到了，就小小的研究了一下。發現了些許問題，也許是時代久遠，也有可能是自己孤陋寡聞，但它實實在在的讓我感到迷惑。雖說陶淵明說，讀書不求甚解，但作為想成為一名優秀前端的前端開發者，還是要弄個明白，要不然睡不著覺啊！
先做個鋪墊吧。說說層疊樣式表的三種形式(三種的叫法不一，按照各自的習慣)：
一。內聯樣式：在HTML標簽用style屬性設置。如：
1 <p style="color:#f90;">這是內聯樣式</p>
二。嵌入樣式：通過<head>標簽內通過<style>標簽設置。如：
1 <style type="text/css">
2 /*這是嵌入樣式*/
3 .stuff{color:#f90}
4 </style>

三。外部樣式：通過<link>標簽設置。如：
1 <link rel="stylesheet" href="path/style.css" type="text/css">
2
3 ============================================
4 /*外部樣式*/
5 @charset "UTF-8";
6 .stuff{color:#f90;}

推薦使用第三種方式。
下面該三位主角上場了。
第一位向我們緩緩走來的是style。它的使用方法是obj.style.attr;某位影評人在他的博客中評價道：
style只能獲取元素的內聯樣式，內部樣式和外部樣式使用style是獲取不到的。
用下面代碼驗證了一下，確實如上所說。我使用了三種樣式，得到的結果都是內聯樣式的值。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標題文檔</title>
6 <link href="style.css" rel="stylesheet" type="text/css"/>
7 <style type="text/css">
8 #stuff{width:300px;}
9 </style>
10 <script type="text/javascript">
11 window.onload = function(){
12 var oDiv = document.getElementById('stuff');
13 console.log(oDiv.style.width);
14 //alert(oDiv.style.width);
15 };
16
17 </script>
18 </head>
19
20 <body>
21 <div id="stuff" style="width:400px;"></div>
22 </body>
23 </html>

外鏈樣式表style.css:
1 @charset "utf-8"; 2 /* CSS Document */ 3 #stuff{width:100px;}
得到的結果是400px.

緊跟在style之後的是currentStyle，據說它有個強大的後盾MS，也就是說這傢伙只能在IE瀏覽器里能用。其他的不好使。它的使用方法是window.currentStyle["attr']或者window.currentStyle.attr。在IE中獲取內嵌樣式表中width的屬性值為300px，在Mozilla Firefox中無法通過。

最後一位走來的是getComputedStyle，它的用法是window.getComputedStyle(ob, pseudoElt)["attr']或window.getComputedStyle(ob, pseudoElt).attr。其中，pseudoElt表示如 :after,:before之類的偽類，如果不用偽類的話設置為null即可。
還是那位影評人評論道：
getComputedStyle同currentStyle作用相同，但是適用於FF、opera、safari、chrome。
抱著懷疑的態度，我又驗證了一下，果然IE7，IE8，IE9都報錯了：
對象不支持「getComputedStyle」屬性或方法
<img src="http://www.it165.net/uploadfile/files/2014/0624/20140624200921240.jpg" alt="鷌莰ky" http:="" www.it165.net="" e="" ewl="" "="" target="_blank" class="keylink" style="border: 1px solid rgb(204, 204, 204); padding: 5px; margin: 0px; list-style: none; width: 650px; height: 322.5997045790251px;">瀏覽器的兼容性問題。瀏覽器的兼容性問題對於前端開發者來說確實是一個頭疼的問題，尤其是罪魁禍首IE6。但是我們不能懼而遠之，而是見招拆招，兵來將擋水來土掩。在和它戰斗的過程中你會得到很多的樂趣，以及戰勝它之後的成就感！！！
另外說一點：getComputedStyle和currentStyle只能獲取屬性值，無法設置屬性。如果想設置屬性值，可是使用ob.style.attr.

⑼ 求web前端大神的技術指導

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<style>
body{background:#fff;font:12px/150%Arial,Verdana,"5b8b4f53";line-height:150%;margin:0px;padding:0;color:#404040;}
div{margin:0auto;padding:0;}
h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form,img,p{margin:0;padding:0;border:none;list-style-type:none;}
.fl{float:left}
.triangle{position:absolute;top:34px;left:26px;width:0;height:0;border-left:6pxsolidtransparent;border-right:6pxsolidtransparent;border-bottom:6pxsolid#d0ccc7;}
.list{margin:10px;}
.caption{width:64px;height:64px;overflow:hidden;position:relative}
.caption.date{background:#e00000;width:64px;height:40px;font:60016px/40pxArial;text-align:center;color:#fff;}
.caption.yearmonth{background:#d0ccc7;width:64px;height:24px;font:bold13px/24pxArial;text-align:center;color:#000;}
.detail{padding-left:20px;width:300px}
.detail.newstitle{line-height:23px;}
.detail.dates{color:#004c76}
.detail.datesspan{margin-left:10px;}
</style>
</head>
<body>
<divclass="list">
<divclass="captionfl">
<divclass="date">26</div>
<divclass="yearmonth">2014-07</div>
<divclass="triangle"></div>
</div>
<divclass="detailfl">
<divclass="newstitle">辦理具有強制執行效力債權文書公證及出具執行證書的指導意見</div>
<divclass="dates">2014年5月27日<span>閱讀(13)</span></div>
</div>
</div>
</body>
</html>

⑽ html5和html有什麼區別

html和h5的區別不是很大，h5隻是增加了標簽，一些標簽可以對網頁更好更快得使用，同時一些標簽也是h4表現不出來的，其中明顯的就是canvas和svg兩個，可以用這兩個結合JavaScript來繪制美麗的圖片，效果等

dtd前端開發