01前端入門 html
電腦相關
\ 快捷鍵
| ctrl + tab | 切換 | win + e | 開啟資源管理器 |
|---|---|---|---|
| alt + f4 | 關閉程式 | win + d | 顯示桌面 |
| f2 | 重新命名 | ctrl + 空格 | 切換中英文 |
shift + space 全形半形切換
\ 檢視臨時資料夾
地址 C:\Users\Danny（使用者名稱）\AppData\Local\Microsoft\Windows\Temporary Internet Files
第二次開啟頁面覺得比第一次快是因為有了快取
\ 上網的實質
上網就是請求資料，就是檔案傳輸
伺服器上存放著網頁的相關檔案，包括html檔案、css檔案、js檔案、圖片等。當我們開啟瀏覽器，輸入網址，我們的計算機就會對這些檔案發出HTTP請求。
伺服器收到請求之後，會把這些檔案通過HTTP協議，傳輸到我們的計算機中（儲存到了剛才那個臨時資料夾中）。這些檔案，將在我們計算機本地的瀏覽器中，進行渲染、呈遞
超文字傳輸協議HTTP
Hypertext Transfer Protocol
這是一個檔案的傳輸協議，我們上網的時候，所有的檔案都是通過HTTP這個協議，從伺服器上傳輸到客戶的電腦裡面的
HTML是英語HyperText Markup Language的縮寫，超文字標記語言
現在的業界的標準，網頁技術嚴格的三層分離
- html就是負責描述頁面的語義；
- css負責描述頁面的樣式；
- js負責描述頁面的動態效果的
問題： h1標籤的作用
- 正解： 給文字增加主標題的主義
- 誤： 給文字加粗、加黑、加大
ps: HTML4.01這個版本，這個版本是IE6開始相容的。HTML5是IE9開始相容的
字符集
有兩個字型檔 UTF-8 和 gb2312。
UTF-8 是國際通用字型檔，裡面涵蓋了所有地球上所有人類的語言文字，比如阿拉伯文、漢語、鳥語……
gb2312 是國標，是中國的字型檔，裡面僅涵蓋了漢字和一些常用外文，比如日文片假名，和常見的符號
UTF-8 裡面儲存一個漢字 3 個位元組。而 gb2312 中儲存一個漢字 2 個位元組
ps: 用 meta 標籤可以聲明當前這個 html 文件的字型檔，但是一定要和儲存的型別一樣，否則亂碼
sublime中的設定：file -> save with encoding
<meta name="Description" content 以上是設定頁面描述，與 SEO 相關 （search engine optimization，搜尋引擎優化）
<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,簡訊" />
問題： h 標籤放到 p 標籤中
結果：以前說不允許，瀏覽器會自動閉合 p 標籤，使 h 標籤前後各有一個 p 標籤 （審查元素 f12）
html 標籤
<img src="baby.jpg" alt="巴黎結婚照" />
<!-- alt是英語 alternate “替代”的意思，出錯圖片無法被顯示的時，
出現的替代文字（有的瀏覽器不支援） -->
a 標籤 a 是英語 anchor “錨”的意思
<!-- 跳轉頁面 href = -->
<a href="01.html" title="title內容" alt="alt內容" target=_blank>跳轉頁面</a>
title 為元素提供額外說明資訊,滑鼠滑過顯示
alt 屬性則是用來指定替換文字
href 是英語 hypertext reference 超文字地址的縮寫
blank 就是“空白”的意思，就表示新建一個空白視窗
<!-- 跳轉到錨點位置 href = -->
<a href="#wdzp">點選我就檢視我的作品</a>
錨點用 name 屬性來設定，一個a標籤如果 name 屬性（或者 id 屬性），那麼就是頁面的一個錨點
字元實體
ps: 實體名稱對大小寫敏感，瀏覽器也許並不支援所有實體名稱（對實體數字的支援卻很好）
| 顯示結果 | 描述 | 實體名稱 | 實體編號 |
|---|---|---|---|
| 空格 | 空格 | |
  |
