HELLO，作为一个只学过一点点 Java 和 Python 的程序小白，为了写出自己的网站，我又一次被自己逼进了前端行业（所以 no zuo no die）
为了方便大（zi）家（ji）学习，整理了一些前端的笔记。本笔记只适用于小小白快速入门，Web 码农看看就行~
目录
1. 什么是 HTML
在学习 HTML 之前，要先知道前端~ 前端简单来说，就是平常看到的一个个网页~ 有听说过前端的应该都知道前端三剑客 HTML CSS 和 JS，用通俗的话来说，如果把一个网页比作一个人，那么 HTML 就是人的身体，它只是网页的结构；CSS 就是人的衣服，它可以美化网页；而 JS 就是人的大脑，它可以控制网页的行为。理解了这些之后就可以继续 HTML 了~
HTML，全称 Hyper Text Markup Language（超文本标记语言），是一种标记语言（老师评语：重复啰嗦），它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。（来源：百度百科）
接着还需要了解一下 HTML 的“前世今生”。HTML 出生于“民国时期”，它最初于1989年由CERN的Tim Berners-Lee发明。现在已经到了第五个版本 HTML 5。
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
③HTML 3.2：1997年1月14日，W3C推荐标准。
④HTML 4.0：1997年12月18日，W3C推荐标准。
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。（来源：百度百科）
其实 HTML 相对于 Java 和 Python 这种语言可以说是肥肠简单了，难度仅次 Scratch，可以说有手就会，所以不要有学习鸭力~
2. HTML 环境配置
也是肥肠简单，只要有一个浏览器和前端 IDE。浏览器推荐 Edge 或 Chrome 或 Firefox，因为他们仨是主流浏览器，支持的设备多，完美支持 H5 + CSS3 + ES6。即使使用 IE，也要选择最新的 IE 11，对现代技术支持比较多，不过还是建议上面三个主流。至于国内杂牌浏览器想都不用想。如果用 Mac，Safari 也不错~（喂喂，有点离题了啊）
至于 IDE，本文推荐两款：IntelliJ IDEA 和 Sublime Text。如果电脑配置比较高，推荐使用 IDEA；如果电脑内存过不了 8GB，那就乖乖用 Sublime Text 吧。如果习惯使用 VS Code，那 VS Code 也可以~
本文使用 Sublime Text，从上面的链接下载 Sublime Text，下载完安装一路 Next，汉化及让 HTML 文件在浏览器运行见 这篇文章~
3. 第一个 HTML 程序
打开 Sublime Text，新建一个 html 文件，然后输入下面的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
</head>
<body>
Hello World!
</body>
</html>接下来开始一行一行剖析：
第一行声明了这是一个 HTML 文档，Sublime 自动生成（方法后面会讲）；
第二行是一个 html 标签，标签里面的就是 HTML 标签。所有标签都要在 html 标签之内。Sublime 自动生成；
第三行是一个 head 标签，html 头部标签。标签里包括一些 meta 声明和 title 标签。Sublime 自动生成；
第四、五行是 meta 声明标签。用于声明一些信息。比如第四行声明网页使用 UTF-8 字符集。Sublime 自动生成；
第六行是一个 titile 标签，用于声明网页的标题。后面的 </title> 是闭合标签。一个标签必须要闭合，这个标签才完整。闭合标签的语法是 </标签名> 但一些单行标签是可以不用闭合的，如前面的 meta 标签。标签 Sublime 自动生成；
第七行是 head 标签的闭合标签，Sublime 自动生成；
第八行是一个 body 标签，代表网页的主体；
第九行，即 body 标签之内，既可以再嵌套标签，又可以直接写东西，Sublime 自动生成；
第十、十一行是 body 和 html 标签的闭合标签，Sublime 自动生成。
尝试在浏览器中运行你的 html 文件，你应该可以看到屏幕上输出 Hello World! 了！
如何让 Sublime 自动生成一些代码呢？再新建一个文件，输入 html 再 tab，即可自动生成一些代码~
看着还挺多的，十几行呢~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
</html>4. HTML 网页结构
看了上面的 Hello World 实例，想必大家都知道了一个 HTML 网页的基本结构。HTML 文件由很多互相嵌套的标签组成。一般来说，一个 HTML 文件的结构如下，用 Hello World 来举例：
<!DOCTYPE html>
<!-- html 文件的主体 -->
<html>
<!-- html 头标签，用于声明 meta 和 title -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
</head>
<!-- html 网页主体 -->
<body>
Hello World!
</body>
</html>另外也要说说 html 里的注释，一般为 <!-- 注释内容 -->，可以用 ctrl+/ 快速生成~
5. HTML 常用基本标签
一个 html 文件是由标签组成的，所以 HTML 里的标签就相当于 Java 里的一行语句（性质不一样，但长得还是差不多的）
5.1 h 标签
先来说说 h 标签。h 标签代表标题，有 h1 ~ h6 六种不同的字号。浏览器在 h 标签的前后会自动添加换行~
h 标签的一般形式为 <h1></h1> 虽然属于单行标签，但它也要闭合~
5.2 p 标签和 br 标签
然后说说 p 标签。p 标签代表段落。p 标签的一般形式为：
<p>
两只老虎
两只老虎
跑得快
跑得快
</p>ps: 不用注意细节
但如果直接把这段代码交给浏览器，你会看到如下一幕：
你可能会发现，换行呢？
由于 HTML 里的换行只是给程序猿看的，浏览器实际处理时根本没有换行。所以又有了一个新标签：br 换行标签。它的使用肥肠简单，就一个 <br>
在 p 标签里每句歌词后面加上一个 br，再丢给浏览器：
所以养成一个好习惯：在 p 标签每写一行后面加 <br>~
5.3 文字样式标签
接下来是关于文字的~
废话不多说，直接上代码：
<!-- 加粗 -->
<strong>一只没有眼睛</strong><br>
<!-- 斜体，em 标签让我想起了 emm -->
<em>一只没有耳朵</em><br>
<!-- 上标 -->
<sub>真奇怪</sub>
<!-- 下标 -->
<sup>真奇怪</sup>然后丢给浏览器：
效果应该大家都看到了吧~
5.4 img 标签
然后是图片标签 img，这里要知道一个标签属性，比如 <img src=""> src 就是 img 标签的属性~
上代码：
<!-- 这张图片是我电脑壁纸 -->
<img src="D:\image.jpg">src 属性指向图像的本地路径或 URL~
废话不多说，丢给浏览器：
我们也可以用 width 和 height 属性强制指定 img 的大小：
<!-- 没错又是这张壁纸 -->
<img src="D:\image.jpg" width="300px" height="230px">px 全称 pixel，代表像素。虽然 HTML 数字不加单位不会报错，但后面 CSS 会呀~
所以养成一个习惯：数字后面加 px（还有 em 等单位，不过不常用）
丢给浏览器：
壁纸被压缩得扁扁的~
5.5 audio 标签
接着是音频（IE 8 及以下不支持）
<audio controls>
<source src="D:\river.mp3" type="audio/mpeg">
</audio>（由于只有 mp3 格式是全浏览器支持，所以我们尽量选择 mp3 格式的音频~）
丢给浏览器，会看到一个音频播放栏，点击三角形播放键即可播放声音~
（另外，audio 是可以加入 autoplay 属性的，作用自动播放音频，语法 <audio controls autoplay>，但我亲测最新的 Edge 100 都不支持这个属性，所以就当玩玩吧）
5.6 video 标签
我想很多人都会疑惑藤训视频或爱奇艺的视频是怎么播放的，其实根本不需要 video 标签~
它们的视频实现方法是用 Flash 实现的（离题警告），但 Flash 太复杂，我们可以使用 HTML5 原汁原味的 video 标签（IE 8 及以下不支持）
video 标签和 audio 差不多：
<video controls>
<source src="D:\movie.mp4" type="video/mp4">
</video>丢给浏览器，你可以看到一个视频播放栏，和音频一样，点击小三角形即可播放~
如果想让视频变得大一些，可以使用 width 和 height 属性设置：
<!-- 怎么又是那只熊，看了烦 shi 了 -->
<video width="1000px" height="550px" controls>
<source src="D:\movie.mp4" type="video/mp4">
</video>上效果：
怎么样，够大了吧~
5.7 iframe 标签
简单来说，iframe 标签就是在一个 html 网页中再嵌套一个网页~
废话不多说，上代码：
<!-- B站从来没有想过有一天自己会被关进 iframe -->
<iframe src="https://www.bilibili.com"></iframe>丢进浏览器，壮观的一幕诞生了~
如果觉得这个 iframe 太小，可以手动调整 width 和 height 属性：
<iframe src="https://www.bilibili.com" width="1000px" height="550px"></iframe>丢进浏览器：
5.8 a 标签
最后一个常用、简单、重要的标签——链接 a 标签~
基本语法：
<a href="">点击我</a>举个栗子，跳转到百度：
<a href="https://www.baidu.com">点击跳转百度</a>丢进浏览器：
点击一下那个链接，就会自动跳转百度~
由于 a 标签默认是在当前页面跳转，如何让它在新标签页跳转呢？
只需要加上一个属性 target="_blank"：
<a href="https://www.baidu.com" target="_blank">点击跳转百度</a>再丢进浏览器，点击链接，你会发现它在新标签页打开了，且原来页面没有关闭：
如果一篇文章很长，想在底部跳转顶部？这时候就需要用到锚链接。锚链接也是 a 标签的一种。需要在要跳转的地方做上标记，然后用 a 链接跳转至标记处。举个栗子：
<!-- 用 id 属性标记 -->
<h1 id="head">我是头部</h1>
<p>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
一些内容<br>
<!-- # 号加 id 后面的标记名跳转到标记所在处 -->
<a href="#head">点击我跳转到顶部</a>丢进浏览器，点击下面的锚链接：
你会发现它自动跳转到头部去了~
5.9 让 html 可读性更强的一些标签
下面讲的这些标签一点实质用处都没有，但是可以让整个 html 文档可读性更强（注：IE 8 及以下不支持）
下面列举一下它们：
| 标签名 | 语义作用 |
|---|---|
| header | 网页/文章头部（注：不是 html 文件的头部） |
| nav | 导航栏 |
| article | 独立组件，如文章或评论区 |
| aside | 侧边栏/附属信息 |
| section | 子组件，如一篇文章的一个章节 |
| footer | 网页/文章尾部 |
至于它们的作用。。。就当成一个变异的 p 标签吧~
6. 重点：列表
列表其实不算重点，但又比上面几个重点一些~
6.1 无序列表
个人使用最多的一个列表，也是最重点的列表~
上代码：
<!-- ul 是列表主体 -->
<ul>
<!-- li 是列表中的一项 -->
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>丢进浏览器：
6.2 有序列表
其实就是 ul 换成了 ol：
前端三剑客：
<!-- ul 换成了 ol -->
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>丢进浏览器：
6.3 自定义列表
这个我学了之后就从来没用过，所以不记了~
如果想了解见 这篇教程；
6.4 拓展：表格
其实表格我学了也很少用，但是还是得记得（上面的自定义列表：宝宝心里苦）
上代码：
<!-- table 新建一个表，border 表示边框宽度 -->
<table border="1px">
<!-- tr 标签新建一行 -->
<tr>
<!-- td 标签新建一项 -->
<td>小明</td>
<td>0分</td>
</tr>
<tr>
<td>小红</td>
<td>100分</td>
</tr>
</table>送给浏览器：
7. 重点：表单
表单，HTML 重重点~
之前听过的很多教程都是注册会员账号，今天咱们来个注销账号~
7.1 表单初识
表单没有多少花里胡哨的操作，朴朴素素才是真~
<h1>注销账号</h1>
<form method="get">
</form>上面的 method 属性可以填 get 也可以填 post，学习建议用 get，而正式环境建议用 post，原因后面讲。而 action 属性是指定表单提交到哪去~
7.2 表单元素
一个表单是由很多个元素组成的。元素都要在 form 标签内，且都要有 name 属性。不说了先拿最简单的文本框举栗子~
用户名：<input type="text" name="username">送入浏览器：
一个表单就是由很多这种元素组合起来的~
7.3 重置与提交
两个一起上：
<input type="reset">
<input type="submit">与其它不同的是，这两个元素不需要 name 属性~
然后再新建一个 1.html，内容随便写~
丢进浏览器看效果：
如果觉得它们都在同一行可以 <br> ~
试着在文本框里输入一些内容，点击“重置”，刚刚的东西全被清空了~
再输入一些内容，点击提交，就自动跳转到新页面了~
7.4 get 与 post
为什么正式环境建议用 post 而不是 get 呢？
先打开之前的表单，随便输入一些数据，点击“提交”，然后跳转到新页面~
打开上方地址栏，滑到最右边，你应该会发现一个 ?username=copcin 这样的值。这就是表单提交的数据。由于 get 提交的数据就这样暴露出来了，所以不够安全~
这时候 post 就出现作用了。post 和 get 一样都可以正常提交数据，但是 post 的数据不会显示出来，被隐藏起来了。所以 post 更安全。感兴趣的童鞋可以试试~
7.5 密码框
像很多表单，都要输入自己的密码，比如登录、注册，还有今天的注销~ 像普通文本一样处理密码，显然会出现一些问题：密码显示在屏幕上了。这时候就出现了一个密码框，它能把用户输入的信息隐藏起来，保证了用户的安全（话说密码隐藏了这么多年，真的有人去看你的电脑屏幕吗）
不多说了，上代码：
密码：<input type="password" name="password">只是 type 变成了 password~
丢进浏览器，在密码栏中随便输入一些字符，你会发现，浏览器都帮你隐藏起来了~
7.6 单选框
其实单选框跟网上考试的时候的 ABCD 差不多~ 单选框提交上去的值保存在 value 属性中。但是这里有一个问题：怎么把多个单选框分组。这时候 name 属性又起了作用。只需要把同在一组的单选框赋同一个 name 值。上代码：
性别：<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女<br>送入浏览器。你会发现男跟女两个选项只能选一个~
如果想让一个值作为初始值被选中，可以加上 checked 属性：
性别：<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女<br>上效果：
如果想把一个值禁用，可以加上 disabled 属性：
性别：<input type="radio" name="sex" value="boy" disabled>男
<input type="radio" name="sex" value="girl">女<br>丢进浏览器，你会发现“男”这个选项已经被禁用了（放心我还会把它改回来~）~
7.7 多选框
和单选框差不多，只是 radio 换成了 checkbox ~
注销原因：<input type="checkbox" name="why" value="dislike">不喜欢我们了
<input type="checkbox" name="why" value="wedobad">我们做的不好
<input type="checkbox" name="why" value="wantleave">单纯想离开<br>上效果：
同样单选框的 checked 和 disabled 属性也适用于多选框~
7.8 文本域
看起来就像是多行的文本框~
反馈：<br>
<textarea name="textarea" placeholder="您的反馈能给我们带来帮助，谢谢！"></textarea><br>（其中 placeholder 属性是提示字，当写入东西时会自动消失，也适用于文本框~）
丢入浏览器：
textarea 也可以使用 width 和 height 属性自定义长宽，方法不再赘述~
7.9 下拉框
最后一个：下拉框~ 常用于国家，时间选择~
上代码：
国家：
<select name="country">
<option value="china">中国</option>
<option value="america">美国</option>
<option value="british">英国</option>
</select><br>上效果：
disabled 属性在 option 中适用，但 checked 要换成 selected~
这样一个有模有样的注销账号页面就制作完成啦~
8. 总结
HTML 只是前端的最基础，作为一个学完三件套刚不久的小白，后面的 CSS 和 JS 可以预告才是真的难~ 你学废了吗~
由于我的笔记可能写的不好或者不全，这里提供两个 HTML 学习好站点：
505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
