fszj

导航

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 的语法

标记：<单词> ， 也叫做 标签，也叫做 元素，也叫做盒子
单标签 : 非封闭类型标签
只一个 <>
/ 可带可不带 , 建议带上

双标签 : 封闭类型标签
有两个<> ，开始标签和结束标签
/ 必须带上

HTML 提示：使用小写标签
HTML 标签对大小写不敏感：

等同于

。许多网站都使用小写的 HTML 标签。
因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写

<标签名 属性名="属性值" 属性名="属性值"></标签名>
标签名字和属性之间需要有空格，键值对
属性和属性值之间需要 = 连接
每一组键值对 之间需要有空格
属性值需要带引号
常见的属性值 id="",class="",

人的体貌特征，eg: 身高， 体重
体貌特征的值，eg: 178cm, 75kg

HTML 常用标记/标签/元素/盒子

1. 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。
浏览器会忽略注释，也不会显示它们
合理地使用注释可以对未来的代码编辑工作产生帮助
快捷键 Ctrl + /

2. 标题元素


特点： 字号由大到小，h1最大，h6最小
自动加粗
有默认的间距
自动换行（独占一整行的意思）
应用: h1作为一级标题应用在文章标题或者是布局logo区域
h2，h3作为的文章内部的标题
h4，h5，h6 根据实际情况进行使用

2. 段落元素


包裹一段描述性的文本
有默认的间距
在一个段落里面想使用空格
方式一： 所占位置没有一个确定的值,这与当前字体字号都有关系.
方式二： 所占位置就是当前字体的一个字体大小

3. 换行的标签


强制换行

4. 水平分割线


应用：分割区域内容

5. 字体加粗的标签

有强调的意思

6. 字体倾斜的标签

有强调的意思

7. 加下划线的标签

8. 加删除线的标签

有强调的意思

9. 加上角标的标签

10. 加下角标的标签

11. 字体标签

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. 图片标签

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. 超链接标签
给用户点击的链接的文字
href : 链接指向的页面的 URL
暂时不知道将要跳往哪里 可以 作为一个空标签
target : 在何处打开链接文档
_self : 在当前窗口打开 （默认的）
_blank : 在新的窗口打开
title : 为链接添加描述性文字, 有利于SEO

百度词条案例 ！！！

id : 特殊标识，可用于 href 的直接跳转（用于锚点）
锚点链接，可以在同一页面内的不同位置进行跳转
第一步：在标签内加上 id = "命名锚点名称"
第二步：
特殊性使用: 返回顶部 --- h5新增

也可以去其他网页：

其他特殊性使用，可以利用 a 标签实现 打电话、发邮件等特殊功能
点击下载
拨打电1873232
发送短信给1873232

14. 列表标签

+ 有序列表



- 1数字 / A大写英文字母 / a小写英文字母 / i小写罗马数字 / I大写罗马数字
有序列表独有属性 start="number" 规定有序列表的开始是从第几个开始的

+ 无序列表


  • 无序列表1

- disc实心圆 / circle空心圆 / square实心方块

+ 自定义列表


名词

名词解释


应用：大多是网页最下方区域

15. 容器标签

无实际意义
应用：主要是用来划分区域的

16. 容器标签
无实际意义
应用：更改一段文本中的一部分字体样式,优点是span本身没有任何样式,span前后不换行

常用的转义字符

空格 ：   
小于号 < : <
大于号 > : >

注册：®
商标：™
版权标识：©

Q: 了解其他的转义字符
https://www.w3school.com.cn/html/html_entities.asp

标签的简单分类

HTML元素一般分为块级元素和行内元素两种类型
1、块级元素：

、

~

、

、

    、

posted on 2023-05-11 19:56  葫芦画瓢  阅读(178)  评论(0)    收藏  举报