| < | 小於號 | < |
< |
| > | 大於號 | > |
> |
| & | 和號 | & |
& |
| " | 引號 | " |
" |
| ’ | 撇號 | ' (IE不支援) |
' |
| ￠ | 分（cent） | ¢ |
¢ |
| £ | 鎊（pound） | £ |
£ |
| ¥ | 元（yen） | ¥ |
¥ |
| € | 歐元（euro） | € |
€ |
| § | 小節 | § |
§ |
| © | 版權（copyright） | © |
© |
| ® | 註冊商標 | ® |
® |
| ™ | 商標 | ™ |
™ |
| × | 乘號 | × |
× |
| ÷ | 除號 | ÷ |
÷ |
不間斷空格（non-breaking space）
瀏覽器會截斷 html 中的空格，只留一個，要增加數量，用字元實體
html 標籤
<body link="red" vlink="green" alink="yellow">
<br/> <hr/> <p> ...</p>
<center> 麥子學院！非常棒的線上IT培訓！</center>
<pre>麥子學院！ 非常棒的線上IT培訓！</pre>
<font size="7" color="red" face="新細明體">麥子學院</font>
<ul type='circle'> <!-- disc square -->
<li>蘋果1</li>
<li>蘋果2</li>
<li>蘋果3</li>
</ul>
<li>B選項 <!-- 巢狀 -->
<ol type="a">
<li>第一節課</li>
<li>第二節課</li>
<li>第三節課</li>
</ol>
</li>
<dl> <!--自定義列表-->
<dt>軟體說明：</dt>
<dd>簡單介紹軟體的功能及基本應用</dd>
<dt>軟體介面</dt>
<dd>用於選擇軟體的外觀</dd>
<dd>用於選擇軟體的功能</dd>
</dl>
<!--表格-->
<table width="960" align="center" border="1" rules="all" cellpadding="15">
<caption align="bottom">表格的標題</caption>
<tr bgcolor="#ccc" align="center" valign="center">
<th bgcolor="red" align="left" rowspan="2" colspan="2">班級</th>
<th>姓名</th>
<th>年齡</th>
<th>成績</th>
</tr>
<tr align="center">
<td>四年級1班</td>
<td>張三</td>
<td>16</td>
<td bgcolor="red"><font color="white">53</font></td>
</tr>
</table>
</body>
width="30%"
其他一些標籤： b i u s sub sup cite em strong small del big
HTML5新增和廢棄的標籤
\ 廢棄的標籤
以下的 HTML 4.01 元素在HTML5中已經被刪除，雖然瀏覽器為了相容性考慮都還支援這些標籤，但建議使用新的替代標籤，矛盾的是老瀏覽器對新標籤的支援度又不夠，視專案的受眾物件而定了。
1、能用CSS代替的元素
這些元素包含basefont、big、center、font、s、strike、tt、u。這些元素純粹是為頁面展示用的，表現的內容應該由CSS完成。
2、frame框架
這些元素包含 frameset、frame、noframes。HTML5中不支援 frame 框架，只支援 iframe 框架，或者用伺服器方建立的由多個頁面組成的符合頁面的形式，刪除以上這三個標籤。
3、只有部分瀏覽器支援的元素
這些元素包含 applet、bgsound、blink、marquee 等標籤。
4、其他被廢除的元素
廢除 rb，使用 ruby 替代 廢除 acronym 使用 abbr 替代
廢除 dir 使用 ul 替代 廢除 isindex 使用 form 與 input 相結合的方式替代 廢除 listing 使用 pre 替代 廢除 xmp 使用 code 替代
廢除 nextid 使用 guids
廢除 plaintex 使用 “text/plian”（無格式正文）MIME 型別替代
表單：
<input type="hidden" value="隱藏的內容" name="mihiddenma" size="10">
type: text password image button reset submit radio checkbox
<select name="dizhi">
<option value="sichuan">四川</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>