HTML学习笔记（HTML基础篇）_网页呈现在用户面前的是各种文字、图像、动画、音频、视频等丰富的内容,而网页在-CSDN博客

本文链接：https://blog.csdn.net/qq_63867379/article/details/130094993

本文介绍了HTML的基础知识，包括HTML的代码结构、常见标签的使用，如p、h1-h6、img、a、列表、表格和表单等。还提到了图像标签的路径、超链接的创建以及表单元素的输入类型。内容适合初学者入门。

摘要由CSDN通过智能技术生成

HTML学习笔记（HTML基础篇，小白必看！）

文章目录

- HTML介绍

HTML介绍

HTML也就是我们常说的网页，是在用户面前呈现各种文字，图像，动画等丰富的内容。而网页最根本的语言就是HTML（超文本标记语言）

软件推荐：
学习HTML可以使用很多软件：例如Hbuiter，Sublime Text等等。这里我推荐使用的学习软件时Vscode，官网下载地址：https://code.visualstudio.com/
使用方法可以自行度娘

这里推荐的原因是因为可以安装很多插件，且代码可以用补全法，例如
Error Lens(报错提示)，可以使用快捷键alt+b或者f运行，浏览器这里建议搭配Google Chrome食用
直达链接:google.cn/intl/zh-CN/chrome/

代码结构

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

第1行的!DOCTYPE html可以理解为l浏览器使用哪种HTML版本来显示网页，是文档类型的一个声明，它不是HTML标签！

第2行的代码是表示浏览器的语言，en表示英文网页，定义为zh-CN则表示中文，这里不影响

第3行head表示头部，可理解为人的脑袋，head的第一行charset表示字符集，UTF-8表示万国码，再过两行就是title标签，也就是标题标签，里面的内容就是浏览器左上角显示的效果
在这里插入图片描述
接着下面的body标签就是我们大部分情况下写代码的位置，即代码写在body标签内部

HTML标签语法：
<标签名属性名1=“值” 属性名2=“值” …><\标签名>

还有值得我们注意的是HTML中98%的情况下标签都是成对出现的，不要出现漏写的情况

常见的标签

1.p标签：理解为标签标签，p标签独占一行，就算一行写两个p标签还是会被执行成两行，且p标签间会有一行明显的空行
在这里插入图片描述

p标签还可以带align参数，表示对齐方式，center表示居中，left是左对齐，right是右对齐，justify表示对行进行伸展
在这里插入图片描述

但是我这里写一个justify不知道为什么没有效果，不知道是不是软件问题

2.在HTML中的注释表示为<!-- – >，写在这里面的代码就不会执行，只是给开发人员看的，快捷键：ctrl+/
在这里插入图片描述
3.h1-h6标签是标题标签,h1最大,h6最小，且它们之间有空行，截至目前p和h1都有空行，这里可以用"小的数字反而大，大的数字反而小"来帮助记忆

4.br:强制换行标签,从放置br处强制换行,且中间不会有空行

5.hr:水平线，如果只用hr标签的话，默认显示一整行细的黑色下划线占满一行，hr是第一个单标签，如果hr里面输入文本会被挤到下一行去
在这里插入图片描述

参数介绍;
width表示水平线的宽度，也就是横着的长度
color表示颜色，align和p标签那个的align一样，也表示对齐方式，noshade表示水平线无阴影

6.i或em表示文字斜体，效果一样
在这里插入图片描述
7.b或strong表示加粗，效果一样

8.sub表示下标，可以记忆为b朝上表示下标，这个和别的标签结合起来才能看出明显效果

9.sup表示上标（朝下）

10.ins表示插入内容，可以看出ins标签带下划线

11.del表示删除内容，文字中间一行线
在这里插入图片描述

扩展：

属性	显示结果	描述
& lt;	<	小于号或显示标记
& gt;	>	大于号或显示标记
& reg;	®	已注册
& copy;	©	版权
& trade	TM	商标
& nbsp;	Space	不断行的空白
& yen;	￥	价格
& deg;	℃	摄氏度
& plusmn;	±	正负号
& times;	×	乘号
& divide	÷	除号
& sup2;	²	平方
& sup3;	³	立方

