html1

前面c++暂时告一段落,今天开始写网站相关教程

首先,来看一张图猜猜下面这东西是什么

我想说的重点不是灰机,而是 积木。现在看到的这个页面就像这个灰机一样，其实是一块一块类似积木的东西搭建起来的。现在，我们来写做我们人生中的第一个页面（我人生中的第一个就是这货）步骤如下

(1)新建一个文本文档

(2)右击新建的文档，选择重命名

(3)把文件名由xxx.txt改为xxx.html（这里要注意，如果设置了默认不显示常用文件名[也就是新建的文本文档只显示名称部分不显示  .  和文件的后缀名]的话可以打开这个文档选择另存为xxx.html）

然后就可以发现这个文件发生了一点点变化 如下

双击我们新建的那个xxx.html(我这里叫1.html)  然后就看到了我们的第一个页面。长下面这样

和第一个c++程序类似，第一个页面什么都没有。然后我们决定在上面加点字  比如  “Hello zhi shui” 步骤如下

(1)用记事本的方式打开我们刚刚建立的.html文件

(2)在里面写上   Hello zhi shui    

(3)保存

(4)双击打开，结果如下

网页上已经显示出我们需要的内容了。可是这样子的话感觉整个网页都是这一个大小的文字有点难看，于是，我们决定让它变个样子，给它美容一下（比如 加粗一下）。在word中加粗要先选中要加粗的内容，然后点加粗按钮(图标是B)。在网页中加粗文字方式差不多，只需要在需要加粗的文字前面加上<b>  后面加上</b>  就好了。在html中类似<b>   这种 被叫做标签，每种标签有不同的作用，比如这里的<b>标签用来加粗里面的文字的(记得要有对应的结束标签，不然电脑会不知道到底加粗哪些字的  加粗后效果如下)

内容如下

<b>加粗的Hello zhi shui</b>  没加粗的Hello zhi shui

效果如下

然后我们想把没加粗的放到另一行，这时候就需要用到换行标签<br>(这个因为只是换一行，所以不需要结束标签)  不要想了，回车换行不存在的  代码如下

<b>加粗的Hello zhi shui</b> <br> 没加粗的Hello zhi shui

结果如下

然后假设我们要写一篇文章，首先要有一个标题，html中标题用h标签(<h>)表示，共分六级分别是<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6> 从1到6依次减小。效果如下

代码

<b>加粗的Hello zhi shui</b> <br> 没加粗的Hello zhi shui
<h1>h1标签修饰的内容</h1>
<h2>h2标签修饰的内容</h2>
<h3>h3标签修饰的内容</h3>
<h4>h4标签修饰的内容</h4>
<h5>h5标签修饰的内容</h5>
<h6>h6标签修饰的内容</h6>

结果如下

与标题对应的就是  段落用p标签(<p></p>)修饰

代码如下

<b>加粗的Hello zhi shui</b> <br> 没加粗的Hello zhi shui
<p>这时第一个段落的内容</p>
<p>这时第二个段落的内容</p>

结果如下

我们发现段落自动另起一行，而且中间还有个空行，这时br换行所不具有的效果(当然p标签的作用不止这一点点)

然后我们想给一段文字加上一点链接，比如点击文字打开百度点击前面的文字就会跳转到百度的首页。这种通过a标签来实现，

代码如下

<a href="http://www.baidu.com">点击文字打开百度</a>

a标签中的href属性代表要跳转到的网页的地址，中间的文字是链接的内容，效果见上面的"点击文字打开百度"

然后可能我们还想插入几张图片，图片用img标签

<img  src="http://img2.woyaogexing.com/2017/05/19/6c183c40f90598ee!600x600.jpg">

代码中的src属性的值是图片的来源的地址，用来确定显示哪一张图片，效果如下

然后我们想做点不一样的事，比如点击图片跳转到百度，这就需要   用于跳转的a标签和用于显示图片的img图片相结合了，代码如下

<a href="http://www.baidu.com"><img src="http://img2.woyaogexing.com/2017/05/19/6c183c40f90598ee!600x600.jpg"></a>

效果如下
和上面的长得一样，自己操作一下吧，只是点击图片，页面会跳转到百度

a标签中不光可以有图片或文字，还可以有图片和文字，代码如下

<a href="http://www.baidu.com">点击文字或图片跳转到百度<img src="http://img2.woyaogexing.com/2017/05/19/6c183c40f90598ee!600x600.jpg"></a>

效果如下

这时不论点击文字还是点击图片都会跳转到百度，但是我们希望图片能在下一行显示，不然感觉怪怪的，这时候就需要用到换行标签br了  代码如下

<a href="http://www.baidu.com">点击文字或图片跳转到百度<br><img src="http://img2.woyaogexing.com/2017/05/19/6c183c40f90598ee!600x600.jpg"></a>

效果如下

上面我们知道了标签的作用，也可以发现，标签类似于c++中的if以及for之类的也是可以嵌套的，然后，点击下面的推荐网址链接自学更多的标签吧推荐网址