摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>網(wǎng)頁筆記</title>
<!-- 網(wǎng)頁標題引用小圖標方式 -->
<link rel="shortcut icon" type="image/x-icon" href="X.jpg">
<!-- 引用外部層疊樣式表 -->
<link rel="stylesheet" type="text/css" href="X.css">
<style type="text/css">
a{
/* a連接是否添加下劃線：否 */
text-decoration: none;
/* 字體顏色設(shè)置為黑色 */
color: #000;
}
/* a標簽偽類效果 */
a:hover{
/* 鼠標移上去字體變成紅色 */
color: red;
/* 鼠標移上去字體是否添加下劃線：是 */
text-decoration: underline;
}
ul li{
/* 清除無序列表標簽樣式 */
list-style: none;
}
ul li::before{
/* li文字前面插入一張圖片 */
content: url();
/* 圖片和li文字向右拉開30像素的距離 */
margin-right: 30px;
}
input{
/* 設(shè)置編輯框的高度 */
height: 8px;
/* 設(shè)置編輯框的寬度 */
width: 258px;
/* 設(shè)置編輯框的邊框為1 實線 顏色為#ccc */
border: 1px solid #ccc;
/* 設(shè)置編輯框的外邊距上部20像素 */
margin-top: 20px;
/* 設(shè)置編輯框的內(nèi)邊距20像素 */
padding: 20px;
}
button{
/* 設(shè)置按鈕的高度 */
height: 50px;
/* 設(shè)置按鈕的寬度 */
width: 300px;
/* 設(shè)置按鈕外邊距上部20像素 */
margin-top: 20px;
/* 設(shè)置按鈕的背景顏色 */
background: #FF6700;
/* 設(shè)置按鈕的自帶邊框為無 */
border: none;
/* 設(shè)置按鈕的字體為白色 */
color: #fff;
}
*{
margin: 0px;
padding: 0px;
}
table{
height: 300px;
border: 1px solid #ccc;
border-collapse: collapse; /* 合并邊框線 */
}
tr th{
height: 200px;
border: 1px solid #ccc;
width: 100px;
}
tr td{
height: 200px;
border: 1px solid #ccc;
width: 100px;
}
</style>
</head>
<body style="height: 2000px;">
<!-- text-indent 首行縮進兩個字符 -->
<!-- font-size 字體大小設(shè)置為20像素 -->
<!-- color 字體顏色設(shè)置為紅色 -->
<p style="text-indent:2em;font-size:20px;color:red;">Hello World!</p>
<!-- font-family 字體設(shè)置 -->
<p style="text-indent:2em;font-size:20px;color:red;font-family: monospace;">Hello World!</p>
<!-- 斜體標簽1 -->
<em>Hello World!</em>
<!-- 換行符 -->
<br>
<!-- 斜體標簽2 -->
<i>Hello World!</i>
<!-- 換行符 -->
<br>
<!-- font-size 字體大小設(shè)置為45像素 -->
<!-- font-weight 設(shè)置字體為粗體 -->
<em style="font-size:45px;font-weight:bold;">Hello World!</em>
<!-- 換行符 -->
<br>
<!-- del刪除標簽 span文本標簽 -->
<del>499元</del><span>399元</span>
<!-- pre標簽可以將p標簽內(nèi)隱藏的空格及換行符顯示出來而不需要再通過換行標簽或空格標簽來單獨處理 -->
<pre><p>大家好，我叫楊凡，是php中文網(wǎng)
第四期的 學(xué)員，想學(xué)習(xí)php相關(guān)知識，希望能通過學(xué)習(xí)能自己寫出一個像樣的前后端程序來！</p></pre>
<!-- h1-h6標簽 由大到小-->
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>
<h6>Hello World!</h6>
<!-- a鏈接標簽 -->
<a href="https://www.baidu.com">百度</a>
<!-- 圖片文字鏈接 -->
<a href="https://www.baidu.com"><img src="" alt="圖片壞了" style="height: 40px; width: 40px; background: red;"></a>
<!-- 換行符 -->
<br>
<!-- a標簽錨點應(yīng)用 -->
<a href="top">頂部</a>
<div style="height: 100px;">
</div>
<a href="" name="top">回到頂部</a>
<!-- 有序列表標簽 -->
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>草莓</li>
</ol>
<!-- 無序列表標簽 -->
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>草莓</li>
</ul>
<!-- form表單 -->
<form action="url" method="POST">
<!-- placeholder設(shè)置編輯框內(nèi)提示的問題 -->
<input type="text" name="username" placeholder="請輸入用戶名"><br>
<input type="password" name="pwd" placeholder="請輸入密碼"><br>
<button>登陸</button>
</form>
<!-- table表格標簽 -->
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td colspan="3">合并列1</td> <!-- 合并列給參數(shù)3即可 -->
</tr>
<tr>
<td rowspan="2">合并行1</td> <!-- 合并行給參數(shù)2即可 -->
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
批改老師：天蓬老師批改時間：2019-02-03 15:21:29
老師總結(jié)：content: url(); 圖片呢?