前端 HTML/CSS （十一）

最新推荐文章于 2022-10-04 17:29:41 发布

木森林哥哥

最新推荐文章于 2022-10-04 17:29:41 发布

阅读量223

点赞数

分类专栏： Html/CSS 文章标签： html css html5 css3

本文链接：https://blog.csdn.net/weixin_47021982/article/details/112070565

版权

Html/CSS 专栏收录该内容

39 篇文章 9 订阅

订阅专栏

fixed，固定定位的元素也会从文档流中删除，相对于视口来进行定位。

opacity属性，它指定了一个元素的透明度，当这个属性被应用到元素上时，是把这个元素整个（内容、背景色、前景色、边框）进行透明。

opacity的值也是从0~1的范围，0为完全透明，1为完全不透明。

visibility设置元素是否可见：

visible，元素可见
hidden，元素不可见，但是对于页面的布局依然会有影响。

display: none; 和 visibility: hidden; 的区别：display: none; 完全从文档中移除，对布局不会有任何影响。visibility: hidden; 依然会有影响（仍会占据位置）。相同点就是元素都不见了，不同点就是一个会影响布局（visibility），一个不会影响布局（display）。

如果position元素的属性时static的时候，再去设置top、bottom、left、right的值无效。
rgb 里的三个值越小，颜色越深，值越大，颜色越浅。
rgba 是指背景透明，对背景里面的内容没有效果。
opacity 指背景和内容都受影响。

堆叠顺序

左->右是x轴

上->下是y轴

前->后是z轴:z-index

数值：值可以为任何整数（正数或负数），值越大离我们越近。值越小离我们越远。
auto，可以将auto当做0来处理。

注意：

当元素的层叠水平一致（都脱离文档流的情况），层叠顺序相同时，源代码后面的元素会覆盖前面的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
            div{
                position:absolute;
                top:0px;
                left:0px;
                width:300px;
                height:300px;
                border:1px solid green;
            }
		</style>
	</head>	
	<body>
        <div style="background-color:red;width:400px;z-index:auto;"></div>
        <div style="background-color:yellow;z-index:auto;"></div>
	</body>
</html>

显示：
在这里插入图片描述
z-index只能用在定位元素上（所谓的定位元素指的就是position的值不为static的元素。）

元素一旦成为定位元素，那z-index就会自动生效。此时的z-index值是auto。

定位元素会压在普通元素的上面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
            div{
                
                width:300px;
                height:300px;
                border:1px solid green;
            }
		</style>
	</head>	
	<body>
        <div style="background-color:yellow;z-index:auto;position:absolute;top:0px;left:0px;"></div>
        <div style="background-color:red;width:400px;"></div>
	</body>
</html>

在这里插入图片描述

HTML5

html5是在HTML4.01的基础上，新增了语义标签、标签属性、新增了本存储、图形绘制、地理位置等等。

语义化标签

所谓的语义化标签就是你写的HTML的结构用相对应的有一定意义的标签表示。

为什么要用它
1. 让结构更加清晰。
2. 让代码更加容易维护。

section标签

section标签表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等标签结合使用，标示文档结构。

内容区块是指将HTML页面按逻辑进行分割后的单位。例如，对书籍来说，章、节都可以称为内容区块；对博客网站来说，导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。

一个section标签通常由内容及其标题组成（通常不推荐为那些没有标题的内容使用section）。

可以这样理解：section标签中的内容可以理解为单独存储到数据库中或输出到word文档中的内容。

header标签

header标签表示页面中一个内容区块（section）或整个页面的标题。

header标签是一种具有引导和导航作用的结构标签，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格、搜索表单或相关的LOGO图片。

注意：

一个网页内并不限制只能有一个header标签，可以拥有多个，可以为每个内容区块加一个header标签。
一个header标签通常包括至少一个heading标签（h1~h6），根据W3C HTML 5标准，还可以包括nav标签。

footer标签

footer标签可以作为其上层父级内容区块或一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接以及版权信息等。

与header标签一样，一个页面中也不限制只可以用一个footer标签。同时，可以为section标签添加footer标签。

nav标签

