什么是HTML
HTML(Hyper Text Marked Language,超文本标记语言） 是描述网页的标记语言。目前HTML大概有100多个标记，这些标记描述HTML文档中的数据显示格式，他们可以定义文本、图形、表格的格式，指向其他页面的链接，以提交数据的表单等。HTML网页是HTML描述的文本文件。HTML文件由web服务器发送给客户端浏览器，客户浏览器按HTML描述的格式将其显示在浏览器窗口内，呈现给读者多姿多彩的页面。HTML文件通过HTTP，使得HTML文件可以在互联网上顺畅地进行文件交换和访问。
HTML文本是纯文本文件格式，可以用文本编辑器进行编辑制作，如记事本、Editplus等，也可以使用专业的网页编辑工具编辑制作，如Dreamweaver 等网页制作工具来完成。
今天主要介绍静态网页
静态网页
静态网站是指全部由HTML（标准通用标记语言的子集）代码格式页面组成的网站，所有的内容包含在网页文件中。网页上也可以出现各种视觉动态效果，如GIF动画、FLASH动画、滚动字幕等，而网站主要是静态化的页面和代码组成，一般文件名均以htm、html、shtml等为后缀。
如何新建一个html文件? 这里就不在介绍了，直接进入正题：
HTML的标记与属性
举个栗子：
<html>
<head>
<title>这里是网页的标题</title>
</head>
<body>
这里是主体部分。
</body>
</html>
这里可以看到这里有一些标记比如以
<body>
开始，以
</body>
结束 。
HTML 标记是用" < " 和 " > " 括起来的标识符，括号中间的标识符为标记名称，如上面的body标记，HTML 标记通过指定某块信息为段落或标题来标识文档某个部分。HTML的标记分为单标记和成对标记(也叫围堵标记）。
成对标记有开始标记 “<标记名>” 结束标记 " </标记名>",配套使用，成对标记只作用于开始标签和结束标签之间的文档。形如:
<标记>内容</标记>
单标记只有开始标记，例如 br 标记, 如果使用单标记，只要在文档相应的位置插入即可。
属性是标记中的参数选项。大多数标记都有一些自己的属性，有的标记也有共同的一些属性，各属性之间无先后顺序，如果忽略属性则采用默认值。如果要定义标记的属性，则在标记名称后加空格，再书写属性名并给其赋值，属性的一般使用格式为
" <标记名 属性 1= " 属性值" 属性 2= "属性值 " ·····>内容</标记名>
比如： 内容
哇哇哇，居然在 markdown 写出来这个效果了哎！ 以前居然没有发现啊!
以后就可以更帅的写博客了哈哈哈哈哈哈哈哈，基本的标记都可以用哎 满足！
效果是这样的：
冷静冷静！回归正题。
文档头与文档体
<html></html>//HTML文件必须由 这个成对标记开头和结尾 ,表明该文件为HTML超文本文档。一个完整的HTML文档包含以下两个部分:
<head></head>//文档头 也称为头部、头部里面含有 title 标题部分等其他部分会在后面介绍
<body></body>//文档体 这里是主体部分 我们看到的网页的主要内容就是写在这里的。
标题标记
<hn> </hn> //n越小字体越大 当然也可以通过 font来调整字体的大小等属性
举个栗子：
<html>
<head>
<title>这里是网页的标题</title>
</head>
<body>
<h1> hello world </h1>
<h2> hello world </h2>
<h3> hello world </h3>
</body>
</html>
看一下显示的效果：
文字标记
首先肯定觉得这个字体小，字体样式普通，而且颜色也很一般。
那么如何设置呢？
先看一个样例：
<html>
<head>
<title>这里是网页的标题</title>
</head>
<body>
<p><font size="12px">哪有什么岁月静好，只是有人替你负重前行</font></p>
//这里<p></p>是一个定义段落的标记
<p><font color="red">哪有什么岁月静好，只是有人替你负重前行</font></p>
<p><font face="楷体">哪有什么岁月静好，只是有人替你负重前行</font></p>
</body>
</html>
这里先说一下
段落设置
<p></p>和<br>
<p></p>是定义段落的标记，使标记里面的内容成为一个段落
//它的一般格式如下:
<p align="段落对齐方式">段落文字</p>
//其中的align 属性为段落文字的对齐方式，其取值为 Left 、 Right 、Center等
而<br>是一个单标记 在文字的后面加上就可以换行
效果如下：
但是注意一般段落之间不使用换行，使段落之间有一段垂直距离：
font 标记 （大小、颜色、字体设置）
该标记用来控制文字的字体、大小和颜色，它的使用格式如下：
<font face="字体名称" size="字体大小" color ="字体颜色">显示的文字</font>
属性说明：
face 属性的取值可以是系统所装字体的名称，例如“宋体”、“楷体” 等、默认是宋体
size 属性的取值可以从1 到 7之间的数字，也可以以3
为基准设置 当然也可以是像素比如" 12px"
color 属性的取值可以用常数 表示 比如 " red" 也可以是 RGB表示 比如 " 00ff00" " 00ffff" 等
效果如图：
当然也可以一起显示 属性添加到一起就可以了：
这样写的话难免会有一点繁琐，而在head里面还可以这样来定义一个文字的样式，这样就可以造一个模板和c++里的class有点同工之妙。
代码如下：
<html>
<head>
<style>
.MyFontStyle{
color:red;
font-size:30px;
font-family:楷体;
}
</style>
</title>这里是网页的标题</title>
</head>
<body>
<p class ="MyFontStyle">哪有什么岁月静好,只是有人替你负重前行</p>
<p class ="MyFontStyle">做三四月份的事情,七八月份自然会有答案</p>
</body>
</html>
看一下结果：
是怎么做到的呢？
很简单，在头部里定义一个
<style>
.名称{
color:
font-size:30px;
font-faimly:楷体;
//在这里添加一些属性; (注意分号结尾)
}
</style>
使用的时候为<class ="名称"> //注意显示的内容要在围堵标记内才会起作用
注意：
1、<head> 标签用于定义文档的头部，它是所有头部元素的容器。
2、<head> 标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
3、<head> 绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
4、<head> 内部可以包含下面这些标签<base>、<link>、 <meta>、 <script>、<style> 以及<title>。
5、<head>部分中唯一必需的元素是<title>标签，用来定义文档的标题。
body 标记与颜色设定
刚才为大家介绍的是 主体中字体以及段落之间的属性设置，现在来了解一下网页整体的背景颜色、文本颜色、背景图片等设置。
text 属性为网页文本颜色 pixel
link 属性为超链接文字的颜色，默认值为蓝色下划线
vlink 属性为已单击文本的颜色
bgcolor 属性为网页的背景颜色，只能设置单一颜色
background 属性为网页背景图片属性，属性值可指定一定一幅浏览器的图片文件名。
hr标记
单标记
用来在页面当中输出一条横线，也就是我们常用的水平分割线。
<hr>
<hr size="10px" width="30px">
效果如下：
属性说明：
size 属性用于设置线的粗细，属性取值的单位是 pixel(像素）
width 属性用于设置线的长度，属性取值的单位是pixel或百分比。
示例：
<html>
<head>
<title>这里是网页的标题</title>
</head>
<body text ="green" bgcolor="white" vlink="red" background="3.jpg">
<br>
<br>
<hr size="1px" width="1400px"><br>
<p><font size="12px" face="楷体">哪有什么岁月静好，只是有人替你负重前行</font></p>
</body>
</html>
效果如下：
注意：照片的位置如果和当前网页在同一个文件夹下就可以直接在 background =" 属性值" 在属性值里填上图片的文件名即可 但是如果不在同一个文件夹的话就需要加上完整的图片路径。
本次的内容就整理到这里，后续会继续整理相关的知识。
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
