今天我们来学习前端三剑客之一（HTML），在讲解HTML之前，我们需要先了解前端三剑客是什么，分别又有什么作用呢？

前端三剑客指的是HTML、CSS、JavaScript，这三门语言。目前大多数网站的前端都是由这三门语法写的，他们之前相互搭配进行使用，就能够显示出很多丰富的效果。而他们三者的作用就像是这样的：

HTML，像骨头一样，撑起了整个页面的大致框架，比如左边需要一个输入框，右边需要一个按钮之类的，都可以用HTML来实现。
CSS，而HTML实现出来的样式比较单调，CSS就是为它进行“化妆”的，也就是做到美化的效果。
JavaScript，与用户进行交互，将用户的行为提交到后台服务器等。

文章目录

一、认识HTML
二、常见的HTML标签
- 1、注释标签
- 2、标题标签
- 3、段落标签
- 4、换行标签
- 5、格式化标签
- 6、图片标签
- 7、超链接标签
- 8、表格标签
- 9、列表标签
- 10、表单标签
- - 1)、form标签
  - 2)、input标签
  - 3)、label标签
  - 4)、select标签
  - 5)、textarea标签
- 11、无语义标签

一、认识HTML

HTML 代码是由“标签”构成的。

<p>这是一个段落标签
</p>

标签名放在<>中，如上，p就称为段落标签
大部分的标签都是成对出现的，如<p>称为开始标签，</p>称为结束标签。
极少数标签只有开始标签，称为单标签
开始标签和结束标签之间的数据，称为内容。例如上诉的代码会显示“这是一个段落标签”，这句话。
开始标签中，可以设置一些属性，比如id、name等

<p id="p1">这是一个段落</p>

HTML文件的大致构成如下：

标签层次关系：

父子关系
兄弟关系

<html><head><title>第一个页面</title></head><body>hello world</body>
</html>

上诉代码中，head和body标签，都是在html标签的直接下级，这样的情况，html标签就是二者的父标签；而head和body标签同是html标签的子标签，二者就是一个兄弟关系

二、常见的HTML标签

1、注释标签

HTML的注释标签，更java语言的注释，完全不一样，如下

<!--这是一个注释标签 -->

在VSCode编辑器中，可使用ctrl + /，快速进行注释/取消注释。

这样的标签，使用时避免进行嵌套使用。

2、标题标签

有六种标题大小的标签，数字越小，字体越大。

<h1> 一级标题</h1>
<h2> 二级标题</h2>
<h3> 三级标题</h3>
<h4> 四级标题</h4>
<h5> 五级标题</h5>
<h6> 六级标题</h6>

展示的效果就是这样的：

3、段落标签

人如其名，这个标签就是表示一个段落的标签。

<p>彭于晏，1982年3月24日出生于台湾省澎湖县，毕业于不列颠哥伦比亚大学，加拿大籍华裔影视男演员、歌手。2002年，    因出演个人首部电视剧《爱情白皮书》 ，从而进入演艺圈 [1]  。2005年，因在仙侠剧《仙剑奇侠传》中饰演唐钰一角而受到关注。2006年，主演剧情片《六号出口》。2007年，凭借爱情片《基因决定我爱你》提名第44届台湾电影金马奖最佳新演员，并为金马短片单元制作片头，完成了个人导演处女作 [2]  。2009年，发行个人首张EP《非爱不可》。2011年，彭于晏凭借励志片《翻滚吧！阿信》提名第48届台湾电影金马奖最佳男主角 [3]  。
</p>

展示结果如下：

尽管我们在p标签里面加了换行和多个空格，到最后，在浏览器展示出来的样式，其实还是一个段落。此时的多个空格和换行，会自动转换成一个空格。

p标签之间存在一个空隙
当前的p标签所展示的段落，还没有缩进。（CSS可以搞缩进）
可以自动根据浏览器的宽度来决定排版
在HTML中的文字之间输入多个空格，最终也只会展示一个空格的
HTML中输入一个换行，也只会展示成一个空格

4、换行标签

在p标签中，我们说直接输入换行，是没有效果的。此时用一个换行标签，就能达到换行的效果。

<br> 或者 <br/>

以上两个都是换行标签，后者更为规范一点。

