HTML第一天笔记

基本语法概述

1.HTML标签是由尖括号包围的关键词，例如。
2.HTML标签通常是成对出现的，例如和，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
3.有些标签是单标签（极少情况）例如

1.2标签关系

双标签关系分为包含和并列关系。
包含关系：父子关系

并列关系：兄弟关系

2.1第一个HTML网页

HTML标签 网页中最大的标签，我们称为根标签 文档的头部 注意在head标签中我们必须要设置的标签是title 文档的标题 设置网页的标题 文档的主体 元素包含文档的所有内容，网页内容基本都是放到body里

3.1文档类型声明标签

文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。 的意思是：当前页面采用的是HTML5版本来显示网页

注意：
1.<!DOCTYPE>声明位于文档最前面位置，处于标签之前
2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签

3.2lang语言种类

用来定义当前文档显示的语言
1.en定义为英语
2.zh-CN定义语言为中文
定义en就是英文网页，定义为zh-CN就是中文网页 该属性对谷歌浏览器等有作用

3.3字符集

在标签内可以通过标签的charset属性来规定HTML应该使用哪种字符编码
通常情况下我们使用”UTF-8”编码，即万国码，不能写成”utf8”或者”UTF8”

3.4总结

1.以上三个代码vscode自动生成，不需要写
2.<!DOCTYPE>文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面
3.告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示
4.必须写，采取UTF-8来保存文字，如果不写会造成乱码
5.标签语义：根据标签的语义，在合适的地方给一个合理的标签，可以让页面结构更清晰

4.2标题标签

-

（重要）

标签语义：作为标题使用，根据重要性依次递减
特点：
1.加了标题的文字会加粗，字号也会依次变大
2.一个标题独占一行

4.3段落和换行标签（重要）

我是一个段落标签

标签语义：可以把HTML文档分割为若干个段落 特点： 1.文本在一个段落中会根据浏览器窗口大小自动换行 2.段落和段落之间保有间隙 换行标签
标签语义：强制换行 特点： 1.
是个单标签 2.
标签只是简单的开始新的一行，跟段落不一样，段落之间会插入垂直间隙 ### 4.4文本格式化标签

<!-- 这部分是你的代码，所以用代码块插入 -->
加粗 <strong></strong>（更强烈）或者<b></b>
倾斜<em></em>（更强烈）或者<i></i>
删除线<del></del>（更强烈）或者<s></s>
下划线<ins></ins>（更强烈）或者<u></u>

4.5

和 标签

没有语义，就是一个盒子用来装内容
特点：

<!-- div和span的区别 -->
<div>标签用来布局，一行只能放一个，可以通过样式修改放多个<div>
<span>标签用来布局，一行上可以多个<span>

4.6图像标签和路径（重要）

1.图像标签

<!-- Markdown文档可会直接翻译过来，路径获取不到导致图像失败 -->
<img src='图像URL'/>

插入图片我延时给你看一下

src是标签的必须属性，它用于指定图像文件的路径和文件名
其他属性：

属性	含义	是否必填
Src	图片路径	必须属性
Alt	文本	替换文本，图像不能显示的文字
Title	文本	提示文本，鼠标放到图像上显示的文字
Width	像素	设置图像的宽度
Height	像素	设置图像的高度
Border	像素	设置图像的边框粗细

注意：
1.图像标签可拥有多个属性，必须卸载标签名的后面
2.属性之间不分先后顺序，标签名和属性、属性与属性之间均以空格分开
3.属性采取键值对格式，即key=”value”的格式，属性=”属性值”

2.路径
1.目标文件夹和根目录
目标文件夹：普通文件夹
根目录：目录文件夹的第一层为根目录
路径分为绝对路径和相对路径

相对路径：图片相对于HTML页面的位置
同一级路径：如<img src='baidu.gif'/>
下一级路径：<img src='images/baidu.gif'/>
上一级路径：<img src='../baidu.gif'/>
绝对路径： <img src='/images/baidu.png'/>

4.7超链接标签（重点）

a 标签用于定义超链接，作用是从一个页面链接到另一个页面
1.链接的语法格式：

<a href=”跳转目标” target=”目标窗口的弹出方式”>
	文本或图像
</a>

属性	作用	使用方式
href	必须，用于指定链接目标的url地址	当为标签使用href属性时，它具有超链接功能
target	用于指定链接页面的打开方式	其中_self为默认值，_blank为在新窗口打开方式

链接分类：
1.外部链接：例如:

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

href: 百度
_black: 百度
2.内部链接：网站内部网页之间的相互链接例如：

<a href='index.html'>首页</a>

3.空链接

<a href='#'>首页</a>

4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
5.网页元素链接:在网页中各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
6.锚点链接：点击可以快速定位到网页中的某个位置
在链接文本的href属性中，设置属性值为#名字的形式，如

<a href='#two'>第二集</a>

找到目标位置标签，里面添加一个id属性=刚才的名字，如：
<h3 id='two'>第二集介绍</a>

5.1注释

HTML的注释以<!---->

结束 快捷键为ctrl+/

5.2特殊字符

特殊字符在Markedown中需要加转移字符：\的

空格符：&nbsp;
大于号：&lt;
小于号：&gt;