一、排版标签

1、标题标签

2、段落标签

二、语义标签

三、块级元素和行内元素

1.块级元素

2.行内元素

四、文本标签

1.常用文本标签

2.不常用文本标签

五、图片标签

六、相对路径与绝对路径

1.相对路径

2.绝对路径

七、常见图片格式

总结

一、排版标签

1、标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>

总共6级，h1最大，h6最小，不能互相嵌套

2、段落标签

<p>段落标签</p>

<div></div>用于整体布局，更好控制段落

二、语义标签

标签默认的效果不重要，语义最重要

标题标签<h1>-<h6>就是语义标签

注意语义标签的使用，能增强代码的可读性，有利于搜索引擎优化，方便设备解析

三、块级元素和行内元素

1.块级元素

独占一行

排版标签都是块级元素<h1><p><div>

块级元素中能写行内元素和块级元素(几乎什么都能写)

例外：<p>中不写块级元素

2.行内元素

不独占一行

如<input>

行内元素中能写行内元素，但不能写块级元素

四、文本标签

通常写在排版标签里面

排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）

文本标签通常都是行内元素

1.常用文本标签

<em>着重阅读的内容:倾斜</em>
<strong>十分重要的内容:加粗</strong>
<span>没有语义，包裹短语的通用容器</span>

div 是大包装袋， span 是小包装袋

2.不常用文本标签

这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）

blockquote 与 address 是块级元素，其他的不常用文本标签，都是行内元素。

有些语义感不强的标签，我们很少使用，例如： small 、 b 、 u 、 q 、 blockquote

HTML标签太多了，记住重要的、语义感强的标签即可：

截止目前，有这些： h1~h6 、 p 、 div 、 em 、 strong 、 span

五、图片标签

<img width="200" src="奥特曼.jpg" alt="奥特曼，你相信光吗？">

alt：图片描述。搜索引擎通过 alt 属性，可以得知图片的内容—— 最主要的作用。当图片无法展示时候，有些浏览器会呈现 alt 属性的值。盲人阅读器会朗读 alt 属性的值。

width ：图片宽度，单位是像素；height ：图片高度，单位是像素

img标签是单标签，暂且认为是行内元素（CSS中会学到）

六、相对路径与绝对路径

1.相对路径

以当前位置为参考

./同级

../上一级

/下一级

相对路径中的 ./ 可以省略不写

2.绝对路径

以根位置为参考

本地绝对路径 E:/a/奥特曼.jpg

网络绝对路径：https://img-blog.csdnimg.cn/36f8ce3b05e145eeaaacdbe0392b3c5f.png

使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用

使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败

七、常见图片格式

jpg

扩展名为 .jpg 或 .jpeg，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）

主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图

使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等。—— 该格式网页中很常见

png

扩展名为 .png，是一种无损的压缩格式，能够更高质量的保存图片

主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图

使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如：公司logo图、重要配图等

bmp

扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节

主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图

使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片（网页中很少使用）

gif

扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整

主要特点：支持的颜色较少、支持简单透明背景、支持动态图

使用场景：网页中的动态图片

webp

扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片

主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题（例如ie浏览器不支持）

使用场景：网页中的各种图片

base64

原理：把图片进行 base64 编码，形成一串文本

本质：把图片变成了一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。

如何生成：靠一些工具或网站

如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响

使用场景：一些较小的图片，或者需要和网页一起加载的图片

八、其他常用标签

<br> 换行

<hr> 分隔

<pre> </pre> 按原文显示，可以保留空格与回车

ctrl+shift+ +/-：放缩vscode整个界面

alt+shift+⬆/⬇ ：vscode快速复制到上/下一行

总结

本篇围绕html5中的重要标签：排版标签、语义标签、文本标签、图片标签展开，其中还包括重要内容块级元素和行内元素，相对路径与绝对路径的区分。

根据尚硅谷张天禹老师2023年的前端基础视频整理而成。

web前端html5+css3学习笔记(3)——标签相关推荐

web前端html5+css3学习笔记(1)
开启我的第一篇博客~~~ 记录学习html+css的笔记目录一.认识两位先驱二.计算机的组成 1.硬件 2.软件三.浏览器与内核四.网页标准五.HTML历史* 一.认识两位先驱图灵:人工 ...
web前端+HTML5+CSS3学习笔记
文章目录 HTML认知网页的基本组成和本质 HTML初始概念 HTML标签学习 HTML基础列表表格表单语义化标签字符实体 CSS基础基础认知选择器文字字体 Emmet语法 CSS进 ...
web前端html5+css3学习笔记(2)
文章目录目录一.标签二.HTML基本结构三.vscode 1.插件 2.注释 3.文档声明四.字符编码五.设置语言六.页面图标一.标签标签(也叫元素),需要小写 <marque ...
前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记文章目录千峰HTML5+CSS3学习笔记写在前面 1. 前言 2. HTML 3. CSS 3.1 选择器 3.2 CSS属性 4. 盒子模型 4.1 溢出属性 ...
尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p1-p8】
尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p1(22:55) 一.软件的分类: 1.系统软件 -wind ...
HTML5+CSS3学习笔记（第1章）HTML基础
HTML5+CSS3学习笔记(第1章)HTML基础今天是居家隔离第一天,自学HTML5. 1.1HTML概述什么是HTML HTML是一种标记语言.(Hyper Text Markup langu ...
HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
好程序员web前端分享Nodejs学习笔记之Stream模块
好程序员web前端分享Nodejs学习笔记之Stream模块一,开篇分析流是一个抽象接口,被 Node 中的很多对象所实现.比如对一个 HTTP 服务器的请求是一个流,stdout 也是一个流.流 ...

web前端html5+css3学习笔记(3)——标签

一、排版标签

1、标题标签

2、段落标签

二、语义标签

三、块级元素和行内元素

1.块级元素

2.行内元素

四、文本标签

1.常用文本标签

2.不常用文本标签

五、图片标签

六、相对路径与绝对路径

1.相对路径

2.绝对路径

七、常见图片格式

总结

web前端html5+css3学习笔记(3)——标签相关推荐

最新文章

热门文章