AcwingWeb应用课学习笔记

y总Web课链接：

VSCode自动格式化

选中Format On Save不起作用
在设置中搜索default formatter，修改成Prettier-Code formatter

标签

文本标签虽然很多，但大部分可看成是预定好样式的<div>和<span>。（div也是由span扩展过来的）。块元素<div>换行，行内元素<span>不换行。大部分标签会把回车过滤掉。
换行是div的后代，不换行是span的后代。

文本

<del>删除线
<i>斜体
<b>加粗
<strong>加粗
<ins>下划线
<mark>下划线

页面标签的title和logo

<title>Web应用课作业</title>
<link rel="icon" href="/images/logo.png" />

meta标签

HTML 元素表示那些不能由其它 HTML 元相关（meta-related）元素（<base>、<link>, <script>、<style> 或 <title>）之一表示的任何元数据信息。

keywords，告诉搜索引擎网页与 “acwing”、“web” 和 “html” 这几个关键字相关联。

<meta name="keywords" content="acwing,web,html" />

desceiption，

p标签

HTML<p>元素（或者说 HTML 段落元素）表示文本的一个段落，过滤回车。

pre标签

HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。

img标签

多个图片排列，如果图片太大一行存不下，会换行。<img src="" alt="">

audio标签

HTML 元素用于在文档中嵌入音频内容。alt 属性包含一条对图像的文本描述，如果由于某种原因无法加载图像，普通浏览器也会在页面上显示 alt 属性中的备用文本。

<audio controls>
    <source src="/audios/sound1" type="audio/mpeg"/>
    <source src="/audios/sound2" type="audio/mpeg"/>
</audio>

这个例子包含了多个 元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素；如果不行，那就退而求其次去加载第二个。

video

autoplay：一个布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。
controls：如果存在该属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量、拖动进度、暂停或恢复播放。

超链接

点击链接打开新标签页面时加入属性：target=“_blank”。在超链接中加入图片

    <a href="https://www.acwing.com" target="blank">
      <img src="/images/logo.png" alt="logo" width="50" />
    </a>

表单

点击button会将form里面的所有元素提交。
当 label 元素的 for 属性与某个 input 元素的 id 属性值相同时，点击 label 元素就会触发关联的 input 元素的行为，比如聚焦到该输入框或者勾选复选框

图片

      <figure>
        <img src="/images/logo.png" width="100" />
        <figcaption>logo</figcaption>
      </figure>

选择器

CSS层叠性（优先级）

CSS层叠性决定了多个样式规则应用时的优先级顺序。以下是几个基本原则：

来源顺序（Source Order）：

当两个选择器的特异性相同，并且都应用到同一个元素上时，后定义的样式规则会覆盖先定义的规则。这是因为CSS遵循“后来者居上”的原则。

<style>
    .class1 {
        color: red;
    }
    .class2 {
        color: blue;
    }
</style>
<div class="class1 class2">Hello, World!</div>

在这个例子中，文本会显示为蓝色，因为 .class2 的样式规则定义在 .class1 之后。

特异性（Specificity）：

特异性是由选择器的类型决定的，特异性越高的选择器优先级越高。优先级从高到低如下：

1. 内联样式（直接在元素上的style属性）有最高的特异性。
2. ID选择器的特异性较高。
3. 类选择器和伪类的特异性中等。
4. 元素选择器和伪元素的特异性最低。

!important

权重大小，越具体的选择器权重越大：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
!important 是一个特殊声明，用来覆盖任何其他优先级的样式规则。无论选择器的优先级如何，只要一个规则带有 !important，它的优先级将最高。

.container {
    color: green !important;
}

行内样式表

直接定义在标签的style属性中。

    <img width="300" src="/static/images/mountain.jpg" alt="" />
    <!-- 在html5中width属性默认为px故可不加px -->
    <img src="/static/images/mountain.jpg" alt="" style="width: 300px" />

内部样式表

选择器

定义在style标签中，通过选择器影响对应的标签。
作用范围：可以对同一个页面中的多个元素产生影响

标签选择器：

通过 HTML 元素的名称来选择元素

<style type="text/css">
div {
    width: 200px;
    height: 200px;
    background-color: gray;
}
</style>

同时定义div和p标签

div,p {
  background-color: lightblue;
}

类选择器

class里面可以存若干个可以用空格隔开的类名，同一个标签可以有多个class，多个标签可以用重复的class。
通过 HTML 元素的 class 属性值来选择元素。类选择器以点号 . 开头，后面跟着 class 的名称。

      p {
        width: 50px;
        height: 50px;
        background-color: lightgreen;
      }
      .blue-p {
        background-color: lightblue;
      }
      .big {
        width: 70px;
        height: 70px;
      }
    <p class="blue-p">1</p>
    <p>2</p>
    <p class="blue-p big">3</p>
    <p>4</p>

ID选择器

选择ID为rect-1的标签
同一个标签只会具有一个ID。

#rect-1 {
    width: 200px;
    height: 200px;
    background-color: gray;
}

伪类选择器

伪类用于定义元素的特殊状态。
链接伪类选择器：

• :link：链接访问前的样式
• :visited：链接访问后的样式
• :hover：鼠标悬停时的样式
• :active：鼠标点击后长按时的样式
• :focus：聚焦后的样式

位置伪类选择器：

:nth-child(n)：选择是其父标签第n个子元素的所有元素。

p:nth-child(2) {
  background-color: lightblue;
}

