当今社会，网络已经成为生活中必不可缺的一环。当你在日常生活中用手机或者是电脑"网上冲浪"的时候，都会不可避免的打开一些网页，当你看到这些精美绝伦的网页的时候，你是否也会感慨这些网页设计师的鬼斧神工呢，今天，就让我来带领你们揭开网页设计的神秘面纱。
什么是HTML
html全称是Hyper Text Markup Language,是网页设计中一种最基础的超文本标记语言。一个html文件甚至不用特定的编译器也能够打开并运行。例如我们可以在桌面新建一个文本文档，在文档中输入文字，然后重命名该文档，将.txt后缀更为.html，我们的第一个html网页就做出来了，是不是很简单。但是为了书写方便和便于保存，我们通常也会使用特定的编译器进行编写，铁柱用的是Hbuider,如果有需要的朋友可以私信。
当我们创建了一个html文档之后，首先映入我们眼帘的是下面这一串代码
每一个尖括号都是一种标签，有些标签是一个尖括号，而有些标签则是两个尖括号。
第一行的<!doctype html>是一种网页声明，意思是文档种类是超文本标记性语言或超文本链接标示语言。
接下来的< html>< /htm l>是一个大范围的标签，我们所要写的所有东西都要在这个标签里。而< html>标签里的内容又分为两部分，一部分是< head>标签，也就是头标签，另一部分是< body>标签，也就是身体标签。就像人一样，我们也都是由头和身体组成的。
“utf-8"是一种字符编码，告知浏览器此页面属于什么字符编码格式，而我们一般都会将字符编码默认设置为"utf-8”。
下面的titlt标签则是页面标题标签，用title标签就可以设置你的页面标题啦。
HTML最重要的四个知识点
html的组成也很简单，我们主要学习四个很基本也很重要知识点，分别是:1.标签 2.表格 3. 列表 4.表单
标签
标签是html最基本都组成单位，也是最重要的组成部分。标签有以下几个特点:
- 标签是不区分大小写的，但是为了书写方便，一般我们都会小写
- 标签都是由尖括号包围的关键词
- 标签通常是成对出现的，标签对中的第一个标签是开始标签，第二个标签是结束标签
- 也有单独呈现的标签，如< img >标签
- 一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。
- 网页的内容需在< html >标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在< head >标签中，而网页需展示的内容需嵌套在< body >标签中
html中的标签有很多很多，下面跟给大家讲解几个最基础，也是最常用的标签:
- 首先是标题标签，也就是< h >标签，标题标签共有六个，分别是< h1 >到< h6 >，其区别也就是字体大小的区别，如下图所示
-
其次是段落标签，也就是< p >标签，如果我们在文件中写很多字的话，是不是要分段来写，不然整体看起来就乱糟糟的。但是，如果不使用段落标签的话，如图所示
即使我们写程序的时候是分段写的，运行结果依然不分段，这时就需要我们的< p >标签了，如下图
-
有的朋友可能就会问了，想要分段难道就只有这一种方法嘛，其实不是的。有一个非常好用的标签叫做< br />,也就是换行标签，其功能相当于我们平时打字时的回车键。由于功能简单，这里我就不演示了。但有一点需要注意的是，换行标签是一个单标签，把它放在想要开始换行的句子后面即可。
-
接下来我们又会想了，如果文字太多，一下看不过来，我们是不是能把一些重要的关键字标识出来呢？答案是可以的。这里就要讲到文本格式化标签了，文本格式化标签共有四种，分别是：加粗，斜体，删除线和下划线。话不多说，上图演示
由图片我们可以得知，文本格式化标签每种功能都是有两种标签可以表示的，两种标签表示出来的文字是完全相同的，我们平时使用任意一种就行 -
还有一种非常好用的分隔标签< /hr >，这是下划线标签，但跟上面文本格式化标签中的下划线标签不同，这是一条贯穿页面的下划线。需要注意的是，这也是一个单标签。
-
在网页的制作中为使网页更加美观，肯定是缺少不了图片，可以使用< img>标签来插入图片。
语法如下：
< img src=“图片地址” alt=“下载失败时的替换文本” title = “提示文本”>
举例：
< img src = “apple.gif” alt = “因特殊原因，图像暂不可见” title = “这是一个苹果” />
注：
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。 -
div和span标签都算是盒子标签，所谓盒子标签，就是说可以把想写的内容放到盒子里，在网页开发的时候使用div和span都可以，通常可以理解为没有什么区别。但注意的是div占用一行，span不会占用一行，内容占多大宽度，span就有多宽。示例如下：
-
链接标签，所谓链接标签，就是用户可以通过你的链接跳转到其他的页面，代码如下：< a href=“网站网址”>网页注释< /a > 。我们所用到的链接标签共有四种，分别是1.外部链接 2.内部链接 3.空链接 4.图片链接
外部链接是可以通过你的页面跳转到其他页面，例如百度，淘宝；内部链接是跳转到你写过的其他页面； 空链接就是当你还没想好要跳转到哪个页面的时候，可以先把链接留出来； 图片链接则是点击图片就可以跳转网页，示例如图所示：
-
接下来还有一个非常有意思的标签，< pre>标签，我们上面是说到过，HTML文件是不会根据我们手动的排版而排版的，除非使用其他标签。但是这个< pre>标签就很有意思，这是一个双标签，我们在标签内的排版什么样，最后显示出来的排版就是什么样的。
特殊符号
在平时的一些应用中我们可能会用到一些特殊符号，我总结了一些，不全的大家可以自行补上。
空格  ；
小于号 <；
大于号 >；
与 &；
人民币 ¥；
版权 ©；
注册商标 ®；
摄氏度 °；
正负号 ±；
乘号 ×；
除号 ÷；
上标 &sup；
音视频标签
还有一些音视频标签也写在这里了
音频：可直接插入音频 支持Ogg Vorbis|MP3|Wav
语法：
常见属性：autoplay: 音频就绪后马上播放
controls: 向用户显示控件，比如播放按钮
loop: 音频结束时重新播放
src: 要播放音频的URL
视频：可插入视频 支持Ogg|MPEG 4|WebM
语法：
常见属性：autoplay: 视频就绪自动播放
controls: 向用户显示播放按钮
width: 设置播放器宽度：
height: 设置播放器高度
loop: 循环播放
preload: 是否加载完再播放
src: 视频的url地址
poster: 加载等待的画面图片
muted: 静音播放
HTML中的标签基本上就这么多了，希望大家多多支持
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
