前端 HTML/CSS （十一）

向右看齐 2023-01-01 09:00 100阅读 0赞

### 目录 ###

*   *   *   *  固定定位
             *  堆叠顺序
             *  HTML5
             *  语义化标签
             *  section标签
             *  header标签
         *  footer标签
         *   *  nav标签
             *  article标签
             *  aside标签
             *  <mark> 标签，定义带有记号的文本（加上背景颜色）。
             *  <abbr>：缩写标签(补充html4)
             *  注释标签
             *  表单新增标签
             *  表单新增属性
             *  层次选择器
             *  属性选择器
             *  伪类选择器
             *  动态伪类选择器

#### 固定定位 ####

*  `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来处理。

**注意：**

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

<!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>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]  
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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]

#### HTML5 ####

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

#### 语义化标签 ####

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

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

#### section标签 ####

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

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

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

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

#### header标签 ####

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

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

**注意：**

1.  一个网页内并不限制只能有一个`header`标签，可以拥有多个，可以为每个内容区块加一个`header`标签。
2.  一个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的不同点：**

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

#### aside标签 ####

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

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

1.  包含在`article`标签中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等。
2.  在`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>

显示：  
![在这里插入图片描述][20210101214003978.png]

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

![在这里插入图片描述][20210101213133171.png]

#### 注释标签 ####

*  `<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>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]

#### 表单新增标签 ####

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

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]

1.  使用input标签的autocomplete属性来关闭浏览器自带的提交记录。
    
    autocomplete，on表示显示输入的数据列表。off关闭输入的列表。如果不指定那么默认的时候由浏览器自己决定。
2.  使用input 标签的list属性的以便绑定datalist标签（用input的list属性的值和datalist的id的值进行绑定。）
    
    list属性：绑定输入值列表对应的datalist标签。
3.  设定datalist标签并将id的值和list的值绑定。
4.  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>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 4]

*  `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>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 5]

#### 属性选择器 ####

*  `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指向。(锚点指向时候才会生效)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]: /images/20221120/27fa6181d0224be2a9e761bbd5ae0820.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210101213052421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[20210101214003978.png]: https://img-blog.csdnimg.cn/20210101214003978.png
[20210101213133171.png]: https://img-blog.csdnimg.cn/20210101213133171.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210101213213938.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210101214135386.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210101213323253.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210101213357398.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70