布局标签

1.div：就是一个大盒子，可以理解为用来装饰用的，div独占一行
在这里插入图片描述

2.span标签，一行可以放多个，是个小盒子，和div标签一样，用来后期页面修饰
在这里插入图片描述

图像标签和路径

1.其实我们不难发现，在百度或者等页面下载图片的时候，然后会有一个图片另存为和保存图片连接的选项，HTML一样，也是有图片路径的。在html中图像标签叫img，然后img标签里面要带一个src参数来跟图片路径，这里先建议把图片和放练习的放在一个文件夹，例如
在这里插入图片描述
这个/表示从根下开始查找
参数：
alt是图片显示不出来的时候，用来提示用户这是什么

title表示指向图片提示的内容，和head里面title的东西可不一样哦

width表示宽度，height表示高度，基本单位都是像素，这个可以用QQ截图工具等来测量宽度高度
在这里插入图片描述
border表示边框粗细

温馨提示：图像标签可以有多个属性，但是都必须写在标签名后面，属性之间可以不分先后顺序，属性之间注意是用空格隔开，属性采用键值对的格式书写，即属性=“属性值”

2.路径：
在HTML当中，路径分为相对路径和绝对路径，可以理解为类似与Windows盘下不同盘符不同文件的存放位置。
（1）相对路径：引用文件所在位置为基础而建立的目录文件。当图像和当前HTML文件处于同一级文件，可以写为< img src=“baidu.gif” >;若是图像处于下一级路径，就是当前文件夹里面有个专门存放图片的文件夹，可以写为< img src=“images/baidu.gif” >;若是图片处于上一级路径，则可以表示为< img src="…/百度.gif “>

（2）绝对路径，通常从盘符开始，可以理解为比如QQ的安装路径，例如C:\Program Files (x86)\QQ

超链接标签

a标签是超链接标签，它的作用是从一个页面链接到另外一个页面
语法格式：< a href="跳转目标 target="目标窗口的弹出方式”>文本或图像< /a>，注意这个href里面的链接一定要是完整的链接，否则会出错

不难发现，当我们使用href属性后，如果a标签后面跟的是文字，文字就会变成蓝紫色的，即链接形式，当我们点击这个蓝色的字就会跳转到我们预先设置的链接
在这里插入图片描述
target属性就是新窗口的打开方式，我们可以选择在当前页面打开或者用一个新窗口打开，当前窗口打开是_self，这个是默认值，可以不用设置，新建窗口打开是_black

加title属性就可以指在链接上面提示，和img标签的title属性类似

空链接：当在实际开发的过程中，事先还没设定好链接，可以用#代替，点击也不会有反应
在这里插入图片描述
锚点链接：类似于网页中的任务介绍，点击会跳转到对应地方，这个需要足够多的文字才能体现效果

使用方法：a标签在链接文本href中，设置属性名为#名字形式，比如< a href=“people”>人物介绍< /a>
找到目标位置，添加属性id=刚才名字，例如< h5 id=“people”>主人物介绍< /5>
在这里插入图片描述

列表标签

列表标签分为无序列表，有序列表和自定义列表
（1）无序列表：无序列表虽然看字名是无需，但是排版起来还是可以用于布局的

其中ul表示无需列表，li表示列表项，它们之间为嵌套关系，ul中的li默认带小黑圆点
在这里插入图片描述
温馨提示：各表项间没有顺序级别说法，是并列关系，而且ul中只能嵌套li，li是一个容器，里面可容纳所有元素，不能直接在ul标签使用其他文字或者标签

type属性1：disc 显示小圆点
type属性2：square 显示正方形
type顺序3：circle 显示空心圆
在这里插入图片描述
小Tips:可以直接在ul里面实现全局定义

