目录：【HTML5系列教程】
二、HTML快速入门
2.1 HTML的入门
2.1.1 编写第一个HTML代码
新建一个HelloWorld.html文件，使用记事本打开：
输入如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
Hello World！
</body>
</html>
然后双击打开HelloWorld.html文件，经过浏览器的渲染，就变成了一个普通网页：
我们也可以在网页的空白页面处右键，查看网页的源代码：
也可以在右键菜单处，点击"检查"（大部分浏览器的快捷键是F12），实时预览网页源代码：
2.1.2 HTML代码注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就可以使用注释，当浏览器不解析其中的代码。
其基本语法格式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<!-- 我是注释的代码,不会被解析！ -->
Hello World！
</body>
</html>
我们双击打开该html文件，发现浏览器并没有渲染注释部分的代码：
2.2 HTML的结构
HTML有自己的语言语法骨架格式，我们在编写HTML代码，要先编写好HTML的骨架格式。
<!DOCTYPE html> 声明该文件是一个HTML文档
<html>
<head>
这里写页面的头部信息(主要是声明信息)
</head>
<body>
这里写页面的主体信息(主要是网页的整体内容部分)
</body>
</html>
- — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
- — html 元素。该元素包含整个页面的内容，也称作根元素。
- — head 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
- — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
- — title 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
- — body 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
2.2.1 标签的分类
在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素
标签是HTML代码的重要组成部分，所有的HTML代码都是由标签来组成的；
- 1）双标签：
<标签名> 内容 </标签名>
举例：
<body>Hello World</body>
- 2）单标签：
<标签名 />
举例：
Tips：在HTML中，标签不分大小写，但推荐使用小写。
2.2.2 标签的关系
标签中的关系分为嵌套关系和并列关系；
如下面代码：
<html>
<head>
</head>
<body>
</body>
</html>
- html标签和head、body标签是嵌套关系；
- head标签和body标签是并列关系；
需要注意的是，标签的嵌套不能出现错乱，如：
<html>
<head>
<body>
</head>
</body>
</html>
出现标签嵌套的错乱会导致标签无法被浏览器解析而出现一些问题；
2.3 标签的属性
我们可以把标签看做一类事物，但是有时候事物不够具体，我们可以通过属性让标签的功能更加具体
比如可以将手机看做是一个标签，我们在HTML中编写了一个手机标签只能说明存在了"一部手机"，但这部手机是什么品牌的，价格、颜色等信息我们都不知道，有了属性之后，我们可以把标签更加明确化；
属性的语法：
<标签名 属性1="属性值1" 属性2="属性值2" 属性n="属性值n"> 内容 </标签名>
在上面的语法中：
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。
扫一扫
61万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
