1.编译工具
工欲善其事必先利其器，进行html的学习之前首先要对使用的工具有清晰的认知。
目前主流的前端编译器有：WebStrom、VSCode。
还有一些其他的选项：dw、sublime text等等。
本次学习使用的是VSCode。
2.经典“hello world”
任何一门编程语言的开端永远是“hello world”这里当然也不例外。
打开目录，将这个名为hello.html的文件打开。
为什么需要打开目录再打开html文件呢？
前端与后端最大的不同是它是运行于浏览器的，你在浏览器上使用快捷键F12就可以打开开发者模式看到前端的代码。所以这里就是要培养这种与后端代码不一样的认知。
3.基础认知
针对上诉的hello word代码，我们来进行对html的最初相识。
（1）首先html是一种标签化的代码。他的所有代码都是有尖括号<>来组织的。
<html></html>,这个代码就是“标签”（tag），也可以叫做“元素”（element）。
（2）一个标签通常是成对出现的，<html>开始标签，</html>结束标签。
这里我提到了通常，因为少数标签可以是只有一个开始标签的单标签。
（3）标签是可以嵌套的。
从代码中可以看出，<html>标签包含着<head>标签和<body>标签。
一个标签的内容可以是其他一个或多个标签，这些标签构成了一个“树型结构”。
（4）可以在开始标签中，给标签赋予 属性（Attribute），属性相当于键值对，可以有一个或多个。
本特点在上述代码中并没有体现，会在后续中出现。
4.基础架构
<html> 这是一个html文件最顶层标签，相当于“树形结构”的树根节点。
<head>存放了这个页面的一些属性（元数据 meta data）。
<body>存放了这个页面包含的内容。
接下来我们使用比上面架构更完善的html5，来学习。
如图所示，已经把这些架构的主要作用给讲诉明白了。
5.主要使用的标签
5.1注释标签
html的注释与Java等后端语言不同。
快捷键为 ctrl + /
5.2标题标签
标题标签从<h1>到<h6>，<h1>最大最粗，<h2>最小最细。
效果如下。
每个标题标签都是独占一行，这个独占一行是与代码无关的，是标题标签本身的特性。
在标签中的文字，换行符会被忽略，多个空格会被看作为一个空格。如下图所示。
5.2段落标签
段落标签<p>,两个段落之间，不仅会换行，而且会有一个明显的段落间距。
5.2.1换行标签
需要段落中进行换行的话，使用换行标签<br>。
5.2.2格式化标签
用于处理文字，使文字出现一些简单效果。
这写标签都不是独占一行的。
5.3图片标签
图片标签<img>有一个核心属性“src”，表示图片的路径，有三种路径表示。
（1）绝对路径
指带有盘符的路径，在电脑中有具体位置。
（2）相对路径
相对于html文件所在的工作目录。
（3）网络路径
从网络上复制的图片路径。
本示例使用相对路径。
（4）alt与title属性
alt是如果图片加载不出来时显示文字。
title是将鼠标停留在图片上时显示文字。
这里就不进行演示了。
5.4超链接标签
超链接标签<a>有一个核心属性为“href”，决定其跳转界面。
点击“百度”后，就会跳转到我们输入的“href”的网页。
这个网页跳转是在这个网页本身进行跳转的，如果要跳转到新开的一个网页，需要用到“target”属性。
5.5表格标签
<table>表示整个单元格，<tr>表示一行，<th>表示表头的一个单元格，<td>表示一个单元格。
说是表格，但其实和我们平时使用的表格不一样，这里就需要用到border属性。
到这里感觉还是差点意思。一个是表格的线条，一个是文字的居中。
文字居中需要用到一个简单的css，我们这里简单使用以下。具体学习css时再进行叙述。
这里需要用到cellspacing属性，他表示单元格间距，我们让其为0。
5.6列表标签
有序列表 <ol> ordered list
无序列表 <ul> unordered list
列表项 <li> list item
5.6 表单标签
使用<form>标签进行前后端交互。
把界面上，用户进行的操作/输入提交到服务器上。
在此我们暂不进行深入学习。
5.7 input标签
<input>有很多形态，能够表现成各种用户用来输入的组件。
5.7.1单行文本框
"type"属性为“text”。
5.7.2密码文本框
"type"属性为“password”。
5.7.3单选框
"type"属性为“radio”。
实现我们平时常见的单选效果。还需“name”属性，对于“name”属性相同的单选框，值之间是互斥的。
5.7.4复选框
"type"属性为“checkbox”。
实现默认选中一个选项。需要“checked”属性。
5.7.5按钮
"type"属性为“checkbox”。
value属性表示按钮的名称。
5.7.6提交按钮
"type"属性为“submit”。
外表与“button”差不多，点击时会触发form与服务器的交互，这里还是暂不进行示例。
5.7.7文件选择框
"type"属性为“file”。
5.8下拉菜单标签
<select>标签内嵌套<option>标签，<option>标签就是下来菜单里面的元素。
5.9多行编辑框
<textarea>标签可以通过cols属性和rows属性来控制初始文本框大小。
这个标签可以在文本框内输入任意长度的文本，并且可以把文本框拉大。
5.10无语义标签
前面的标签都含有特定的含义。而这个无语义标签，无特定含义，可以用在任何场景。比如一个页面中全用div。
5.10.1 div标签
<div> 默认独占一行，块级元素。
5.10.2 span标签
<span>默认不独占一行，行内元素。
在此的无语义标签，有很多使用场景，但在此只是入门，不过多叙述。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
