html5學習筆記（一）（摘抄講義加部分理解）

視頻地址：http://study.163.com/course/courseMain.htm?courseId=1003005

講義地址：https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html

第一章、概述及開發環境

現在 HTML5 可以理解爲 HTML + CSS + JavaScript 的總稱

瀏覽器選擇：IE9+ Firefox 3.5+ Chrome 3.0+ Safari 3.0+ Opera 10.5+

開發工具：本課程我們使用 Sublime Text3 作爲 HTML5 課程的編碼工具。使用了 Soda Dark 3作爲軟件界面的主題。

***Sublime Text3 的一些配置和快捷鍵：

a.查看--側邊欄--顯示/隱藏側邊欄，然後文件--打開文件夾，可以看到文件夾目錄。

b.首選項--“按鍵綁定-用戶”，設置自定義按鍵，如下：

[
	{"keys":["f1"],"command":"toggle_side_bar"},
]

則可以顯示或隱藏側邊欄。

c.新建並保存index.html，快捷鍵可使用"Tab"鍵，如寫"html"，按下“Tab”鍵，則會自動變爲"<html> </html>"

d.輸出註釋語句""的快捷鍵爲Ctrl+"/"

------------------------------------------------------------------------------------------------

第二章、基本格式

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8"><!--文檔類型聲明-->
	<title>文檔標題</title>
</head>
<body>
	<a href="http://www.baidu.com">百度</a>
</body>
</html>

分析：

a.<!DOCTYPE html>
文檔類型聲明（Document Type Declaration，也稱 Doctype）。它主要告訴瀏覽器所查看的文件類型。在以往的 HTML4.01 和 XHTML1.0 中，它表示具體的 HTML 版本和風格。而如今 HTML5 不需要表示版本和風格了。

b.head 元素
用來包含元數據內容，元數據包括：<link>、<meta>、<noscript>、<script>、<style>、<title>。這些內容用來瀏覽器提供信息，比如 link 提供 CSS 信息，script提供 JavaScript 信息，title 提供頁面標題等。

c.meta 元素
這個元素用來提供關於文檔的信息，起始結構有一個屬性爲：charset="utf8"。表示告訴瀏覽器頁面採用的什麼編碼，一般來說我們就用 utf8。當然，文件保存的時候也是utf8，而瀏覽器也設置 utf8 即可正確顯示中文。

----------------------------------------------------------

第三章文本格式

1.表示關鍵字和產品名稱
HTML5
解釋：元素實際作用就是加粗,就是標記一段文字，但並不是特別強調或重要性。
2.表示重要的文字
HTML5
解釋：元素實際作用和一樣，就是加粗。從語義上來看，就是強調一段重要的文本。

3. 強制換行、安全換行
 Thisabcdkedkslakdjfkdlsakd is apple.
解釋：在任意文本位置鍵入 都會被換行，而在英文單詞過長時使用會根據瀏覽器的寬度適當的裁切換行。

4.表示外文詞彙或科技術語
HTML5
解釋：元素實際作用就是傾斜。從語義上來看，表示區分周圍內容，並不是特別強調或重要性。
5.加以強調
HTML5
解釋：元素實際作用和一樣，就是傾斜；從語義上來看，表示對一段文本的強調。

6.<s>表示不準確或校正
<s>HTML5</s>
解釋：<s>元素實際作用就是刪除線；從語義上來看，表示不準確的刪除。
7.<del>表示刪除文字
<del>HTML5</del>
解釋：<del>元素實際作用和<s>一樣，就是刪除線；從語義上來看，表示刪除相關文字。

8.表示給文字加上下劃線
HTML5
解釋：元素實際作用就是加一條下劃線；從語義上來看，並不強調此段文本。

9.<ins>添加一段文本
<ins>HTML5</ins>
解釋：<ins>元素實際作用和一樣，加一條下劃線；從語義上來看，是添加一段文本，起到強調的作用。
10.添加小號字體
HTML5
解釋：元素實際作用就是將文本放小一號。從語義上來看，用於免責聲明和澄清聲明。