nav标签是一个可以用来作为页面导航的链接组，其中的导航标签链接到其他页面或当前页面的其他部分。并不是所有的链接组都要放进nav标签，只需要将主要的、基本的链接组放进nav标签即可。

一个页面中可以拥有多个nav标签，作为页面整体或不同部分的导航。

nav标签的使用场景：

侧边栏导航，现在主流博客网站及商品网站上都有侧边栏导航，用来将页面从当前文章或当前商品跳转到其他文章或其他商品页面。可以用nav标签实现侧边栏导航。
导航菜单，可以用nav标签实现导航菜单，用来在本页面几个主要组成部分之间跳转。
翻页操作，nav标签可以用在多个页面的前后页或博客网站的前后篇文章的滚动中。
nav标签也可以用在其他所有你觉得重要的、基本的导航链接组中。

article标签

article标签代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报章杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件，或者其他任何独立的内容。

一个article标签通常有它自己的标题（标题通常放在header中）和脚注。

article标签是可以嵌套使用的，内层的内容在原则上需要与外层内容相关联。

article和section的不同点：

article标签可以看成是一种特殊种类的section标签，它比section标签更强调独立性。
section标签强调分段或分块，而article强调独立性，具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用article标签，但是如果想将一块内容分成几段的时候，应该使用section标签进行分段。

aside标签

aside标签，aside标签用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。

aside标签主要有以下两种使用方法：

包含在article标签中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等。
在article之外标签使用，作为页面或站点全局的附属信息部分。最典型的形式是侧边栏，其中的内容可以是友情链接、博客中其他文章列表或广告单元等。

<mark> 标签，定义带有记号的文本（加上背景颜色）。

主要的作用是为了吸引用户的注意。标识出来文字与当前用户操作有关。

