前端三剑客之HTML
前端三剑客之HTML
- 1. 前言
- 2. HTML超文本标记语言
-
- 2.1 背景
- 2.2 常用编辑工具
- 2.3 来写第一个HelloWorld吧
- 2.4 必备标签、属性
- 2.5 常用标签
-
- 2.5.1 标题标签
- 2.5.2 分割线、段落
- 2.5.3 链接
- 2.5.4 图片
- 2.5.5 表格
- 2.5.6 列表
- 2.5.7 表单
- 2.5.8 区块
- 2.5.9 多媒体：音频、视频
- 2.6 小结
- 2.7 拓展与思考
- 3. 参考教程链接
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>
<head>
<meta charset =" utf-8"/>
<title>Hello worldtitle>
head>
<body>
Hello world!
body>
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>这是段落1p>
<hr />
<p>这是段落2p>
通过上述例子，我们可以认识到一个自闭标签：分割线hr
2.5.3 链接
链接就是可以点开，跳转至另一个网页，下面综合标题标签、分割线、段落等，举个例子：
DOCTYPE html>
<html>
<head>
<meta charset =" utf-8"/>
<title>Hello worldtitle>
head>
<body>
<h1>标题标签h1>
<p>这是段落1p>
<hr />
<a href="https://www.baidu.com/" target="_blank">百度一下a>
<p>这是段落2p>
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">
<tr>
<th>这是一个表格头th>
<th>一个表格头最好对应一列th>
tr>
<tr>
<td>这是一列td>
<td>这是另一列td>
tr>
<tr>
<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>
密码: <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/">
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. 参考教程链接
链接：W3School
链接：菜鸟教程
当然，也参考了各种学习资料、笔记等。
下一篇再见！