11.添加上標和下標
5
5
解釋：和元素實際作用就是數學的上標和下標。語義也是如此。
12.<code>等表示輸入和輸出
<code>HTML5</code>
<var>HTML5</var>
<samp>HTML5</samp>
<kdb>HTML5</kdb>

解釋：<code>表示計算機代碼片段；<var>表示編程語言中的變量；<samp>表示程序或計算機的輸出；<kdb>表示用戶的輸入。由於這屬於英文範疇的，必須將 lang="en"英語才能體現效果。

13.<abbr>表示縮寫
<abbr>HTML5</abbr>
解釋：<abbr>元素沒有實際作用；從語義上看，是一段文本的縮寫。
14.<dfn>表示定義術語
<dfn>HTML5</dfn>
解釋：<dfn>元素就是一般性的傾斜；從語義上看，表示解釋一個詞或短語的一段文本。
15.<q>引用來自他處的內容
<q>HTML5</q>
解釋：<q>元素實際作用就是加了一對雙引號。從語義上來看，表示引用來自其他地方的內容。
16.<cite>引用其他作品的標題
<cite>HTML5</cite>
解釋：<cite>元素實際作用就是加粗。從語義上來看，表示引用其他作品的標題。
17.<ruby>語言元素
<ruby> 饕<rp>(</rp><rt>tāo</rt><rp>)</rp> 餮<rp>(</rp><rt>tiè</rt><rp>)</rp> </ruby>
解釋：<ruby>用來爲非西方語言提供支持。<rp><rt>用來幫助讀者掌握表意語言文字正確發音。比如：漢語拼音在文字的上方。但目前 Firefox 還不支持此特性。
18.<bdo>設置文字方向
<bdo dir="rtl">HTML5</bdo>
解釋：<bdo>必須使用屬性 dir 纔可以設置，一共兩個值：rtl（從右到左）和 ltr（從左到右）。一般默認是 ltr。還有一個<bdi>元素也是處理方向的，由於是特殊語言的特殊效果，且主流瀏覽器大半不支持，忽略。
19.突出顯示文本
HTML5
解釋：實際作用就是加上一個黃色的背景，黑色的字；從語義上來看，與上下文相關而突出的文本，用於記號。
20.<time>表示日期和時間
<time>2015-10-10</time>
解釋：<time>元素沒有實際作用；從語義上來看，表示日期和時間。
21.表示一般性文本
HTML5
解釋：元素沒有實際作用；語義上就是表示一段文本，我們經常用它來設置 CSS 等操作。

-----------------------------------------------------------------

第四章超鏈接和路徑

1.target 屬性：_blank(在新窗口或標籤頁中打開文檔);

_parent 在父窗框組（frameset）中打開文檔

_self 在當前窗口打開文檔（默認）

_top 在頂層窗口打開文檔

而 HTML5 中，框架基本被廢棄，只能使用<iframe>元素，且以後大量結合 JavaScript 和 PHP 等語言配合，框架用的就很少了。

2.目錄語法

當前路徑：./

磁盤路徑，絕對路徑舉例：<a href="file:///D:/備課/HTML5 第一季/code/index2.html">index2</a>

同一個目錄：index2.html 或./index2.html；
在子目錄：xxx/index2.html；
在孫子目錄：xxx/xxx/index2.html；
在父目錄：../index2.html；
在爺爺目錄：../../index2.html；

3.錨點設置舉例：

	<a href="#1" name="home">第一章</a>
	<a href="#2" name="home">第二章</a>
	<a href="#3" name="home">第三章</a>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<a name="1">這是第一章內容<a href="#home">回頂部</a>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<a name="2">這是第二章內容<a href="#home">回頂部</a>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<a name="3">這是第三章內容<a href="#home">回頂部</a>

點擊“第一章，根據“#1”跳轉到name爲“1”的鏈接位置，點擊"回頂部"，跳轉到name爲"home"的鏈接位置。

