0
0

HTML笔记4

**⭐️大一小何，还在学习当中，欢迎交流指正~ **

要开学了，整理一下最近的笔记

内联框架

内联框架：用于向当前页面中引入一个其他页面
src指定要引入的网页路径
frameborder指定内联框架的边框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <!--
  11.         内联框架：用于向当前页面中引入一个其他页面
  12.         src指定要引入的网页路径
  13.         frameborder指定内联框架的边框 
  14.     -->
  15.     <iframe src="http://www.JD.com" witch="800" height="600" frameborder="0"></iframe>
  16. </body>
  17. </html>

音视频

audio标签用来向页面中引入一个外部的音频文件
音视频文件引入后，默认情况下不允许用户自己控制播放停止

  1.     属性：
  2.          controls是否运行用户控制播放
  3.          autoplay当前文件是否自动播放
  4.              如果设置了autoplay，则音乐在打开页面时会自动播放
  5.              但是大部分浏览器不会对音乐自动播放
  6.          音乐是否循环播放
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <!--
  11.         audio标签用来向页面中引入一个外部的音频文件
  12.         音视频文件引入后，默认情况下不允许用户自己控制播放停止
  14.         属性：
  15.             controls是否运行用户控制播放
  16.             autoplay当前文件是否自动播放
  17.                 如果设置了autoplay，则音乐在打开页面时会自动播放
  18.                 但是大部分浏览器不会对音乐自动播放
  19.             音乐是否循环播放
  20.     -->
  21.     <audio src="" controls autoplay loop></audio>
  22.     <audio controls>
  23.         <source src="">
  24.     </audio>
  25.     <!--
  26.         ie8浏览器不支持播放，用embed来改善
  27.     -->
  28.     <embed src="" type="">
  29.         <!--
  30.             使用video标签来向网页中引入一个video视频
  31.             使用方式和video基本一样
  32.         -->
  33.         <video controls>
  34.             <iframe src="" frameborder="0"></iframe>
  35.         </video>
  36. </body>
  37. </html>

css 简介

第一种方式(内联样式 行内样式)
在标签内部通过style属性来设置元素的样式
使用内联样式，样式只能对一个标签生效
如果希望影响多个元素必须都复制一遍
并且当样式发生改变时，我们需要一个一个的修改，非常的不方便

  1.             开发时不要用内联样式

第二种方式
将样式编写到head中的style标签里面
可以通过css选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需修改一处即可
内部样式表更加方便对样式进行复用
问题：
我们的样式表只能对一个网页起作用
它里面的样式不能跨网页进行复用

第三种方式（外部样式表）最佳实践
可以将css样式编写到一个外部的css文件中
然后通过link标签来引入外部的css文件
外部样式表需要通过link标签进行引入
意味着只要想通过这些样式的网页都可以对其进行引用
使样式可以在不同的页面之间进行复用
将样式编写到外部的css文件中，可以使用到浏览器的缓存机制
从而加快网页的加载速度，提高用户的体验

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!--
  9.         第二种方式
  10.             将样式编写到head中的style标签里面
  11.             可以通过css选择器来选中元素并为其设置各种样式
  12.             可以同时为多个标签设置样式，并且修改时只需修改一处即可
  13.             内部样式表更加方便对样式进行复用
  14.                 问题：
  15.                     我们的样式表只能对一个网页起作用
  16.                     它里面的样式不能跨网页进行复用
  17.     -->     
  18.     <style>
  19.         p{
  20.             color: green; 
  21.             font-size: 50px;
  22.         }
  23.     </style>
  24.     <!--
  25.         第三种方式（外部样式表）最佳实践
  26.             可以将css样式编写到一个外部的css文件中
  27.             然后通过link标签来引入外部的css文件
  28.         外部样式表需要通过link标签进行引入
  29.             意味着只要想通过这些样式的网页都可以对其进行引用
  30.             使样式可以在不同的页面之间进行复用 
  31.         将样式编写到外部的css文件中，可以使用到浏览器的缓存机制
  32.             从而加快网页的加载速度，提高用户的体验
  33.     -->
  34.     <link rel="stylesheet" href="./style.css">
  35. </head>
  36. <body>
  37.     <!--
  38.         网页三个部分
  39.             结构（html）
  40.             表现（css）
  41.             行为（Javascript）
  42.         css
  43.             层叠样式表
  44.             网页实际上是一个多层结构，通过css可以分别为网页的每一层来设置样式
  45.             总之一句话，css用来设置网页中元素的样式
  47.     -->
  48.     <!--
  49.         使用css来修改元素的样式
  50.         第一种方式(内联样式 行内样式)
  51.             在标签内部通过style属性来设置元素的样式
  52.                 使用内联样式，样式只能对一个标签生效
  53.                 如果希望影响多个元素必须都复制一遍
  54.                 并且当样式发生改变时，我们需要一个一个的修改，非常的不方便
  56.                 开发时不要用内联样式
  57.     -->
  58.     <!--<p style="color: red; font-size: 60px;" >少小离家老大回,乡音无改鬓毛催</p>
  59.     <p style="color: red; font-size: 60px;" >今天天气真不错</p>
  60.     -->
  61.     <p>落霞与孤鹜齐飞,秋水共长天一色</p>
  62. </body>
  63. </html>

