【前端基础】--- HTML

在这里插入图片描述　个人主页　:　 9ilk
　　　专栏　 : 　前端基础

文章目录

🏠 初识HTML
🏠 HTML结构
- 认识HTML标签
- HTML文件基本结构
- 标签层次结构
- 快速生成代码框架
🏠 HTML常见标签
- 注释标签
- 标题标签 h1-h6
- 段落标签 p
- 换行标签 br
- 格式化标签
- 图片标签 img
- 超链接标签 a
- 表格标签
- 列表标签
- 表单标签
- 无语义标签
🏠 HTML特殊字符

🏠 初识HTML

什么是前端?

Web前端是用来给用户呈现一个个网页的,一个软件通常情况下是由于前端+后端完成的。生活中我们遇到的Web页面，PC端程序页面，移动端APP页面等就是前端页面，前端是指用户在浏览器中看到并与之交互的部分。

什么是HTML？

HTML（超文本标记语言）是前端开发的基础，它用来定义网页的结构和内容。所谓超文本 指的是文本、声音、图片、视频、表格、链接等。

我们可以简单的使用记事本编写一个html页面：

编写hello world
保存之后修改文件后缀为html文件
注：上面只是简单展示一下html文件的效果，实际上这是不标准的。

🏠 HTML结构

认识HTML标签

<body>hello</body>

标签名(body)放到<>中
大部分标签成对出现,<body>为开始标签,</body>为结束标签
少数标签只有开始标签,称为"单标签"
开始标签和结束标签之间,写的是标签的内容
开始标签中可能会带有属性, id属性相当于给这个标签设置了一个唯一的标识符(身份证号码)

<body id="myId">hello</body>

HTML文件基本结构

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

html标签是整个html文件的根标签(最顶层标签)
head标签中写页面的属性
body标签中写的是页面上显示的内容
title标签中写的是页面的标题

标签层次结构

标签之间存在两种关系：

父子关系
兄弟关系

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

其中：

head和body是html的子标签(html就是head和body的父标签)
title是head的子标签 ，head是title的父标签
head和body之间是兄弟关系

在Chrome浏览器下我们可以使用开发者工具查看页面结构，具体操作是按F12或右键审查元素，开启开发者工具，然后切换到Elements标签，就可以看到页面结构的细节
在这里插入图片描述
我们看到标签之间的结构关系，构成了一个DOM树

DOM是Document Object Mode(文档对象模型)的缩写，每一个标签相当于是一个对象，程序员可以通过代码拿到这些对象，拿到之和进行增删查改。

在这里插入图片描述

快速生成代码框架

我们之前演示的步骤是：记事本编写内容，ctrl s保存，修改文件扩展名，但是这样开发效率是比较低下的，我们可以使用一些开发工具进行编写HTML。前端开发工具有很懂，比如VSCode，SubLime，IDEA等，其中VSCode是企业开发前端非常常用的一个工具，我们使用VSCode来演示。

VSCode中有三个比较好的插件能帮我们快速开发：

Auto Rename Tag

对于双标签，使用该插件时，修改开始标签，此时结束标签也会更着改变。
view in browser

该插件可以帮助我们在VSCode中直接打开浏览器查看我们HTML网页的效果。
Live Server

该插件可以实时地在浏览器中预览更改。你只需要保存文件，浏览器会自动刷新并显示最新的修改效果。

快速生成代码框架：在VSCode中创建完html文件之后，直接输入!，按tab键此时就能生成代码的主体框架。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

说明：

<!DOCTYPE html>称为DTD(文档类型定义),描述当前的文件是一个HTML5的文件
<html lang="en">其中lang属性表示当前页面是一个**“英语页面”.**这里暂时不用管 (有些浏览器会根据此处的声明提示是否进行自动翻译)
<meta charset="UTF-8">描述页面的字符编码方式.没有这一行可能会导致中文乱码，编写代码的编码方式和浏览器解码方式需要一致
<meta name="viewport" content="width=device-widith, initial-scale=1.0">这是移动端适配用的。name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域 ；content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放 (这个属性对于移动端开发更重要一些)

🏠 HTML常见标签

注释标签

注释标签是不会显示在界面上的，它的目的是提高代码的可读性：

