前端基础-1.HTML-酷程网

一、前言

本文主要是介绍一些前端三大基石之一的HTML，当你在浏览器中看到了本页内容，其实就已经在享受HTML带来的内容了。

对的，你所能看到的一切网页内容，都是由HTML展示出来的。

当然了，HTML只是展示内容，所以如果只有HTML，网页会很难看，现在的网页为了好看，肯定会使用css用来美化，并且还会用JavaScript来为页面添加更加高级的响应动作。

也就是说，HTML是用来负责网页核心要展示的内容的。

当你在电脑浏览器中看到本页内容时，就可以右键本页内容，然后在右键菜单中点击查看页面的源代码：

就能看到类似下面的这种页面内容：

其中绝大部分都是HTML源码，接下来我们要学习的也是如何自己写出、并显示这样的HTML页面。

二、概览HTML

看到上面那些奇奇怪怪的字符串也不用太过焦虑，因为HTML本身并没有任何烧脑的环节，想要学好只需要一步：勤加练习

那么练习啥呢？就是接下来要介绍的HTML中的所有标签。

那么什么是标签？那就是形如下面这个样子的就叫做HTML中的标签，也称为元素：

<title>我是标题</title>

将其描述一下就是：

用两个<>将内容包裹起来，比如这里的内容为：我是标题
该内容的类型写在<>中，比如这里为title，即“标题”的意思。
还有值得注意的是，作为结束标签还有一个/符号，比如这里后面的那个</title>，就是结束标签，对应的前面那个就是开始标签了。

这种标签在HTML中占了绝大多数，但也有例外，那就是标签里面没有内容的，比如常见的图片所对应的图片标签：

<img src="./1.jpg">

可以看到，这里的图片标签就只有一个，而不是像上面那样成对出现的，这就是因为图片标签没有内容，它的图片是通过属性src根据图片路径来引入的。

标签可以拥有属性，即像上面这个图片标签一样，写在第一个标签名之后即可，用空格隔开，用来定义这个标签的内容或样式。

但也不用太过担心，大部分标签根本不用我们写属性。

HTML中的标签大致就分为上面这两类，是不是特别简单！

唯一麻烦的就是标签数量有点多，需要自己熟练使用一下才行。

那么接下来我们还需要准备一个能写HTML代码的编辑器，当然你用windows自带的记事本也是完全可以的，只是写着太累了而已。

我们一般会使用更加高级的编辑器，比如vscode，可以点击这里去官网下载即可：

选择合适的版本下载安装即可，非常简单。

由于我是windows系统，x64版本，所以选择了上图中箭头所示的版本，目前电脑基本已经都过渡到了x64版本，所以如果你是windows电脑，可以直接点击下载即可。

安装好后，先用记事本新建一个index.txt的文件，然后再将后缀名.txt改为.html即可：

如果此时直接点击它，就会用当前电脑默认的浏览器打开这个文件了。

当你想要看文件中代码所能呈现出的效果时，就直接点击即可，浏览器会直接对你的代码进行渲染。

但现在我想要编辑它，所以需要右键这个文件，用编辑器打开它，我这里就用vscode打开这个文件了：

最开始可能会弹出一个对话框，直接点击打开即可。

如果你是英文界面，想要改为中文，搜索并安装一下图中的插件即可：

一般可能还需要重启才能生效，接下来我们可以在打开的文件中输入一个!，会有对应的代码提示：

此时按Enter键，就会自动生成HTML的基本框架：

那么这个基本框架都是干什么的呢？首先是第一行的：

<!DOCTYPE html>

这是声明当前HTML用的标准，这里表示的是该文件使用的最新的HTML5标准，一般都是默认即可，不用管。

然后是下面的html标签

<html lang="en">
 <!-- 网页内容-->
</html>

html中的注释就是像上面这样写 ，这样浏览器就不会管你。

任何语言正常来说都是有注释语法的，这里就不再过多赘述其作用了。

html标签就代表了我们整个网页，那么网页中的内容也就是要写在html标签里面了。

而这里它还带有一个属性lang，这是当前网页所用的语言类型，默认的en表示英文，我们可以改为zh-CN，表示我们开发的中文网页。

比如我们常见的网页翻译插件怎么知道当前网页需要翻译呢？可能也会依靠这个值，如果网页为en，而我们浏览器设置的中文，那就说明我们可能需要对网页内容进行翻译。

然后网页中的内容分为两部分，一个是头，一个是身体，首先是头：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

即用head标签表示头，头中的内容一般都是提供一些元信息的，它们并不会被渲染到页面中，仅仅是给搜索引擎、浏览器看的。

比如这里有很多meta标签是单标签的，因为它没有内容，可以通过给它设置相关属性，供浏览器、搜索引擎识别：