<p>彭于晏，1982年3月24日出生于台湾省澎湖县，毕业于不列颠哥伦比亚大学，加拿大籍华裔影视男演员、歌手。2002年，因出演个人首部电视剧《爱情白皮书》 ，从而进入演艺圈 [1]  。2005年，因在仙侠剧《仙剑奇侠传》中饰演唐钰一角而受到关注。2006年，主演剧情片《六号出口》。2007年，凭借爱情片《基因决定我爱你》提名第44届台湾电影金马奖最佳新演员，并为金马短片单元制作片头，完成了个人导演处女作 [2]  。2009年，发行个人首张EP《非爱不可》。<br>2011年，彭于晏凭借励志片《翻滚吧！阿信》提名第48届台湾电影金马奖最佳男主角 [3]  。
</p>

5、格式化标签

会字体进行一个格式化的操作，就如下几个标签：

加粗：strong标签和b标签
倾斜：em标签和i标签
删除线：del标签和s标签
下划线：u标签和ins标签

分别展示的效果就如上。

<strong>这是加粗</strong>
<b>这是加粗</b>
<em>这是斜体</em>
<i>这是斜体</i>
<u>这是下划线</u>
<ins>这是下划线</ins>
<del>这是删除线</del>
<s>这是删除线</s>

6、图片标签

图片标签：img标签。

这个标签必须带有src属性，表示图片的路径。

<img src="" alt="">

改标签可以设置以下常用的属性：

src，图片的路径
alt，如果图片加载失败，会显示alt里面的内容
title，鼠标悬停在图片上面，会显示title里面的内容
height、width，控制高度和宽度，一般只需要修改一个即可，浏览器会自动进行调整
border，设置边框，参数就是边框宽度的像素，一般都是由CSS进行设置

7、超链接标签

类似于上图圈起来的字体，鼠标右击-》检查，会打开开发者工具，就能够看到这些都是由超链接标签进行构成的。

<a href="https://www.baidu.com/">百度一下</a>

如上，就是一个超链接标签。href属性也是必须要有的，表示跳转页面的地址，可以是其他网站的网址，也可以是当前网站的其他页面。

链接的几种形式：

外部链接：href指向其他网站的网址

<a href="https://www.baidu.com/">百度一下</a>

内部链接：href指向内部页面之间的链接，写相对路径就可以
```
<a href="login.html">登录页面</a>
```
空链接：一般都是用于在写界面时，表示这里有一个超链接标签，就是用来占位的
```
<a href="#">占位</a>
```
下载链接：href属性写的是一个文件，当点击的时候，就会下载该文件
```
<a href="test.txt">测试文件</a>
```

网页元素链接：可以将一个图片，设置一个链接

<a href="https://www.baidu.com/"><img src="data:image/wallhaven-r7krmq.jpg" alt="">
</a>

锚点链接：可以快速的定位到页面的某个位置；（比如看小说时，点击某个章节，就能快速跳转到正文）
```
<a href="#one">第一季</a>
<a href="#two">第二季</a>
<a href="#three">第三季</a><p id="one">第一季内容……</p>
<p id="two">第二季内容……</p>
<p id="three">第三季内容……</p>
```
当某个标签，当前没在屏幕显示时，点击链接，才能看到跳转的效果。

8、表格标签

tabel标签：表示整个表格
tr标签：表示表格的一行
td标签：表示单元格，也就是表格的一列
th标签：表示表头单元格，会居中加粗字体
thead标签：表格的头部区域，就是表格的标题，比如“核酸检测报告表”。（注意与th区分，范围比th要大）
tbody标签：表格的主体区域

表格标签还有一些属性，但是一般都用不到，都是用CSS进行设置样式的。

以下这些属性，都是要放在table标签里面的：

align是表格相对于周围元素的对齐方式，align=“center”（切记不是内部元素的对齐方式）\

border表示边框，“1”表示有边框（数组越大，边框越厚），“”表示没有边框

cellpadding：内容距离边框的距离，默认是1像素

cellspacing：单元格之间的距离，默认是2像素

width/height：设置长宽

以上这几个属性，VSCode不会提示的

举个例子：

