html/css/js basic.md

最新推荐文章于 2024-10-03 09:00:00 发布

原创最新推荐文章于 2024-10-03 09:00:00 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

css 同时被 2 个专栏收录

4 篇文章

订阅专栏

html

2 篇文章

订阅专栏

本文介绍了网页开发的基本概念，包括字符编码、HTML头部元素的作用、不同类型的HTML元素及其布局方式，以及CSS选择器的详细使用方法。

字符编码

所有数据在计算机中存储时都是以二进制进行存储的，文字也不例外。存的时候转换为二进制，读的时候二进制转换为字符

字符集

编码和解码所采用的规则。比如让a对应1，b对应2这种。常见的字符集：ASCII , GB2312，UTF-8（开发时使用的字符集都是UTF-8）等

< head>头部

帮助浏览器或搜索引擎来解析网页

< meta>

< meta>标签用来设置网页的原数据（底层数据），元数据不是给用户看

charset：指定网页的字符集
name：指定的数据的名称
content：指定的数据的内容

// name中的keywords指的是搜索网站的关键字，也就是可以用content中的abc在浏览器中搜索的关键词
<meta name="keywords" content="abc">

// name中的description指的是这个网站的描述，对应的内容在content中。网站的描述会显示在搜索引擎的搜索结果中
<meta name="description" content="这是一个...的网站">


// 将页面重定向到另一个网站
// content 中的内容指的是3s之后跳转到另一个网站
<meta http-equiv="refresh" content="3; url=https://www.baidu.com/">

// title标签的内容是作为搜索结果的超链接上的文字显示
<title> ddddd </title>

块元素
在网页中一般通过块元素来进行布局
行内元素
- 行内元素主要用来包裹文字。一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
- 块元素中基本什么都可以放
- P元素中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正：
- 标签写在了根元素的外部
- p元素中嵌套了块元素
- 根元素中出现了除head和body以外的子元素
超链接
- 将超链接的href属性设置成#之后点击可以回到顶部
- 可以跳转到页面的指定位置，只需将href的属性值设置成 #目标元素的id属性

<a href="#" Top>
// 跳转到id为bottom的内容处
<a href="#bottom" Top>

内敛框架ifream

用于向当前页面中引入一个其他页面

<iframe width="800" src="https://www.qq.com"></iframe>

选择器

常用选择器

元素选择器
类选择器
id选择器

复合选择器

交集选择器

选中同时符合多个条件的元素，如下面代码中的div和red
⚠️ 交集选择器中如果有元素选择器，必须以元素选择器开头（必须是div.red而不是red.div）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .red{
    color: red;
  }
  div.red{
    font-size: 30px;
  }
  </style>
</head>
<body>
  <div class="red">div</div>
  <p class="red">p</p>
</body>
</html>

并集选择器

同时选择多个选择器对应的元素

h1, div{
color: red;
}

#red, p{
color: red;
}

关系选择器

子元素选择器

选中指定父元素的指定子元素

div > p{
color: red;
}

后代元素选择器

选中指定元素内的指定后代元素

div span{
color: red;
}

相比而言，后代元素选择器的范围比子元素选择器大

兄弟元素选择器

// 选择p标签后面的那个span
div + span{
color: red;
}

// 选择p标签后面的所有span
div ～ span{
color: red;
}

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  div[title]{
    color: red;
  }
  p[title="dddd"]{
    color: aquamarine;
    font-size: 30px;
  }
  h3[title ^= "hhhh"]{
    /* 选择以指定值开头的属性，这里包括hhhh和hhhhii */
    color: coral;
  }
  h5[title $= "jjjj"]{
    /* 选择以指定值结尾的属性，这里包括jjjj和kkjjjj */
    color: crimson;
  }
  h2[title *= "mmmm"]{
    color: teal;
  }
  </style>
</head>
<body>
  <div title="aaaa">div</div>
  <div title="bbbb">div</div>
  <div title="cccc">div</div>
  <p title="dddd">p</p>
  <p title="eeee">p</p>
  <p title="ffff">p</p>
  <h3 title="gggg">span</h3>
  <h3 title="hhhh">span</h3>
  <h3 title="hhhhii">span</h3>
  <h5 title="jjjj">span</h5>
  <h5 title="kkjjjj">span</h5>
  <h5 title="llll">span</h5>
  <h2 title="mmmm">span</h2>
  <h2 title="nmmmmn">span</h2>
  <h2 title="oooo">span</h2>
</body>
</html>

伪类选择器

伪类，就是不存在的类或者特殊的类，用来描述一个元素的特殊状态（如：第一个子元素，被点击的元素，鼠标移入的元素），伪类一般都使用:开头

ul>li:first-child {
  color: aquamarine;
  }
  ul>li:first-child {
    color: aquamarine;
  }

  /* 选中偶数位 */
  ul>li:nth-child(2n){
    color: tomato;
  }
  /* 选中偶数位 */
  ul>li:nth-child(even){
    color: tomato;
  }

  /* 选中奇数位 */
  ul>li:nth-child(2n+1){
    color: tomato;
  }
  /* 选中奇数位 */
  ul>li:nth-child(odd){
    color: tomato;
  }

以上所有的伪类都是根据所有的元素进行排序的

当然还有下面的这些，是在同类型元素中进行排序的：

first-of-type
last-of-type
nth-of-type
…

:not

// 选中ul下面所有的li，除了第三个
ul>li:not(:nth-child(3)) {
 color: red;
}

超链接的伪类

超链接的状态：

访问过的
没访问过的

/* link代表没访问过的链接 */
a:link{
   color: burlywood;
 }
 /* visited代表访问过的链接 ，由于保护隐私的原因，visited这个伪类只能设置链接的颜色，大小等其他的都不能设置*/
 a:visited{
   color: violet;
 }
 /* 鼠标移入的状态 */
 a:hover{
   color: teal;
 }
 /* 鼠标点击的状态 */
 a:active{
   color: steelblue;
 }

伪元素选择器

伪元素表示一些页面中特殊的并不真实的存在的元素（特殊的位置）

使用::开头

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 表示第一个字母 */
    p::first-letter{
      font-size: 30px;
    }
    /* 表示第一行 */
    p::first-line{
      background-color: thistle;
    }
    /* 表示选中的元素 */
    p::selection{
      background-color: teal;
    }

    /* 通过 ::before 和 ::after添加的内容在页面是不能用鼠标来选中的，因为这些是通过css添加的*/
    /* 必须结合content来使用 */
    /* 元素的开始 */
    div::before{
      content: "abc";
      color: aquamarine;
    }
    /* 元素的结束 */
    div::after{
      content: "def";
      color: cadetblue;
    }
  </style>
</head>

<body>
  <div>
      Hooray! It's snowing
  </div>
  <p>
      Hooray! It's snowing! It's time to make a snowman.James runs out. He makes a big pile of snow. He puts a big snowball on top. He adds a scarf and a hat. He adds an orange for the nose. He adds coal for the eyes and buttons.In the evening, James opens the door. What does he see? The snowman is moving! James invites him in. The snowman has never been inside a house. He says hello to the cat. He plays with paper towels.A moment later, the snowman takes James's hand and goes out.They go up, up, up into the air! They are flying! What a wonderful night!The next morning, James jumps out of bed. He runs to the door.He wants to thank the snowman. But he's gone
  </p>
</body>

</html>