本文详细介绍了HTML和CSS的基础知识，包括不同级别的标题、段落、链接、图像、列表、表格等元素的使用方法，并展示了如何通过CSS设置样式。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--窗口标题-->
<title>Html和CSS的关系</title>
<!--风格样式-->
<style type="text/css">
<!--设置标题1的字体、颜色和居中显示-->
h1{
font -size:12px;
color:#930;
text -align:center;
}
<!--设置span的颜色-->
span{
color:red;
}
<!--设置表格样式-->
table tr td,th
{
border:1px solid #000;
}
</style>
</head>
<body>
<!--1级标题-->
<h1>一级标题</h1>
<!--2级标题-->
<h2>二级标题</h2>
<!--3级标题-->
<h3>三级标题</h3>
<!--4级标题-->
<h4>四级标题</h4>
<!--5级标题-->
<h5>五级标题</h5>
<!--6级标题-->
<h6>六级标题</h6>
<!--第一段文字-->
<p>第一段文字</p>
<!--第二段文字-->
<p>第二段文字</p>
<!--图片-->
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
<br>
<!--实现超连接-->
<a href="目标网址" title="鼠标滑过显示的文本">连接显示的文本</a>
<br>
<!--实现在新建浏览器窗口打开超连接-->
<a href="目标网址" target="_bank">连接显示的文本</a>
<span>没有单独的语义，配合样式使用<br></span>
<strong>强调关键字，加粗<br></strong>
<em>强调关键字，倾斜<br></em>
<!--对简短文本引用，不用加双引号，浏览器会自动加双引号-->
<q>聪明秀出为之英，胆略过人为之雄.</q>
<!--对长文本引用，不用加双引号，浏览器会自动进行缩进显示-->
<blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。<br></blockquote>
<!--br分行-->
<p>暗淡轻黄体性柔，<br>
情疏迹远只香留。<br>
何须浅碧深红色，<br>
自是花中第一流。</p>
<!--显示水平线-->
<hr />
<hr>
<!-- 显示空格-->
<p>空格 显示</p>
<address>联系地址，浏览器默认显示为斜体</address>
<code>显示单行代码</code>
<pre>显示多行代码段；
语句1；
语句2；
</pre>
<!--显示多条信息列表，无序，比如新闻列表，图片列表等-->
<ul>
<li>第一条列表信息</li>
<li>第二条列表信息</li>
<li>第三条列表信息</li>
</ul>
<!--显示多条信息列表，有序，比如图书销售排行榜-->
<ol>
<li>第一条列表信息</li>
<li>第二条列表信息</li>
<li>第三条列表信息</li>
</ol>
<!--相当于一个容器，为网页划分独立的板块，比如网页中的栏目板块,id表示属性-->
<div id="第一板块">第一板块内容</div>
<!--建立四行三列的表格，summary表示摘要内容，不会显示出来-->
<table summary ="本表格记录各班平均成绩和人数">
<!--表格的标题文本-->
<caption>平均成绩表</caption>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<th>一班</th>
<th>30</th>
<th>89</th>
</tr>
<tr>
<th>二班</th>
<th>35</th>
<th>85</th>
</tr>
<tr>
<th>三班</th>
<th>32</th>
<th>80</th>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--窗口标题-->
<title>Html和CSS的关系</title>
<!--风格样式-->
<style type="text/css">
<!--设置标题1的字体、颜色和居中显示-->
h1{
font -size:12px;
color:#930;
text -align:center;
}
<!--设置span的颜色-->
span{
color:red;
}
<!--设置表格样式-->
table tr td,th
{
border:1px solid #000;
}
</style>
</head>
<body>
<!--1级标题-->
<h1>一级标题</h1>
<!--2级标题-->
<h2>二级标题</h2>
<!--3级标题-->
<h3>三级标题</h3>
<!--4级标题-->
<h4>四级标题</h4>
<!--5级标题-->
<h5>五级标题</h5>
<!--6级标题-->
<h6>六级标题</h6>
<!--第一段文字-->
<p>第一段文字</p>
<!--第二段文字-->
<p>第二段文字</p>
<!--图片-->
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
<br>
<!--实现超连接-->
<a href="目标网址" title="鼠标滑过显示的文本">连接显示的文本</a>
<br>
<!--实现在新建浏览器窗口打开超连接-->
<a href="目标网址" target="_bank">连接显示的文本</a>
<span>没有单独的语义，配合样式使用<br></span>
<strong>强调关键字，加粗<br></strong>
<em>强调关键字，倾斜<br></em>
<!--对简短文本引用，不用加双引号，浏览器会自动加双引号-->
<q>聪明秀出为之英，胆略过人为之雄.</q>
<!--对长文本引用，不用加双引号，浏览器会自动进行缩进显示-->
<blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。<br></blockquote>
<!--br分行-->
<p>暗淡轻黄体性柔，<br>
情疏迹远只香留。<br>
何须浅碧深红色，<br>
自是花中第一流。</p>
<!--显示水平线-->
<hr />
<hr>
<!-- 显示空格-->
<p>空格 显示</p>
<address>联系地址，浏览器默认显示为斜体</address>
<code>显示单行代码</code>
<pre>显示多行代码段；
语句1；
语句2；
</pre>
<!--显示多条信息列表，无序，比如新闻列表，图片列表等-->
<ul>
<li>第一条列表信息</li>
<li>第二条列表信息</li>
<li>第三条列表信息</li>
</ul>
<!--显示多条信息列表，有序，比如图书销售排行榜-->
<ol>
<li>第一条列表信息</li>
<li>第二条列表信息</li>
<li>第三条列表信息</li>
</ol>
<!--相当于一个容器，为网页划分独立的板块，比如网页中的栏目板块,id表示属性-->
<div id="第一板块">第一板块内容</div>
<!--建立四行三列的表格，summary表示摘要内容，不会显示出来-->
<table summary ="本表格记录各班平均成绩和人数">
<!--表格的标题文本-->
<caption>平均成绩表</caption>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<th>一班</th>
<th>30</th>
<th>89</th>
</tr>
<tr>
<th>二班</th>
<th>35</th>
<th>85</th>
</tr>
<tr>
<th>三班</th>
<th>32</th>
<th>80</th>
</tr>
</tbody>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
