學寫網頁 #04# w3school
索引:
- 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"> 用於應該包含數字值的輸入字段。
您能夠對數字做出限制。
根據瀏覽器支持,限制可應用到輸入字段。
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