HTML5基礎知識筆記（更新）
阿新 • • 發佈：2019-01-14
一 HTML
通常意義的h5是一個技術總稱，約等於html5+css3+js
1.1 含義
1.2 基本骨架
<html>
<head>
<title></title>
</head>
<body>
網頁要顯示的內容
</body>
</html>
html5基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> DTD 文件型別說明
<meta charset="UTF-8"> 字符集設定 UTF-8是支援絕大數語言
假如大家用sublime,快捷方式html:5 按住tab或ctrl+E
1.3 編輯器
記事本 sublime vscode(IDE) Hbuilder webstorm ...
1.4 常用標籤
標題標籤 h1~h6 雙標籤 <h1></h1> 開始標籤和結束標籤
Q： 請談談你對標題標籤的理解？
從語義的角度回答 標題標籤給文字賦予標題的含義
SEO搜尋引擎優化
結構化的語言標記要看結構。
劃線標籤 <hr /> 單標籤 瞭解 線條以後用css完成
段落標籤 <p></p> 雙標記
換行標籤 <br /> 單標籤
div和span標籤 無語義的標籤 實在找不到標籤表示的時候 考慮用div和span
span可以放文字、圖片、表單
div可以自我內部巢狀，span內部不能巢狀div
pre標籤保留原文字格式
<!--註釋
1 標籤可以擁有多個屬性 屬性不分前後順序 屬性之間用空格隔開
2 標籤屬性語法 <標籤名 屬性1="屬性1值" 屬性2="屬性2值" />
3 任何標籤的屬性值都有預設值 省略屬性則取這些預設值
-->
影象標籤 <img /> 單標籤（圖片出問題時，使用alt顯示提示。還可以內嵌title，滑鼠放上去顯示。還可以width，high最好等比例。還有邊框border,預設黑，畫素設定粗細）
超連結 <a href="地址"> 超連結名字(後面加路徑，#等於原頁面，路徑後加target=“_blank”開啟新頁面，中間路徑也可以用影象標籤) </a> 應用：還可以做錨點
錨點
<a href="#值">文字</a>
需要跳轉到的地方打一個標記 <a name="值"></a>或<h2 id="值">文字</h2>，標記可以不用文字，還是用標題表示
跨頁面錨點
在#前加包含跳轉地點的網頁地址，帶字尾的全稱
base標籤 單標記 設定在head中 作用 讓頁面所有的超連結可以在新視窗開啟
＜base target=＂_blank＂ /＞
實體符號
＜用<
＞用>
&用&
因為有空白摺疊機制， 為1個空格
註釋
路徑 絕對路徑和相對路徑
絕對路徑 F:\訓練營\day3 帶有碟符的路徑
相對路徑 說明有個參照物
情況一
day3資料夾下面
01.html 1.jpg
01.html中 <img src="1.jpg" />
情況二
前端資料夾 > day3資料夾 > 01.html
1.jpg <img src="../1.jpg" />
./當前目錄
../上一級
/下一級
列表
1 無序列表
<ul>
<li>1</li>
<li>2</li>
</ul>
2 有序列表
<ol>
<li></li>
</ol>
3 自定義列表
<dl>
<dt></dt> 列表標題
<dd></dd> 列表描述，dd是描述dt的，多對1關係
</dl>
表格
在出現CSS前，老式佈局是表格加div
caption表格標題，此為表格自帶標籤
tr表示增加行
td表示增加列(可加 rowspan 橫跨行數，被橫跨行需要刪除對應。可加colspan 橫跨列數，也需要刪除自己對應的多列)
th表示表頭，加黑居中，可包裹在thead標籤中(與之對應有tbody，如果沒有thead，一般瀏覽器會預設新增tbody,tbody會均分高度與寬度，thead不會，tfoot在body後面，存一些統計資訊)
cellspacing單元格之間間距
border邊框粗細
align是讓整個表格居中
表單
input type
text 文字框
password 密碼
radio 選項（加name值，可以同值唯一，達到互斥）
checkbox 複選項