结构标签、行内与块元素、列表、超链接、图片标签格式及音视频（vscode）

结构标签：

<body>

<!-- html 搭建网页的结构

大部分的网站头部主体底部导航文章等等

-->

<!-- 布局标签（结构化标签）用来布局的标签都是块元素

header 网页的头部

main 网页的主体部分（一般就一个）

footer 网页的底部

nav 网页的导航

aside 和主体相关的内容，侧边栏

article 文章之类的

section 独立的区块，上面的标签都不合适，就用这个 ,

用来代替div

-->

</body>

行内与块元素：

<!--

元素分类

块元素（block element）用来布局

特点：

1、会独占一行

2、默认情况下，块元素的宽度是视口的100%

3、默认情况下，块元素的高度是被内容撑开的

常用块元素：div、p、h1-h6、header、main、footer、nav

行内元素（inline element）用来包裹文字

特点：

1、不会独占一行

2、宽高是被内容撑开的，内容有多宽它就多宽

常用行内元素：span、strong、em、del等

行内块元素

特点：

兼具块元素和行内元素特点

常用行内块元素：img

注意：

1、块元素主要是用来布局，里面可以放任何元素,块元素、行内元素、行内块元素

2、行内元素主要用来包裹文字的，一般情况下不能放块元素

3、p标签是个特殊的块元素，它里面不能放块元素

4、a标签是个特殊的行内元素，它里面什么都能放

-->

<p></p>

列表：

<!--

列表：如果页面中，出现结构、样式，功能等都比较雷同的部分，

就可以用列表

列表（list）一组一组

1:有序列表用ol创建列表，li表示列表项

2:无序列表用ul创建列表，li表示列表项

3:定义列表用dl创建列表，dt表示下定义，dd表示对定义的解释

类似：大列表里有很多的小列表，每个小列表里有标题，有对标题的解释

注意：1、列表之间是可以互相嵌套的，ul，ol，li是块元素

2、可以使用type属性更改项目符号

ol 它的项目符号：1、a、A、I 等，默认项目符号是‘1’

ul 它的项目符号:

disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆

3、默认样式，li前有项目符号，上下左右有间距

4、最常用ol、ul，在实际的使用中，一般不做有顺序或者无顺序区分

5、ol，li

ul，li

dl，dt，dd

都是配套使用，就像cp

-->

<!--

不要混合使用

<div>

</div>

<ol>

<p></p>

</ol> -->

超链接：

<!--

超链接:可以是一个字，可以是一个块元素，可以是图片，可以是任何内容,

特殊的行内元素，可以包裹任何元素，除了它自己

默认样式：字体有一定颜色，有下划线

功能：1、从一个页面跳到另一个页面

2、在当前页面进行跳转（楼梯导航/锚点功能）

3、下载

属性：

href属性指向跳转的地址

绝对地址：不管你的html文件在哪里，超链接去的地方是确定的，是绝对

相对地址：它的地址值跟超链接的html文件位置相关

./ 当前目录下跳转 ./可省略，默认是./

注意：很多路径规则都是一样，包括图片、音视频跳转等

target属性指定超链接页面打开的方式

可选值：

_self 在当前页面打开超链接默认值一般情况下，国外网站常用

_blank 新开页面打开超链接一般情况下，国内常用

具体用哪种方式，根据项目需求来的

锚点功能实现

去顶部 href属性值设置为#

去任意的位置先给要去的位置打个标记 id属性='id属性值'

在href里填写标记 href='#id属性值'

注意： id属性值：你起的名字

不以数字开头

一般不用汉字

一般不能重复使用

补充：空链接的写法

-->

图片标签与格式：

标签：

<body>

<!--

使用img标签来向网页中引入一个外部图片，（掌握4个属性）

src alt width height

-->

</body>

格式：

<!--

图片的格式

JPEG(JPG)

- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明

- 一般用来保存照片等颜色丰富的图片

GIF

- GIF支持的颜色少，只支持简单的透明，支持动态图

- 图片颜色单一或者是动态图时可以使用gif

PNG

- PNG支持的颜色多，并且支持复杂的透明，不支持动图

- 可以用来显示颜色复杂的透明的图片

专为网页而生的

webp

-谷歌新推出的专门用来表示网页的一种格式

-它具有其他图片格式的所有优点，而且文件格式还很小

-缺点：兼容性不好

base64

-讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入

-一般都是需要和网页一起加载的图片才会使用base64

图片的使用原则：

效果不一致，使用效果好的

效果一致，使用小的

-->

<!-- 网页加载流程

第一次请求：加载网页本身

第二次之后请求，加载外部资源 -->

音视频：

<!--

src 引入音视频的路径

controls 控制用户是否可以播放,默认是不能播放

autoplay 自动播放（基本被废止，也是考虑到用户的体验，除了ie9以下）

loop 循环播放

-->

（第一个是音频）

结构标签、行内与块元素、列表、超链接、图片标签格式及音视频（vscode）相关推荐

html网页结构：行内和块元素、简单案例
一.行内元素和块元素概括块级元素:div , p ,form, ul,li,ol,dl,form, address,fieldset, hr, menu, table 行内元素:span, stro ...
html块左右排列,html – 如何均匀地排列多个内嵌块元素？
我最近读了一个非常聪明的技巧来完成你所要求的工作. 简而言之,你只需要使用text-align:justify;在容器元素上实现这一点,结合一个额外的不可见块. 这是因为内联块元素被视为文本内容的一部 ...
html如何整齐排列选择框,html – 如何均匀地排列多个内嵌块元素？
我最近读了一个非常聪明的技巧来完成你所要求的工作. 简而言之,你只需要使用text-align:justify;在容器元素上实现这一点,结合一个额外的不可见块. 这是因为内联块元素被视为文本内容的一部 ...
css元素显示模式（行内、块级、行内块）
1.块级元素显示特点: 1.独占一行(一行只能显示一个) 2.宽度默认是父元素的宽度,高度默认由内容撑开 3.可以设置宽高代表标签: div.p.h系列.ul.li.dl.dt.dd.form.h ...
块元素、行内块和内联元素_如何删除内联块元素之间的空间？
块元素.行内块和内联元素 Introduction: 介绍: This question has become rather popular. How does one remove whitespa ...
行内和块级元素区别?如何让行内元素设置宽高?
行内和块级元素区别: 1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block. 2.行内元素 ...
CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解
原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客简介本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...
css 块元素、内联元素、内联块元素
元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签,如:div.p.ul.li.h ...
CSS中的块元素,内联元素,内联块元素
块元素,内联元素,内联块元素元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素块元素,也可以称为行元素,布局中常用的标签如: ...

结构标签、行内与块元素、列表、超链接、图片标签格式及音视频（vscode）

结构标签、行内与块元素、列表、超链接、图片标签格式及音视频（vscode）相关推荐

最新文章

热门文章