HTML重学 & HTML5笔记

HTML标签

HTML声明类型

<!DOCTYPE html>
<html>

</html>

行内标签
- <a></a>: a (Anchor)
  - href属性: 指向跳转的目的地
  - target属性：_blank 表示在新窗口打开
段落标签
- <ul></ul>:
- <ol></ol>:
- input : <input type="text">

css基础

HTML 元素都是以矩形为基础, 每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制： - 内边距 padding、 - 外边距 margin 、 - 边框 border。

css中的绝对单位与相对单位像素是一个长度单位，它告诉浏览器应该如何调整元素的大小和位置。其实除了 px，CSS 也有其他单位供我们使用。

单位长度的类型可以分成 2 种：相对和绝对。绝对单位与长度的物理单位相关。例如，in 和 mm 分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。

相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。比如 em 的大小基于元素字体的字体大小。如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。

Note: 有些单位长度选项是相对视窗大小来改变值的，这种设定符合响应式网页设计的原则。

css优先等级

内联样式 > id > class

同个等级的，后面设置的优先应用；
添加关键词 !important 可以最优先展示

css颜色设置

属性： color background-color

值：
- 关键字： blue， yellow， white 等
- HEX颜色码（hex code）： #00FF00 或者简写 #0F0
- rgb： rgb(255,0,0)
- 色相 HSL(纯色，饱和度，亮度): 蓝色： hsl(240,100%,50%)
常见颜色hex：
- 橙色 orange：
- 深青色：一般白字标题的背景色
- 蓝绿色 cyan: hsl(180,100%,50%)
- 品红： hsl(300,100%,50%)
- 浅灰色（#D3D3D3）
- 深灰色（#636363）
- 黄色（#FFFF33）
- 绿色（#33FF33）
- 深蓝色（#003366）

css 中使用变量

在变量名前添加两个连字符号，并赋值即可。

--penguin-skin: black;
.penguin-top {
    top: 10%;
    left: 25%;
    background: var(--penguin-skin, gray); // gray可以不写，这里是赋予默认值 
    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }

降级兼容

<style>
  :root {
    --red-color: red;
  }
  .red-box {
    background: red; /*追加兼容的代码*/
    background: var(--red-color);
    height: 200px;
    width:200px;
  }
</style>

继承 CSS 变量当创建一个变量时，变量会在创建变量的选择器里可用。同时，在这个选择器的后代选择器里也是可用的。这是因为 CSS 变量是可继承的，和普通的属性一样。

CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承。

:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。我们在 :root 里创建变量在全局都可用，即在任何选择器里都生效。

