html5学习笔记（一）_h5学习笔记-CSDN博客

标签名	定义	说明
<html></ html >	HTML标签	页面中最大的标签，我们称为根标签
< head ></head>	文档的头部	注意在head标签中，我们必须要设置的标签是title
<title></ title >	文档的标题	让页面拥有一个属于自己的网页标题
< body ></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

<!DOCTYPE html>
<html lang="zh-CN">

<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>网页标题</title>
</head>

<body>
    主体部分
</body>

</html>

其中：

<!DOCTYPE>标签为文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html>这句代码的意思是：当前页面采取的是HTML5版本来显示网页。

<html lang>为网页的语言种类声明

<html lang="en">：定义语言为英文

<html lang="zh-CN">：定义语言为中文

charset 字符集

在<head>标签内，通过<meta>标签的charest属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8">：万国码

<meta charset="GB2312">：简体中文

<meta charset="BIG5">：繁体中文

<meta charset="GBK">：简体中文&繁体中文

2.标题标签<h1>-<h6>

<h1>我是一级标题</h1>

<h2>我是二级标题</h2>

<h3>我是三级标题</h3>

<h4>我是四级标题</h4>

<h5>我是五级标题</h5>

<h6>我是六级标题</h6>

3.段落标签

<p>我是一个段落标签</p>

4.换行标签（单标签）

<br/>（或<br>）

5.文本格式化标签

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

6.布局

分割分区：<div></div>（独占一行的大盒子）

跨度跨距：<span></span>（一行可以多个的小盒子）

7.图像标签（单标签）

其中：

src是<img>标签的必须属性，它用于指定图像文件的路径（见下一节）和文件名（含后缀）。

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

8.路径

（1）相对路径

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

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

（2）绝对路径（较少用，一定程度上可以防盗）

绝对路径：从PC端盘符开始的路径或完整的网络地址，如C:\Users\baidu.gif。

9.超链接标签

（1）格式

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

其中：

href用于指定链接目标的url地址。

target用于指定链接页面的打开方式，其中_self（默认值）表示在当前窗口打开页面，_blank表示在新窗口中打开方式。

（2）分类

1.外部链接：href=”网址”

2.内部链接：href=”路径”（类似图像标签），网站内部页面之间的相互链接

3.空链接：href=”#”

4.下载链接：href=”文件/压缩包”

5.网页元素链接：<a href=” ” target=” ”>文本或图像</a>

6.锚点链接：href=”#名字”，在目标位置标签添加id=”名字”

<!--瞄点链接代码举例-->
<a href="#名字">点击可跳转到“目的地”</a>
<h3 id="名字">目的地</h3>

10.注释：

，在vscode中的快捷键为Ctrl + /

11.特殊字符

特殊字符	描述	字符的代码
	空格符
<	小于号	<
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方2（上标2）	²
³	立方3（上标3）	³