02-Html中的常用标签
HTML 常用的标签
新建一个 Html 文件
基础代码搭建、解释以及快捷键
快捷键 默认情况下 英文状态下的 ! + enter 快速生成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- 设置网页的编码格式为utf-8， 其他的还有gb2312、gbk、unicode、utf-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 兼容IE浏览器，现在不考虑
X-UA-Compatible 是针对 IE8版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 主要针对移动端 --- 后期课程 -->
<title>Document</title>
</head>
<body></body>
</html>
面试题：有什么作用？
告诉浏览器，当前的文档类型是一个 html 文件, 它不属于 HTML 标签，而是一条指令
DOC document 文档 TYPE 类型
HyperText Markup Language 超文本 标记 语言
超文本：文本内容 和 非文本内容（图片、 音频、 视频）
标记：<单词>
语言：编程语言
页面中的基础标记【标签、 元素、 盒子】
<html></html>
<!-- 根元素，在根元素之中包含两大块主要内容 -->
<head></head>
<!-- 用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染提供额外信息 -->
<body></body>
<!-- 网页的主体内容 body，用于书写浏览器中展示的所有内容 -->
<meta />
<!-- 元标签，用来表示网页的基础配置 -->
<title></title>
<!-- 定义网页的标题，标题内容会显示在浏览器的标签栏上 文件快捷键 Ctrl + / 注释文本，
被注释的文本，不会体现在网页之中 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- 定义网页的小logo,logo内容会显示在浏览的标签栏之上
制作 .ico文件网站 https://www.bitbug.net/ -->
HTML 的语法
标记：<单词> ， 也叫做 标签，也叫做 元素，也叫做盒子
单标签 : 非封闭类型标签
只一个 <>
/ 可带可不带 , 建议带上
<meta /> <img /> <br/> <hr/>
双标签 : 封闭类型标签
有两个<> ，开始标签和结束标签
/ 必须带上
<html></html> <div></div> <p></p>
HTML 提示：使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用小写的 HTML 标签。
因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写
<标签名 属性名="属性值" 属性名="属性值"></标签名>
标签名字和属性之间需要有空格，键值对
属性和属性值之间需要 = 连接
每一组键值对 之间需要有空格
属性值需要带引号
常见的属性值 id="",class="",
<meta charset="utf-8">
人的体貌特征，eg: 身高， 体重
体貌特征的值，eg: 178cm, 75kg
HTML 常用标记/标签/元素/盒子
1. 注释
<!-- -->
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。
浏览器会忽略注释，也不会显示它们
合理地使用注释可以对未来的代码编辑工作产生帮助
快捷键 Ctrl + /
2. 标题元素
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
特点： 字号由大到小，h1最大，h6最小
自动加粗
有默认的间距
自动换行（独占一整行的意思）
应用: h1作为一级标题应用在文章标题或者是布局logo区域
h2，h3作为的文章内部的标题
h4，h5，h6 根据实际情况进行使用
2. 段落元素
<p></p>
包裹一段描述性的文本
有默认的间距
在一个段落里面想使用空格
方式一： 所占位置没有一个确定的值,这与当前字体字号都有关系.
方式二： 所占位置就是当前字体的一个字体大小
3. 换行的标签
<br/>
强制换行
4. 水平分割线
<hr/>
应用：分割区域内容
5. 字体加粗的标签
<b></b>
<strong></strong>有强调的意思
6. 字体倾斜的标签
<i></i>
<em></em>有强调的意思
7. 加下划线的标签
<u></u>
8. 加删除线的标签
<s></s>
<del></del>有强调的意思
9. 加上角标的标签
<sup></sup>
10. 加下角标的标签
<sub></sub>
11. 字体标签
<font color="" size="" face=""></font>
color : 设置字体的颜色
1、直接颜色的英文名称 skybule pink red ...
2、十六进制颜色 #_ _ _ _ _ _ [0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,]
size : 设置字体的大小
从 1 到 7 的数字、浏览器默认值是 3
face : 设置字体的种类
楷体、宋体、...
12. 图片标签
<img src="" alt="" title="" width="" height=""/>
src : 引入图片的路径 !!!路径： 绝对路径和相对路径
绝对路径: 指是某个目录或者网站的绝对位置，可以直达想要的目标位置
1、某目录的直达位置
2、某完整的网站地址
3、必须是以本地直接打开的，不然无法显示，路径是无法匹配的
相对路径: 以引用文件所在位置为参考基础，而建立的目标路径
1、同级：目标文件和当前文件是同级
路径书写===> 目标文件的名字.扩展名
2、下级：目标文件位于当前文件的下级
路径书写===> 目标文件所在文件夹名字/目标文件.扩展名
3、上级：目标文件位于当前文件的上级
路径书写===> ../目标文件的名字.扩展名
alt : 图片不显示时显示的文本，给用户提示，做图片优化
title : 鼠标移入时显示的文本
面试题：img标签中alt与title的区别？
width、height : 设置图片的宽度与高度
面试题：网页上常用的图片格式有哪些？ (像素点组成的，像素点越多会越清晰)
1）jpg :有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;
2）gif：无损压缩格式，支持透明，支持动画，适用于颜色数量较少的图像;
3）png:无损压缩格式，支持透明，不支持动画，适用于颜色数量较少的图像;
4）webp！！！WebP是一种有损压缩格式。不同的是，WebP格式的压缩效率更为出色
在同等质量下，WebP格式图像的体积要比JPEG格式图像小40%。浏览网页的速度将大幅提升
13. 超链接标签
<a href="" target="" id="">给用户点击的链接的文字</a>
href : 链接指向的页面的 URL
暂时不知道将要跳往哪里 可以 <a href="#"></a> 作为一个空标签
target : 在何处打开链接文档
_self : 在当前窗口打开 （默认的）
_blank : 在新的窗口打开
title : 为链接添加描述性文字, 有利于SEO
百度词条案例 ！！！
id : 特殊标识，可用于 href 的直接跳转（用于锚点）
锚点链接，可以在同一页面内的不同位置进行跳转
第一步：在标签内加上 id = "命名锚点名称"
第二步：<a href="#命名锚点名称"></a>
特殊性使用: <a href="#top">返回顶部</a> --- h5新增
也可以去其他网页：<a href="mine.html#name">
其他特殊性使用，可以利用 a 标签实现 打电话、发邮件等特殊功能
<a href="文件所在地址" download="文件名">点击下载</a>
<a href="tel:187****3232">拨打电187****3232</a>
<a href="sms:187****3232">发送短信给187****3232</a>
14. 列表标签
+ 有序列表
<ol type="1 / A / a / i / I ">
<li></li>
</ol>
- 1数字 / A大写英文字母 / a小写英文字母 / i小写罗马数字 / I大写罗马数字
有序列表独有属性 start="number" 规定有序列表的开始是从第几个开始的
+ 无序列表
<ul type="disc / circle / square ">
<li>无序列表1</li>
</ul>
- disc实心圆 / circle空心圆 / square实心方块
+ 自定义列表
<dl>
<dt>名词</dt>
<dd>名词解释</dd>
</dl>
应用：大多是网页最下方区域
15. 容器标签
<div></div> 无实际意义
应用：主要是用来划分区域的
16. 容器标签
<span></span> 无实际意义
应用：更改一段文本中的一部分字体样式,优点是span本身没有任何样式,span前后不换行
常用的转义字符
空格 ：  
小于号 < : <
大于号 > : >
注册：®
商标：™
版权标识：©
Q: 了解其他的转义字符
https://www.w3school.com.cn/html/html_entities.asp
标签的简单分类
HTML元素一般分为块级元素和行内元素两种类型
1、块级元素：<div>、<h1> ~ <h6>、<p>、 <ol>、<ul>、<li>等
特点： 1：独占一行
2：高度、行高、外边距以及内边距都可以控制
3：宽度默认是父级容器宽度的100%
4：内部可以放块级或行内元素
注意：文字类的元素内不能存放块级元素
<p>标签主要存放文字，因此<p>标签不能放块级，如：div
2、行内元素（内联元素）：<span>、 <b>、 <i>、 <a> 等
特点： 1：相邻行内元素在一行上，一行可以显示多个
2：高度、行高直接设置是无效的，
3：水平方向的padding和margin可以设置，垂直方向的无效
4：宽度默认是它本身内容的宽度
5：行内元素只能容纳文本或则其他行内元素
标签的嵌套规则
1、<h1> ~ <h6>、<p> 可以直接包含行内元素和纯文本内容，但是不能直接包含块状元素
2、<ul>、<ol> 只能直接包含<li>元素，但是可以在<li>元素中包含其他元素
3、<dl>只能直接包含<dt><dd>
注意：链接内不能放链接，<a>可以放块级元素，但是给<a>转换一下块级模式最安全
- 接课堂练习
- 留课下练习
