HTML5基础知识

HTMl的文件结构

<!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>

文件类型标签	说明
`<!DOCTYPE html>`	DOC是文档的意思 TYPE是类型的意思作用：告诉浏览器使用哪种HTML版本来显示网页
`<html lang="en">`	用来定义当前文档显示的语言 1.en定义语言为英语 2.zh-CN定义语言为中文 3.fr定义语言为法语
`<meta charset="UTF-8">`	字符集字符集(Characterset)是多个字符的集合。以便计算机能够识别和存储各种文字。其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

注意事项：

1.<!DOCTYPE>声明位于文档中的最前面的位置，html处于标签之前。
2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签
3.上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的"UTF-8”，不要写成“utf8"或“UTF8"

HTML的常用标签

1.文本标签

标签	语义
`<h1>-<h6>`	标题标签特点： 1.加了标题文字会变粗，字号也会变大。 2.一个标题独占一行。
`<p>`	段落标记，用来定义网页中的一段文本，文本会自动换行。
`<br>`	换行标签，属于单标签。
`<center>`	文字以居中对齐的方式显示在网页中
`<blockquote>`	正文的左右侧都与浏览器有了一定的距离

2.文本格式化标签

标签语义：突出重要性，比普通文字更重要

标签	说明
`<strong></strong>或者<b></b>`	加粗更推荐使用`strong` 语义更加强烈
`<em></em>或者 <i></i>`	倾斜更推荐使用`<em>`标签加粗语义更强烈
`<del></del> 或者 <s></s>`	删除线更推荐使用`<del>` 标签加粗语义更强烈
`<ins></ins> 或者 <u></u>`	下划线更推荐使用`<ins>` 标签加粗语义更强烈

3.`div`和`span`标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。
div 是 division的缩写，表示分割、分区。 span 意为跨度、跨距。

特点:
（1）.<div>标签用来布局，但是现在一行只能放一个<div>。大盒子
（2）.<span>标签用来布局，一行上可以多个<span>。小盒子

4、在网页中使用图片（<`img`>标记）

（1）图像标签

``用于定义HTMl页面中的图像

<img src="图像URL"/>

src是<img>标签的必须属性,它用于指定图像文件的路径和文件名。

所谓属性：简单理解技术属于这个图像标签的特征。

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放到图片上面，显示文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

特别提醒：
(一)当需要运用到图片时，图片位置最好和输出文件共同放在一个文件夹里面。
(二)图像标签可以拥有多个属性，必须写在标签后面。
(三)属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开。
(四)属性采用键值对的格式，即key=“value”的格式，属性=“属性值”。

(2)、路径（前期铺垫知识）

(一)目录文件夹和根目录：
目录文件夹: 就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件，图片。

根目录:打卡目录文件夹的第一层就是根目录。

（二）相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

相对路径分类	符号	说明
同一级路径		图像文件位于HTMl文件同一级如`<img src="baidu.gif"/>`
下一级路径	/	图像文件位于HTMl文件下一级如`<img src="images/baidu.gif"/>`
上一级路径	../	图像文件位于HTMl文件上一级如`<img src="../baidu.gif"/>`

（三）绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

（四）超链接标签<a>
1.链接的语法格式；
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
单词anchor的缩写，意义为：锚。

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。
target	用于指定链接页面的打卡方式，其中_self当前窗口打卡页面，_blank为在新窗口中打卡方式。

（2.）.链接的分类：
（一）.外部链接：例如<a href="http://www.baidu.com">百度</a>.
（二）.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="index.html">首页</a>
（三）.空链接：如果当时没有确定链接目标时，<a href="#">首页</a>。
（四）.下载链接：如果href里面地址是一个文件（.exe）或者压缩包(.zip)，会下载这个文件。
（五）.网页元素的链接：在网页中各自网页元素，如文本，图像，表格，音频，视频等都可以添加超链接。
（六）.锚点链接：点我们点击链接，可以快速定位到页面的某个位置。

在链接文本中href属性中，设置属性值为#名字的形式，如<a href="two">第2集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第2集介绍</h3>

（3），注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要在页面中注释的文字，就需要使用注释标签。

<!-- 注释语句 -->  快捷键：ctrl+ / <br>

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来代替。

一句话：注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的。

方便操作：可以在vs code打开文件夹非常方便。

5.VS Code的插件运用

（1）VS Code语言设置为中文。

图片一.png 安装后重启VS Code即可。

（2）怎么快速在浏览器里打开呢？

二.png

三.png

（3）修改标签当我们写错了标签，需要修改标签时，双标签可以同时修改。

安装重启，即可使用。

图片文字转载：pink老师

《复习食用》HTML5基础笔记