H5~標籤、選擇器
阿新 • • 發佈：2018-12-26
*******************************標籤*****************************************************************************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<!-- 塊屬性標籤 支援設定寬高 上下排列 （獨佔一行）-->
<div>用來劃分區域</div>
<!-- 段落 用來放置文字 -->
<p>啦啦啦，啦啦啦，我是賣報的小行家</p>
<!-- 標題 h1~h6 h1標籤只能寫一個-->
<h1>大牡丹婚慶網</h1>
<h2>大牡丹婚慶網</h2>
<h3>大牡丹婚慶網</h3>
<!-- 列表標籤 -->
<!-- 無序列表 -->
<ul>
<li>金陵十二釵</li>
<li>插圖版金瓶梅</li>
<li>精裝版金瓶梅</li>
<li>水滸傳</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>我的女神劉亦菲 </li>
<li>歌聲天籟人又靚</li>
<li>小拳長錘我胸口</li>
<li>吹完就把我帶走</li>
</ol>
<!-- 行屬性標籤 不可以設定寬高 自動排成一行（左右排列）-->
<!-- 超連結 href中寫要連線到的地址-->
<a href="http://www.baidu.com">
未滿十八週歲禁止點選
</a>
<!-- 放置文字 -->
<span style="100px;height: 100px;background-color: green;">寶強</span>
<span style="100px;height: 100px;background-color: green;">陳羽凡</span>
<!-- 行塊屬性標籤 既支援寬高 又可以排成一行-->
<!-- ../ 返回上一級目錄 img標籤中的scr中寫圖片的絕對路徑或者圖片的伺服器路徑（網路地址） -->
<img style="width: 450px;height: 600px;" src="img/timg.jpg">
<img style="width: 450px;height: 600px;" src="img/2.jpg" alt="圖片飛走了">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1548448769,1982815204&fm=26&gp=0.jpg">
</body>
</html> ************選擇器****************************************************************************
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <style type="text/css"> /* 標籤選擇器 語法：標籤名{樣式} */ div{ width: 200px; height: 400px; background-color: yellow; } /* class選擇器 語法： "."+class名{樣式} 1.class選擇器優先順序比標籤選擇器高 2.不同標籤可以使用相同的class名、 3.一個標籤可以使用多個class名 ， 設定時用空格隔開 */ .blue_div{ background-color: blue; } .big_div{ width: 500px; height: 500px; } .father{ width: 200px; height: 200px; background-color: gray; } /* 後代選擇器 語法：父選擇器 子選擇器{樣式} class 選擇器權重10 標籤選擇器權重1 後代選擇器權重由父選擇器和子選擇器的權重相加 */ .father div{ background-color: yellow; } .father .son{ width: 100px; height: 100px; background-color: black; } /* 10個div 135是黃色，其他都是綠色，2 3 4寬高200px其他都是100px； */ </style> </head> <body><!-- <div>我是一個特別隨便的div</div> <div class="blue_div big_div">我是小二</div> <div class="blue_div">我手機哦</div> --> <div class="father"> <div class="son"></div> </div> </body> </html>
補充：
<!-- 宣告下面所有程式碼的規範 使用的是HTML5 --> <!DOCTYPE html> <html> <head> <!-- 設定編碼格式 --> <meta charset="utf-8"> <!-- 標題 --> <title>不可描述的網站</title> </head> <body> <!-- div 標籤 最常用的標籤 無語義 ，常用來劃分區域 --> <div></div> <div style="width: 300px;height: 400px;"> <div style="width: 300px;height: 30px;background-color: yellow;"> 我是導航條</div> <div style="width: 300px;height: 370px;background-color: pink;">我是內容</div> </div> </body> </html>
標籤補充：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>補充</title>
<style type="text/css">
p{
/*字型顏色*/
color: red;
/*字型的大小 預設是16px*/
font-size:20px;
}
div{
width: 500px;
height: 700px;
/*背景圖片*/
background-image: url(img/2.jpg);
/*背景圖片尺寸*/
background-size: 100% 100%;
}
</style>
</head>
<body>
<div>
<p>英雄總是悲遲暮</p>
<p>自古紅顏多薄命</p>
<p>那一抹風情</p>
<p>時光後，撩撥人心</p>
</div>
<!-- br 標籤：換行 -->
<p>
久旱逢甘霖（一滴）
<br>
他鄉遇故知（前女友）
<br>
同房花燭夜 （人妖）
<br>
金榜題名時（重名）
</p>
</body>
</html>今天的分享到這，裡面如有錯誤、等請大家積極留言，我會在第一時間與大家交流改錯。