Html标签知识梳理

最新推荐文章于 2022-04-07 17:03:41 发布

白云好懒

最新推荐文章于 2022-04-07 17:03:41 发布

阅读量387

点赞数 4

分类专栏：前端学习文章标签：前端 html

本文链接：https://blog.csdn.net/loveforlongtime/article/details/123341288

版权

前端学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本人大三在读打算找个前端实习并从事前端工作，目前还在学习，小白一个。借助博客的方式记录自己所学的基础知识，巩固梳理一下,也希望帮助在学的其他兄弟复习补充。学习资源来自学校的网页课程以及B站的教程，以及本人嵌入式培养来自企业的授课。

基础理解

1、首先，Html不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。
2、标签大多都是成对出现的，我们称为双标签，也有单标签，也叫自结束标签。
3、标签可以进行嵌套使用，即可以将一个标签写入到另外一个标签内。建议镜面嵌套。比如：<p>段落<strong>加强</strong>标签</p>
4、标签有属性，写在开始标签或者自结束标签。比如style title id等，且都是名值对的方式。
5
1.px 单位名称为像素，相对长度单位，像素px是相对于显示器屏幕分辨率而言的。

组成页面的标签

1. <!DOCTYPE html> h5的文档声明，声明当前的网页是按照HTML5标准编写的编写网页时一定要将h5的文档声明写在网页的最上边。
2、<html lang="en"> 属性lang是单词language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文
3、html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中
4meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介。比如<meta charset="utf-8"> 表示网页使用utf-8编码。此外还有keywords设置关键字，网页可以通过关键字被搜索到。比如<meta name="keywords" contene="购物，网上购物"> title标签的内容会作为搜索结果的超链接上的文字显示
5、 <meta name="viewport" content="width=device-width, initial-scale=1.0"> viewport 设备的屏幕width=device-width width属性控制设备的宽度。也可以手动赋值。但是等于device-width浏览器就会自动调整，达到完美视口。
6、<title>Hello HTML</title> 这个标签设置浏览器选项卡上的名字
7、<head></head> 头部标签 head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的，可以编写后期样式以及写js
8、<body></body>在body里的内容都是显示在浏览器的视图区的

常见标签以及常用标签详细

<div></div>无意义的一块区域

<h1></h1> h1~h6 一共六级标题重要性递减，一般一个页面只有一个h1。

<hgroup><h1></h1> </hgroup>
用来为标题分组将一组相关标题放入

<p></p>段落标签，常用来放文字，p标签中的文字，会独占一行，并且段与段之间会有一个间距

-br标签

br标签表示换行标签 br标签是一个自结束标签 br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签

-hr标签

hr标签可以在页面中生成一个分割线

- em

意为强调，突出文章重点

- strong

意为强调，内容更为有用

- b

加粗

- i

斜体

- u

下划线

q标签引用标签

- img标签

img标签告诉浏览器要显示一张图片 img标签的格式
<img src="" alt=""> src:设置一个图片的路径（绝对路径和相对路径，最好使用相对路径） alt:可以用来设置在图片不能显示的时，对图片的描述，这个标签也可以设置宽高哦，一般设置一个另一个就会等比例调整。

-图片的格式

jpeg 颜色丰富不支持透明，动图一般显示照片

gif. 支持颜色少，支持简单透明和动图

PNG 颜色丰富支持复杂透明，不支持动图（专为网页而生）

webp
谷歌新推出的专门用来表示网页图片的一种格式具备所有优点，而且文件很小
兼容性不好

base64（了解一下）

使用base64对图片进行编码，通过字符引入
一般用于需要和网页一起加载的图片

- a标签

a标签的作用用于控制页面与页面之间跳转的 a标签的格式

<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>

a标签中还有一个叫做target的属性，这个属性专门用于控制如何跳转 self:用于当前的选项卡中进行跳转，也就是不新建页面跳转，默认就是_self _blank:用于在新的选项卡中进行跳转，也就是新建页面跳转

1.a标签不仅可以让文字点击，也可以让图片被点击

有关路径（跳转服务器内部）

./ 表示当前文件所在目录可以省略

../ 表示当前文件所在目录的上一级

假链接 就是点击之后不需要跳转的链接我们称之为假链接

比如：<a href="#">回到顶部</a> # 直接回到页面的顶部

<a href="javascript:"></a> javascript: 不会自动回到页面的顶部

- 锚点

通过a标签跳转到指定的位置,即指定标签的位置。这个指定标签必须给一个id属性方便a标签找到他。举例：

<a href="#center">跳转</a> 跳转到id为center的标签位置，即下面的p标签

也可以跳到另一个页面的指定位置，只需要加上页面名字比如

<a href="abc.html#center">跳转</a> 跳转到abc这个页面的id为center的标签位置

-列表有序列表无序列表定义列表

ul为无序列别 li表示列表项

<ul>

</ul>

ol为有序列表

dl为定义列表 dt表示定义内容 dd表示对内容的解说

列表之间可以相互嵌套

- base标签

base标签就是专门用来统一指定当前页面中所有的a标签需要如何打开注意点 1.base标签必须要写在head标签之间 2.如果既在base中指定了target又在a标签中指定了target，那么浏览器会按照a标签中指定的来执行。比如：

video标签（h5新增）

作用：播放视频

格式:<video src=""></video>

src:告诉video标签需要播放的视频地址

autoplay:用于告诉video标签是否需要自动播放视频

controls:用于告诉video标签是否需要控制条

poster:用于告诉video标签视频没有播放之前显示的占位图片

loop:一般用于做广告视频，用于告诉video标签视频播放完毕之后是否需要循环播放

muted:静音

第二种格式

video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

- audio(H5新增)

作用：播放音频

格式：<audio src=""></audio>
<audio>
<source src="" type="">
</audio>

audio标签的使用和video标签的使用基本一样

HTML5新增语义化标签

除语义外，与div相同。意思就是我们只关注他的语义，方便我们理解寻找。并没有其他特殊

布局标签（结构化语义标签）

<header></header>表示网页头部

<main></main>表示网页主体一般只有一个

<footer></footer>表示网页底部

<nav></nav>表示网页中导航

<aside></aside>与主体相关的其他内容比如侧边栏

<article></article>表示文章

<section></section>表示独立的区块上边都不能使用时可以用它

<div></div>没有语义，表示一个区块，目前最主要的布局元素。

块元素以及行内元素

网页中的标签是为元素，分为块元素和行内元素两种。

块元素

作用：搭建网页结构

特点：

独占一行空间
默认宽度为100%
高度由子元素或内容决定
可以指定其宽高
元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...

建议：不要将块级元素嵌套在行内元素中。