mark 文本高亮标签，默认带有黄色背景颜色，里面的字体、背景颜色都可以通过css更改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        mark {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <mark>这是一个mark标签</mark>
</body>
</html>

显示：
在这里插入图片描述

<abbr>：缩写标签(补充html4)

在这里插入图片描述

<abbr title="world wide web">www</abbr>

注释标签

<ruby>，标签用来定义ruby注释。（中文注音或字符）

ruby标签由一个或多个字符和一个提供该信息的rt标签组成，还可以包括可选的rp标签。
<rt>，定义字符的解释或发音。
<rp>标签，在ruby注释中使用，如果浏览器不支持ruby将会显示其中的内容。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="keywords" content="zidingyi">
        <meta name="description" content="zidingyi">
        <meta charset="UTF-8">
        <title></title>
        <style>
            ruby {
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <ruby>饕餮盛宴
            <rt>
                tāo tiè shèng yàn
            </rt>
            <rp>
                (tāo tiè shèng yàn)
            </rp>
        </ruby>
    </body>
</html>

显示：
在这里插入图片描述

表单新增标签

<datalist>表示可选的数据的列表，与input标签配合使用可以制作出输入值的下拉列表。

<input type="text" autocomplete="off" list="cars" />
    <datalist id="cars">
        <option value="BMW">
        <option value="Ford">
        <option value="Volvo">
    </datalist>

显示：
在这里插入图片描述

使用input标签的autocomplete属性来关闭浏览器自带的提交记录。

autocomplete，on表示显示输入的数据列表。off关闭输入的列表。如果不指定那么默认的时候由浏览器自己决定。
使用input 标签的list属性的以便绑定datalist标签（用input的list属性的值和datalist的id的值进行绑定。）

list属性：绑定输入值列表对应的datalist标签。
设定datalist标签并将id的值和list的值绑定。
datalist中设定option标签选项并为其绑定value属性。

表单新增属性

正则表达式 医学-》神经学

<input type="" />
- email，邮箱。
  
  email 不检查该 email 地址是否存在，提交时也可以为空，除非你加上 required 属性（加上之后变成必须输入的）。
- url，必须输入一个url地址。
- number, 输入数值。
  
  <input type="number" min="0" max="100" step="3" />
  - min，允许的最小值
  - max，允许的最大值
  - step，步长（允许的间隔）
- date，日历。选择年、月、日。
- time，选择时间。
- range，以滑动条的形式指定某个值。
  - min，最小值
  - max，最大值
  - step，步长。
- autofocus 属性：自动获得焦点。
  
  从使用角度来说，不应该滥用该属性，一个页面只能有一个 autofocus。
- placeholder 属性：提示用户可以输入的内容。
input 里 type 的值识别不了时，默认为 type=text。
音频标签

<audio></audio>
- src，音频的地址。
- controls，该属性中指定是否为音频加上控制条。
- muted，静音。
- autoplay 属性：是否自动播放。
- loop 属性：循环播放。
支持的是 mp3、ogg、wav
视频标签

video标签
- src，视频的地址。
- controls，该属性中指定是否为视频加上控制条。
- muted，静音。
- autoplay 属性：是否自动播放。
- loop 属性：循环播放。
- poster 属性：视频的封面。

层次选择器

E F，后代选择器，选择的是后代。
E > F，子选择器，选择匹配的F元素，且匹配的F元素是E的子元素。
E + F，相邻兄弟选择器，选择匹配的F元素且匹配的F元素仅位于匹配的E元素的后面。只会选择第一个相邻的匹配元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div + p {
            background-color: yellow;
        }
    </style>
</head>
<body>
<h1>欢迎来到我的主页</h1>
<div>
    <p>我是唐老鸭</p>
    <p>我住在 Duckburg。</p>
</div>
<p>我最好的朋友是米老鼠。</p>
<p>我的样式不会改变。</p>
</body>
</html>

显示：
在这里插入图片描述

E ~ F，兄弟选择器，选择匹配的F元素且位于匹配的E元素的后面的所有的F元素都选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        h2 ~ p {
            color: fuchsia;
        }
    </style>
</head>
<body>
<h2>1111</h2>
<h1>2222</h1>
<p>3333</p>
<p>4444</p>
<p>5555</p>
</body>
</html>

显示：
在这里插入图片描述

属性选择器

E[attr]，选择匹配具有attr的E元素。

可以使用E[attr1][attr2]这种方式来选择一个元素必须有attr1和attr2两个属性。
E[attr='val']，选择匹配具有attr的元素并且attr的值是val。

val的值是区分大小写的。
E[attr*='val']，选择匹配的E元素，且E元素定义了attr属性并且属性的值的任意位置包含了val。
E[attr^='val']，选择匹配的E元素，且E元素定义了attr属性并且属性的值的开始位置包含了val。
E[attr$='val']，选择匹配的E元素，且E元素定义了attr属性并且属性的值的结束位置包含了val。

伪类选择器

E:first-child，选择父元素的第一个子元素且元素为E的元素。（要选中的E元素必须排行老大）
E:first-of-type，选择父元素的第一个E元素。（我不管具体排行老几只要第一个出现的E那我就选中）
E:last-child，选择父元素的最后一个子元素且元素为E的元素。
E:last-of-type，选择父元素的最后一个E元素。
E:nth-child(n)，选择父元素的第n个子元素且元素为E的元素。

n代词：
- 数字
- 关键词
  
  even，偶数
  
  odd，奇数
- 公式
  - n相当于全选，n为0\1\2\3\4\5....
  - Mn，M是个数字，n只能是n。3n，这个时候表示选中0,3,6,9.......但是在html选择上因为html元素是从1开始。
E:nth-of-type(n)，选择父元素第n个E元素。

动态伪类选择器

E:focus，选择匹配E的元素，且匹配的元素获得焦点时候会被选中。用于input标签。
E:target，选择匹配的E元素，且匹配的元素被相关的URL指向。(锚点指向时候才会生效)

木森林哥哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端 HTML/CSS （十一）

固定定位fixed，固定定位的元素也会从文档流中删除，相对于视口来进行定位。opacity属性，它指定了一个元素的透明度，当这个属性被应用到元素上时，是把这个元素整个（内容、背景色、前景色、边框）进行透明。opacity的值也是从0~1的范围，0为完全透明，1为完全不透明。visibility设置元素是否可见：visible，元素可见hidden，元素不可见，但是对于页面的布局依然会有影响。display: none; 和 visibility: hidden; 的区别：displ
复制链接

扫一扫