<table  width = "300px" cellspacing="0" border="1px" ><thead>核酸检测表</thead><tbody><!-- 这是第一行 --><tr><!-- th标签，首行标签，会加粗和居中字体 --><th>姓名</th><th>年龄</th><th>职位</th></tr><tr><td>彭于晏</td><td>39</td><td>演员</td></tr><tr><td>胡歌</td><td>39</td><td>演员</td></tr></tbody>
</table>

还有一个知识点就是合并单元格：

跨行合并：rowspan=“n”
跨列合并：colspan=“n”

n表示合并n个单元格，跨行合并，就将属性插入tr标签中；跨列合并，就将属性插入td标签中。

9、列表标签

列表标签分为有序标签和无序标签，展示出来的格式如下：

这是有序标签

这是无序标签

无序标签，使用ul标签；有序标签使用ol标签，有序和无序标签。还有一个自定义标签，使用dl标签，dl标签里面只能使用dt（小标题）和dd（描述小标题的正文）.

有序标签和无序标签的注意事项：

元素之间是并列关系

ul/ol标签里面，只能放li标签；dl里面只能放dt和dd标签

li标签里面不能放其他标签

这些列表都有自己的样式，还可以使用CSS修改样式

<ul><li>这是一个无序标签</li><li>这是一个无序标签</li><li>这是一个无序标签</li>
</ul><ol><li>这是一个有序标签</li><li>这是一个有序标签</li><li>这是一个有序标签</li>
</ol><dl><dt>这是自定义标签的标题</dt><dd>这是自定义标签</dd><dd>这是自定义标签</dd><dd>这是自定义标签</dd>
</dl>

10、表单标签

表单是让用户输入信息的重要途径。

分为两个部分：

表单域：包含表单元素的区域，重要的是form标签
表单控件：输入框，按钮之类的，重点是input标签

1)、form标签

<!-- 提交按钮 用于form标签中，用于跟后台的服务器进行交互使用 -->
<form action="https://www.baidu.com/"><input type="text" name="username"><input type="submit">
</form><!-- 清空标签 也是必须在form标签中使用，用于重置用户输入的数据-->
<form action="https://www.baidu.com/"><input type="text" name="username"><input type="password" name="password"><input type="submit" name="submit"><input type="reset" name="reset">
</form>

作用：描述了要把数据按照什么方式，提交到哪个页面中去。form标签需要结合服务器和网络编程进行使用，具体的用法，我们以后再说。

2)、input标签

input标签就厉害了，可以变为各种输入控件、单行文本框、按钮、单选框、复选框。

<input type="text" name="" value="">

type(必须要有)，取值种类有很多种，button、checkbox、text、file、password、radio等
name：给input起个名字（对于单选按钮来说，具有相同的name才能实现多选一）
value：input中的默认值
checked：默认被选中（用于单选按钮和多选按钮）
maxlength：设置最大长度

文本框
```
<input type="text">
```
密码框
```
<input type="password">
```

单选框

<!-- 性别 默认选中的是男-->
<input type="radio" checked="checked">男
<input type="radio">女

复选框

<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打游戏

按钮

<!-- 当前按了 没效果-->
<input type="input" value="这是一个按钮">
<!-- 以弹窗的形式，显示hello -->
<input type="input" value="hello world" onclick="alert('hello')">

还可以搭配form标签进行使用：

<form action="https://www.baidu.com/"><!-- 用户名--><input type="text" name="username"><!-- 密码--><input type="password" name="password"><!-- 提交按钮--><input type="submit" name="submit"><!-- 重置按钮--><input type="reset" name="reset">
</form>

选择文件
```
<input type="file">
```
点击选择文件，就是弹出选择文件的位置，类似的上传头像就是这样的操作。

3)、label标签

label标签，为了提升用户的体验。在实际生活中，我们需要填写很多表格，在手机上，那个单选框很小，不是很容易被点击到。

而label标签就是将单选框的内容也设置了，我们点击内容就能够选中这个单选框。比如点击“男生”这两个字，就能够选中这单选框。

用法如下：

<input type="radio" id="male" name="sex">
<label for="male">男生</label>
<input type="radio" id="female" name="sex">
<label for="female">女生</label>

将两个单选框设置一个di，每一个单选框对应一个label标签，label标签的for属性就填单选框的id号。两个单选框设置一个相同的name属性（sex），这样的话，我们就只能实现“单选”的效果。

4)、select标签

select标签，也就是我们平时说的下拉菜单。

