【Web前端开发基础】HTML语法规范及HTML标签学习

HTML语法规范

1. 注释的作用和写法
   注释的作用

   • 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
   • 浏览器执行代码时会忽略所有的注释

   注释的写法

   • 在VS Code中：ctrl + /

2. HTML标签的结构
   标签的结构图
   

   结构说明

   • 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
   • 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
   • 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容

3. HTML标签的属性
   标签的完整结构图
   

   属性注意点

   • 标签的属性写在开始标签内部
   • 标签上可以同时存在多个属性
   • 属性之间以空格隔开
   • 标签名与属性之间必须以空格隔开
   • 属性之间没有顺序之分

4. HTML的标签关系

   • 父子关系 —— 嵌套关系

     
     

   • 兄弟关系 —— 并列关系

     
     

二、HTML标签学习

目标：学习HTML排版、媒体、链接等基础标签，完成基础网页的开发

1. 排版标签

1. 标题标签

   • 场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题

   • 代码：

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

   • 实现：

     ​

   • 语义：1~6级标题，重要程度依次递减

   • 显示特点：

     • 文字都有加粗

     • 文字都有变大，并且从h1 → h6文字逐渐减小

     • 独占一行

   • 注意点：h1标签对于网页尤为重要，不能乱用，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

   • 常见属性：algin 取值：center right left 调整显示位置

2. 段落标签

   • 场景：在新闻和文章的页面中，用于分段显示

   • 代码：

     <p>这是段落标签</p>
     <p>这是段落标签</p>
     

   • 实现：

     

   • 语义：段落

   • 显示特点：① 段落之间有默认的间隙 ② 独占一行

3. 水平线标签

   • 场景：分割不同主题内容的水平线

   • 代码：

     <p>我是一个段落</p>
     <hr />
     <p>我是另一个段落</p>
     

   • 实现：

     

   • 语义：主题的分割转换

   • 显示特点：① 单标签 ② 在网页中显示一条水平线 ③ 默认居中显示

   • 常见属性：

     属性	作用
     width	设置水平线的宽度
     size	设置水平线的高度
     color	设置水平线的颜色

4. 换行标签

   • 场景：让文字强制换行显示

   • 代码：

     <p>这是一个段落<br />
         这是一个段落<br />
         这是一个段落
     </p>
     

   • 实现：

     ​

   • 语义：换行

   • 显示特点：① 单标签 ② 让文字强制换行

2. 文本格式化标签

1. 文本格式化标签

   • 场景：需要让文字加粗、下划线、倾斜、删除线等效果

   • 代码：

     <!-- 第一组 -->
     <b>加粗</b>
     <u>下划线</u>
     <i>倾斜</i>
     <s>删除线</s>
     <!-- 第二组 -->
     <strong>加粗</strong>
     <ins>下划线</ins>
     <em>倾斜</em>
     <del>删除线</del>
     

   • 实现：

     <p><strong>中国人口调查报告</strong></p>
     <p><ins>中国人口调查报告</ins></p>
     <p><em>中国人口调查报告</em></p>
     <p><del>中国人口调查报告</del></p> 
     

     ​

   • 标签语义化（了解）

     • 实际项目开发中选择标签的原则：标签语义化

       • 即：根据语义选择对应正确的标签

       • 如：需要写标题，就使用h系列标签

       • 如：需要写段落，就使用p标签

       • ……

     • 好处:

       • 对人：好理解，好记忆

       • 对机器：有利于机器解析，对搜索引擎（SEO）有帮助

     • 推荐：strong、ins、em、del，表示的强调语义更强烈！

2. 预留格式pre

   • 默认情况下，段落内连续的空格和空行会被显示成一个空格，如果需要连续的空格，可以使用特殊字符“&nbsp;” 产生空格

   • 注意：程序代码也常用code标签保留原有的格式

   • 实现：

     <pre>
     	程序代码：
     	for i in range(1, 11):
     		print(i)
     </pre>
     

     ​

3. 段内组合span

   • span 标签可以组合一小段文字，以便对其单独进行样式设置

   • 实现：

     <style>
     	span {
     		color: red;
     	}
     </style>
     <p><span>最新</span>中国人口调查报告</p> 
     

     ​

