HTML标签
- h1 ~ h6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html基本标签</title>
</head>
<body>
<h1>这是h1</h1>
<h2>这是h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>
<p>这是p</p>
<div>这是div</div>
<i>这是i</i>
<b>这是b</b>
<strong>这是strong</strong>
<span>这是span</span>
<table border="1" width="400">
<thead>
<tr><th colspan="4">这是表格</th></tr>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbod>
<tr align="center">
<td>张三</td>
<td>70</td>
<td>89</td>
<td>78</td>
</tr>
</tbod>
<tfoot>
<tr align="center">
<td>总分</td>
<td colspan="3">300</td>
</tr>
</tfoot>
</table>
<a href="http://www.baodu.com">百度</a>
</body>
</html>
CSS
引入外部css
<head>
<link rel="stylesheet" href="css/html.css">
<meta charset="UTF-8">
<title>html基本标签</title>
</head>
常用选择器
h1 {
color: red;
}
h5 {
border-radius: 5px;
border: green solid 2px;
}
h6 {
text-align: center;
display: inline-block;
width: 150px;
height: 150px;
line-height: 150px;
background-color: cornflowerblue;
border-radius: 50%;
}
h6:hover {
color: red;
}
.hoverIn {
display: inline-block;
width: 150px;
text-align: center;
height: 150px;
line-height: 150px;
border: red solid 1px;
}
.hoverIn:hover span {
display: none;
}
[data] {
color: red;
}
[data="1"] {
background-color: green;
}
修饰table
<style>
table {
width: 400px;
text-align: center;
border-collapse: collapse;
}
table th ,table td {
border: red solid 1px;
}
td[rate="good"] {
background-color: green;
}
</style>