如这里的第一个meta标签，就是设置当前页面用的UTF-8编码，网页一般都是用utf-8，所以不用改。
第二个meta标签，表示适配移动手机网页，这是css中要关心的内容，所以这里可以直接删除了。
最后还有title标签，就是设置当前网页标题的。

保存当前网页，我们直接点击这个文件，用浏览器打开，就能看到标题内容：

因为我们什么都没写，所以是一片空白。

最后还有body标签，这就是存放网页中要呈现内容的地方：

<body>
    <!-- 网页要呈现的内容 -->
</body>

比如前面提到的图片标签img，就要写在这个里面。

最后总结一下：

在vscode中，输入!，即可自动生成html基本框架。
目前网页都是采用html5标准，所以第一行不用管。
html标签的lang属性的值，可以改为zh-CN，表示该网页为中文网页。
head标签内存放的是元信息，里面的内容不会展示到网页上，其中title标签可以设置网页的标题。
body标签里面存放的是网页要展示的内容，后面我们的代码主要就是在body标签里面写。

三、head内部常用标签

我们还是从上往下说起。

除vscode帮助我们默认生成的相关标签外，head中还有很多有用的标签，这里先展示目前我们能用的上的标签

1.图标

首先是网站图标标签，如下图：

这个图标是怎么设置的呢？很简单，输入link:f，就会提示：

生成的代码中：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

其它都不用管，link标签主要用于引入外部内容的，这里你只需要知道它这里的href属性的值填的是我们图标的路径即可，其它内容都是自动生成的。

所以我们就直接在该网页旁边，放了一个小图标，并将其名字直接改为了favicon.ico

保存后，刷新原网页，就会发现图标已经能够显示出来了

2.关键字

所谓关键字，就是当你的网页上传到服务器上时，别人在搜索引擎中搜索关键字，如果与你写在网页中的关键字匹配了，那么搜索引擎就会将你的排名提前。

如果你在一些博客论坛发过文章、或者自建过博客网站，就会知道其发布过程有一个文章标签的，这种一般就是在设置关键字，当别人搜索时，就能快速定位到你的文章类型。

那么关键字应该怎么写呢？同样很简单，输入meta:k就会有代码提示

kw即keyword的缩写：

<meta name="keywords" content="手机,电脑,手表">

在生成的代码中的content属性中，像上面这样填入关键字即可。

3.描述

除了关键字，还有一个重要的点就是描述，比如每次你在浏览器中搜索出结果时都能看到：

也就是说，描述就是对当前页面的一个总结，让用户能够更加快速的了解整个网页的内容是什么。

设置起来也很简单，输入meta:d就会有代码提示：

desc即description简称，只要将描述文字写在生成的标签后的content属性中即可：

 <meta name="description" content="这是一个学习html的页面，主要介绍html相关的内容">

四、body内部常用标签

接下来就是重中之重了，因为body标签内部要显示的就是所有将要在网页上展示给别人看的内容。

1.文字类标签

首先要介绍的就是最重要的文字标签，因为绝大部分网页中都不可能没有文字。

而一篇文字中最重要的就是标题与段落。

首先是标题，有6类：

<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>

保存后，浏览器打开刷新页面：

可以看到，各个标题最主要的特征就是，字号大小与加粗，所有标题都是加粗样式，而字号则是从h1到h6逐渐变小的。

这还是很好记的，h即head，后面的数字就是第几级标题，一般我们都只用得到前三级标题。

然后紧跟着的就是段落：

段落也很简单，就是p标签，即Paragraph的首字母。

对于一般性文字，我们就会使用p标签进行表示，注意一个p标签和标题一样，都是独占一行的，如果文字数量超过了当前屏幕大小，就会自动换行显示。

除了上面两个最基本的文章标签，html也提供了一些好用的标签，比如换行、加粗、倾斜等

html中并不能直接换行，想要换行就必须要添加标签，而换行的标签就是br。

在需要进行换行的地方，添加一个br标签即可，由于没有内容，所以只有一个单标签：

除了换行，我们还可以划出水平线，可以让界面好看一点：

hr同样没有内容，只是一个单标签，在需要划出横线的地方写上这个标签即可。

然后还有加粗，html提供了两个加粗标签，分别为strong与b标签：

两者并没有本质的区别，唯一的区别就是strong语义更强，用它修饰的关键字，搜索引擎可能会更加重视。

使用方法很简单，将想要加粗的内容，用这两个标签包裹一下即可。

然后是倾斜，同样是两个标签，分别为em与i，两者的区别与加粗相同，单词长的，语义更强，搜索引擎可能会更加重视：

使用方法同样是将需要倾斜的文字用这两个标签包裹起来即可。

然后还有删除线与下划线，它们同样是两个标签，区别与上面相同：

代码：

