天天看點

每天學習30分鐘新知識之html教程1

<col>

版本

年份

HTML

1991

HTML+

1993

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML 1.0

2000

HTML5

2012

XHTML5

2013

XHTML 是更嚴謹更純淨的 HTML 版本。

HTML 5 是下一代的 HTML。

CSS 指層疊樣式表(Cascading Style Sheets)。

CSS3 是最新的 CSS 标準。

HTML 不是一種程式設計語言,而是一種标記語言 (markup language)

&lt;body&gt; 與 &lt;/body&gt; 之間的文本是可見的頁面内容

屬性總是以名稱/值對的形式出現,比如:name="value"。

&lt;h1 align="center"&gt; 

&lt;body bgcolor="yellow"&gt; 

&lt;table border="1"&gt; 關于表格邊框的附加資訊。

屬性值應該始終被包括在引号内。雙引号是最常用的。

在某些個别的情況下,比如屬性值本身就含有雙引号,那麼您必須使用單引号,例如:

适用于大多數 HTML 元素的屬性:

class

classname

規定元素的類名

id

規定元素的唯一 id

style

style_definition

規定元素的行内樣式(inline style)

title

text

規定元素的額外資訊(可在工具提示中顯示)

浏覽器會自動地在标題的前後添加空行。

預設情況下,HTML 會自動地在塊級元素前後添加一個額外的空行,比如段落、标題元素前後。

當顯示頁面時,浏覽器會移除源代碼中多餘的空格和空行。可以用&amp;nbsp;

樣式 style 屬性

改變所有 HTML 元素

也可以在css中定義

标簽

描述

&lt;center&gt;

定義居中的内容。

&lt;font&gt; 和 &lt;basefont&gt;

定義 HTML 字型。

&lt;s&gt; 和 &lt;strike&gt;

定義删除線文本

&lt;u&gt;

定義下劃線文本

屬性

align

定義文本的對齊方式

bgcolor

定義背景顔色

color

定義文本顔色

對于以上這些标簽和屬性:請使用樣式代替!

&lt;p style="font-family:verdana;color:red"&gt;

&lt;p style="font-size:30px"&gt;This text is 30 pixels high&lt;/p&gt;

sup,可實作上标字

​​&lt;pre&gt;​​

保留白格和換行,常用于顯示代碼

所有的格式化代碼均可移出 HTML 文檔,然後移入一個獨立的樣式表。

三種方式來插入樣式表

2,&lt;style&gt; 标簽定義内部樣式表。

關于連結

請始終将正斜杠添加到子檔案夾。假如這樣書寫連結:href="http://www.w3school.com.cn/html",就會向伺服器産生兩次 HTTP 請求。這是因為伺服器會添加正斜杠到這個位址,然後建立一個新的請求,就像這樣:href="http://www.w3school.com.cn/html/"。

命名的a标簽,經常用于在大型文檔開始位置上建立目錄

表格

行由 &lt;tr&gt; 标簽, 每行被分割為若幹單元格(由 &lt;td&gt; 标簽定義)

塊div将 HTML 元素組合起來。

通常會以新行來開始(和結束)。是可用于組合其他 HTML 元素的容器。沒有特定的含義

另一個常見的用途是文檔布局

對 HTML 進行分類,使我們能夠為元素的類定義 CSS 樣式。

&lt;style&gt;

.cities {

    background-color:black;   

}    

&lt;/style&gt;

&lt;div class="cities"&gt;

&lt;/div&gt; 

span.red {

    color:red;

}

&lt;span class="red"&gt;重要&lt;/span&gt;

布局div

或使用html5的元素,比如header,nav,footer

響應式 Web 設計

可變尺寸,平闆和移動裝置是必需的

使用現成的 CSS 架構Bootstrap 。

架構子視窗

可以在同一個浏覽器視窗中顯示不止一個頁面。

&lt;frameset cols="25%,50%,25%"&gt;

  &lt;frame src="/example/html/frame_a.html"&gt;

  &lt;frame src="/example/html/frame_b.html"&gt;

  &lt;frame src="/example/html/frame_c.html"&gt;

&lt;noframes&gt;

&lt;body&gt;您的浏覽器無法處理架構!&lt;/body&gt;

&lt;/noframes&gt;

&lt;/frameset&gt;

iframe 用于在網頁内顯示網頁。

腳本

script 元素既可包含腳本語句,也可通過 src 屬性指向外部腳本檔案。

JavaScript 最常用于圖檔操作、表單驗證以及内容動态更新。

頭部

&lt;head&gt; 元素是所有頭部元素的容器

以下标簽都可以添加到 head 部分:&lt;title&gt;、&lt;base&gt;、&lt;link&gt;、&lt;meta&gt;、&lt;script&gt; 以及 &lt;style&gt;。

&lt;base&gt; 标簽為頁面上的所有連結規定預設位址或預設目标(target):

meta 元素被用于規定頁面的描述、關鍵詞、文檔的作者、最後修改時間

一些搜尋引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面。

下面的 meta 元素定義頁面的描述:

下面的 meta 元素定義頁面的關鍵詞:

有些字元是不能用的,不能使用小于号(&lt;)和大于号(&gt;),這是因為浏覽器會誤認為它們是标簽。

如果希望正确地顯示,必須用&amp;lt;

&lt;!DOCTYPE&gt; 不是 HTML 标簽。它為浏覽器提供一項資訊(聲明),即 HTML 是用什麼版本編寫的。

表單

&lt;input&gt; 元素是最重要的表單元素。

&lt;input type="text"&gt; 定義用于文本輸入

&lt;input type="radio"&gt; 定義單選按鈕。

&lt;input type="submit"&gt;

每個輸入字段必須設定一個 name 屬性。才會送出

按鈕:

HTML5 增加了如下表單元素:

&lt;datalist&gt;

&lt;keygen&gt;

&lt;output&gt;

HTML5 增加了多個新的輸入類型:

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

maxlength最大字元數,但不會提供任何回報

pattern通過其檢查輸入值的正規表達式

required必需填寫

HTML5 為 &lt;input&gt; 增加了如下屬性:

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height 和 width

list

min 和 max

multiple

pattern (regexp)

placeholder

required

step

并為 &lt;form&gt; 增加如需屬性:

novalidate

時間寶貴,隻能複制+粘貼,若圖檔無法顯示或排版混亂,請通路elesos.com查找原文

繼續閱讀