HTML基础学习
文章目录
- 一、HTML
- 1.1 认识HTML
- 1.2 第一个HTML页面编写
- 1.3 vscode开发工具搭建
- 1.4 快速生成代码框架
- 二、HTML标签学习
- 2.1 注释标签
- 2.2 标题标签
- 2.3 段落标签
- 2.4 换行标签
- 2.5 格式化标签
- 2.6 img标签
- 2.7 超链接标签：a
- 2.8 表格标签
一、HTML
1.1 认识HTML
什么是HTML页面？
HTML是一个超文本标记语言
超文本：意味着这个页面不仅支持文本，还支持声音、图片、视频、表格、链接都是支持的
标记：如何能做到展示这些超文本数据呢？他就是通过许许多多的标签，这些标签就相当于一个一个的标记。许多标签组成一个标记。
HTML页面是运行到浏览器上面的。
1.2 第一个HTML页面编写
使用文本文档创建一个HTML。
首先创建一个文本文档
然后编写文本文档中的内容，在这里你可以任意书写，但是对于程序语言学习，我们第一个代码就是hello world，写完后使用快捷键ctrl + s保存内容
最后将文本文档后缀由txt改为html
此时双击打开就是一个html页面了。
但是前面我们说了html由很多标签构成，但是这里存在的只有字符串，所以这里的html页面结构是不标准的。一个标准的页面长什么样子呢？
在这里html中，我们把上面使用尖括号括起来的(<>)都叫做html中标签，这些标签都是双标签，所谓的双标签意味着这个标签有开始有结束。就如同上面的<html></html>一样，结束就是一个斜杠加上标签名。
- html 标签是整个 html 文件的根标签(最顶层标签)，html由很多标签组成，所有的标签都是处在html下的。
- head 标签中写页面的属性。
- body 标签中写的是页面上显示的内容。
- title 标签中写的是页面的标题。
根据上面标准页面的样子我们可以发现：
- 所有的标签都是html的子标签，也就是html标签包含这些标签。
- head和body是兄弟标签，也就是平一级的关系。
- head和title称为父子标签。
- 每一个标签都相当于一个对象，程序员可以通过代码拿到这些对象，拿到这些对象就可以对这些对象进行增删查改。
接下来对上面文本内容进行修改并保存
再次打开html可以发现基本和html检查源码是一样。
1.3 vscode开发工具搭建
-
安装vscode
找到官网链接：https://code.visualstudio.com/
然后点击download下载
哪个版本下载哪个，一路向下即可。 -
在D盘或者c盘创建一个文件夹。
像小编就创建了一个文件如下：
然后小编的代码都存放在这里
在这里创建一个你的html页面命名如小编这样：后缀需要为.html
- 安装三个插件
点击这个地方进行搜索插件
第一个插件：使代码随时发生修改，也就是你的双标签有一个改动另外一个也跟着改动
第二个插件：可以直接在vscode中跑起来代码
首先编写完代码，使用快捷键ctrl+s保存，然后右键点击下面按钮就可以直接运行。不用自己手动找到html页面保存的地址再打开。
第三个插件：使修改内容后，html界面随着更新不用手动刷新
1.4 快速生成代码框架
输入英文！+ 回车
-
lang：表示语言，en表示英语，指定当前页面内容是英文的，告诉浏览器这个页面是一个什么语言，要不要翻译成中文。
-
charset="UTF-8"浏览器解码规则
-
对移动端的适配
二、HTML标签学习
2.1 注释标签
快捷键：ctrl + /
F12查看html页面，可以发现右边可以看到注释信息。
2.2 标题标签
标题标签有六个, 从 h1 - h6. 数字越大, 则字体越小
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
呈现效果如下，在这里可以发现标题标签是单独起一行的。
2.3 段落标签
在这里存在一篇文章，段落分明。
然后将他写入vscode中效果如下
在这里我们可以发现，段落是不分明的，不会自动给你进行换行或者其他操作。也就是说vscode中的换行对浏览器是没有用的，他需要使用标签来达到一个换行的效果。此时在vscode我们使用p标签对段落进行分段。
此时再次运行可以看到如下效果
注意:
- p 标签之间存在一个空隙
- 当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
- 自动根据浏览器宽度来决定排版.
- html 内容首尾处的换行, 空格均无效.
- 在 html 中文字之间输入的多个空格只相当于一个空格.
- html 中直接输入换行不会真的换行, 而是相当于一个空格.
2.4 换行标签
在这里我们正常换行也就是回车键
效果如下：
在HTML界面上他只会显示一个空格而不会进行换行，此时需要使用br标签进行换行，在这里在像和素之间插入一个br标签。
<br/>文本内容
注意：
br 是 break 的缩写. 表示换行
-
br 是一个单标签(不需要结束标签)
-
br 标签不像 p 标签那样带有一个很大的空隙.
-
< br/> 是规范写法. 不建议写成 < br>< br/>这样的格式。
2.5 格式化标签
- 加粗: strong 标签 和 b 标签
- 倾斜: em 标签 和 i 标签
- 删除线: del 标签 和 s 标签
- 下划线: ins 标签 和 u 标签
既然都可以用来表示相同的效果，那么存在什么区别呢？
答案就是前一个标签相对于后面这个标签起到了一个强调的效果，例如：strong标签相对于b标签起到了一个强调效果，em 标签 相对于i 标签多了一个强调的效果。
加粗标签
使用效果如下：
倾斜标签
<em> 文本内容</em>
<i> 文本内容 </i>
删除线标签
<del> 文本内容 </del>
<s> 文本内容 <s>
下划线标签
<ins>文本内容</ins>
<u>下划线</u>
注意：
使用 CSS 也可以完成格式化标签类似的效果. 实际开发中以 CSS 方式为主.
2.6 img标签
img标签存在很多属性，首先先看到src属性
src属性
img标签必须带有src属性，用来表示图片的路径。存在绝对路径和相对路径。
绝对路径：这个代码和图片处在同一个文件夹下面。此时就直接xxx.png或者在当前代码文件夹下面的某一个文件夹下面./xxx/xxx.png或者上一层路径下的文件. ./xxx.png。
此时我在和代码同一个文件中放了一张小猫咪图片
此时我想在上面css字后面添加这张照片，因为该图片和代码处在同一个文件夹下，只需要添加绝对路径即可
效果如下：
第二个则是在当前代码文件夹下面的某一个文件夹下面。如下方在img下存在另外一个图片
同样的我们在css字后面添加这张照片，则需要先找到文件夹，然后再访问文件夹下的图片
效果如下：
相对路径：
-
直接写图片路径
假如在小编的D盘下有一张图片
此时想要访问到这张图片直接把他的路径复制下来写到vscode即可
-
网络上的图片资源
查找到的图片复制图片链接在直接粘贴到vscode中即可
alt属性
alt属性：替换文本，当文本不能正确显示的时候，会显示一个替换的文字。当你不小心把文件路径写错，导致访问不到图片的时候，这时候使用alt属性提示图片加载失败。
在上面代码中，3.png在与代码同级目录下是不存在的，此时就无法找到该图片，此时运行他就会显示一个小图片html界面上，而不会给提示信息，不知道的还以为那就是图片呢！
其实不尽然，这里可以使用alt属性可以提示图片是加载失败的，而如果路径是存在的则不会显示alt后面的文案。
title属性
title: 提示文本. 鼠标放到图片上, 就会有提示.
比如当小编放到下面图中的处就会显示返回必应搜索这一文本信息。
在这里使用vscode搭配img标签中的img属性我们自己也是可以完成以上功能的
width/height属性
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片
失衡。在上面案例中，图片都特别大，看着十分的不合理，此时就可以通过width和height标签对图片进行修改。
此时通过修改照片的高和宽就可以改变图片在页面的大小了。
border属性
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定。
在上面中，我们仍然对效果不满意，想要把照片跟文本清晰分开，此时给他加上一个框就可以了。在html中img标签存在border属性，此时加大照片的边框，就可以给照片加上一个框。
注意：
注意:
- 属性可以有多个, 不能写到标签之前
- 属性之间用空格分割, 可以是多个空格, 也可以是换行.
- 属性之间不分先后顺序
- 属性使用 “键值对” 的格式来表示.
2.7 超链接标签：a
- href：必须具备，表示点击后会跳转到哪个页面。
例子
<a href = " https://www.baidu.com/"> 百度 </a>
在这里创建一个a超链接标签，href表示跳转到百度页面这个网站。
例子2
还可以跳转到自己所创建的html界面
点击第二个跳转到自己的html之后，便可以跳转到自己创建的html界面上
例子3
这里不仅支持文字形式的超链接，还支持使用图片进行的超链接。
比如这里你点击百度一下这个图片的地方也可以跳转到百度页面上。那么在vscode中怎么进行设置呢？只需要将前面学习的img包含在a超链接标签中
此时点击图片就会跳转到百度页面中。
例子4：target属性
- target：打开方式，默认是_self，如果是_blank则用新的标签页打开。
在前面三个例子都是在本页面进行跳转，在html中还可以用新的标签页进行打开。
在这里点击跳转到我的博客界面，并且换一个标签页，可以在新的标签页打开我的博客首页。
2.8 表格标签
- table 标签: 表示整个表格
- tr: 表示表格的一行
- td: 表示一个单元格
- th: 表示表头单元格. 会居中加粗
- thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
- tbody: 表格得到主体区域.
复制快捷键：shift + alt + 向下箭头
此时发现这个表格居然没有边框。这是因为html中默认边框为0，此时可以设置表格边框.
使用width和height设置表格大小
取消单元格之间的间距
在上面我们可以发现每个单元格都存在间隙，那么我们怎么取消间隙呢？
cellspacing: 单元格之间的距离. 默认为 2 像素
控制表格内容和边框边的距离
在上面示例中，我们可以看到表格内容和表格边框的距离为零，也就是表格内容不是居中的，看起来不规范，此时html默认提供一种属性cellpadding控制内容距离边框的距离
cellpadding: 内容距离边框的距离, 默认 1 像素
控制表格在页面中的位置
在上面的案例中，我们可以发现表格一直处在页面的左侧，html中table标签中提供了align属性
align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式，也就是单元格中的内容)
在上面我们可以发现整体内容靠右边了而不是靠左边。
表头设置
在上面整个表格分为两部分：表头和表身。表头也就是第一行，表身就是后面的行。在这表头可以设置一个样式，表身可以设置一个样式。
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
在这里使用thead标签表示单独的表头相关信息。此时thead中每个单元格的内容我们用th标签来表示。th标签可以对表头内容进行加粗和居中显示。td则不会加粗和居中显示。
表身设置
在html中，我们把表身放在tbody中。
tbody: 表格得到主体区域.
单元格合并
- 跨行合并单元格
在上面内容中，张三和李四的性别都是男性，此时想把两个单元格合并成一个单元格该如何进行呢?
此时首先确定这是跨行合并单元格
然后找到要合并多少个单元格
最后删除多余的单元格此时不删除单元格则会造成下列情况
此时就会多余一个男，挤出另外一个男到右边，此时删除下面那行的单元格男就不会存在这种情况了。
- 列合并，此时需要进行列合并将王五和女合并成一个单元格。
跨列合并: colspan="n"
和上面一样的步骤，此时找到王五的单元格，然后合并2列再去删除女代表的单元格即可。
