前言
最近在学习HTML网页编程，具体作为一个学机械的，为啥突然有闲心来学HTML，就不在这里赘述啦，大家可以看我HTML学习笔记摘要目录参考，这篇博文里也有我HTML学习笔记的其他章节，大家有兴趣的可以去看一看~
初识
就像学C语言的hellow word一样，下面这个简单至极的小框架就是第一个程序啦，
- 先看首行，<!doctype html>声明，该声明必须位于HTML5文档的第一行，该标记告知浏览器文档所使用的HTML规范。
- 标记。HTML的头部标记，头部信息不显示在网页中，次标记可以包含一些其他的标记，用于说明文件标题和整个文件的一些公用属性，可以通过
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>练习1</title>
</head>
<body>
<h1>我的第一个网页！</h1>
</body>
<footer>
<h1>作者：周旋 联系方式：1110000000 </h1>
</footer>
</html>
下面我们看一下这个代码打出的样子：
编程软件
编写网页程序，当然，你可以用万能的记事本啦，但还有更好用的，Dreamweaver CC,好多书都推荐使用这个，我用了用，确实非常方便，就不多说了。
基本标记
头标记
头标记（head）就是用来说明文档头部的相关信息。头标记内包含标题标记和元信息标记。
标题标记
标题标记没啥好说的，直接
元信息标记
这个就比较麻烦了，不过想来以后写HTML程序多了，应该也很好说。
1）：字符集charset属性
在HTML5中，有一个新的charset属性，它使字符集的定义更加容易。例如，下面代码告诉浏览器，网页使用ISO-8859-1字符集显示：
<meta charset="ISO-8859-1">
2）：搜索引擎的关键词
关键词定义：
<meta name="Keywords" content = "HTML,CSS,XHTML"/>
首先声明在定义name属性的哪个值，再用属性content来描述这个值。
3）：页面描述
<meta name="Description" content="网页的介绍"/>
和定义关键词一样的套路，页面描述通常是被搜索引擎用在搜索结果也上展示给最终用户看的一段文字。页面描述也不在网页上显示。
4）：页面定时跳转
通过将http-equiv的属性值设置为refresh可以实现网页在经过一定时间后进行自动刷新。
<meta http-equiv="Refresh" content="5;[url=https://hao.360.com/?a1004]"/>
这行代码可以实现在进入网页5秒后跳转到https://hao.360.com/?a1004；
<meta http-equiv="Refresh" content="5" />
这行代码可以实现网页每5秒刷新一次。
页面注释
在HTML中，代码可以用如下方式注释：
<!-- 注释内容 -->
代码编写
代码一：简单示例程序
<body>
<h1>清明</h1>
<!-- 注释内容 -->
<p>
清明时节雨纷纷，<br>
路上行人欲断魂，<br>
借问酒家何处有，<br>
牧童遥指杏花村。<br>
</p>
<img src="../2.jpg">
</body>
代码二：添加文本
添加文本有两种方法，一种是像上面的诗一样自己自己打代码，还有一种是在软件的设计页面进行添加：
我们可以在设计页面进行添加文本，软件会自行给我们添加相应代码：
文本还可以调整字体：
<body>
<!-- 注释内容 -->
<p><b>粗体文字显示效果</b></p>
<p><em>强调文字的显示效果</em></p>
<p><strong>加强强调文字的显示效果</strong></p>
<p><i>斜体文字的显示效果</i></p>
<P>a<sup>上标显示</sup></P>
<P>b<sub>下标显示</sub></P>
<img src= "../3.jpg">
</body>
文本排版
1）：换行标记< br >
换行标记是一个单标记，没有结束标记，是英文单词break的缩写。一个< br >标记代表一个换行
2）：段落标记< p >< /p >
这一对标记中间的文字为一段。
3）：标题标记< h1 >< /h1 >
标题标记中的数字表示几号标题，可取从1-6；
文字列表
文字列表分为有序列表和无序列表
无序列表使用< ul >< /ul >来标记，其中每一个列表项使用一对< li >< /li >标记，语法结构如下:
<ul>
<li>项目需求</li>
<li>系统分析</li>
<ul>
<li>网站的定位</li>
<li>内容的收集</li>
<li>栏目规划</li>
</ul>
</ul>
效果图：
有序列表使用< ol >< /ol >来标记，列表项也使用一对< li >< /li >标记，有序列表有前后顺序之分，多数用数字表示，也可以用字母ABCD表示：
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
使用设置属性type可以改变列表类型;
<h4>Disc 项目符号列表</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
</ul>
<h4>Circle 项目符号列表</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
</ul>
<h4>Square 项目符号列表</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
</ul>
<h4>数字列表</h4>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<h4>字母列表</h4>
<ol type="A">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<h4>罗马字符列表</h4>
<ol type="I">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
代码三：超链接标记
超链接标记为< a >< /a >。超链接最重要的要素有两个，设置为超链接的网页元素和超链接指向的目标地址。超链接基本语法如下：
<a href=URL>网页元素</a>
我们可以使用图片或者文字来做链接：
<a href="Untitled-2.html"><img src="../4.jpg"></a>
<a href="Untitled-2.html">网页连接</a>
链接的对象除了网页对象外，还可以链接图片，word文档，视频文件，音频文件，FTP服务器，电子邮件等。
设置以新窗口显示超链接页面
在默认情况下，单击超链接时，目标页面会在当前窗口中显示，替换当前页面的内容。如果要在单机某个链接以后，打开一个新的浏览器窗口，在这个新窗口中显示目标页面，就需要使用< a >标记的target属性。
target属性四个值，分别是_blank,_self,_top和_parent.常用的为_blank,_self 这两个。当省略target属性时，默认为_self .
<a href="../1.jpg" target="_blank">图片链接</a>
代码四：图片
网页支持多种图片格式，并写可以对插入的图片设置宽度和高度，插入图像使用单标记< img >
1）：插入图像
<img src="路径">
2）：从不同来源插入图像
在插入图像时，还可以将其他文件夹或服务器中的图片显示到网页中。
3）：设置图像的宽度和高度
<img src="../2.jpg" width="350" height="500">
若只改变高度或宽度中的一个，则另一个按等比例缩放。
4）：设置图像的提示文字
设置图像的提示文字可以方便搜索引擎的检索。除此之外，
- 当浏览网页时，如果图像下载完成，将鼠标放到该图像上时，鼠标指针旁会显示title标签设置的文字。
- 如果图像未下载成功，在图像的位置上会显示alt标记设置的提示文字。
<img src="../1.jpg" alt="未加载完成时显示的文字" title="gril">
5）：将图片设置未网页背景
<body background="../6.jpg">
</body>
结束语
好了，看到这里已经可以感觉到,HTML又好玩又简单，至少目前为止时这样，怪不得他们说HTML和css,js是软工专业的玩具，确实是玩具，，对机械专业的来说，也是~
