HTML简介
HTML(hyper text marked language)，也就是超文本标记语言，这是一种定义用户在平时浏览的网页所看到的界面显示的语言，在网页中要查看这种语言代码可以直接按 F12 来进入该网页的代码界面
可以看到右边就是在写作博客时候网页的代码
HTML文档声明与头部标签
HTML的代码结构分为四个部分，首先是关于头文档的声明，在html5中需要使用<!Doctype html>来声明，其他版本各有不同，这规定了浏览器将使用什么方式来渲染页面，如果不作说明，那么不同的浏览器可能会展示不同的页面效果，这个头文档声明相当于做了统一的标准。然后是根标签<html></html>，在根标签中包含两个最重要的部分<head></head>，<body></body>，所以完整的一个HTML页面应该包含的代码如下所示
<!Doctype html>
<html>
<head></head>
<body></body>
</html>
可以看到我们的标签都是成对出现的，在HTML中还有单标签，比如<br />，用来表示换行符，无论是成对出现的，还是单个的标签，都需要用 “/” 来关闭，否则会影响后面的文档内容，布局等。HTML的注释使用<! 被注释的内容>，开发者编写的内容一般在head部分与body部分中，head部分的内容一般包括<title>,这是定义网页标题的部分
<! Doctype html>
<html>
<head>
<title>this is the title</title>
</head>
<body></body>
</html>
<link>用来设置引入文件，可以使用这个标签来修改前面的icon，<meta>标签用来配置网页的属性，比如设置网页的编码格式为utf-8
<! Doctype html>
<html>
<head>
<title>this is the title</title>
<link rel="icon" href=".\image\lebron.ico" type="image/icon" />
<meta charset="utf-8" />
</head>
<body></body>
</html>
在头部中还可以加入<script></script>标签来引入脚本文件，可以是JavaScript，vbscript，typescript等，需要指定脚本类型，但一般使用JavaScript不需要指定脚本文件类型。加入<style></style>来设置CSS样式。头部一般就包括这么多标签。
HTML的body
在HTML的<body></body>部分中包含很多的标签，使用这些标签可以做网页内容的展示与布局，首先是标题，使用<h1>-<h6>来定义不同大小的标题，使用<b>来加粗文字，使用<i>来对字体进行倾斜设置，例如
<! Doctype html>
<html>
<head>
<title>this is the title</title>
<link rel="icon" href=".\image\lebron.ico" type="image/icon" />
<meta charset="utf-8" />
</head>
<body>
<h1>一级标题</h1>
<h3>三级标题</h3>
<h6>六级标题</h6>
<div>普通文字</div>
<b>加粗文字</b>
<br /> <! 表示换行>
<i>倾斜文字</i>
</body>
</html>
可以设置标签的属性，块级标签设置对齐属性，使用align设置，<hr />表示标线，<br />表示换行，<p>标签设置段落，通过这些学习就可以来设置一段简单的文章显示
<! Doctype html>
<html>
<head>
<title>散文赏析</title>
<link rel="icon" href=".\image\lebron.ico" type="image/icon" />
<meta charset="utf-8" />
</head>
<body>
<h1 align="center">九月，思念的季节</h1>
<hr />
<div align="right">幽幽米兰</div>
<br />
<p >
九月，无声降临，时光，匆匆离去。不经意间，二零一五年又静悄悄地走过了大半个年头。在我的
心里，或许，远去的只是风景，或许，离去的只是时光，而遗留在心海的却是一幕幕永生难忘的回忆。念，时时烙在夜寂寞的
心弦；爱，默默掩埋在心的无边大海。心与爱，早已浑然一体；爱与心，己渐渐融化成水，并汇聚成波涛汹涌的大海，只为奔
腾颠簸生活的激流，只为沐浴飘摇人生的风雨，只愿可以快乐地抒写出一切有关心与爱的绚丽的诗篇！让一颗沉睡已久的心，
欣欣然地盛放出一朵朵亮丽幽香的小花，从此，明媚了蓝天，娇艳了云霞，也彻底地斑斓了一段段如歌的岁月。
</p>
<p>
在昨夜的梦里，我仿佛又看到了你像一个迷人而圣洁的天使，呼吸着四周清新甜美的空气，轻嗅着
丝丝缕缕柔软的花香，从遥远的天际曼妙着如蝶的舞姿，轻轻地踏云飘来。此时的夜空，是深蓝深蓝的，星星们眨着闪亮的眼
睛，在迷离的夜色中闪闪发光，每一棵小草都折射着莹莹的绿光，每一朵花儿都飘洒着喜悦的芳香，为的只是，可以悠然惬意
地徜徉在这一片用心和爱细细裁剪而成的，唯一的，一段静雅的秋之时光。九月，是秋的天使降临于此，让秋的季节变得更加
亮丽，楚楚动人起来。九月，一切都是那么的富有诗情画意；一切又都是那么的让人泪眼迷蒙，徘徊不定，甚至留连忘返……
</p>
<p>
在昨夜的梦里，我仿佛又看到了你像一个迷人而圣洁的天使，呼吸着四周清新甜美的空气，轻嗅着
丝丝缕缕柔软的花香，从遥远的天际曼妙着如蝶的舞姿，轻轻地踏云飘来。此时的夜空，是深蓝深蓝的，星星们眨着闪亮的眼
睛，在迷离的夜色中闪闪发光，每一棵小草都折射着莹莹的绿光，每一朵花儿都飘洒着喜悦的芳香，为的只是，可以悠然惬意
地徜徉在这一片用心和爱细细裁剪而成的，唯一的，一段静雅的秋之时光。九月，是秋的天使降临于此，让秋的季节变得更加
亮丽，楚楚动人起来。九月，一切都是那么的富有诗情画意；一切又都是那么的让人泪眼迷蒙，徘徊不定，甚至留连忘返……
</p>
</body>
</html>
通过设置<body>标签的属性，开发者可以更改不同的显示样式，比如添加背景颜色，背景图片等，颜色显示使用0-255的十六进制格式，三通道RGB均要设置，如果还要设置颜色的透明度，则需要在前面加上透明度
<! Doctype html>
<html>
<head>
<title>散文赏析</title>
<link rel="icon" href=".\image\lebron.ico" type="image/icon" />
<meta charset="utf-8" />
</head>
<body bgcolor="c0c0c0" style="margin:30px">
<h1 align="center">九月，思念的季节</h1>
<hr />
<div align="right">幽幽米兰</div>
<br />
<p >
九月，无声降临，时光，匆匆离去。不经意间，二零一五年又静悄悄地走过了大半个年头。在我的
心里，或许，远去的只是风景，或许，离去的只是时光，而遗留在心海的却是一幕幕永生难忘的回忆。念，时时烙在夜寂寞的
心弦；爱，默默掩埋在心的无边大海。心与爱，早已浑然一体；爱与心，己渐渐融化成水，并汇聚成波涛汹涌的大海，只为奔
腾颠簸生活的激流，只为沐浴飘摇人生的风雨，只愿可以快乐地抒写出一切有关心与爱的绚丽的诗篇！让一颗沉睡已久的心，
欣欣然地盛放出一朵朵亮丽幽香的小花，从此，明媚了蓝天，娇艳了云霞，也彻底地斑斓了一段段如歌的岁月。
</p>
<p>
在昨夜的梦里，我仿佛又看到了你像一个迷人而圣洁的天使，呼吸着四周清新甜美的空气，轻嗅着
丝丝缕缕柔软的花香，从遥远的天际曼妙着如蝶的舞姿，轻轻地踏云飘来。此时的夜空，是深蓝深蓝的，星星们眨着闪亮的眼
睛，在迷离的夜色中闪闪发光，每一棵小草都折射着莹莹的绿光，每一朵花儿都飘洒着喜悦的芳香，为的只是，可以悠然惬意
地徜徉在这一片用心和爱细细裁剪而成的，唯一的，一段静雅的秋之时光。九月，是秋的天使降临于此，让秋的季节变得更加
亮丽，楚楚动人起来。九月，一切都是那么的富有诗情画意；一切又都是那么的让人泪眼迷蒙，徘徊不定，甚至留连忘返……
</p>
<p>
在昨夜的梦里，我仿佛又看到了你像一个迷人而圣洁的天使，呼吸着四周清新甜美的空气，轻嗅着
丝丝缕缕柔软的花香，从遥远的天际曼妙着如蝶的舞姿，轻轻地踏云飘来。此时的夜空，是深蓝深蓝的，星星们眨着闪亮的眼
睛，在迷离的夜色中闪闪发光，每一棵小草都折射着莹莹的绿光，每一朵花儿都飘洒着喜悦的芳香，为的只是，可以悠然惬意
地徜徉在这一片用心和爱细细裁剪而成的，唯一的，一段静雅的秋之时光。九月，是秋的天使降临于此，让秋的季节变得更加
亮丽，楚楚动人起来。九月，一切都是那么的富有诗情画意；一切又都是那么的让人泪眼迷蒙，徘徊不定，甚至留连忘返……
</p>
</body>
</html>
如果设置背景图片的话则需要注意填充方式，因为背景图片默认会重复填充所有显示区域，如果不需要，则自行设置填充方式。标签与标签之间是可以嵌套的，但是需要注意嵌套时候默认换行的标签与默认不换行的标签之间嵌套需要遵守以下原则，
- 默认换行的标签可以嵌套所有标签
- 默认不换行的标签只可以嵌套不换行的标签
一般将之区分为块级标签和内联标签。典型代表就是<span>与<div>标签。
文字的设置
文字一般使用<font>来设置，可以设置文字的属性来控制它的颜色和大小，<b>表示加粗，<i>设置倾斜，<u>设置下划线，<del>设置字体删除效果，<sup>设置上标，<sub>设置下标，<address>设置地址显示效果
<! Doctype html>
<html>
<head>
<title>字体效果</title>
<link rel="icon" href=".\image\lebron.ico" type="image/icon" />
<meta charset="utf-8" />
</head>
<body bgcolor="c0c0c0" style="margin:30px">
<font color="green" size=30px>设置颜色与大小</font>
<br />
<b>加粗效果</b>
<br />
<i>倾斜效果</i>
<br />
<u>加下划线</u>
<br />
<del>删除效果</del>
<br />
<address>地址效果</address>
<br />
<em>倾斜效果</em>
<br />
<font>普通字体<sup>上标字体</sup></font>
<br />
<font>普通字体<sub>下标字体</sub></font>
</body>
</html>
图片
另外，需要在HTML中插入图片的时候，开发者可以使用<image>标签来引入，通过设置image的属性可以控制图片的布局，src属性指定图片路径，width与height指定宽和高，title指定鼠标的信息，当鼠标移至该图片时显示信息，border指定图片的边缘设置，align指定图片的对齐方式，alt属性可以设置当图片无法显示时候的提示信息
<! Doctype html>
<html>
<head>
<title>图片引入</title>
<link rel="icon" href=".\image\lebron.ico" type="image/icon" />
<meta charset="utf-8" />
</head>
<body style="margin:30px">
<image src=".\image\desk\link_image.png" width=500px height=400px title="this is a wall page" alt="this is a image" />
</body>
</html>
链接
在HTML中可以设置连接，来跳转到另外一个网址，或者在自身进行跳转，这是通过<a>标签来实现的，设置<a>标签的href属性控制跳转目标，target属性控制打开方式，name属性设置锚点，然后需要跳转的时候href属性设置为"#name"，同样也可以通过给图片设置锚点或者连接的方式赋予图片跳转功能。
<! Doctype html>
<html>
<head>
<title>散文赏析</title>
<link rel="icon" href=".\image\lebron.ico" type="image/icon" />
<meta charset="utf-8" />
</head>
<body bgcolor="c0c0c0" style="margin:30px">
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<h1 align="center">九月，思念的季节</h1>
<hr />
<div align="right">幽幽米兰</div>
<br />
文本内容
<a name="here"></a>
文本内容
<a href="#here">跳转至锚点</a>
<a href="#">返回顶部</a>
</body>
</html>
扫一扫
3855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