<body>
    <h3>这是一个三级标题</h3>
    <hr>
    <p>这是一 <br> 个段落</p>
    <p>这是要 <strong>加粗</strong> 的 <b>段落</b></p>
    <p>这是一个要 <em>倾斜</em>的 <i>标签</i> </p>
    <p>这是要 <del>删除</del> 的 <s>段落</s></p>
    <p>这是要画 <ins>下划线</ins> 的 <u>段落</u> </p>
</body>

2.图片标签

这里的图片标签就是最开始提到的img标签，其不同之处在于，它有几个属性需要我们记住一下，直接输入img会有代码提示，就会自动填写下面这样的代码：

<img src="" alt="">

src里面为图片路径，可以填本地路径，也可以填网络路径，而alt则为当图片无法显示时，要显示的替代文字

比如我想显示bing图标的网络路径，但链接却不对：

<img src="https://cn.bing.com/?FORM=Z9FD1" alt="bing图标">

无法显示图片时，就会出现后面的那个文字：

使用正确的图片路径时，就能正常显示了：

除了上面两个属性外，还有一个常用、且通用的title属性：

<img width="100px" src="https://www.bing.com/favicon.ico" alt="bing图标" title="这是bing搜索浏览器的图标">

这个属性的作用就是，当你把鼠标放在这个图片上时，悬浮等一会，就会显示出这张图片的标题，即这个属性对应的值。

不仅仅只是img标签，事实上其它标签都可以加上这个title属性，非常的通用。

3.链接

然后是链接标签，这个在网页中也是非常常见的，比如你就是在某个网页中通过点击某个地方，就跳转到当前页面来了。

它主要就是让多个页面之间产生了联系，可以从其中一个页面直接跳转到另外一个页面。

而且其写法也很简单，直接写a就会有代码提示，生成下列代码：

<a href=""></a>

它有一个href属性，就是要跳转的链接，而且它是双标签，就说明它应该有内容，一般我们是像下面这样写：

<a href="https://www.kucoding.com">跳转酷程网</a>

这时你点击它，就会在当前页面直接跳转到本网站的首页：

但有时我们不想要在当前页面进行跳转，而是新打开一个页面进行跳转，那就可以添加target属性：

<a href="https://www.baidu.com" target="_blank">跳转百度</a>

一般我们就会取值为_blank，就会在新页面打开。

除了跳转外，我们常见的下载文件按钮也是它，只要将这个链接换为你的文件链接即可。

当然，我们还可以添加download属性，为下载文件指定名称：

<a href="https://ityushi.cn/sw/boxManImg.7z" download="test.7z">测试下载</a>

不过不常用，有时可能还没有效果。

4.列表

列表也很常用，我们对其最常见的用法可能是这样：

列表1
列表2
列表3

但其实在网页布局中，下面这种布局非常统一的项，也是可以通过列表做的：

只不过还需要css对它的样式进行调整才行，不然非常难看。

提这些，就是为了让你知道列表的用处其实是很大的。

列表分为三类，分别为无序列表，有序列表以及自定义列表

所谓无序列表，也就是列表前没有顺序的，写法如下：

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

渲染结果：

也就是用ul标签表示整个列表，而具体的列表项则由li来表示。

然后是有序标签：

使用方法一样，就是将ul改为ol即可，而列表项都为li。

最后还有自定义列表：

<dl>
    <dt>水果</dt>
        <dd>香蕉</dd>
        <dd>苹果</dd>
    <dt>电子器件 </dt>
        <dd>电脑</dd>
        <dd>手机</dd>
</dl>

使用方法就是用dl标签进行包裹，用dt标签定义列表名称，而dd标签定义列表项：

这种常见于某些网页底部的站点说明信息，当然了，同样也需要css对它进行调整样式的，不然太难看了。

5.表格

表格也算比较常见，常用于展示一些比较结构化的东西，比如下面这种：

写法也很固定：

    <table>
        <tr>
            <th>类型</th>
            <th>大小</th>
        </tr>

        <tr>
            <td>bool</td>
            <td>1个字节</td>
        </tr>

        <tr>
            <td>char</td>
            <td>1个字节</td>
        </tr>
    </table>

即表格整体用table进行包裹，然后每一行都用tr包裹，其中第一行一般为表的标题，就可以用th标签，而其它基本内容，则直接用td标签，渲染效果如下：

但仅仅这样就太过于简陋了，所以一般我们还会给它添加边框：

方法就是在table标签上添加一个border属性，也就是边框的意思，设置为1px。

px为像素，也就是1个像素的宽度，像素是最基本的单位，比如你的屏幕可能就是1920x1080像素大小。

虽说依旧不好看，不过没办法，html就是用来提供内容的，想要界面好看，就得用css。

除此之外，表格还可以添加标题，使用caption标签：

