1.HTML入门

本章目标

简介
文本标签
图像标签
链接标签
音视频标签

本章内容

一、简介

HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是WWW的描述语言。

WWW是WorldWideWeb的缩写，可译为“环球网”或“万维网”

1、HTML文件的基本结构

注意:标签之间要有缩进，才能体现层次感，方便阅读和修改。

2、HTM标签

HTML标签由标签、属性、内容组成，属性与内容可选。

包含内容的标签以<…>开始，</…>结束
不包含内容的标签可以是如下格式：<…/>
属性的值尽量用双引号或单引号修饰
标签中的内容可以是其他的标签，称为原标签的子标签，子标签必须在父标签结束之前结束

3、文档类型（DOCTYPE）声明

 <!DOCTYPE html>
 The new character encoding (charset) declaration is also very simple:
 
 <meta charset="UTF-8">

HTML5 中默认的字符编码是 UTF-8

4、注释

注释就是对代码的解释和说明，其目的就是提高代码的可读性
HTM中的注释

注意：在vscode中使用Ctrl+/添加注释

二、文本标签

1、标题标签

标题标签<h#> … </h#>

=1, 2, 3, 4, 5, 6

说明：
到
字体大小依次递减

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

H1 到 H6 标签用于指定不同级别的标题

2、段落标签

 <body>
     <p align=“center”>蜗牛欢迎您的来访</p>
     <p align=“left”>华为。。。。<br>
     ……
     </p>
 </body>

3、换行标签

 <body>
     <p align=“left”>华为。。。。<br>
     ……
     </p>
 </body>

4、内容分隔
标签

 <body>
 <hr size="5" color="red" width="300">
 <hr size="10" color="black" width="200">
 <hr size="5"  color="#0000ff" width="50%">
 </body>

size:线的厚度值

color:线的颜色

width:线的宽度

5、span标签

用于存放文本的标签，存放一些简短的文本或提示信息

 <!-- span标签：一些提示信息 -->
 <span>这是span标签</span>

6、特殊文本格式

标签	说明
	下标文字
	上标文字
	删除线
	斜体
	粗体

 H<sub>2</sub>O&nbsp;E=mc<sup>2</sup>&nbsp;
 <del>该段文字已被删除</del>

7、特殊字符

特殊符号	字符实体	示例
空格	` `	`<a href="#">百度</a> \| <a href="#">新浪</a>`
大于号(>)	`>`	如果时间`>`晚上6点，就坐车回家
小于号(<)	`<`	如果时间`<`早上7点，就走路去上学
引号(“)	`"`	W3C规范中，HTML的属性值必须用成对的`"`引起来
版权符号@	`©`	版权所有 © 成都蜗牛创想科技有限公司

三、图像标签

在HTML中，图像的使用很广泛，图像标签属于单标签，只有属性没有内容

1、语法

 <img src="path" alt="text" title="title" width="x" height="x"/>

src：指定的是图片的路径
alt: 当图片加载失败后显示该文本信息，主要在SEO优化的时候有作用
width:设置图片的宽度,以像素为单位
height:设置图片的高度,以像素为单位
title:鼠标悬停在图片上会显示的文字

2、路径

路径：是指某个文件在某个目录下的具体位置描述。分为：绝对路径、相对路径

绝对路径：指目录下的绝对位置，直接到达目标位置。

比如：蜗牛学院西安校区：陕西省西安市未央区凤城二路第五国际A座5层

在程序中，绝对路径一般指网络地址（以http或https）或者以系统盘符开头的地址。
相对路径：指由这个文件相对于某个参考文件夹的位置描述。即从当前目录出发，其他文件所在的位置。
- 上一级目录：../
- 子目录：子目录/

注：火狐浏览器对绝对路径不支持，使用谷歌浏览器测试

3、图像单位

像素

什么是像素。像素是分辨率的单位，分辨率越高，那么显示效果就越精细和细腻。在网页设计中，px常用于确定文本、图像和元素的大小和位置，像素也是一个绝对单位，它不会因为浏览器窗口的改变或者其他元素尺寸的改变而变化，比如我们调整浏览器窗口，改变浏览器的默认字体大小，都不会影响px单位的变化

 <img src="images/apple.jpg" height="160px"/>
 <img src="images/grape.jpg" height="160px"/>
 <img src="images/hetao.jpg" height="160px"/>

一般我们只设置宽高中的一个属性，另一个属性浏览器会根据图片自身比例来等比例缩放

百分比：百分比是相对单位，它的相对参照为父元素

 <div style="width: 200px;">
    <img src="./img/pic.png" alt="" width="50%">
    <img src="./img/pic.png" alt="" width="30%">
 </div>

4、常见的图片格式

格式	jpg	gif	png
画质	好	一般	较好
大小	一般不适合小图	小	很小
透明	不支持	支持	支持
动画	不支持	支持	不支持

四、链接标签

1、超链接

 <a href="path" target="目标窗口位置">链接文本或图像</a>

href：指定要跳转的页面，值为超链接地址或者锚点

target：设置跳转的方式

_blanck 新开窗口
_self当前窗口
_top 顶层窗口
_parent 父窗口姑娘，欢迎降落在这残酷的世界

注意

超链接可以连接本地服务器资源，也可以链接其他服务器资源

一般导航都是由超链接来实现

可以使用超链接来完成锚点功能，回到指定位置

超链接href属性默认写#代表跳转到本页面

2、锚链接

概念：当点击链接的时候，会跳转(定位)到本页面的某个位置，成为锚链接

应用场景：百度百科上明星介绍；小说中的目录定位

锚链接：从A页面的甲位置跳转到本页中的乙位置或者从A页面的甲位置跳转到B页面中的乙位置

创建步骤

创建跳转标记

乙位置
创建跳转链接

甲位置

3、功能性链接

电子邮件
打电话
MSN

拨打电话
 联系我们

五、音视频标签

1、音频标签

HTML

 <audio src="music/纯音乐 - 青花瓷 (古筝版).mp3" autoplay controls></audio>

autoplay:则视频在就绪后马上播放

controls:则向用户显示控件，比如播放按钮

2、视频标签