课前:参考html思维导图
一、h与p标签
二、img标签
1、
<img src="juhua.jpg" alt="菊花图" title="鼠标放上去就显示">
<img src="../logo.png" alt="菊花图" title="鼠标放上去就显示">
<img src="http://xxxxxxxxxx.img" alt="">
延伸:那些是单闭合,双闭合标签
2、图片是替换元素
它是内联替换元素,是能设置宽高的
三、有序列表和无序列表
<style>
ul li{
list-style-type: square;
}
ol li{
list-style-type: upper-roman;
}
</style>
<body>
<ul>
<li>无序</li>
<li>无序</li>
<li>无序</li>
<li>无序</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</body>
四、整齐的表格
<style>
td{
border: 1px solid blue;
}
table{
/*border-collapse: separate;
border-spacing: 20px;*/
border-collapse: collapse;
}
</style>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>4</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
课程表
<style>
td{
border: 2px solid black;
}
table{
/*border-collapse: separate;
border-spacing: 20px;*/
border-collapse: collapse;
}
</style>
<body>
<table>
<tr>
<td>时间日期</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr>
<td rowspan="2">上午</td>
<td>语文</td>
<td>数学</td>
<td>外语</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>外语</td>
<td>语文</td>
<td>数学</td>
<td>外语</td>
<td>语文</td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>外语</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>外语</td>
<td>语文</td>
<td>数学</td>
</tr>
</table>
</body>
五、超链接
<a href="index.html">index</a>
<a href="http://www.baidu.com" target="blank">百度</a>
<a href="http://www.baidu.com" title="鼠标放上来">百度</a>
六、锚点
<body>
<a href="maodian.html#p1">p1</a>
<a href="maodian.html#p2">p2</a>
<a href="maodian.html#p3">p3</a>
<a name="p1"></a>
<p>p1 </p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name="p2"></a>
<p>p2</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name="p3"></a>
<p>p3</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
六、伪类
css允许我们针对a标签的4中状态设置各自的css特性,叫做css伪类
1、active一般不必写
2、一定要注意顺序是LVHA
3、a:link可以简写为a
<style>
a{
color: green;
}
a:visited{
color: pink
}
a:hover{
color:yellow;
}
a:active{
color: black;
}
</style>
<body>
<a href="#">空连接</a>
<a href="#">空连接</a>
<a href="#">空连接</a>
<a href="#">空连接</a>
</body>
七、字符实体
在html开发中,有一些字符,不适于直接写出,如><
一般格式:&+实体名+;
查手册