HTML学习笔记——块级标签、行级标签、图片标签
1.块级标签、行级标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p{
width: 200px;
height: 100px;
border: 3px solid red;
}
p span{
color: red;
}
</style>
</head>
<body>
<p>今天是<span>星期一</span></p>
<!-- 块级标签/能设置宽高度 -->
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<!-- 行级标签/能和其他标签待在一行 -->
<span>我是span标签</span>
<span>我是span标签</span>
<a href="">百度</a>
<a href="">百度</a>
</body>
</html>
2.图片标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#dog{
width:300;
height: 400px;
}
#cat{
width:300;
height: 400px;
}
p{
color: blue;
font-size: 30px;
font-family: 微软雅黑；
width: 800px;
height: 200px;
border: 3px solid blue;
text-align:center;
line-height: 200px;
}
</style>
</head>
<body>
<img src="dog.jpg" />
<img src="cat.jpg" />
<p>今天是星期一</p>
</body>
</html>
3.给标签设置格式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*空两个文字*/
p{
width: 300px;
border: 4px solid blue;
margin: 0 auto;
text-indent: 2em;
line-height: 1.5em;
/*加粗*/
font-weight: 700;
/*倾斜*/
font-style: italic;
/*大写*/
font-variant: small-caps;
}
</style>
</head>
<body>
<p>www.baidu.com今天是星期一今天是星期一今天是星期一今天是星期一今天是星期一今天是星期一今天是星期一</p>
</body>
</html>