web前端入門學習筆記——html基礎（傳智播客）
Html基礎
１ 常用快捷鍵
Ctrl+c | 複製 |
Ctrl+v | 貼上 |
Ctrl+x | 剪下 |
Ctrl+a | 全選 |
Ctrl+s | 儲存 |
Ctrl+z | 撤銷一步 |
Windows+d | 返回桌面 |
Windows+e | 我的電腦 |
Windows+r | 開啟執行 |
Alt+tab | 切換軟體 |
Ctrl+tab | 軟體文件之間的切換 |
F2 | 重新命名 |
F5 | 重新整理頁面 |
２ 認識html
２.1 Hyper text markup language
超文字標記語言。
超文字：超連結。（實現頁面跳轉）
２.2 Html結構標準
<! doctype html> 宣告文件型別
<html> 根標籤
<head> 頭標籤
<title></title> 標題標籤
</head>
<body> 主體標籤
</body>
</html>
Html 與htm是一樣的。
字尾名不能決定檔案格式，只能決定開啟檔案開啟的方式。
２.3 開發工具
Dw
歷史悠久，設計師使用。
Sublime 輕量級 有很多好用的外掛。
Webstorm 重量級 太過智慧。
新建檔案、開啟檔案、開啟資料夾 | |
Html:xt+tab | Html結構程式碼 |
tab | 補全標籤程式碼 |
Ctrl+shift+d | 快速複製一行 |
Ctrl+shiif+k | 快速刪除一行 |
Ctrl+滑鼠左鍵單擊 | 集體輸入 |
Ctrl+h | 查詢替換 |
Ctrl+f | 查詢 |
Ctrl+/ | 註釋 |
Ctrl+L | 快速選擇一行 |
Ctrl+shift+↑（↓） | 快速上移（下移）一行 |
F11 | 全屏 |
檢視----佈局 |
３ 標籤
３.1 單標籤
◆註釋標籤 ctrl+/
◆ 換行標籤 <br/>
◆ 水平線標籤 <hr />
３.2 雙標籤
<p>文字內容</p>
特點：上下自動生成空白行。<br>換行不會生成空白行。
標題標籤
h1-h6 取值到h6
h1 在一個頁面裡只能出現一次。
文字標籤
<font>文字內容</font>
文字格式化標籤
文字加粗標籤 <strong></strong> <b></b> 工作裡儘量使用strong
文字傾斜標籤
<em></em> <i></i> 工作裡儘量使用em
刪除線標籤
<del></del> <s></s> 工作裡儘量使用del
下劃線標籤
<ins></ins> <u></u> 工作裡儘量ins
◆注意：之所以工作裡使用<strong></strong> <em></em> <del></del>
<ins></ins> 是因為更有語義化。
３.3 圖片標籤和屬性
Src 圖片的來源 必寫屬性
Alt 替換文字 圖片不顯示的時候顯示的文字
Title 提示文字 滑鼠放到圖片上顯示的文字
Width 圖片寬度
Height 圖片高度
◆圖片沒有定義寬高的時候，圖片按照百分之百比例顯示，如果只更改圖片的寬度或者高度，圖片等比例縮放。
４ 路徑
４.1 相對路徑
相對於檔案自身出發，就是相對路徑。
◆檔案和圖片（html文件）在同一個目錄(資料夾) ，直接寫檔名。
◆圖片（html文件）的 檔案在下一級目錄裡。資料夾名稱+/+圖片（html）名稱
◆圖片（html）在檔案的上一級目錄裡，..+/+圖片（html）名稱
◆圖片在檔案的上一級的其他目錄裡，../資料夾名稱/圖片名稱
★總結：找到下一級目錄（資料夾）的圖片（檔案）用 /
跳出當前目錄使用../
４.2 絕對路徑
５ 超連結
href 去往的路徑（跳轉的頁面） 必寫屬性
title 提示文字 滑鼠放到連結上顯示的文字
target=”_self” 預設值在自身
頁面開啟（關閉自身頁面，開啟連結頁面）
Target=”_blank” 開啟新頁面（自身頁面不關閉，開啟一個新的連結頁面）
５.1 錨鏈接
1.先定義一個錨點
2.超連結到錨點
５.2 ，空鏈 不知道連結到那個頁面的時候，用空鏈
５.3 壓縮檔案下載 不推薦使用
５.4 超連結優化寫法
在<head></head>中寫道：<basetarget="_blank"> 讓所有的超連結都在新視窗開啟
６ 另存為 ctrl+shift+s
７ 特殊字元
８ 列表
８.1 無序列表
<ul>
<li></li> 列表項
<li></li>
<li></li>
</ul>\
type=”square” 小方塊
Type=”disc” 實心小圓圈
Type=”circle” 空心小圓圈
８.2 有序列表
<ol>
<li></li> 列表項
<li></li>
<li></li>
</ol>
◆type=”1,a,A,i,I” type的值可以為1,a,A,i,I
start=”3” 決定了開始的位置。
８.3 自定義列表
<dl>
<dt></dt> 小標題
<dd></dd> 解釋標題
<dd></dd> 解釋標題
</dl>
９ 音樂標籤
１０ 滾動
１１新的html結構
１１.1 !+tab html5的標籤結構，不用html:xt+tab了
Charset 編碼
Ascll
Ansi
Unicode
Gbk
Gb2312
Big5
Utf-8 通用字符集
１１.2 關鍵字
１１.3 網頁描述
１１.4 網頁重定向
這裡表示五秒之後跳轉到一個新的網站域名（比如原來的網站不用了，方便老使用者能通過原來的網跳到新頁面）
１１.5 連結外部樣式表
１１.6 設定icon圖示
網頁開啟最上面的小圖
１２ 表格
展示資料。 是對網頁重構的一個有益補充。
<table> 表格
<tr> 行
<td></td>列
<td></td>
<td></td>
</tr>
</table>
◆屬性：
Border=”1” 邊框
Width=”500” 寬度
Height=”300” 高
cellspacing=”2” 單元格與單元格的距離
cellpadding=”2” 內容距邊框的距離
align=”left | right | center”
如果直接給表格用align=”center” 表格居中
如果給tr或者td使用，tr或者td內容居中。
bgcolor=”red” 背景顏色。
１２.1 h表格的標準結構
<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
１２.2 表頭和單元格合併
◆ 表頭 <caption></caption>
快速輸入表格程式碼：table>tr*3>td*4s +tab
三行四列
colspan=”2” 合併同一行上的單元格
rowspan=”2” 合併同一列上的單元格
１２.3 表格標題、邊框顏色、內容垂直對齊
◆表格標題 <th></th>用法和td一樣
標題的文字自動加粗水平居中對齊
◆邊框顏色
◆內容垂直對齊方式
Valign=”top | middle | bottom”
１３ 表單
表單的作用是收集資訊。
表單的組成
◆提示資訊
◆表單控制元件
◆表單域
屬性：action:處理資訊
Method=”get | post”
Get通過位址列提供（傳輸）資訊，安全性差。
Post 通過1.php來處理資訊，安全性高。
◆文字輸入框
maxlength="6" 限制輸入字元長度
readonly=”readonly” 將輸入框設定為只讀狀態（不能編輯）
disabled="disabled" 輸入框未啟用狀態
name="username" 輸入框的名稱
value="大前端" 將輸入框的內容傳給處理檔案
◆密碼輸入框
★注意：文字輸入框的所有屬性對密碼輸入框都有效。
◆單選框
★只有將name的值設定相同的時候，才能實現單選效果。
★checked=”checked” 設定預設選擇項。
◆下拉列表
<select>
<option>下拉列表選項</option>
<option>下拉列表選項</option>
</select>
屬性：
Multiple=”multiple” 將下拉列表設定為多選項
Selected=”selected” 設定預設選中專案
<optgroup></optgroup> 對下拉列表進行分組。
Label=”” 分組名稱。
◆多選框
Checked=”checked” 設定預設選中項
◆多行文字框
Cols 控制輸入字元的長度。
Rows 控制輸入的行數
◆ 檔案上傳控制元件
◆檔案提交按鈕
★：可以實現資訊提交功能
◆普通按鈕
★不能提交資訊，配合JS使用。
◆圖片按鈕
★圖片按鈕可實現資訊提交功能
◆重置按鈕
★將資訊重置到預設狀態
◆表單資訊分組
<fieldset></fieldset> 對錶單資訊分組
<legend></legend> 表單資訊分組名稱
html5補充表單控制元件
１４ 標籤語義化
好的語義化的網站標準就是去掉樣式表文件之後，結構依然很清晰。
標籤語義化概念：根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）
-標籤語義化意義：
1:網頁結構合理
2:有利於seo:和搜尋引擎建立良好溝通，有了良好的結構和語 義你的網頁內容自然容易被搜尋引擎抓取；
3:方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）
4:便於團隊開發和維護
1：儘可能少的使用無語義的標籤div和span；
2：在語義不明顯時，既可以使用div或者p時，儘量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；
3：不要使用純樣式標籤，如：b、font、u等，改用css設定。
4：需要強調的文字，可以包含在strong或者em標籤中strong預設樣式是加粗（不要用b），em是斜體（不用i）；