サマリー：<!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)頁標(biāo)題引用小圖標(biāo)方式 -->
<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標(biāo)簽偽類效果 */
a:hover{
/* 鼠標(biāo)移上去字體變成紅色 */
color: red;
/* 鼠標(biāo)移上去字體是否添加下劃線：是 */
text-decoration: underline;
}
ul li{
/* 清除無序列表標(biāo)簽樣式 */
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 首行縮進(jìn)兩個字符 -->
<!-- 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>
<!-- 斜體標(biāo)簽1 -->
<em>Hello World!</em>
<!-- 換行符 -->
<br>
<!-- 斜體標(biāo)簽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刪除標(biāo)簽 span文本標(biāo)簽 -->
<del>499元</del><span>399元</span>
<!-- pre標(biāo)簽可以將p標(biāo)簽內(nèi)隱藏的空格及換行符顯示出來而不需要再通過換行標(biāo)簽或空格標(biāo)簽來單獨處理 -->
<pre><p>大家好，我叫楊凡，是php中文網(wǎng)
第四期的 學(xué)員，想學(xué)習(xí)php相關(guān)知識，希望能通過學(xué)習(xí)能自己寫出一個像樣的前后端程序來！</p></pre>
<!-- h1-h6標(biāo)簽 由大到小-->
<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鏈接標(biāo)簽 -->
<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標(biāo)簽錨點應(yīng)用 -->
<a href="top">頂部</a>
<div style="height: 100px;">
</div>
<a href="" name="top">回到頂部</a>
<!-- 有序列表標(biāo)簽 -->
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>草莓</li>
</ol>
<!-- 無序列表標(biāo)簽 -->
<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表格標(biāo)簽 -->
<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
先生のまとめ：content: url(); 圖片呢?