<!-- 我是注释 -->

注释快捷键：ctrl + / 快捷键可以快速进行注释/取消注释
注释的原则：,在web页面可以按f12查看我们的html文件源码,也就是说用户可能通过一定方式拿到我们html代码,可能看到我们注释，所以注释要和代码逻辑一致，尽量使用中文，不要传递负能量。

标题标签 h1-h6

标题标签有六个，从h1-h6，数字越大，则字体越小，也越来越细。

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

演示效果：

在这里插入图片描述

段落标签 p

把一段较长的文本粘贴到html中，我们会发现并没有分成段落，这是因为vscode中换行对浏览器渲染不起作用，需要使用标签来进行换行：

在这里插入图片描述

p标签表示一个段落，即开始标签和结束标签之间内容表示一个段落。

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

通过p标签改进上述代码,每个段落放到p标签中：

在这里插入图片描述
效果展示：

在这里插入图片描述
注意：

p标签之间存在一个空隙。
当前的p标签描述的段落,前面还没有缩进，后面可以使用CSS来设置。
目前自动根据浏览器宽度来决定排版。
html内容首尾处的换行,空格均无效
在html中文字之间输入的多个空格只相当于一个空格

在这里插入图片描述

换行标签 br

br是break的缩写，表示换行。

br是一个单标签(不需要结束标签)。
br标签不像p标签那样带有一个很大的空隙。
<br/>是规范写法，不建议写成<br>。

我们可以使用br标签对之前文本进行一个换行：

在这里插入图片描述
注：换行标签换行之后的间隙比段落标签的间隙要小。

格式化标签

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

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

效果展示：

在这里插入图片描述
注意：

对于格式化标签，使用CSS也可以实现类似的效果，实际开发中以CSS为主。
前面介绍的每种格式化标签中，前者和后者视觉效果上其实没有什么差别，只不过在语义上，前者起到强调作用。

图片标签 img

img标签必须带有src属性,表示图片的路径。

<img src="rose.jpg">

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中。

关于目录结构：

相对路径 : 以 html 所在位置为基准, 找到图片的位置。同级路径使用./+文件名表示，而上一级路径可以使用../表示。
绝对路径：一个完整的磁盘路径, 或者网络路径。

img标签的其他属性：

alt : 替换文本，当文本不能正确显示的时候，会显示一个替换的文字。
title : 提示文本，鼠标放到图片上,就会有提示。
width/height : 控制高度和宽度，一般改一个就行,另外一个会等比例缩放.否则就会图片失衡。
border : 边框,参数是宽度的像素.但是一般使用CSS来设定。

注意：

属性可以有多个, 不能写到标签之前。
属性之间用空格分割, 可以是多个空格, 也可以是换行。
属性之间不分先后顺序。
属性使用键值对的格式来表示。

img标签不同属性展示

alt属性使用示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset-"utf-8">
<meta name "viewport" content-"width-device-width, initial-scale-1.0">
<title>document< /title>
</head>
<strong>hello 冰冰《/strong></br>
<img src="hts:/" alt:"图片加载失败">

图片加载失败就可以使用alt属性进行提示，它的文案只有加载失败才会展示,我们这里故意放个错误的图片链接来展示效果 :

在这里插入图片描述

title属性使用示例

<!DOCTYPE html>
<html lang="en'
<head
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head
<strong>hello Nagisa</strong></br>
<img src="./Nagisa.png" alt="图片加载失败" title="关注米汀谢谢喵">

我们需要把鼠标放到图片上才能看到title属性描述的信息：

在这里插入图片描述

width/height使用示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-wwidth, initial-scale=1.0
<title>Document</title>
</head>
<strong>hello Nagisa</strong></br>
<img src="./Nagisa.png" alt="图片加载失败"title="关注米江谢谢喵
width="280px" height="180px" >
<!--px是像素 像素越大图片越大-->

width控制宽度, height控制高度 , 它们单位是px,表示像素,px越大图片越大。

在这里插入图片描述

border使用示例：

<!DOCTYPE html>
<html lang="en"
<head
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<strong>hello Nagisa</strong></br>
<img src="./Nagisa.png" alt="图片加载失败"title="关注米汀谢谢喵
width="280px" height="180px" border="1px">