3. 媒体标签

1. 图片标签

   场景：在网页中显示图片

   代码：img标签

   <img scr='图片位置+文件名+扩展名' alt='替换文字' />
   

   特点：

   • 单标签
   • img标签要想展示对应的效果，需要借助标签的属性进行设置！

   图片标签的src属性

   • 属性名：src

   • 属性值：目标图片的路径

   • 注意点：

     • 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
     • 路径的情况有很多，稍后会详细介绍

     

   图片标签的alt属性

   • 属性名：alt

   • 属性值：替换文本

   • 注意点：

     • 当图片加载失败时，才显示alt的文本
     • 当图片加载成功时，不会显示alt的文本

     

   图片标签的title属性

   • 属性名：title

   • 属性值：提示文本

   • 注意点：

     • 当鼠标悬停时，才显示的文本
     • 注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

     

   图片标签的width和height属性

   • 属性名：width 和 height

   • 属性值：宽度 和 高度（数字 + 单位）

   • 注意点：

     • 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）

       

     • 如果同时设置了width和height两个，若设置不当此时图片可能会变形

       

   figure标签

   • figure标签可以将图片和图片标题组合在一起，图片使用img标签，图片标题使用figcaption标签

     <figure>
         <figcaption>小猫</figcaption>
         <img src="cat.gif" alt="logo">
     </figure> 
     

     ​ 请添加图片描述

   图片标签小结

   • 图片标签的常见属性小结

     属性	说明
     src	指定需要展示图片的路径
     alt	替换文本，当图片加载失败时，才显示的文字
     title	提示文本，当鼠标悬停时，才显示的文字
     width	图片的宽度
     height	图片的高度

2. 路径

   • 绝对路径

     • 指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
     • 外部链接，以http://开头的路径
     • 例如：
       • 盘符开头：D:\day01\images\1.jpg
       • 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）

   • 相对路径

     • 从当前文件开始出发找目标文件的过程

     • 同级目录：当前文件和目标文件在同一目录中

     

     类似于：我（当前文件）和你（目标文件）都在大厅（一个文件夹中）

     • 生活中：两个人独处一室，我想找你，直接喊名字即可！

     代码步骤：直接写目标文件的名字即可

     <!-- 方法一 -->
     <img src="目标图片.gif" />
     <!-- 方法二 -->
     <img src="./目标图片.gif" />
     

     VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！

     • 下级目录：目标文件在下级目录中

       

       类似于：我在大厅，你累了去卧室休息了，我现在要找到你！

       1. 先知道你去了哪一个房间 → 房间名：卧室
       2. 进入这个房间 → 进入
       3. 此时又独处一室 → 直接喊你名字

       代码步骤：

       1. 先知道在哪个文件夹里面 → 文件夹名字

       2. 进入这个文件夹 → /

       3. 此时看到目标文件直接喊她 → 直接写目标文件名字

          <img src="images/目标图片.gif" />
          

       VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！

     • 上级目录：目标文件在上级目录中

       

       类似于：乾坤大挪移，我在卧室，你还在大厅，我现在要找到你！

       1. 先要出卧室，来到大厅 → 出去
       2. 此时又独处一室 → 直接喊你名字

       代码步骤：

       1. 先出当前文件夹，到上一级目录 → …/

       2. 此时看到目标文件直接喊她 → 直接写目标文件

          <img src="../目标图片.gif" />
          

       VS Code快捷操作：直接敲…/后，会自动提示上级目录下有文件，直接选择即可！

3. 音频标签

   • 场景：在页面中插入音频

   • 代码：audio标签

     <audio src="音频文件" controls="controls" loop="loop"></audio>
     

   • 实现

     <audio src="./images/music.mp3" controls="controls" loop="loop"></audio> 
     

     ​

   • 使用audio标签直接插入单一来源的音频文件

     <audio src="音频文件" controls="controls" loop="loop"></audio>
     <!-- 若当前浏览器如果不支持audio标签，则内部文字会按照普通正文文字处理 -->
     <audio scr="peappa.mp3" controls="controls" loop="loop">当前浏览器不支持audio标签</audio>
     

   • 使用audio与source标签插入多来源的音频文件

     <audio controls="controls" loop="loop">
     	<source src="peppa.mp3" type="audio/mp3"></soure>
     	<source src="peppa.ogg" type="audio/ogg"></soure>
     	当前浏览器不支持video标签
     </audio>
     

   • 常见属性：

     属性	值	描述
     src	url	要播放的音频的URL
     controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
     autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
     loop	loop	如果出现该属性，则每当音频结束时重新开始播放，即循环播放

   • 注意：音频标签目前支持三种格式：MP3、Wav、Ogg

