前端三剑客之HTML
1. 前言
前端是几乎每个程序员学习过程中的必经之路。目前常见的前端技术有：
DOM：文档对象模型，定义访问和操作HTML的标准；
HTML、CSS、JAVAScript: 分别为超文本标记语言、样式、脚本语言，这3者通常被称为“前端三剑客”；
Vue: 渐进式JAVAScript框架；
Bootstrap: 基于HTML 、Css 、JAVAScript 的前端框架；
…等等等等等
本篇将基于Sharry个人学习过程中做的笔记、总结，再一次对Html、CSS和JAVAScript进行学习、记录，于个人而言，温故知新。当然也希望对读者也有多少帮助。
2. HTML超文本标记语言
2.1 背景
HTML是一种超文本标记语言，主要负责静态网页。
超文本标记语言：一种标记语言。一种数据组织方式，组织包括图片、音频等数据在内的各种数据。可以被浏览器解释、读取。
静态网页：没有数据交互的网页。
严格的定义和较全面的背景，通过百度、教科书等方式可查。这里不再赘述。
2.2 常用编辑工具
（1）Hbuilder：相对流行的前端编辑工具
链接：Hbuilder下载地址
（2）VSCode：比较全能的编辑工具，除了HTML等前端，还能通过插件的配置拥有使用JAVA、Python、C++等高级开发语言的开发能力。
链接：VSCode下载地址
（3）IDEA、Eclipse等：
这些常用IDE其实也是可以进行前端页面的编辑，还挺方便。鉴于这些IDE应该是大家常用的，此处就不提供下载链接了。
2.3 来写第一个HelloWorld吧
程序员的第一句代码都是HelloWorld，如果是初学者，就跟着来一遍吧：
<!DOCTYPE html>
<!--文档声明:声明这是一个HTML文档-->
<!--HTML的注释都是用这种形式，同学们记下来咯-->
<html>
<!--html 标签，包裹着<head>、<body>标签-->
<head>
<!--头部标的作用为：<head> 标签用于定义文档的头部。
<base>, <link>, <meta>, <script>, <style>, 以及 <title>
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。-->
<meta charset =" utf-8"/>
<!--meta用于设置编码格式-->
<!--title 标签 用于设置该网页的标题，是唯一必需的元素-->
<title>Hello world</title>
</head>
<body>
<!--body 里的内容主要是给用户呈现的内容，如表格、图片等-->
Hello world!
</body>
</html>
<!--注意，HTML标签都是成双成对的，部分可自闭的标签可表示为<[属性] 标签名/>-->
编辑完上述代码，我们不难发现，如果要让上述代码在浏览器运行，就要保证该文件的后缀为.html或.htm，即HTML文件。
2.4 必备标签、属性
一个完整的HTML文件，最好按照上面HelloWorld的例子，拥有html、head、body等标签，其中head标签里还需注意title这个唯一必须的元素。无论哪个标签，都要注意标签的成双成对。至于自闭的标签，相当于它一个标签就是一双。
其实HTML有一定的容错率，细心的同学发现，如果删去一些标签，甚至是head等标签，将该HTML文件用浏览器运行，依然能显示一些信息。只不过，这样HTML文件就不完整了，十分不建议这么做。我们还是要保证HTML的完整性，并尽量严格地按照格式撸代码。许多标签都会有一些必备的属性，因标签而异，我们需要正确填写属性，否则内容很可能显示不正确。当然，由于标签，属性众多，我们了解和学习其中常用的即可。
至于属性是什么呢，属性是位于标签内部的，分为属性名和属性值，不同的标签有不同的属性，实现不一样的效果。从下面的例子可以先看看属性的位置：
<img src="beautifulGirl.jpg" alt="No picture" width="314" height="159">
<!--通过观察我们不难发现，属性名一般见名知意，格式一般为属性名=“属性值”-->
<!--属性是在标签内部，是被尖括号包裹的-->
2.5 常用标签
这是本节的重点，我们学习HTML的目标就是尽可能了解HTML的常用标签，尽可能会用。
常用的标签大多作用于body内。
2.5.1 标题标签
<h1>标题标签</h1>
<h2>总共有6个等级</h2>
<h3>h1~h6 字体越来越小</h3>
<h4>不信你试试</h4>
2.5.2 分割线、段落
<h1>段落与分割线</h1>
<hr />
<p>上面的是分割线</p>
<p>这是段落1</p>
<hr />
<p>这是段落2</p>
通过上述例子，我们可以认识到一个自闭标签：分割线hr
2.5.3 链接
链接就是可以点开，跳转至另一个网页，下面综合标题标签、分割线、段落等，举个例子：
<!DOCTYPE html>
<!--文档声明:声明这是一个HTML文档-->
<html>
<head>
<meta charset =" utf-8"/>
<title>Hello world</title>
</head>
<body>
<h1>标题标签</h1>
<p>这是段落1</p>
<hr />
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<p>这是段落2</p>
</body>
</html>
主要属性的简单介绍：
href属性：链接地址；
target属性：链接跳转方式：此处的blank表示在新标签页打开；
2.5.4 图片
<img src="beautifulGirl.jpg" alt="No picture" width="314" height="159">
图片标签中最重要的属性是src，指定要显示哪张图片；alt属性是当图片不能正常显示时，返回的替换文本。
2.5.5 表格
表格由table标签定义，table标签内由tr标签控制行，td标签控制列。因为描述的是一行内有多少列，所以通常由tr包裹td。表格头由th标签描述，如果要严格一些，就需要分清表格头和列。但实际的使用体验中，th其实和td效果差不多，同志们视情况使用即可。
<table border="9">
<!--table标签定义表格，border属性是指表格的边宽，数值越大越宽，去试试！-->
<tr>
<!--tr定义一行-->
<th>这是一个表格头</th>
<th>一个表格头最好对应一列</th>
</tr>
<tr>
<td>这是一列</td>
<td>这是另一列</td>
</tr>
<tr>
<td>第二行的第一列</td>
<td>第二行另一列</td>
<!--不嫌丑的话，放开此注释的内容人看看效果
<td>第二行第三列</td>
-->
</tr>
</table>
2.5.6 列表
既然有表格，当然就会有列表。理论上，只取表格的一列，也是一个列表，仅用表格标签当然可以做出一个列表。但这里介绍的是专门制作列表的标签。所描述的列表分为有序列表和无序列表。所谓有序列表就是有序号的列表，无序列表就是没有序号的列表。
<ul>
<li>ul标签表示无序列表</li>
<li>列表的内容由li标签包裹</li>
<li>列表内容......</li>
<li>列表内容......</li>
</ul>
<ol>
<li>ol标签表示有序列表</li>
<li>默认序号从1开始</li>
<li>第三列，看看效果</li>
</ol>
<ol start="5">
<li>start属性表示从第几开始</li>
<li>运行试试！</li>
<li>改start的属性值试试！</li>
</ol>
2.5.7 表单
前面的表格、列表，主要描述的是提供给用户浏览的表格和列表，用户并不能直接在里面填写数据。这里介绍的表单就是提供给用户填写的表格或列表。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表、表格、表单综合</title>
</head>
<body>
<!--我们用一个小案例来示例-->
<from>
<h1>注册</h1>
姓名: <input type="text" name="name" value="输入姓名"> <br>
<!--这里br是换行标签-->
密码: <input type="password" name="password"> <br>
确认密码：<input type="password" name="password">
</from>
<ol>
<p>请选择业务</p>
<from>
<li>
业务1<input type="checkbox" name="service">
</li>
<li>
业务2<input type="checkbox" name="service"/>
</li>
</from>
</ol>
<table border="5">
<tr>
<td>
性别：男 <input type = "radio" name = "sex"><br>
</td>
<td>
女<input type = "radio" name = "sex"><br>
</td>
</tr>
<tr>
<td>
同意协议一<input type = "checkbox" name = "agree"><br>
</td>
<td>
同意协议二<input type = "checkbox" name = "agree"><br>
</td>
</tr>
<tr>
<td>
<form name="input" action="输入页面，表单数据提交到该页面" method="get">
输入密码点击提交 <input type="passowrd" name="password">
<input type="submit" value="请提交">
</form>
</td>
</tr>
</table>
</body>
</html>
我们通过该例子来详细说明一下表单：
表单由from标签描述，input标签为输入标签。
从例子中我们不难发现：form标签有name、action、method等属性。name属性主要描述该表单的名字，action是表单的数据将要提交到的页面，method主要描述提交请求的方式：我们从基础知识可得知：http基本请求主要有get、post两种方式。
input标签的属性有很多：type属性主要描述的是输入方式，例子中的radio表示单选框、checkbox是复选框、text是文本，passowrd是密码、submit是提交按钮等等；name属性是这个imput的名字，value则提示该input的提示信息。
我们从例子中不光能学习到基本的表单标签、属性的作用，还能发现html标签里其实是可以嵌套标签，以实现不同的效果。另外，input、br等标签虽然是单个出现，但其实是省略了自闭的斜杠，其实是自闭标签。
表单标签里的其余属性以及其余属性值的作用，篇幅有限，留给读者参考其余教程拓展。
2.5.8 区块
我们在练习上面html标签的过程中，难免会发现有时各种标签揉在一起，有点小乱，不太好看，而且上面的例子运行出来都是默认显示在浏览器的最左边。那么有没有方法把内容分块，并且可以设置该块的位置呢？显然是有：div标签与span标签
<!--示例-->
<div>
div的内容独占一行，欢迎尝试
</div>
<div>
下一行div
</div>
<div align="center">
align属性可定义div内的内容是居中显示，还是左、右，默认最左，center居中，right是最右
</div>
<span>
span标签也可以用于分块
</span>
<span>
span的内容如果要换行要手动换行
</span>
<!--多去试试！-->
2.5.9 多媒体：音频、视频
这块了解一下即可。不算太常用。
<video width="宽，自己视情况定义值" height="高" controls>
<source src="<!--视频路径-->" type="video/<!--Mp4等支持的格式-->">
<!--示例，大家的文件名、路径等都不一致，大家视各自路径等情况尝试-->
</video>
<audio controls>
<source src="<!--音频路径-->" type="audio/<!--音频格式-->">
</audio>
2.6 小结
HTML的标签众多，这里只介绍了最常用，适合入门或巩固的一些标签和属性。更多的标签、属性，需要使用的时候再去慢慢查询即可。到这里，大家对HTML的入门或者复习巩固就差不多了。在这之后，我们要在HTML的基础上进行CSS样式的学习。
2.7 拓展与思考
细心的同学不难发现，我们在J2EE开发过程中，常用到xml文件，且这些xml多用于配置。xml与html长得很像，名字都带ml，而且都是以一个个标签的形式组成的。那么xml与html的异同是什么呢？这个作为拓展提问，供诸位查找资料、思考。Sharry个人目前也在不断学习，查找资料，思考两者之间的关系。
3. 参考教程链接
当然，也参考了各种学习资料、笔记等。
下一篇再见！
2742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
