前端HTML 與css 整理（未完）
阿新 • • 發佈：2018-06-10
簽名 跳轉 doc emp 分類 for ... 小寫 tar
HTML 中的標簽存放於文本文件中 需要按照以下固定的文檔結構組織：
<!DOCTYPE HTML>
<html>
<head>
頭部相關信息
</head>
<body>
頁面主體相關內容
</body>
</html>
標簽解釋：
#1、<!DOCTYPE HTML>是文檔聲明，必須寫在HTML文檔的第一行，位於<html>標簽之前，表明該文檔是HTML5文檔。
#2、<html></html> 稱為根標簽，所有的網頁標簽都在<html></html>中。
#3、<head></head> 標簽用於定義文檔的頭部，它是所有頭部元素的容器。常見的頭部元素有<title>、<script>、<style>、<link>和<meta>等標簽，頭部標簽在下一節中會有詳細介紹，<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。
#4、在<body>和</body>標簽之間的內容是網頁的主要內容，最終會在瀏覽器中顯示出來。
標簽關系：
並列和嵌套
並列：head 和body
嵌套：html內有body
二 HTML標簽詳細語法與註意點
標簽的語法：
<標簽名 屬性1=“值1” 屬性2=“值2” ......>內容部分</標簽名>
<標簽名 屬性1=“值1” 屬性2=“值2” ....../>
註意：
#1. HTML標簽不區分大小寫，`<h1>`和`<H1>`是一樣的，但是我們通常建議使用小寫，大部分程序員都以小寫為準。
#2. 標簽之間是可以嵌套的。例如：<div><p>段落</p></div>,但不能交叉<div><p></div></p>
#3、不是所有標簽都支持互相嵌套。
三 HTML中標簽分類：
單從是否可以嵌套子標簽的角度去分， 標簽分為兩類
1：容器類標簽（能嵌套其他標簽）
h 系列
ul>li
ol>li
d1>dt+dd
div
2文本標簽（文本標簽 只能嵌套文字、圖片超連接標簽。
p
span
strong
em
ins
del
四 head內常用標簽
1 meta 相關
#1、指定字符集
<meta charset="gbk">
#2、頁面描述
<meta name="Description" content="具體描述。。。">
#3、關鍵字：有助於搜索引擎SEC優化，再怎麽優化也抵不過競價排名
<meta name="Keywords" content="網易，郵箱，遊戲，新聞">
#4、3秒後跳轉
<meta http-equiv="refresh" content="3,http://www.baidu.com">
#5、三秒刷新
<meta http-equiv="refresh" content="3">
2：非meta標簽
#1、標題
<title>百度一下，你就知道</title>
#2、網站的圖標
<link rel="icon" href="https://www.baidu.com/favicon.ico">
#3、定義內部樣式
<style></style>
#4、引入外部樣式文件
<link rel="stylesheet" href="mystyle.css">
#5、定義JavaScript代碼或引入JavaScript文件
<script src="hello.js"></script>
五 body標簽
h 標簽
h1~ h6 標記內容為1~6級標題
p 標簽 標記為內容 的一哥段落
img標簽 標記一哥圖片
用法：<img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "鼠標懸停到圖片上時顯示的內容" />
2.1 src指定的圖片地址可以是網絡地址，也可以是一個本地地址，本地地址可以用絕對或相對路徑，但通常用相對路徑，相對路徑是以html文件當前所在路徑為基準進行的
2.2 圖片的格式可以是png、jpg和gif
2.3 alt="圖片加載失敗時顯示的內容"
2.4 title = "鼠標懸停到圖片上時顯示的內容"
2.5 如果沒有指定圖片的width和height則按照圖片默認的寬高顯示，如果指定圖片的width和height則可能讓圖片變形
那如果又想指定寬度和高度，又不想讓圖片變形，我們可以只指定寬度和高度的一個值即可
只要指定了一個值，系統會根據該值計算另外一個值，並且都是等比拉伸的，圖片將不會變形
a標簽
標記一哥內容為超鏈接
#1、超鏈接標簽是超文本文件的精髓，可以控制頁面與頁面之間的跳轉，語法如下
<a href="跳轉到的目標頁面地址" target="是否在新頁面中打開" title="鼠標懸浮顯示的內容">需要展現給用戶查看的內容/也可以是圖片</a>
#2、註意：
2.1 a標簽不僅可以標記文字，也可以標記圖片
<a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a>
2.2 a標簽必須有href屬性，href的值必須是http://或https://開頭
2.3 a標簽還可以跳轉到自己的頁面
<a href="template/aaa.html">錘你胸口</a>
2.4 target="_blank"代表在新頁面中打開，其余的值均無需記憶，
如果頁面中大量的a標簽都需要設置target="_blank",那麽我們可以在head標簽內新增一個base標簽進行統一設置
<base target="_blank">
如果a標簽自己設置了target，那麽就以自己的為準，否則就會參照base的設置
2.5 title="鼠標懸浮顯示的內容
列表標簽
語義 標記一堆數據是一個整體列表
HTML分三種
1 無序列表ul>li 列表標簽中使用最多的一種非常重要
2 有序列表 極少用 ol>li
3 自定義列表 經常用
<dl>
<dt>自定義標題1<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
</d1>
<table>標簽
語義：標記一段數據為表格
#1、作用
表格標簽是一種數據的展現形式，當數據量非常大的時候，使用表格的形式來展示被認為是最清晰的
#2、格式
<table>
<tr>
<td></td>
</tr>
</table>
tr代表表格的一行數據
td表一行中的一個單元格
#3、註意點：
表格標簽有一個邊框屬性，這個屬性決定了邊框的寬度。默認情況下這個屬性的值為0，所以看不到邊框
form 標簽
語義標記表單
#1、什麽是表單？
表單就是專門用來接收用戶輸入或采集用戶信息的
#2、表單的格式
<form>
<表單元素>
</form>
前端HTML 與css 整理（未完）