<select><option selected="selected">打游戏</option><option>睡觉</option><!-- selected表示默认被选中的 --><option>吃饭</option>
</select>

展示的效果是是这样的：

单击它，就可以选择其他选项。

5)、textarea标签

这个标签，用于写一些内容，比如评论区类似的，一般都是由这个标签写的。

<textarea rows="10" cols="30">hello</textarea>

rows和cols一般也是不会这样使用的，一般由CSS来修改。文本域的内容，就是默认的内容。

11、无语义标签

div标签，division的缩写，表示分割
span标签，表示跨度

这两个标签，主要用于网页布局，div标签会独占一行，称为块级元素；span标签不独占一行，他的大小会根据他里面的内容而定，称为行内元素。

无论是块级元素还是行内元素，都可以通过CSS进行修改，二者可以相互转换。

<div>div标签会独占一行</div>
<span>span标签不会独占一行，比如后面可以再写一个button</span>
<input type="button" value="这是一个按钮">

注意：行内元素不能设置长宽，因为他的长宽会根据它显示的内容而定。如果非要自定义长宽，那么就需要转换为块级元素。

常见的行内元素：span、a、img、input、textarea、br、b、strong等

常见的块级元素：div、table、form、ul、ol、dl等

好啦，本期更新就到此结束啦，我们下期再见吧！！！

总结前端三剑客之一（HTML基础）相关推荐

Web前端三剑客之HTML基础
文章目录常识简介 HTML元素语法 HTML文档规范页面头部元素元信息元素设定网页关键字: 设定网页描述信息: 设置网页字符集: 设定网页自动刷新: 切记: 页面主体元素设置网页文字和背景 ...
Web前端三剑客之CSS基础
文章目录常识简介 css概述 CSS作用 CSS代码主要组成部分在页面中使用CSS 内联样式表内部样式表注意外部样式表 CSS选择器元素选择器注意类(class)选择器 ID选择器后 ...
前端三剑客 HTML、CSS、JavaScript 入门到上手
前端三剑客 1. HTML基础使用 1.1 HTML 入门实例 1.2 HTML 常见标签 ① 注释标签 ② 标题标签 ③ 段落标签 ④ 换行标签 HTML转义字符 ⑤ 格式化标签 ⑥ 图片标签 ⑦ ...
【前端基础知识】web前端设计基础（前端三剑客之一 —— HTML5，包含课后习题）
HTML5 第一章 HTML5基础 1.1 HTML5文档结构 1.2 元素与标签 1.3 属性 1.4 语法规则第一章习题第二章 HTML5内容结构与文本 2.1 结构标签 2.2 基础标签 2 ...
前端三剑客-前端开发的三大基础语言
如今前端的技术更新速度越来越快,与其说更新速度不如说前端领域的边界不断被拓宽.从最初的PC端浏览器,然后是移动端,再然后是各种终端.WEB前端已经从最初的信息展示,发展成为与用户关系日益密切的应用形式 ...
【前端三剑客二】CSS手术刀剖析第二篇
文章目录一.CSS常用元素属性 1.字体属性 1.1.设置字体 1.2.字体大小 1.3.字体粗细 1.4.文字样式 2.文本属性 2.1.文本颜色 2.2.文本对齐 2.3.文本装饰 2.4.文本 ...
前端 - 前端三剑客绘制一幅《圣诞节快乐》交互祝福效果
一.前言 2022年圣诞节到来啦,很高兴这次我们又能一起度过~ 这个想法也是之前一直想制作一个有交互性的圣诞快乐祝福网页,一直没有时间去实现,正好趁着这次活动来满足下自己的小小的愿望哈~ 利用前端三剑 ...
前端三剑客之HTML
前端三剑客之HTML 1. 前言 2. HTML超文本标记语言 2.1 背景 2.2 常用编辑工具 2.3 来写第一个HelloWorld吧 2.4 必备标签.属性 2.5 常用标签 2.5.1 标题 ...
前端三剑客之 HTML - JavaEE初阶 - 细节狂魔
文章目录前言后端 && 前端的部分历史 - java 关于网站搭建正文开始! HTML 怎么编写一个HTML的代码? 小拓展: 快速编写 HTML 代码的小技巧浏览器的开发者工 ...

总结前端三剑客之一（HTML基础）