HTML的概述
HTML的概述
1. HTML如何构建一个网页
网页主要由三部分组成:结构(htm)、样式(css)、行为(JavaScrpt)。
如果将网页比喻成一栋大楼,那么,html就是大楼的基本骨架(楼层的布局,房间的布局),css就是大楼的简单装修(贴瓷砖,抹白,楼梯装修),JavaScrpt就是大楼的最后精修(电灯的安装,网线的来扯,电梯的安装)。
2. HTML的优点
简易性
可扩展性
品台无关性
通用性
3. HTML的基本结构
<!doctype html><!-- 申明文档类型 -->
<html><!-- 跟标签,一个网页的最重要的部分 -->
<head><!-- 头部标签 网页上是看不到的,但是具有重要作用 -->
<meta charset="utf-8" /> <!-- 字符集编码标签 -->
<title>网页标题</title><!-- 网页标题标签 -->
<meta name="keywords" content=""/> <!-- 关键字标签 -->
<meta name="description" content="" /><!-- 描述标签 -->
<style type="text/css">
li{
/* list-style:none; */
}
</style>
</head>
<body><!-- 主体标签,可看见的 -->
<div>
<h1>这是一次简单的实验</h1>
<span>
使用无序列表:<br/>
</span>
<ul>
<li type="cricle" style="font-size:20px;">
这是第一个
</li>
<li type="square">
这是第二个
</li>
<li type="disc">
这是第三个
</li>
<li type="square">
这是第四个
</li>
<li type="cricle">
这是第五个
</li>
</ul>
<ol type="i" style="font-size:30px;">
<li >
这是第一个
</li>
<li>
这是第二个
</li>
<li>
这是第三个
</li>
<li>
这是第四个
</li>
<li>
这是第五个
</li>
</ol>
<dl>
<td>行尸走肉释义</td>
<dd>
讽刺没有理想,无所作为的人。糊里糊涂混日子,虽然活着,同死人一样。<br/>
《拾遗记·后汉》:“(任末)临终诫曰:‘夫人好学,虽死若存;不学者,虽存,谓之行尸走肉耳。’
</dd>
</dl>
<a href="https://www.baidu.com" target="_blank">百度</a>
<img src="../images/1.png" style="width:300px;" title="鸽子" alt="这是一个鸽子"/>
<img src="../images/2.jpg" style="height:200px;" title="风景画" alt="这是一张风景画"/>
<img src="../iages/1.png" style="height:150px;" title="这是一个鸽子" alt="这是一个鸽子"/>
<img src="../images/2.jpg" style="width:150px;" alt="我是一张图片" title="风景画">
<div>
<h3>精美语句欣赏</h3>
<p>
<strong><em>如果</em></strong>。<br/>
所有的伤痕都能够痊愈。 <br/><hr/>
<strong><em>如果</em></strong>。<br/>
所有的真心都能够换来真意。 <br/><hr/>
<strong><em>如果</em></strong>。<br/>
所有的相信都能够坚持。<br/><hr/>
<strong><em>如果</em></strong>。<br/>
所有的情感都能够完美。<br/><hr/>
<strong><em>如果</em></strong>。<br/>
依然能相遇在某座城。单纯的微笑。微微的幸福。肆意的拥抱。 该多好。可是真的只是如果。
</p>
</div>
</div>
</body>
</html>
所达成的效果
鼠标放在三张图边上,会有其他文字出现,这是因为我在 img标签使用的title属性 ,第三张图片没有显示出来,是为了alt属性能看到结果。