当你使用 p:nth-child(2) 时，它会选择其父元素的第二个子元素，如果第二个子元素是一个 p 标签，那么它会应用样式，如果不是，则不会。

目标伪类选择器：

:target：当url指向该元素时生效，即当用户点击一个链接，并且该链接的哈希部分与某个元素的ID相匹配时，:target 伪类选择器就会应用到该元素上（该元素会被切换到页面最顶端）。

复合选择器

由两个及以上基础选择器组合而成的选择器。
element1, element2：同时选择元素element1和元素element2。
element.class：选则包含某类的element元素。
选择器

div.big.real {
  transform: scale(1.2);
}

或者用id

<p id="myp" class="big">p 2</p>
#myp.big {
}

用于选择同时具有 big 和 real 类的所有

元素
element1 + element2：选择紧跟element1的element2元素。
element1 element2：选择element1内的所有element2元素。（element1是祖先结点）
element1 > element2：选择 父标签是element1的所有element2元素。

通配符选择器

*：选择所有标签

* {
  font-size: 24px;
}

[attribute]：选择具有某个属性的所有标签
index.html

<input type="text" required name="" />
<input type="text" name="" id="" />

css代码

input[id] {
  background-color: lightblue;
}

css代码

input[id] {
  background-color: lightblue;
}

[attribute=value]：选择attribute值为value的所有标签

外部样式表

定义在css样式文件中，通过选择器影响对应的标签。可以用link标签引入某些页面。
作用范围：可以对多个页面产生影响

<link rel="stylesheet" href="/static/css/style.css" type="text/css" />

文本

单位	描述
px	设备上的像素点
%	相对于父元素的百分比
em	相对于当前元素的字体大小
rem	相对于根元素的字体大小
vw	相对于视窗宽度的百分比
vh	相对于视窗高度的百分比
em例子
原来元素字体大小均为16px

    <div style="font-size: 2em">
      <!-- 字体大小32px -->
      第一层
      <div style="font-size: 2em">
        <!-- 第二层的默认会继承第一层的32px，2em的话字体大小64px -->
        第二层
        <div style="font-size: 2em">
          <!-- 字体大小128px -->
          第三层
        </div>
      </div>
    </div>

text-shadow

.mydiv > p:nth-child(1) {
  text-shadow: -3px -3px 2px grey, 5px 5px 2px red;
  /* CSS里面所有并列的项都是用,隔开的 */
}

输出

1. -3px -3px 2px grey：
2. -3px：阴影在 X 方向的偏移量（向左移动 3 像素）。
3. -3px：阴影在 Y 方向的偏移量（向上移动 3 像素）。
4. 2px：阴影的模糊半径（阴影稍微模糊）。
5. grey：阴影的颜色为灰色。

背景

background-position

background-position: 50px;

只写一维，第二维会默认居中。

border-style

一个值

一个值：所有四个边使用同样的边框样式。

border-style: solid;  /* 上、右、下、左都是实线 */

两个值

两个值：第一个值应用于上下边框，第二个值应用于左右边框。

border-style: solid dotted;  /* 上、下是实线，右、左是点线 */

三个值

第一个值应用于上边框，第二个值应用于左右边框，第三个值应用于下边框。

border-style: solid dotted dashed;  /* 上是实线，右和左是点线，下是虚线 */

四个值：分别应用于上、右、下、左边框。

border-style: solid dotted dashed double;  /* 上是实线，右是点线，下是虚线，左是双线 */

元素展示格式

1. block：(块状标签<div>)
   • 独占一行
   • width、height、margin、padding均可控制
   • width默认100%。
2. inline：(行内标签<span>)
   • 可以共占一行
   • width与height无效，水平方向的margin与padding有效，竖直方向的margin与padding无效
   • width默认为本身内容宽度
3. inline-block（行内的块状标签<img>）
   • 可以共占一行
   • width、height、margin、padding均可控制
   • width默认为本身内容宽度

<div>转化为<span>：设置display属性为inline
<span>换成<div>：设置display属性为block

margin

属性为给定元素设置所有四个（上下左右）方向的外边距属性。（类似于border-style）

一个值

一个值应用到四个方向

两个值

第一个上下，第二个左右

三个值

第一个上，第二个左右，第三个下

四个值

上右下左

外边距折叠（只会发生在垂直方向（上下方向））

当一个元素的 margin-bottom 与另一个紧邻元素的 margin-top 相遇时，会发生外边距折叠（margin collapsing）。这种情况会导致相邻元素的外边距合并为一个单独的外边距，其大小是两个外边距中的较大者。

元素大小

width = content + padding + border
总宽度 = 内容宽度 + 左右内边距 + 左右边框
总高度 = 内容高度 + 上下内边距 + 上下边框

盒子模型

content-box：是默认值，设置border和padding均会增加元素的宽高。
border-box：设置border和padding不会改变元素的宽高，而是挤占内容区域。

位置

• 定位元素：是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。position默认为static，static是按照流式渲染。
• 相对定位元素：是计算后位置属性为 relative 的元素。使元素在文档流中的位置相对于其正常位置进行调整。该元素依然占据它在普通文档流中的位置，但可以通过设置 top、right、bottom、left 等属性对其进行偏移。这种偏移不会影响其他元素的布局，其他元素仍然会按照该元素未偏移前的位置进行布局。
• 绝对定位元素：是计算后位置属性为 absolute 或 fixed 的元素。
• 粘性定位元素：是计算后位置属性为 sticky 的元素。