------------------------------------------------------------------------------------------

第5章分組元素

:元素實際作用就是將內部包含的文本形成一個段落；而段落和段落之間保持一定量的空隙。

<div>:和段落的區別就是，兩段文本的上下空隙是沒有的，空隙間隔和 換行一樣。

<blockquote>:和一樣的鍛鍊空隙+首位縮進，，語義上表示：大段的引用他出的內容。

<pre>:實際作用就是編輯器怎麼排版的，原封不動的展現出來。當然，這種只適合簡單的排版，複雜的排版就無法滿足要求了。

<hr>:分割線

<ul><li>:添加無序列表

<ol><li>添加有序列表 (ol屬性：a.start從第幾個序列開始統計，如start="2"; reversed屬性：是否倒敘排列，<ol reversed>一半瀏覽器不支持;type類型，1，a,A,i,I)

(li屬性:value，強行設置某個項目的編號。)

<dl><dt><dd>生成說明列表:

<dl>
    <dt> 這是一份文件 </dt>
    <dd> 這裏是這份文件的詳細內容 1 </dd>
    <dd> 這裏是這份文件的詳細內容 2 </dd>
</dl>

這三個元素是一個整體，但<dt>或<dd>並非都必須出現。表示包含一系列術語和定義說明的列表。dt 在 dl 內部表示術語，一般充當標題；dd 在 dl 內部表示定義，一般是內容。

<figure><figcaption>使用插圖:

<figure>
    <figcaption> 這是一張圖 </figcaption>
    <img src="img.png">
</figure>

figcaption是圖片標題。

---------------------------------------------------------------------------------------
第6章表格元素

1.合併列或行：

<table border="1" style="width:300px;">
    <tr>
    	<th rowspan="4">基本情況</th>
        <th>姓名</th>
        <th>性別</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
    <tr>
   <td colspan="3">統計：共2人</td></tr>
</table>

效果如圖：

2.添加<caption><head><tfoot><tbody>,可以不按順序寫標題，表頭，表腳，表體，並設置某一行的背景色：

<table border="1" style="width:300px;">
  <caption>這是一個人物表</caption>
  <tfoot>
 	<tr>
		<td colspan="3">統計：共2人</td>
	</tr>
  </tfoot>
  <tbody>
 <tr style="background:yellow;">
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
  </tbody>
	<thead>
 	  <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>婚姻</th>
    	</tr>
	</thead>
</table>

效果如圖：

3.設置列的背景色：

<table border="1" style="width:300px;">	
	<colgroup style="background:yellow" span="1"></colgroup>
	<colgroup style="background:green" span="1"></colgroup>
	<colgroup style="background:pink" span="1"></colgroup>
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
</table><br>

效果如圖：

4.第三個示例的另一種寫法：

<table border="1" style="width:300px;">	
	<colgroup>
		<col>
		<col style="background:pink;" span="2">
	</colgroup>
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
</table><br>

第一個<col>佔了一列，光標移動第二列，第二個<col>的span屬性爲2，表示從第二列開始佔了2列，所以2和3列爲設置的背景色，效果如圖：

html5學習筆記（一）（摘抄講義加部分理解）

EXCEL中下拉菜單中添加新選項或者刪除選項

號稱能打敗MLP的KAN到底行不行？數學核心原理全面解析

Python 爬蟲：Spring Boot 反爬蟲的成功案例

京東科技數字化營銷能力的演進與最佳實踐| 京東雲技術團隊

Java中止線程的方式

[轉帖]Oracle Exadata 學習筆記之核心特性Part1

《最新出爐》系列入門篇-Python+Playwright自動化測試-43-分頁測試

HTTP協議相關文檔

判斷checkBox標籤某一個選項是否被選中

jsp 回顯顯示select

sql查詢find_in_set，字段包含多個ID，並用逗號分開，查詢該字段是否包含某個ID

html5學習筆記（二）（摘抄講義加部分理解）

一個簡單的存儲過程及擴展

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結