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):
特异性是由选择器的类型决定的,特异性越高的选择器优先级越高。优先级从高到低如下:
- 内联样式(直接在元素上的style属性)有最高的特异性。
- ID选择器的特异性较高。
- 类选择器和伪类的特异性中等。
- 元素选择器和伪元素的特异性最低。
!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);
}
将所有同时具有 big 和 real 类的
或者用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里面所有并列的项都是用,隔开的 */
}
输出
- -3px -3px 2px grey:
- -3px:阴影在 X 方向的偏移量(向左移动 3 像素)。
- -3px:阴影在 Y 方向的偏移量(向上移动 3 像素)。
- 2px:阴影的模糊半径(阴影稍微模糊)。
- 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; /* 上是实线,右是点线,下是虚线,左是双线 */
元素展示格式
- block:(块状标签
<div>
)- 独占一行
- width、height、margin、padding均可控制
- width默认100%。
- inline:(行内标签
<span>
)- 可以共占一行
- width与height无效,水平方向的margin与padding有效,竖直方向的margin与padding无效
- width默认为本身内容宽度
- 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 的元素。