從零開始的H5之路

時間 2020-10-21

標籤 css html 編程 canvas 瀏覽器網絡 app 編程語言學習 url 欄目 CSS 简体版

原文原文鏈接

HTML5的優勢css

跨平臺運行html

硬件要求低編程

flash以外的選擇canvas

HTML5的新特性瀏覽器

用於繪畫的canvase標籤網絡

用於媒介回放的ivdeo和audio元素app

對本地離線儲存的更好支持編程語言

新的特殊內容元素學習

如：article、footer、header、nav、sectionurl

新的表單控件

如：calendar、data、time、email、url、search

Safari、Chrome、Firefox以及Opera包括IE9都支持HTML5。

學習HTML5須要掌握：HTML XHTML CSS CSS3 JavaScript JQuery HTML5

首先咱們開始學習HTML。

HTML簡介

HTML指的是超文本標記語言：HyperText Markup Language

HTML不是編程語言，而是標記語言

標記語言是一套標記標籤

HTML使用標記標籤描述網頁

HTML文檔包含了HTML標籤及文本內容

HTML文檔也叫Web文檔

HTML頭文件

"<!DOCTYPE>"聲明有助於瀏覽器中正確顯示網頁。網絡上有不少不一樣的文件，若是可以正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。

通用聲明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"">

HTML基礎標籤

HTML元素

HTML元素指的是從開始標籤到結束標籤的全部代碼。

例如

內容

其中「內容」就是< a>標籤的元素。

HTML元素語法：

元素的內容是開始標籤與結束標籤之間的內容

空元素在開始標籤中進行關閉

大多數HTML元素可擁有屬性

大多數的HTML元素都是能夠嵌套的。

HTML屬性

標籤能夠擁有屬性爲元素提供更多的信息

屬性以鍵值對的形式出現。如：id=「id」。

經常使用標籤屬性：

「< h1>」:align對齊方式

「」:bgcolor背景顏色

「< a>」:target規定在何處打開連接

通用屬性

class:規定元素的類名

id:規定元素惟一的ID

style:規定元素的樣式

title:規定元素的額外信息

head標籤

元素包含了全部的頭部標籤元素。在元素中你能夠插入腳本(scripts)、樣式(css)、以及各類meta信息。
function(){ //外匯返傭 http://www.fx61.com/

能夠添加在頭部區域的元素標籤爲:

body標籤

標籤訂義文檔的主題。其元素包含文檔的全部內容。

HTML標題

HTML段落

HTML段落是由

標籤訂義的。瀏覽器會自動在段落的先後添加空行。< p>標籤是塊級元素。

咱們能夠自定義一個標籤，並在html中使用它

<!DOCTYPE html>

<head>

<title>Title</title>

document.createElement("myNode");//建立一個元素

</script>

<style>

myNode{

display: block;

width: 100px;

height: 100px;

background: red;

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

城市： <input type="text" list="cityData">

<option>abaasd</option>

<option>adasdww</option>

<option>bsdas</option>

<option>csdas</option>

<option>fsdas</option>

<option>dsdas</option>

</datalist>

</form>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 {

margin: 0;

}

ul, ol {

margin: 0;

list-style: none;

padding: 0;

}

a {

text-decoration: none;

}

* {

margin: 0;

padding: 0;

}

.main{width: 1200px;margin: 50px auto;box-shadow: 0 0 10px 0 deeppink}

.main .username{width: 400px;height: 30px}

.main .password{width: 400px;height: 30px}

.main form div{margin-top: 15px}

</style>

</head>

<body>

用戶名:<input class="username" type="text" name="username" placeholder="用戶名"/>

密碼:<input class="password" type="password" placeholder="密碼" />

</div>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。