border是用来给属性加边框的，属性值越大，边框越粗。

在这里插入图片描述

超链接标签 a

a标签主要有两个属性：

href : 该属性必须具备,表示点击后会跳转到哪个页面。
target : 打开方式默认是_self 如果是_blank 则用新的标签页打开。

herf属性介绍：herf表示链接，它有多种类型的取值。

外部链接: href 引用其他网站的地址。

<a href="http://www.baidu.com">百度</a>

内部链接: 网站内部页面之间的链接，写相对路径即可。

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

空链接 : 使用 # 在 href 中占位

<a href="#">空链接</a>

在这里插入图片描述

下载链接 : href 对应的路径是一个文件，(可以使用 zip 文件)

<a href="test.zip">下载文件</a>

网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

此时点击图片就能跳转页面。
锚点链接: 可以快速定位到页面中的某个位置。使用#加上目标位置的id，就可以创建指向这个位置的链接。

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
</p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
</p>
<p id="three">
第三集剧情 <br>
第三集剧情 <br>
...
</p>

请添加图片描述
注意：锚点链接只能在同一页面内跳转。

target属性：该属性存在两个取值，表示链接的目标会在哪个窗口或标签页中打开，两个取值分别为_self和_blank。

_self : 指定链接在当前窗口或标签页中打开，它是target属性的默认行为。

请添加图片描述

_blank : 指定链接在新的窗口或标签页中打开。

请添加图片描述

表格标签

基本使用

table标签 : 表示整个表格。
tr : 表示表格的一行。
td : 表示一个单元格。
th : 表示表头单元格 会居中加粗。
thead : 表格的头部区域(注意和th区分,范围是比th要大的)。
tbody : 表格的主体区域。

包含关系：table 包含 tr , tr 包含 td 或者 th。

说明：

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置。
这些属性都要放到 table 标签中。
align 是表格相对于周围元素的对齐方式 align=“center” (不是内部元素的对齐方式)
border 表示边框 1 表示有边框(数字越大, 边框越粗), “” 表示没边框。
cellpadding: 内容距离边框的距离, 默认 1 像素。
cellspacing: 单元格之间的距离. 默认为 2 像素。
width / height: 设置尺寸。

代码演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>18</td></tr><tr><td>李四</td><td>男</td><td>28</td></tr><tr><td>张红</td><td>女</td><td>男</td></tr></table>
</body>
</html>

效果展示：

在这里插入图片描述
我们要的表格需要有格子，这里没显示是因为浏览器默认是0像素，我们可以设置table标签的border属性：

 <table border="2px">

效果展示：

在这里插入图片描述
但是这个表格有点小了,如果我们想变大,可以设置table标签的width和height属性:

   <table border="2px" width="500px" height="300px">

在这里插入图片描述
但是我们发现表格单元格之间有间隙，不是单纯的一条细直线，这是因为浏览器默认单元格之间的间隙有一定间距，值为2，我们可以更改cellspacing：

     <table border="2px" width="500px" height="300px" cellspacing="0">

在这里插入图片描述
还有问题就是单元格内元素位置偏左了，我们可以设置cellpadding:

   <table border="2px" width="600px" height="500px" cellspacing="0" cellpadding="70px">

在这里插入图片描述
如果我们想让整体表格整体放到网页中间,我们可以修改align属性,它默认是left：

  <table border="2px" width="600px" height="500px" cellspacing="0" cellpadding="70px"align="center">

在这里插入图片描述
注意：align控制的是表格整体而不是内容。

thead && tbody && th

thead和th搭配

在这里插入图片描述

注意：thead里面使用th的内容是会居中+加粗展示的。

tbody：正常情况下，我们都是把表头放到thead里，表格内容放到tbody里。

合并单元格

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

步骤 :