<style>
:root {
    /* 只修改这一行下面的代码 */
    --penguin-belly: pink;
    /* 只修改这一行上面的代码 */
  }

  body {
    background: var(--penguin-belly, #c6faf1);
  }

  .penguin {
    --penguin-skin: gray;
    --penguin-beak: orange;
    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
  }
</style>

不同宽度显示不同样式

<style>
:root {
    --penguin-size: 300px;
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
  }

  @media (max-width: 350px) { /* 当显示宽度小于350时应用这个样式 */
    :root {
      /* 只修改这一行下面的代码 */
      --penguin-size: 200px;
      --penguin-skin: black;
      /* 只修改这一行上面的代码 */
    }
  }
</style>

文本控制

<u>: 添加下划线，等同属性 font-decoration: underline;
<s>: 添加删除线，等同属性 font-decoration: line-through;
<em>: 添加斜体，等同属性 font-style: italic;

box-shadow 属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。box-shadow 属性按顺序采用以下值：
- offset-x （阴影的水平偏移量），
- offset-y （阴影的垂直偏移量），
- blur-radius (可选)
- spread-radius （可选）
- color
- 参考：
  - 文档： box-shadow - CSS（层叠样式表） | MDN
  - 工具： Box-shadow generator - CSS（层叠样式表） | MDN
opacity 属性用来设置元素的透明度, 属性值的设置比如：
- 属性值为 1 代表完全不透明。
- 属性值为 0.5 代表半透明。
- 属性值为 0 代表完全透明。
text-transform 属性可以改变英文字母的大小写。使用这个属性时，我们无需改变 HTML 元素中的文本也可以统一页面里英文的显示。text-transform属性有：
- lowercase: 结果如：“transform me”
- uppercase: 结果如：“TRANSFORM ME”
- capitalize: 结果如：“Transform Me”
- initial: 使用默认值
- inherit: 使用父元素的 text-transform 值。
- none: Default:不改变文字。
font-size: 15px; 设置文本字体大小
font-weight: 100; 设置文本字体的粗细
line-height: 16px; 属性来设置行间的距离
position 更改元素的相对位置
- 在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。
- 当元素的定位设置为 relative 时，它允许你通过 CSS 指定该元素在当前文档流页面下的相对偏移量。 CSS 里控制各个方向偏移量的属性是 left、right、top 和 bottom。它们代表从原来位置向远离该方向偏移指定的像素、百分比或者 em。下面的例子展示了段落向上偏移 10px： p {position: relative; bottom: 10px;}
- 属性：
  - relative:
  - absolute: 相对于其包含块定位. 和 relative 定位不一样，绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它。这样我们就可以用 CSS 的 top、bottom、left、right 属性来调整元素的位置。
  - fixed: 一种特殊的绝对（absolute）定位，将元素相对于浏览器窗口定位。类似于绝对位置，它与 CSS 偏移属性一起使用，并且也会将元素从当前的文档流里面移除。其它元素会忽略它的存在，这样也许需要调整其他位置的布局。但 fixed 和 absolute 的最明显的区别在于，前者定位的元素不会随着屏幕滚动而移动。
float:
z-index：当一些元素在位置上重叠时（例如，使用 position: absolute | relative | fixed | sticky 时），在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。你可以使用 z-index 属性指定元素的堆叠次序。 z-index 的取值是整数，数值大的元素会叠放到数值小的元素上面。
margin: 块级元素水平居中 margin: auto;
background 设置背景
- background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...); css渐变。第一个参数指定了颜色过渡的方向——它的值是角度，90deg 表示垂直渐变（从左到右），45deg 表示沿对角线渐变（从左下方到右上方）。其他参数指定了渐变颜色的顺序：background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
- background: repeating-linear-gradient(45deg,yellow 0px,yellow 40px,black 40px,black 80px);} : 重复渐变，repeating-linear-gradient() 函数和 linear-gradient() 很像，主要区别是前者会重复指定的渐变。 repeating-linear-gradient() 有很多参数，为了便于理解，本关只用到角度值和色标。
- url: ("link"); : 设置图片
transform 属性
- scale() : SS 属性 transform 里面的 scale() 函数可以用来改变元素的显示比例。这个例子把页面的段落元素放大到了原来的 2 倍: transform: scale(2);
  - 设置当鼠标移过时放大1.1 倍： div:hover {transform: scale(1.1);}
- skewX() : 它使选择的元素沿着 X 轴（横向）倾斜指定的角度 : transform: skewX(-32deg);
- skewY() : 使指定元素沿 Y 轴（垂直方向）翻转指定角度:

关键帧和动画

如果要给元素添加动画，你需要了解 animation 属性以及 @keyframes 规则。 animation 属性控制动画的外观，@keyframes 规则控制动画中各阶段的变化。总共有 8 个 animation 属性。为了便于理解，本挑战中我们只会暂时涉及到两个最常用的属性。

animation-name 用来设置动画的名称，也就是我们稍后要在 @keyframes 里用到的名称。

animation-duration 设置动画所花费的时间。

@keyframes 可以通过设置特定时间点的行为来创建动画。为此，我们只需要给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则。如果用一部电影来做类比，那么 CSS 里面的 0% 关键帧就像是电影里面的开场镜头；100% 关键帧就像是电影里的片尾，就是那个之后会出现演职人员列表的片尾。在动画设定的时间内，CSS 会根据关键帧的规则来给元素添加动画效果。 100% 位置的 CSS 属性就是元素最后的样子，相当于电影里的演职员表或者鸣谢镜头。然后CSS 应用魔法来在给定的时间内转换元素以使其脱离场景。下面举例说明 @keyframes 和动画属性的用法：

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

id 为 anim 的元素，我们在代码中将它的 animation-name 设置为 colorful，同时设置 animation-duration 为 3 秒。然后我们把 @keyframes 规则添加到名为 colorful 的动画属性上。在动画开始时（0%）的背景颜色为蓝色，在动画结束时（100%）的背景颜色为黄色。注意我们不只可以设置开始和结束，而是从 0% 到 100% 间的任意位置都可以设置。

给 id 为 rect 的元素添加动画，设置其 animation-name 为 rainbow，设置其 animation-duration 为 4 秒。然后声明 @keyframes 规则，设置动画开始时（0%）的 background-color 为蓝色，动画中间时（50%）为绿色，动画结束时（100%）为为黄色。