css语法

css中的注释，注释中的内容会自动被浏览器所忽略

  1.         css基本语法：
  2.              选择器 声明块
  4.             选择器：通过选择器可以选中页面中的指定元素
  5.              比如p的作用就是选中页面中所有的p元素
  7.             声明块：通过声明块来指定要为元素设置的样式
  8.                  声明块由一个一个的声明组成
  9.                  声明是一个名值对结构
  10.                      一个样式对应一个样式值，名与值之间：连接，以；结尾
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /*
  10.             css中的注释，注释中的内容会自动被浏览器所忽略
  12.             css基本语法：
  13.                 选择器 声明块
  15.                 选择器：通过选择器可以选中页面中的指定元素
  16.                 比如p的作用就是选中页面中所有的p元素
  18.                 声明块：通过声明块来指定要为元素设置的样式
  19.                     声明块由一个一个的声明组成
  20.                     声明是一个名值对结构
  21.                         一个样式对应一个样式值，名与值之间：连接，以；结尾
  22.         */
  23.         p{
  24.             color: red;
  25.             font-size: 40px;
  26.         }
  27.         h1{
  28.             color: green;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <p>哈哈哈哈哈哈</p>
  34.     <h1>嘿嘿嘿嘿嘿嘿</h1>
  35. </body>
  36. </html>

选择器

常用选择器

元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}

类选择器：
根据元素的class属性值选中一组元素
语法：.class属性值 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  9.     <style>
  10.         /*
  11.             将所有段落设置为红色（字体）
  13.             元素选择器
  14.                 作用：根据标签名来选中指定的元素
  15.                 语法：标签名{}
  16.                 例子：p{} h1{} div{}
  17.         
  18.         */
  19.        /* p{
  20.             color: red;
  21.         }
  22.         h1{
  23.             color: green;
  24.         }
  25.         */
  26.         /*
  27.             将儿童相见不相识设置为红色
  28.             id选择器
  29.                 作用：根据元素的id属性选中一个元素
  30.                 语法：#id属性值{}
  31.                 例子：#box{} #red{}
  32.         */
  33.         #red{
  34.             color: red;
  35.         }
  36.        /*
  37.         类选择器：
  38.             根据元素的class属性值选中一组元素
  39.             语法：.class属性值
  40.        */
  41.        /*
  42.        .blue{
  43.            color: blue;
  44.        }
  45.        .abc{
  46.            font-size: 20px;
  47.        }*/
  48.        /*
  49.             通配选择器
  50.             作用：选中页面中的所有元素
  51.             语法：*
  52.        */
  53.        *{
  54.            color: red;
  55.        }
  56.     </style>
  57. </head>
  58. <body>
  59.     <h1 class="blue abc" >我是标题</h1>
  60.     <p>少小离家老大回</p>
  61.     <p>乡音无改鬓毛催</p>
  62.     <p id="red">儿童相见不相识</p>
  63.     <p>笑问客从哪里来</p>
  64.     <!--
  65.         class属性是一个标签属性，它和id类似，不同的是，class可以重复使用
  66.         可以通过class属性来为class分组
  67.     -->
  68.     <p class="blue">落霞与孤鹜齐飞</p>
  69.     <p class="blue">秋水共长天一色</p>
  71. </body>
  72. </html>

复合选择器

交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3.。。
注意：交集选择器中如果有元素选择器，必须使用元素选择器开头

选择器分组：
作用：同时选择多个选择器的元素
语法：选择器1，选择器2，选择器3，选择器n{}

  1.         #b1,p1,h1,span,div.red{}
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /*
  10.             将class为red的元素设置为红色（字体）
  11.         */
  12.         .red{
  13.             color: red;
  14.         }
  15.        /* 将class为red的div字体大小设置为30px*/
  16.        /*交集选择器
  17.         作用：选中同时复合多个条件的元素
  18.         语法：选择器1选择器2选择器3.。。
  19.         注意：交集选择器中如果有元素选择器，必须使用元素选择器开头
  20.        */
  21.        div.red{
  22.            font-size: 30px;
  23.        }
  24.        .a.b.c{
  25.            color: blue;
  26.        }
  27.        /*
  28.         选择器分组：
  29.             作用：同时选择多个选择器的元素
  30.             语法：选择器1，选择器2，选择器3，选择器n{}
  32.             #b1,p1,h1,span,div.red{}
  33.        */
  34.        h1,span{
  35.            color: green;
  36.        }
  38.     </style>
  39. </head>
  40. <body>
  41.     <div class="red">我是div</div>
  43.     <p class="red">我是p标题</p>
  44.     <div class="red2 a b c">我是div</div>
  45.     <h1>h1</h1>
  46.     <span>span</span>
  47. </body>
  48. </html>