先确定跨行还是跨列。
找好目标单元格(跨列合并,左侧是目标单元格;跨行合并,上方是目标单元格。
删除的多余的单元格。

合并行：

在这里插入图片描述

效果展示：

在这里插入图片描述

合并列：

在这里插入图片描述
效果展示：

在这里插入图片描述

列表标签

主要使用来布局的，整齐好看。

无序列表： ul li
有序列表：ol li
自定义列表： dl(总标签) dt(小标题) dd(具体内容）

注意：

元素之间是并列关系。
ul / ol 中只能放 li 不能放其他标签, dl中只能放 dt 和dd。
li 中可以放其他标签。
列表带有自己的样式, 可以使用 CSS 来修改(例如前面的小圆点都会去掉) 。

无序列表使用示例

VSCode快捷键快速生成列表标签：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>这是无序列表</h1><ul><li>内容1</li><li>内容2</li><li>内容3</li></ul>
</body>
</html>

效果展示：

在这里插入图片描述
这里每一个无序列表前面都是用一个实心圆开头，实际上可以通过更改ul标签的type属性来换成其他样式：

属性	值	描述
type	disc square circle	HTML5不支持。HTML4.01已废弃。规定列表的项目符号的类型

type = “square” 列表以方块开头 :

在这里插入图片描述

有序列表使用示例

     <h1>这是有序列表</h1><ol><li>内容1</li><li>内容2</li><li>内容3</li><li>内容4</li></ol>

效果展示：
在这里插入图片描述
同样的，有序列表也可以更改type属性，换成英文字母计数，罗马数字计数等：

type取值	含义
a	表示小写英文字母
A	表示大写英文字母
I	表示大写罗马数字编号
i	表示小写罗马数字编号
1	表示阿拉伯数字编号(默认)

我们发现我们数字都是从1开始的,如果我想更改起始计数, 可以更改start属性:

     <ol type="i" start="2"><li>内容1</li><li>内容2</li><li>内容3</li><li>内容4</li></ol>

效果展示 :
在这里插入图片描述

自定义列表使用示例

     <dl><dt> 自定义列表显示内容<dd>内容1</dd><dd>内容2</dd><dd>内容3</dd></dt></dl>

效果展示 :

在这里插入图片描述

表单标签

表单是让用户输入信息的重要途径，用表单标签来完成服务器的一次交互,它主要分为两个部分:

表单域 : 包含表单元素的区域 重点是 form 标签。
表单控件: 输入框, 提交按钮等, 重点是 input 标签。

form标签

<form action="test.html">
... [form 的内容]
</form>

form标签的action属性定义了表单提交的目标地址，也就是服务器接收并处理提交数据的地方，如果 action 属性为空或者没有指定，表单会默认提交到当前页面的 URL，整体上form标签描述了要把数据按照什么方式，提交到哪个页面中。

input标签

input标签用于创建 HTML 表单中的各种用户输入控件。它允许用户输入数据，如文本、密码、文件选择等，并将其发送到服务器。它有以下几个属性：

type : 必须要设置该属性，该属性取值种类多 , button, checkbox,text,file,image,password,radio等。
name : 给input起了个名字，尤其是对于单选按钮,具有相同的name才能多选一。
value : input中的默认值。
checked : 默认被选中，(用于单选按钮和多选按钮)。
maxlength : 设定最大长度。

input标签常见type：

文本框

<input type="text">

测试代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="">姓名<input  type="text"></form>
</body>
</html>

注意：表单控件需要搭配表单域进行编写。

效果展示：

在这里插入图片描述

密码框

<input type="password">

测试代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="">姓名<input  type="text"><br>密码<input  type="password"></form>
</body>
</html>

效果展示：

在这里插入图片描述

单选框

    <form action="">姓名<input  type="text"><br>密码<input  type="password"><br>性别<input  type="radio">男<input  type="radio">女</form>

效果展示：
在这里插入图片描述
我们发现这里我们两个性别都能选，这显然是不符合实际的，要想实现多选一，单选框之间必须具备相同的 name 属性。

    <form action="">姓名<input  type="text"><br>密码<input  type="password"><br>性别<input  type="radio" name="gender">男<input  type="radio" name="gender">女</form>

效果展示：

请添加图片描述
如果需要更细化一点，在打开页面时，选择性别之前可以设置个默认选项，此时可以设置默认选项值 checked：

    <form action="">姓名<input  type="text"><br>密码<input  type="password"><br>性别<input  type="radio" name="gender">男<input  type="radio" name="gender" checked="checked">女</form>

注意：如果将取值都设置为checked，此时哪个默认展示取决于浏览器。

复选框

    <form action="">姓名<input  type="text"><br>密码<input  type="password"><br>性别<input  type="radio" name="gender">男<input  type="radio" name="gender" checked="checked">女<br>爱好<input  type="checkbox">吃饭<input  type="checkbox">睡觉<input  type="checkbox">打豆豆   </form>

效果展示：此时是能达到多选多的效果的

在这里插入图片描述

普通按钮

    <form action="">姓名<input  type="text"><br>密码<input  type="password"><br>性别<input  type="radio" name="gender">男<input  type="radio" name="gender" checked="checked">女<br>爱好<input  type="checkbox">吃饭<input  type="checkbox">睡觉<input  type="checkbox">打豆豆<br><input  type="button" ></form>

效果展示：

在这里插入图片描述
我们可以发现这个按钮显示出来是有点单一的，我们可以更改value属性添加一些提示信息：

<input  type="button" value="这是一个普通按钮">

效果展示：

在这里插入图片描述
还有一个问题就是，既然是按钮，点击之后应该有些反应才对，要想有反应需要搭配JavaScript：

<input type="button" value="我是个按钮" onclick="alert('hello')">

效果展示：

在这里插入图片描述

提交按钮

    <form action="https://www.bilibili.com/"> //course提交到bilibili<input type="text" name="course"><input type="submit" ></form>

type="submit"：这个按钮的作用是提交表单，触发浏览器将表单数据发送到action属性指定的 URL。它会将表单中的所有数据一起发送，默认使用表单中的 method 属性（通常是 GET 或 POST）。

效果展示：URL的?后面就是提交的数据。

在这里插入图片描述

清空按钮

    <form action="https://www.bilibili.com/"><input type="text" name="course"><input type="submit" value="提交按钮"><input type="reset" value="重置按钮"></form>

效果展示：

请添加图片描述

选择文件

    <form action="https://www.bilibili.com/"><input type="text" name="course"><input type="submit" value="提交按钮"><input type="reset" value="重置按钮"><input type="file" value="选择文件按钮"></form>

效果展示：点击选择文件, 会弹出对话框, 选择文件。

请添加图片描述

lable标签

搭配input使用点击 label 也能选中对应的单选/复选框, 能够提升用户体验。

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

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应，(此时点击才是有用的)

效果展示：

请添加图片描述

select标签

该标签主要是用来设置下拉菜单的。

    <select><option value="">请选择年份</option><option value="">2004</option><option value="">2005</option><option value="">2006</option><option value="">2007</option></select>

注意：第一个option是默认先展示的。 比如下面先展示“请选择年份”

在这里插入图片描述

option中定义 selected="selected" 表示默认选中

    <select><option value="">请选择年份</option><option value="" selected="selected">2004</option><option value="">2005</option><option value="">2006</option><option value="">2007</option></select>

效果展示：

在这里插入图片描述

textarea标签

该标签用于创建一个多行的文本输入区域，通常用于让用户输入较长的文本，比如评论、描述、留言等。

<body><label for="male">男</label><input type="radio" name="sex" id="male"><label for="female">女</label><input type="radio" name="sex" id="female"><br><select><option value="">请选择年份</option><option value="" selected="selected">2004</option><option value="">2005</option><option value="">2006</option><option value="">2007</option></select><br><textarea rows="10" cols="30">个人介绍</textarea>
</body>

效果展示：

在这里插入图片描述
小细节：

在这里插入图片描述

无语义标签

div 标签, division的缩写, 含义是分割。
span 标签, 含义是跨度。

它们相当于是两个盒子，用于网页布局。

div 是独占一行的, 是一个大盒子。
span 不独占一行, 是一个小盒子。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><div><span>吃饭</span><span>睡觉</span><span>打豆豆</span></div><div>吃饭</div><div>睡觉</div><div>打豆豆</div></div>
</body>
</html>

效果展示：

在这里插入图片描述
我们可以看到span标签的内容是没有独占一行的，而div标签里的内容整体是独占一行的。

🏠 HTML特殊字符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><body><p>我准备开始编写内容     开始编写内容</p></body>
</body>
</html>