1. 程式人生 > >學寫網頁 #04# w3school

學寫網頁 #04# w3school

types inpu nta eth disabled 樣式表 硬件 內聯元素 版本

索引:

  • HTML 輸入類型
  • XHTML
  • HTML5
  • HTML5 樣式指南和代碼約定

WHO 成立於 1948 年。

對縮寫進行標記能夠為瀏覽器、翻譯系統以及搜索引擎提供有用的信息。

code 元素不保留多余的空格和折行:

如需解決該問題,您必須在 pre 元素中包圍代碼:

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}

愛因斯坦的公式:

E = m c2

通過使用 HTML4.0,所有的格式化代碼均可移出 HTML 文檔,然後移入一個獨立的樣式表。

樣式表分為三種,一種是把 CSS 放在單獨的一個文件,叫做“外部樣式表”,另外一種是把 CSS 放在 <head></head> 裏面,叫做“內部樣式表”,最後一種比較少用,類似於下面這樣,叫做“內聯樣式”。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

超鏈接

註釋:請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接:href="http://www.w3school.com.cn/html",就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址,然後創建一個新的請求,就像這樣:href="http://www.w3school.com.cn/html/"。

HTML 圖片

比較少用到的應該就是創建圖像映射

HTML <div> 和 <span>

塊級元素在瀏覽器顯示時,通常會以新行來開始(和結束)。

例子:<h1>, <p>, <ul>, <table>

內聯元素在顯示時通常不會以新行開始。

例子:<b>, <td>, <a>, <img>

<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。

HTML <div> 元素是塊級元素。它能夠用作其他 HTML 元素的容器。

HTML <span> 元素是行內元素,能夠用作文本的容器。

設置 <span> 元素的類,能夠為相同的 <span> 元素設置相同的樣式。

HTML 響應式 Web 設計

一種方法是自己寫,例如說:

.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 

另一種方法是用 Bootstrap ,好像本質上差不多。(引用外部樣式表,遵循命名規定)

HTML 框架

導航框架 跳轉至框架內的一個指定的節

通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架,並且每個框架都獨立於其他的框架。

<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

<noframes>
<body>您的瀏覽器無法處理框架!</body>
</noframes>

</frameset>

- iframe 用於在網頁內顯示網頁。

HTML script 元素

- <noscript> 標簽

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

- 如何應付老式的瀏覽器

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

HTML 頭部元素

元數據(metadata)是關於數據的信息。

<meta> 標簽提供關於 HTML 文檔的元數據。元數據不會顯示在頁面上,但是對於機器是可讀的。

典型的情況是,meta 元素被用於規定頁面的描述、關鍵詞、文檔的作者、最後修改時間以及其他元數據。

<meta> 標簽始終位於 head 元素中。

元數據可用於瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他 web 服務。

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

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />

URL 編碼會將字符轉換為可通過因特網傳輸的格式。

技術分享圖片

技術分享圖片

HTML 顏色名

選色可以參照 w3school 的顏色表。

HTML 表單

<input type="submit"> 定義用於向表單處理程序(form-handler)提交表單的按鈕。

表單處理程序通常是包含用來處理輸入數據的腳本的服務器頁面。

表單處理程序在表單的 action 屬性中指定,如果省略 action 屬性,則 action 會被設置為當前頁面。

method 屬性規定在提交表單時所用的 HTTP 方法(GET 或 POST)

當您使用 GET 時,表單數據在頁面地址欄中是可見的 - 如果是 GET 的話可以直接編輯地址 然後回車, 而不用 在頁面提交。

HTML 輸入類型

<input type="button> 定義按鈕。

<input type="button" onclick="alert(‘Hello World!‘)" value="Click Me!">

<input type="number"> 用於應該包含數字值的輸入字段。

您能夠對數字做出限制。

根據瀏覽器支持,限制可應用到輸入字段。

Quantity (between 1 and 5):
Birthday:

Select your favorite color:

Birthday (month and year):
Select a week:
Select a time:
Birthday (date and time):
Birthday (date and time):
E-mail:
Search Google:
Telephone:

Add your homepage:

掌握 input 元素的各種屬性也是非常必要的。隨便 COPY 幾個:

First name:
Last name:
First name:
(仍然屬於上面那個 Submit)Last name:
First name:
Last name:

First name:
Last name:

Enter a date before 1980-01-01: Enter a date after 2000-01-01:

Select images:

(正則表達式)Country code:

XHTML - 屬性

XHTML 是更嚴格更純凈的 HTML 版本

例如它 禁止屬性簡寫, 這是錯誤的:

<input checked>
<input readonly>
<input disabled>
<option selected>

這是正確的:

<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />

HTML5

HTML5 是最新的 HTML 標準。

HTML5 是專門為承載豐富的 web 內容而設計的,並且無需額外插件。

HTML5 擁有新的語義、圖形以及多媒體元素

HTML5 提供的新元素和新的 API 簡化了 web 應用程序的搭建。

HTML5 是跨平臺的,被設計為在不同類型的硬件(PC、平板、手機、電視機等等)之上運行。

技術分享圖片

canvas 和 svg 是 HTML5 的,vidio 和 audio 也是。

新的語義/結構元素

footer header 等塊級元素也是。

語義元素清楚地向瀏覽器和開發者描述其意義。

非語義元素的例子:<div> 和 <span> - 無法提供關於其內容的信息。

語義元素的例子:<form>、<table> 以及 <img> - 清晰地定義其內容。

HTML5 樣式指南和代碼約定

!詳細從 w3school 頁面中部開始讀起。

技術分享圖片

學寫網頁 #04# w3school