常見標籤和淺析SEO
1、img 標籤
<img src="miaowei.jpg" alt="美女">
2、a標籤
<a href="#" ></a>
功能一、跳轉地址
<a href="www.baidu.com" target="_blank">sss</a>
target 定義頁面中所有的鏈接爲新窗口打開
<head>
<title>document</title>
<meta charset="utf-8">
<base target="_blank"> 定義頁面中所有的鏈接爲新窗口打開
<style type="text/css">
</style>
</head>
<body>
<div id="box"></div>
<img src="miaowei.jpg" alt="美女">
<a href="https://www.baidu.com">sss</a>
功能二、當a標籤中的href中不在是鏈接，而是文件地址，則是下載文件
功能三、錨點（頁面定位）
<!DOCTYPE html>
<html>
<head>
<title>document</title>
<meta charset="utf-8">
<base target="_blank"> 定義頁面中所有的鏈接爲新窗口打開
<style type="text/css">
</style>
</head>
<body>
<div id="box">
<a href="#box1">秦時明月</a>
<a href="#box2">諸子百家</a>
<a href="#box3">萬里長城</a>
<a href="#box4">刀光劍影</a>
<a href="#box5">揭竿而起</a>
<a href="#box6">長平之戰</a>
</div>
<div id="box1" style="height: 500px">
秦時明月<br />...............<br />
</div>
<div id="box2" style="height: 500px">
諸子百家<br />...............<br />
</div>
<div id="box3" style="height: 500px">
萬里長城<br />...............<br />
</div>
<div id="box4" style="height: 500px">
刀光劍影<br />...............<br />
</div>
<div id="box5" style="height: 500px">
揭竿而起<br />...............<br />
</div>
<div id="box6" style="height: 500px">
長平之戰<br />...............<br />
</div>
</body>
</html>
總結：
鏈接、下載、錨點的三個作用。
3、h 標題標籤
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
4、p 段落標籤
<p>段落</p>
5、strong 強調加粗
<strong> 強調</strong>
6、em 強調
<em> 強調（內容顯示爲斜體）</em>
7、 span 區分樣式標籤
<span> 區分樣式</span>
8、ol 有序列表
<ol>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ol>
9、ul無序列表
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
10、dl定義列表
<dl>
<dt>定義列表標題</dt>
<dd>定義列表項</dd>
<dd>定義列表項</dd>
<dd>定義列表項</dd>
<dd>定義列表項</dd>
</dl>
11、淺析SEO
部分方法：
a、頁面標籤語義化；
b、使用對SEO有利的標籤：h1、h2、h3、strong、em…
c、提高頁面關鍵詞密度
12、選擇符
a、id選擇符 不能重複
<div id="box1">塊</div>
#box1{width: 100px; height: 100px; background: red;}
。。。
b、羣組選擇符
#box1,#box2,#box3{width: 100px; height: 100px; background: red;}
c、 class 選擇符
.box1{width: 100px; height: 100px; background: red;}
e、包含選擇符
div p span{width: 100px; height: 100px; background: red; }
f、通配符
* {border:1px solid red;}
13、選擇符優先級
a、同級樣式默認是後者覆蓋前者；
b、class中多個名稱不會前者後者覆蓋前者；
c、id選擇器優先級高於class優先級；
d、行間樣式優先級高於id選擇器；
14、僞類：用於向被選中元素添加特殊效果（元素在特定情況下才具備的）。
a標籤的僞類
link 未訪問（默認）
hover 鼠標懸停（鼠標劃過）
active 鏈接激活（鼠標按下）
visited 訪問過後（點擊過後）
注意：其他的標籤一般支持hover
<style type="text/css">
/*僞類
link 默認
hover 鼠標懸停
active 鏈接激活
visited 訪問過後
*/
a:link{font-size: 60px; text-decoration: none; color: green;}
a:visited{color: black;}
a:hover{color: red; text-decoration: underline;}
a:active{color: yellow;}
</style>