animation-fill-mode: forwards; : 指定了在动画结束时元素的样式, forwards 指的是一直存在
animation-name: bounce; ：指定动画名称，然后在 @keyframes bounce {代码}设置动画内容
animation-duration: 2s; ：指定动画执行时长
animation-iteration-count: infinite; ：指定动画运行次数，infinite只无限运行
animation-timing-function: [linear | ease-out]; : 定义动画的速度曲线
- linear对应：
- ease-out对应： cubic-bezier(0, 0, 0.58, 1)
- 模拟杂耍球运动：cubic-bezier(0.3, 0.4, 0.5, 1.6);
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); : 贝塞尔曲线（Bezier curves）来更细致地控制动画的速度曲线, 这里的例子就是 CSS 贝塞尔曲线

CSS网格

CSS 网格是一个较新的标准，用于构建复杂的响应布局。它通过把 HTML 元素转换为具有行和列的网格容器，以便将子元素放置在所需要的位置。

通过将属性 display 的值设为 grid，HTML 元素就可以变为网格容器。但是，简单地添加一个网格元素并不会有任何明显的效果。你还需要明确网格的结构。

grid-template-columns: 50px 50px; 添加列，指定没一列的宽度有多少，堆满2个后又重新起
grid-template-rows: 50px 50px; ：请给网格添加两行，使每行高度均为 50px。
网格单位:
- fr：设置列或行占剩余空间的比例，
- auto：设置列宽或行高自动等于它的内容的宽度或高度，
- %：将列或行调整为它的容器宽度或高度的百分比，
grid-column-gap: 10px; 创建多列之间的间距
grid-row-gap : 创建多行之间的间距
grid-gap: ; : 为网格添加间距, 如果 grid-gap 只有一个值，那么这个值表示行与行之间、列与列之间的间距均为这个值。如果有两个值，那么第一个值表示行间距，第二个值表示列间距
grid-column 来控制空间大小。
grid-row 来控制空间大小。
justify-self 水平对齐项目
- stretch: 默认值
- start：使内容在单元格左侧对齐
- center：使内容在单元格居中对齐，
- end：使内容在单元格右侧对齐，
align-self 垂直对齐项目
- 属性同justify-self
justify-items 水平对齐所有项目
- 属性同justify-self
align-items 垂直对齐所有项目
grid-template-areas: 将网格划分为区域模板.将网格中的一些单元格组合成一个区域（area），并为该区域指定一个自定义名称
```
grid-template-areas:
  "header header header"
  "advert content content"
  "advert footer footer";
```
- 上面的代码将网格单元格分成四个区域：header、advert、content 和 footer。每个单词代表一个单元格，每对引号代表一行。
grid-area 属性将项目放置在网格区域中.在为网格添加区域模板后，可以通过引用你所定义的区域的名称，将元素放入相应的区域。 grid-area: header;
grid-area。如果网格中没有定义区域模板，你也可以像这样为它添加一个模板 grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
使用 repeat 函数减少重复 grid-template-rows: repeat(3, 50px); = grid-template-rows: 50px 50px 50px; grid-template-columns: repeat(2, 1fr 50px) 20px; = grid-template-columns: 1fr 50px 1fr 50px 20px;
- 使用 minmax 函数限制项目大小: grid-template-columns: repeat(3, minmax(90px, 1fr));
- 使用 auto-fill 创建弹性布局 repeat(auto-fill, minmax(60px, 1fr));
- 使用 auto-fit 创建弹性布局: auto-fit 效果几乎和 auto-fill 一样。不同点仅在于，当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。 grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));

HTML5标签

新增标签

header 标题
main 主题
artical 文章内容
footer 底部内容
nav: 导航

audio 标签用于呈现音频内容或音频流，它也具有语义化特性

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg">
  <source src="audio/meow.ogg" type="audio/ogg">
</audio>

figure 标签以及与之相关的 figcaption 标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。这样通过语义化对内容进行分组并配以用于解释 figure 的文字，可以极大地提升内容的可访问性。
```
<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>
```

label： label 元素提高表单的可访问性

<label for="email">Email:</label>
<input type="text" id="email" name="email">

fieldset: 用来包裹单选按钮，提供更好的可访问性，一般用 legend搭配内容

<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>

time
- content last Wednesday, content

HTML标签#

css基础#

css优先等级#

css颜色设置#

css 中使用变量#

不同宽度显示不同样式#

文本控制#

#

关键帧和动画#

CSS网格#

HTML5标签#