HTML入门 （一）

什么是HTML?

HTML的全称为超文本标记语言，是一种标记语言。

一些简单的标签

标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题
特点
1.加了标题的文字会变的加粗，字号也会依次变大。
2. 一个标题独占一行。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，

标签用于定义段落，它可以将整个网页分为若干个段落。
特点：
1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。

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

换行标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
特点：
1.<br />是个单标签。
2.<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

<p>这是第一段这是第一段这是第一段这是第一段这是第一段
    <br />
    这是第一段这是第一段这是第一段这是第一段这是第一段
<p/>

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

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

  <strong>粗体</strong><b>粗体</b>
  <br />
  <em>斜体</em><i>斜体</i>
  <br />
  <del>删除线</del><s>删除线</s>
  <br />
  <ins>下划线</ins><u>下划线</u>

div和span标签

<div>和 <span>是没有语义的，它们就是一个盒子，用来装内容的。
特点：
1. <div>标签用来布局，但是现在一行只能放一个<div>。 大盒子
2. <span>标签用来布局，一行上可以多个 <span>。小盒子
(块级元素/行内元素/行内块元素的问题，在此不做赘述)

    <div>这是div中的内容</div>    
    <span>这是span中的内容</span>

图片标签

在 HTML 标签中，<img>标签用于定义 HTML 页面中的图像。
src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

  <img src="../Pictures/learn/learn1.png" width="800px" height="500px" alt="加载失败" title="薇尔莉特" border="8"/>

图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像无法显示时的文字
title	文本	提示文本，鼠标悬停显示文本
width	像素	设置图像宽度
height	像素	设置图像高度
border	像素	设置图像边框粗细（建议使用样式替代）

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

路径

分为相对路径和绝对路径
相对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
这里简单来说，图片相对于 HTML 页面的位置

相对路径分类	符号	说明
同一级路径		图像与HTML文件同一级 例 <img src="learn1.png">
下一级路径	/	图像与HTML文件下一级 例 <img src="learn/learn1.png">
上一级路径	../	图像与HTML文件上一级 例 <img src="../learn1.png">

特点：
相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级 、下一级和同一级就是 图片相对于 HTML 页面的位置。

绝对路径
1.是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，“D:\web\img\logo.gif”或完整的网络地址“https://avatar.csdnimg.cn/2/B/E/3_qq_45443060_1616584714.jpg”

链接标签

我们通过使用 <a>标签在 HTML 中创建链接。
属性：
1.href：用于指定链接目标的url地址
2.target:用于指定链接页面的打开方式_self默认值 _blank新窗口打开
3.#：空链接

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

链接分类：

1.外部链接: 例如 < a href=“http:// www.baidu.com “> 百度
2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=“index.html”> 首页
3.空链接: 如果当时没有确定链接目标时，< a href=”#”> 首页
4.下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件
5.网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
6.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置

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

注释

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

HTML中的注释以“<!--”开头，以“ -->”结束。 快捷键:Ctrl + /

<!--html注释 这是注释-->

特殊字符

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

常用符号

符号名称	符号
空格	 
大于号	>
小于号	<

其余的使用很少，如果需要自行查阅即可。