4. 视频标签

   • 场景：在页面中插入视频

   • 代码：video标签

     <video src="视频文件路径" controls='controls' autoplay="autoplay" loop="loop" poster="海报图片路径"></video>
     

   • 实现：

     <video src="./images/video.mp4" controls="controls">当前浏览器不支持video标签</video> 
     

     ​

   • 使用video标签直接插入单一来源的视频文件

     <video src="视频文件" controls="controls" loop="loop" wodth="视频窗口宽度"></video>
     <!-- 若当前浏览器如果不支持video标签，则内部文字会按照普通正文文字处理 -->
     <video src="course.mp4" controls="controls" loop="loop">当前浏览器不支持video标签</video>
     

   • 使用video和source标签插入多来源的视频文件

     <video controls="controls" loop="loop" width="420">
     	<source src="course.mp4" type="video/mp4"></source>
     	<source src="course.webm" type="video/webm"></source>
     	当前浏览器不支持video标签
     </video>
     

   • 常见属性：

     属性	值	描述
     autoplay	autoplay	视频就绪自动播放，谷歌浏览器会屏蔽这个功能， 需配合muted属性使用实现静音播放
     controls	controls	向用户显示播放控件
     width	pixels(像素)	设置播放器宽度
     height	pixels(像素)	设置播放器高度
     loop	loop	播放完是否继续播放该视频，循环播放
     preload	preload	是否等待加载完再播放
     src	url	视频的URL
     poster	img url	加载等待的画面，视频默认初始状态是蓝屏
     muted	muted	静音播放

   • 注意：视频标签目前支持三种格式：MP4 、WebM 、Ogg

4. 链接标签

• 场景：点击之后，从一个页面跳转到另一个页面

• 称呼： a标签、超链接、锚链接

• 代码：a标签

  <a href="跳转的目标位置">访问方式：文字或图片</a>
  

• 实现：

  <a href="#">超链接</a> 
  

  ​

• 特点：

  • 双标签，内部可以包裹内容

  • 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

链接标签的href属性

• 属性名：href

• 属性值：点击之后跳转去哪一个网页（目标网页的路径）

  • 外部链接：直接写网址即可（需用写完整的网址http://）

  • 本地网页：直接写路径即可

• 显示特点：

  • a标签默认文字有下划线

  • a标签从未点击过，默认文字显示蓝色

  • a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）

链接标签的target属性

• 属性名：target

• 属性值：目标网页的打开形式

  取值	效果
  _self	在当前窗口中进行跳转，原网页不存在了，默认值
  _blank	在新窗口中进行跳转，原网页还在
  _top	在顶层页面中显示
  _parent	在父级页面中显示

• 代码：

  <a herf="https://www.baidu.com/" target="_blank">百度一下</a>
  

空链接

• 代码：

  <a href='#'>访问方式</a>
  

• 功能：

  • 点击之后回到网页顶部

  • 开发中不确定该链接最终跳转位置，用空链接占个位置

锚点

• 作用：在一张网页中进行资源跳转

• 添加锚点的方式

  <!-- 添加锚点的方式1 -->
  <!-- 先使用超链接标签在指定的网页位置增加锚点，格式为： -->
  <a name='锚点名'></a>
  <!-- 再使用a标签可以跳转到指定的锚点，达到网页内部资源跳转的目的，格式为： -->
  <a href='锚点名'>访问方式</a>
  
  <!-- 添加锚点的方式2 -->
  <!-- 首先需要定义页面的特定位置作为锚点，并使用id属性为锚点命名 -->
  <article id='top'>......</article>
  <!-- 再使用a标签，然后href属性为"#锚点名"即可 -->
  <a href='#top'>返回顶部</a>