关系选择器

父元素
直接包含子元素的的元素叫做父元素
子元素
直接被父元素包含的元素是子元素
祖先元素
直接或间接包含后代元素的元素叫做祖先元素
一个元素的父元素也是它的祖先元素
后代元素
直接或间接被祖先元素包含的元素叫做后代元素
子元素也是后代元素
兄弟元素
拥有相同父元素的元素是兄弟元素

子元素选择器
作用：选中指定元素的指定子元素
语法：父元素>子元素

  1.          后代元素选择器
  2.              作用：选中指定元素内的指定后代元素
  3.              语法：祖先 后代

选择下一个兄弟
语法：前一个 + 下一个
选择下边所有的兄弟
语法：兄 ~ 弟 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /*
  10.             子元素选择器
  11.                 作用：选中指定元素的指定子元素
  12.                 语法：父元素>子元素
  13.         */
  14.         /*div.box>span{
  15.             color: orange;
  16.             
  17.         }
  18.         */
  19.         /*
  20.             后代元素选择器
  21.                 作用：选中指定元素内的指定后代元素
  22.                 语法：祖先 后代
  24.         */
  25.        /* div span{
  26.             color: skyblue;
  27.         }
  28.         */
  29.        /* div > p > span{
  30.             color: blueviolet;
  31.         }
  32.         */
  33.         /*
  34.         选择下一个兄弟
  35.             语法：前一个 + 下一个
  36.         选择下边所有的兄弟
  37.             语法：兄 ~ 弟
  38.         */
  39.         
  40.         /*p + span{
  41.             color: red  ;
  42.         }
  43.         */
  44.         p ~ span{
  45.             color: red;
  46.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <!--
  52.         父元素
  53.             直接包含子元素的的元素叫做父元素
  54.         子元素
  55.             直接被父元素包含的元素是子元素
  56.         祖先元素
  57.                 直接或间接包含后代元素的元素叫做祖先元素
  58.                 一个元素的父元素也是它的祖先元素
  59.         后代元素
  60.                 直接或间接被祖先元素包含的元素叫做后代元素
  61.                 子元素也是后代元素
  62.         兄弟元素
  63.                 拥有相同父元素的元素是兄弟元素
  64.     -->
  66.     <div class="box">
  67.         我是div
  68.         <p>我是div中的p元素
  69.             <span>
  70.                     我是p元素中的span元素
  71.             </span>
  72.         </p>
  73.         <div></div>
  74.         <span>
  75.                 我是div中的span元素
  76.         </span>
  77.         <span>
  78.             我是div中的span元素
  79.     </span>
  80.     <span>
  81.         我是div中的span元素
  82. </span>
  83.         
  84.     </div>
  85.     <div>
  86.         <span>
  87.             我是div中的span元素
  88.         </span>
  89.     </div>
  90. </body>
  91. </html>

属性选择器

[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性值^=属性值] 选择属性值以指定值开头的元素
[属性值$=属性值] 选择属性值以指定元素值结尾的元素
[属性值*=属性值] 选择属性值中含有某值的元素的元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /*
  10.             [属性名] 选择含有指定属性的元素
  11.             [属性名=属性值] 选择含有指定属性和属性值的元素
  12.             [属性值^=属性值] 选择属性值以指定值开头的元素
  13.             [属性值$=属性值] 选择属性值以指定元素值结尾的元素
  14.             [属性值*=属性值] 选择属性值中含有某值的元素的元素
  15.         */
  16.         p[title*=abc]{
  17.             color: rgb(231, 158, 21);
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     
  23.     <p title="abc">少小离家老大回</p>
  24.     <p title="abcdef">乡音无改鬓毛催</p>
  25.     <p title="helloabc">儿童相见不相识</p>
  26.     <p>笑问客从哪里来</p>
  27.     <p>落霞与孤鹜齐飞</p>
  28.     <p>秋水共长天一色</p>
  29. </body>
  30. </html>

伪类选择器

伪类（不存在的类，特殊的类）
伪类用来描述一个元素的特殊状态
比如：第一个子元素被点击的元素。鼠标移入元素。。。
伪类一般情况下都是使用：开头
：first-child 表示第一个元素
last-child 最后一个元素
nth-child（) 选中第n个子元素
特殊值：n
n 第n个，n的范围0到正无穷
2n 或even 表示选中偶数位的元素
2n+1或odd 表示选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序

  1.                     ：first-of-type
  2.                      :last-of-type
  3.                      :nth-last-of-type(
  4.                  这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
  5.                  
  6.                          not（）否定伪类
  7.                              将符合条件的元素从选择器中去除
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /*
  10.             将ul里的第一个li设置为红色
  11.         */
  12.         /*
  13.             伪类（不存在的类，特殊的类）
  14.                 伪类用来描述一个元素的特殊状态
  15.                     比如：第一个子元素被点击的元素。鼠标移入元素。。。
  16.                 伪类一般情况下都是使用：开头
  17.                     ：first-child 表示第一个元素
  18.                         last-child  最后一个元素
  19.                         nth-child（) 选中第n个子元素
  20.                             特殊值：n
  21.                             n 第n个，n的范围0到正无穷
  22.                             2n 或even 表示选中偶数位的元素
  23.                             2n+1或odd 表示选中奇数位的元素
  24.                         以上这些伪类都是根据所有的子元素进行排序
  26.                         ：first-of-type
  27.                         :last-of-type
  28.                         :nth-last-of-type(
  29.                             这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
  30.                     
  31.                             not（）否定伪类
  32.                                 将符合条件的元素从选择器中去除
  33.                         )
  34.         */
  35.        /* ul>li:first-child{
  36.             color: red;
  37.         }
  38.         */
  39.         /*ul>li:last-child{
  40.             color: red;
  41.         }
  42.         */
  43.         /*ul>li:first-of-type{
  44.             color: red;
  45.         }*/
  46.         ul>li:not(:nth-of-type(2)){
  47.             color: red;
  48.         }
  49.         
  50.     </style>
  51. </head>
  52. <body>
  53.     <ul>
  54.         <span>ooo</span>
  55.         <li>第一个</li>
  56.         <li>第二个</li>
  57.         <li>第三个</li>
  58.         <li>第四个</li>
  59.         <li>第五个</li>
  60.     </ul>
  61. </body>
  62. </html>

元素的伪类

:link用来表示没访问过的链接（正常的链接）

visited用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改链接的颜色

:hover 用来表示鼠标移入的状态

:active 用来表示鼠标点击

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /*
  10.             :link用来表示没访问过的链接（正常的链接）
  12.         */
  13.         a:link{
  14.             color: red;
  15.         }
  16.         /*
  17.             visited用来表示访问过的链接
  18.             由于隐私的原因，所以visited这个伪类只能修改链接的颜色
  19.         */
  20.         a:visited{
  21.             color: orange;
  22.         }
  23.         /*
  24.             :hover 用来表示鼠标移入的状态
  25.         */
  26.         a:hover{
  27.             color: aqua;
  28.             font-size: 50px;
  29.         }
  30.         /*
  31.             :active 用来表示鼠标点击
  32.         */
  33.         a:active{
  34.             color: yellowgreen;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <a href="http://www.baidu.com">访问过的链接</a>
  40.     <br><br>
  41.     <a href="http://www.baidu1234">没访问过的链接</a>
  43. </body>
  44. </html>

伪元素选择器

伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素的使用：：开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
before和after必须结合content属性来使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         p{
  10.             font-size: 20px;
  11.         }
  12.         /*
  13.             伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
  14.             伪元素的使用：：开头
  15.                 ::first-letter 表示第一个字母
  16.                 ::first-line 表示第一行
  17.                 ::selection 表示选中的内容
  18.                 ::before 元素的开始
  19.                 ::after 元素的最后
  20.                     before和after必须结合content属性来使用
  21.         */
  22.         p::first-letter{
  23.             font-size: 50px;
  24.         }
  25.         p::first-line{
  26.             background-color: yellow;
  27.         }
  28.         p::selection{
  29.             background-color: greenyellow;
  30.         }
  31.         div::before{
  32.            content: 'abc';
  33.            color: red;
  34.         }
  35.         div::after{
  36.             content: 'hhhh';
  37.             color: rgb(100, 19, 192);
  38.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <div>ahxh</div>
  44.     <p>
  45.         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque, aliquid optio! Maxime doloremque dolorem qui, fugit iste earum amet natus vitae! Dolorem sapiente a quibusdam eveniet, sunt laborum harum explicabo!
  46.     </p>
  47. </body>
  48. </html>

结语

冲冲冲

标签： html 前端 html5
本文转载自: https://blog.csdn.net/qq_61430041/article/details/122943116
版权归原作者 超级小何 所有， 如有侵权，请联系我们删除。
登录后发布评论

“HTML笔记4”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？