（2）有序列表：
有序列表用ol来表示,ol里面只能嵌套li，直接在ol里面输入文字或使用标签不对，li标签默认显示123，也可以实现全局定义，使用方法和无序列表类似
在这里插入图片描述
Type属性1: 1 显示数字1
Type属性2: a 显示小写字母a
Type属性3: A 显示大写字母A
Type属性4: i 显示小写字母i
Type属性5:I 显示大写字母I

这里也可以使用全局定义的方法，和无序列表大同小异

助记方法：参数有数字1和字母a和i的大小写

（3）自定义列表:

特点：定义列表项当前没有任何符号，dl用来描述或定义列表，配合dd一起食用，dl中包含dd和dt，二者没有限制，一般是一个dt对应多个dd，要捋清楚三者间谁嵌套谁
在这里插入图片描述

表格标签

作用：展示数据用的，不是布局的，类似于Excel一个个小方格子，表格用table表示
语法：
在这里插入图片描述

表头单元格标签

表头单元格标签位于表格第一行或者第一列，表示里面的文字加粗且居中,用thead表示
在这里插入图片描述
表头单元格属性（通过css设置）：
属性1align ： left，center，right 表示表格周围对齐方式
属性2 ：border=""或1 表示表格是否有边框，默认“”表示无
属性3 ：cellpadding 像素值表示单元和内容间的空白，默认1像素
属性4：cellspacing 像素值表示单元格之间的空白，默认2像素
属性5：width 像素值或百分比表示表格宽度

表格结构标签：
分为头部区域和主题区域
头部区域表示为thead(head意为头)，主题区域表示为tbody(body意味身体)

合并单元格：
合并单元格步骤:
1.先确定是跨行还是跨列合并
2.找到目标单元格，写上合并方式=合并单元格数量，如< td colspan=“2”>< /td>

备注：
跨行单元格使用rowspan表示，跨列单元格使用colspan表示，后面都是接上要合并的个数
在这里插入图片描述

表单标签

（1）.表单标签是用来收集用户信息的。一个完整的表单由表单域，表单空间和提示信息组成

（2）.表单域是包含表单元素的区域和form属性
form用来定义表单域，实现用户信息传递，把它力所能及的表单元素信息范围提交给服务器

语法规范：
< form action=“url地址” method=“提交方式” name=“表单域名称”>

常用属性：ation，表示用来接受处理表单数据服务器的url服务器地址
method表示设置表单数据的提交方式，分为get和post
name表示名称，指定表单名称，区分一个表单页面多个表单域
上述3个常用属性这里只做了解

（3）.输出表单元素input：注意input是一个单标签
input标签中,含有type书写，输出的可以是文本，复选框等按钮，下面我们一一介绍：

语法：< input type=“属性值”/>

1.button：定义可点击按钮（鼠标可以点），多数情况下可以用JavaScript启动脚本
在这里插入图片描述
2.checkbox：定义复选框(可手动勾选，可以通过一些参数让它实现默认选中)

3.file字段定义“输入”和“浏览”（可以上传文件，但是这里只是先看看）

4.hidden定义输入字段

5.image定义图像形式提交按钮
在这里插入图片描述

6.password定义密码字段，该密码字段是看不见的（密文）
在这里插入图片描述
7.radio定义单选按钮

8.reset定义重置按钮，点击后会清除当前表单内所有数据

9.submit定义提交按钮，会把当前表单数据提交给服务器

10.text定义单行输入文本，输入内容可见，默认宽度20字符

11.name由用户定义，表示input元素名称

12.value由用户定义，表示input元素值，例如text带一个input，input值给123，默认那个框就是123，就算写了东西再刷新还是123
在这里插入图片描述
13.checked表示input元素首次加载就该被选中，例如拿checkbox来举例

14.maxlength表示输入字段的字符中最大的长度，拿text举例，最大5个，超过5个输不进去，白扯

15.placeholder表示悬浮字，输入的时候就会消失
在这里插入图片描述
Type属性特点：
1.name和value是每个表单元素都有属性值
2.name是表单元素的名字，要求单选按钮和复选框要有相同的name值
3.checked主要针对单选按钮和复选框，主要作用是打开页面就能选择某个表单元素
4.maxlength一般用的比较少