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 ="網易是中國領先的網際網路技術公司,為使用者提供免費郵箱、遊戲、搜尋引擎服務,開設新聞、娛樂、體育等30多個內容頻道,及部落格、視訊、論壇等互動交流,網聚人的力量。" />
以上是設定頁面描述,與 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>