最后对于表格，有时还有单元格合并的操作：

    <table border="1px">
        <caption>数据类型</caption>
        <tr>
            <th>类型</th>
            <th>大小</th>
        </tr>

        <tr>
            <td colspan="2">bool</td> <!--横向合并 -->
        </tr>

        <tr>
            <td>char</td>
            <td rowspan="2">1个字节</td> <!--竖向合并-->
        </tr>
        <tr>
            <td>int</td>
        </tr>
    </table>

横向合并要用colspan，即它要占几列，后面数字为2，则该单元格会占2列，就完成了合并后一列，竖向合并也是同理，就是单元格要占几行，最终渲染效果如下：

6.表单

最后就剩表单了，这个也是非常的常见。

比如常见的网站注册页面、填写个人信息页面等等需要向服务器提交信息的地方，一般都是用的表单。

其最外层的标签就是form，当你直接输入这几个单词，选择代码补全后，就会默认出现下面代码：

    <form action="">
        
    </form>

这就是表单的外围框架，和前面表格的table标签一样。

它有个属性值action，其值就是表单中数据要提交的位置，为一个链接，暂时就不用管了。

表单中最重要的一个标签是input，它可以根据属性值的不同，显示出不同类型的表单。

比如我们想要一个输入框：

根据其属性type的值不同，它可以显示出不同的类型，常用的如下：

type属性值	说明
text	输入框
password	密码
radio	单选框
checkbox	多选框
file	文件选择
submit	提交表单数据
reset	重置表单数据

使用方法：

    <form action="">
        账号：<input type="text"> <br>
        密码：<input type="password"> <br>
        性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女 <br>
        爱好：<input type="checkbox">篮球 <input type="checkbox">计算机 <br>
        上传文件：<input type="file"> <br>
        <input type="reset">  
        <input type="submit"> 
    </form>

使用起来还是很简单的，需要注意的是在需要换行的地方要加入br标签

然后是单选框，即多个之中只能选择一个，那么请添加它的name属性，并取相同的值就行了

至于提交文件、重置、提交数据，都能看出它们是什么意思，自己点一点就知道了。

最终渲染效果如下：

除了input标签，还有下拉菜单、文本域等：

<!--文本域-->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!--下拉菜单-->
<select name="" id="">
    <option value="">北京</option>
    <option value="">上海</option>
</select>

直接输入标签名称就会有对应的补全，注意一下这些自动补全标签拥有的属性

id：这个属性是所有标签都可以有的一个属性，用于以后在使用js时来定位元素的
name：这个是表单中标签中的元素，用于标识这个标签，提交给服务器时，就是根据这个属性值来判断它是哪个标签的

至于文本域，就是用于接收用户输入一大堆文字的，其中的属性cols与rows分别代表文本域的列数与行数。

而下拉菜单，则需要在里面继续添加option标签，用于指明列表项，其默认有个value属性，这个值同样是发送服务器的，知道客户端选择了哪个选项。

渲染效果如下：

由于这个表单只有在与后端交互的时候才用得到，加上路径前端各种框架的兴起，直接使用form的情况较少，这里也就不演示了。

五、emmet语法

如果你一个字符一个字符的敲代码，会发现html是非常繁琐的，但好在vscode默认就支持emmet语法，可以极大的方便我们写代码。

最简单的就是当你直接写标签名，比如 a，就会自动给我们补全所有代码

但除了这个最简单的写法，其实还有更加高级的写法

比如我想写一个a标签和一个img标签并列，那么你可以输入：

a+img

然后按enter键，就会自动生成两个并列的标签，如果有多个，还可以继续往后面追加。

然后就是像列表那样的，一个标签包裹一堆标签，那就可以这样写：

ul>li

但一般里面标签不止一个，那就可以这样写：

ul>li*3

意思就是ul里面有三个li标签。

但我们还想要让里面有规律的内容，那就可以这样写：

ui>li{这是第$个项}*3

在想要添加内容的标签后面，直接添加{}，里面填写内容即可，并且其内置了一个变量$，会自动从1开始增加

当学习了css之后，会大量使用到标签中的class属性，这是每一个标签都可以有的属性，和id属性一样。

那么可以这样快速生成带class属性或id属性的标签

a.testclass <!-- 带类属性的标签a：<a href="" class="testclass"></a> -->
a#testId <!-- 带id属性的标签a：<a href="" id="testId"></a> -->

当然了，上面这些语法都是可以任意组合的，也可以单个使用，并不多，但需要点时间去熟练使用，就能大大提高开发效率。

六、其它学习资料

相信你也看出来了，与C/C++相比，前端简单了不是一点半点（至少目前如此）。

所以这也就导致了它的相关资料与教程真的非常多，甚至官网都提供了其详细的教程以及说明：MDN。

对于标签有问题的，可以直接去官网查看就行。

然后还有就是b站的视频教程也非常的多，比如我看过的黑马程序员的前端系列教程就很不错，值得一看，需要的可以自行去b站搜索即可。

1.HTML