文章目錄
- H5基礎
- html常用的布局標簽
- 文本樣式
- 常用css選擇器
- 塊元素以及盒模型
內容持續更新中…
H5基礎
html常用的布局標簽
<!-- html5 -->
<!DOCTYPE html><!-- 去掉變成HTML -->
<!-- 網頁的根標簽 -->
<html lang="en">
<!-- 頭部標簽 -->
<head>
<!-- 配置網頁資訊 -->
<meta charset="UTF-8">
<!-- 配置協議 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 網頁標題 -->
<title>Document</title>
</head>
<!-- body控制頁面內容區 -->
<body>
<!-- 每個標簽在瀏覽器渲染的時候都會被瀏覽器賦予特性 -->
<!-- h1 - h6都是標題標簽（區別是h1最大 -->
<h1>hello world</h1>
<!-- 段落標簽（用來展示一段文字內容） -->
<p>我的第一個網頁，三周之后我就可以完成第一個小程式了，</p>
<p>嘎嘎嘎嘎個</p>
<!-- 直接寫標簽名字 src:圖片的來源 source
alt: 當src是小的時候 加載alt alter:提示-->
<img src="海賊王.jpg" alt="圖片未連接">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F228841cf026b2a4af2624ac362733a8f86c63ccb.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620612333&t=cb5b26b6676574a2023c81ecca742f2e" alt="俺老孫去西天取經了">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180119%2Fbc406eb87edf4e62b615a352ce8b9701.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620612457&t=8ffa4985f27799329cf46c8ed85982d8" alt="ONE piece">
<img src="貂蟬.jpg" alt="貂蟬掉線了"><!-- 圖片網上下載-->
<!-- 超鏈接標簽 href:讓a標簽跳轉的位置 -->
<a href="http://www.taobao.com">淘寶網</a>
<!-- hr 修飾線段 -->
<a href="http://www.zhihu.com">知乎</a>
<a href="http://www.JD.com">京東</a>
<a href="http://www.acwing.com">AcWing</a>
<hr>
<!-- u1: 無序串列 unorder list -->
<ul>
<!-- 串列項 -->
<li>html標簽</li>
<li>css樣式</li>
<li>javascript</li>
</ul>
<ol>
<!-- 串列項 -->
<li>html標簽</li>
<li>css樣式</li>
<li>javascript</li>
</ol>
<p style="color: darkgoldenrod;">111111！</p>
<h1 style="color: darkred;">22222</h1>
</body>
</html>
文本樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本樣式</title>
<!-- style標簽用來設定元素的層疊樣式表 -->
<style>
/* 標簽名{} >>> 為對應的標簽來設定樣式 */
span{
/* 樣式名：樣式值 */
color: gold;
font-size: 25px;
font-family: "仿宋";
/* 字體粗細 */
font-weight: bold;
/* 首行縮進兩字符 1em = 16px */
text: indent 2em;
/* 背景顏色 */
background-color: hotpink;
}
</style>
</head>
<body>
<!-- 標簽內style屬性（行內樣式） C
color(樣式名)：darlcyan（樣式值）-->
<span style="color: darkcyan;">該標簽只是顯示內容,沒有任何語意</span>
<!-- 換行標簽 -->
<br>
<!-- font-size:字體大俠：px代表的是單位（像素） -->
<span style="font-size: 20px;">這個span的字體要比上面的字體大</span>
<br>
<span style="font-family: '仿宋';">這和span的文字型別與上面的兩個文字型別不同</span>
<br>
<span style="color: darkturquoise;font-size: 30px; font-family:'正楷'; " >上述三個文本樣式都可以再該標簽中呈現</span>
<hr>
<hr>
<hr>
<span>這個span的內容將采用style標簽內的樣式</span>
<P>不變色</P>
</body>
</html>
常用css選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
font-size: 25px;
font-weight: bold;
}
/* id值：id選擇器的查找 */
#red{
color: red;
}
#blue{
color: blue;
}
#green{
color: green;
}
.test{
color: hotpink;
}
/* 常用的選擇器：
標簽名選擇器：選擇所有的標簽
id選擇器：選擇對應id的元素，如果沒有則不生成
class類名選擇器：適合多個標簽采用同一套樣式的時候使用
*/
</style>
</head>
<body>
<!-- $讀取 -->
<!-- id：標簽的標識 -->
<!-- 同一個檔案不能出現重復的 id -->
<span id="red">1</span>
<span id="blue">2</span>
<span id="green">3</span>
<hr>
<!-- 標簽名字{內容 $代表要加載幾個} -->
<p>第1個p標簽</p>
<!-- class型別選擇器：多個標簽次要采用同一套樣式 -->
<p class="test">第2個p標簽</p>
<p class="test">第3個p標簽</p>
<p class="test">第4個p標簽</p>
<p>第5個p標簽</p>
</body>
</html>
塊元素以及盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>塊標簽塊元素</title>
<style>
/* 樣式選擇器之間使用，分隔開 */
html, body{
height: 100%;
/* 瀏覽器默認帶有8px的margin值 */
margin: 0;
}
#boxOne{
/* 可以使用百分比也可使用具體像素
塊元素不設定寬度的話, */
width: 400px;
/*h200 + tab快速生成 */
height: 200px;
background-color: indianred;
/* 一個值：代表的是同時為四個方向來設定外間距
兩個值：第一個只代表的是上下，第二個值代表左右
四個值：上，右，下，左
*/
/* margin的左右設定成auto */
margin: 50px auto;
/* 背景圖片 url：圖片的鏈接地址*/
background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=293552434,3858497752&fm=26&gp=0.jpg");
/* 設定背景的尺寸 */
background-size: 100% 100%;
/* 設定背景是否重復 默認是repeat */
background-repeat: no-repeat;
}
img{
width: 100%;
height: 200px;
}
#box{
width: 300px;
height:300px;
background-color: lightcoral;
/* 居中設定 */
margin: 50px auto;
/* 邊框寬度 */
border-width: 10px;
/* 邊框的樣式 */
/* border-style:dotted; */
/* border-color: lightseagreen; */
border-left: greenyellow dotted 10px;
border-right: indigo double 10px;
border-top: lightseagreen groove 10px;
border-bottom: maroon inset 10px;
/* 復合屬性 */
border: solid 10px red;
/* 設定邊框圓角的值 可以設定百分比 也可以設定像素*/
border-radius: 20px ;
}
</style>
</head>
<body>
<!-- 塊標簽div: 收納一定量的元素標簽
塊標簽可以設定大小-->
<div id="boxOne">
<!-- <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=293552434,3858497752&fm=26&gp=0.jpg" alt="連接錯誤"> -->
<a href="">這是圖片介紹</a>
</div>
<!-- # + id名字 會自動生成對應的加id的div -->
<div id="box"></div>
</body>
</html>
待續…
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/274750.html
標籤：其他
上一篇：HTML標簽學習