HTML基础结构详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45463877/article/details/104379243

HTML基本结构标签

标签吗	定义	说明
<html> </html>	HTML标签	页面中最大的标签，称为根标签
<head></head>	文档的头部	注意在head标签中必须要设置的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的页面标签
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放在body里面的
<!DOCTYOE>	文档类型声明	作用是告诉浏览器使用哪种HTML版本来显示网页，<!DOCTYOE html> 指的是当前页面使用html5版本来显示页面；
lang	语言种类	用来定义当前文档显示的语言，en定义语言位英语，zh-CN定义语言为中文
charset	多个字符的集合	以便计算机能够识别和存储各种文字；在<head>标签内，可以通过在<metad>标签的charset属性来规定HTML文档应该使用哪种字符编码。（charset 常用的值有：GB2312、BIG5、GBK和UTFUTF-8，其中UTF-8也被称为万国码基本包含了全世界所有国际需要用到的字符）

常用标签

1、标题标签 <h1>-<h6>（重要）

例： <h1>一级标签 </h1>
标签语义：作为标题使用，重要性递减。

特点：

（1）加了标签字体会变的加粗，字号也会依次变大。
（2）一个标题独占一行。

2、段落标签 <p>（重要）

<p>标签用于定义段落，它可以将整个网页分为若干个段落。
例：<p> 段落标签</p>
标签语义：可以将整个网页分为若干个段落。

特点：

（1）文本在一个段落中会根据浏览器的大小自动换行。
（2）段落和段落之间保有空隙。

3、换行标签<br />（重要）

标签语义：强制换行。

特点：

（1）<br />是个单标签。
（2）<br />标签只是简单的另起一行，跟段落不一样，段落之间会插入一些垂直间距。

4、文本格式化标签

标签语义：突出重要性，比普通文字更重要（粗体，斜体，下划线等效果）

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

5、<div>和<span>标签

没有语义，它们就是个盒子，用来装内容。
div表示分割、分区，span表示跨度、跨剧。

特点：

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

6、图像标签和路径（重要）

图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像
例：<img src=‘图像的URL’ />
src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。

图像标签的其他属性

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

图像标签属性注意点

（1）图像标签可以拥有多个属性，必须写在标签名的后面。
（2）属性之间部分先后顺序，标签名与属性，属性与属性之间均用空格隔开。
（3）属性采取键值对的格式。

路径（前期铺垫知识）

（1）目录文件和根目录：
目录文件夹：就是普通文件夹，里面存放着我们做页面所需要的相关素材，如html文件，图片等。
根目录：打开目录文件夹的第一层就是根目录。
（2）VScode打开目录文件夹：
文件----打开文件夹.选择目录文件夹.后期非常方便管理文件

路径可以分为：

1.相对路径：以引用文件所在的位置作为参考，而建立出的目录路径。
简单说，就是图片相对于HTML页面的位置。

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

相对路径是从代码所在的这个文件出发，去寻找目标文件，而我们这里说的同级，上一级，下一级就是图片相对于HTML页面的位置
2.绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例：“/Users/lys/Desktop/test/世界地图 - 带标记点.png” 或者完整的网络地址 “http://t9.baidu.com/it/u=353721707,184451439&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582710039&t=99d3767c689c6967261ecd95da198565”

超链接标签（重要）

在html标签中，<a>标签用于定义超链接，作用是从一个页面连接到另一个页面。

链接的语法格式

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

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

链接分类

（1）外部链接：例如：<a href=“www.baidu.com” target="_self">百度</a>。
target 打开窗口的方式，_self 是当前窗口打开，_blank是新建窗口打开。
（2）内部链接：网站内部页面之间的相互链接，直接链接内部网页名称即可，例如：<a href=“index.html” target="_self">首页</a>
（3）空链接：如果当时没有确定链接目标时<a href="#" t>首页</a>
（4）下载链接：如果href里面地址是一个文件或者压缩包，会下载文件。
地址链接的是文件、.exe 或者 zip 等压缩包形式
（5）网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
（6）锚点链接：当我们点击链接，可以迅速定位到页面某个位置