这是我参与「第四届青训营」笔记创作活动的的第1天

开始标签结束标签<h1></h1>

省略结束标签<h1/>

src属性名，引号中是属性值

ps：大部分都是最基础的，MDN文档中可查

HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，如input,meta
属性值推荐用双引号包裹
某些属性可省略如required,readonly

dl中dt和dd并非一一对应，可多对一，一对多

多媒体

controls：一个布尔属性。
如果存在，它指定应显示音频/视频控件。
<controls><controls/>

输入

<input placeholder="请输入用户名">

<input type="range">

<input type="number" min="1" max="10">

<input type="data" min="2022-07-23">

<textarea>Hey</textarea>

引用

<blockquote cite=""></blockquote>

<q></q>

展示代码

<pre><code></code></pre>

pre保留换行

语义化

html中的元素、属性、属性值都有某些含义，开发者应遵循语义编写html

有序列表ol,无序列表ul
lang属性表示内容所使用的语言

CSS

css是什么？

用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

组成：选择器Selector，选择器Property,属性值value,声明Declaraction

在页面使用CSS

外链，嵌入，内联

选择器

通配选择器
标签选择器
id选择器
类选择器
属性选择器

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

链接的css

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

伪类选择器

组合 (Combinators)

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A > B	选中B，如果它是A的子元素	section > p
兄弟选择器	A ~ B	选中B，如果它在A后且和A同级	h2 ~ p
相邻选择器	A + B	选中B，如果它紧跟在A后面	h2 + p

颜色

1.rgb

2.hsl

Hue

色相(H)是色彩的基本属性, 如红色、黄色等; 取值范围是0-360。

Saturation

饱和度(S)是指色彩的鲜艳程度，越高约鲜艳；取值范围0-100%。

Lightness

亮度(L)指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。

alpha透明度（一般rgba）

字体 font-family

通用字体族

Serif衬线体
Sans-Serif无衬线体
Cursive手写体
Fantasy
Monospace等宽字体

font-family使用建议

字体列表最后写上通用字体族
英文字体放中文字体前

使用 Web Fonts

<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

font-size字体大小 font-style字体样式（italic斜体）font-weight粗细 line-height行高

font: style weight size/height family

text-align文字对齐： left center right justify

spacing

letter-spacing:字间距
word-spacing:词间距

text-indent缩进

text-decoration文字修饰： none underline line-through overline

white-space

normal
nowrap不换行
pre保留空格，换行
pre-wrap保留空格，保留换行
pre-line 保留空格，换行顶格

调试 CSS

右键点击页面，选择「检查」
使用快捷键
- ```
Ctrl+Shift+I (Windows)
```
- ```
Cmd+Opt+I (Mac)
```

前端HTML与CSS了解篇｜ 青训营笔记