freecodecamp 笔记 HTML&CSS
1.html
我们通过 html 来为网页添加文本内容
（1）声明 HTML 的文档类型
在文档的顶部，我们需要告诉浏览器网页所使用的 HTML 的版本。
通过
<!DOCTYPE ...>
来告诉浏览器页面上使用的 HTML 版本，
"..."
部分就是版本号。
<!DOCTYPE html>
对应的就是 HTML5。
所有的 HTML 代码都必须位于 html 标签中。 其中
<html>
位于
<!DOCTYPE html>
之后，
</html>
位于网页的结尾。
如下
<!DOCTYPE html>
<html>
</html>
html 的结构主要分为两大部分：
head
和
body
。 网页的描述应放入
head
标签， 网页的内容（向用户展示的）则应放入
body
标签。
比如
link
、
meta
、
title
和
style
都应放入
head
标签。
这是网页布局的一个例子：
<!DOCTYPE html>
<html>
<head>
<meta />
</head>
<body>
<div>
</div>
</body>
</html>
（2）元素
<h1>
元素作为主标题，
<h2>
元素作为副标题，大部分 HTML 元素都有开始和结束的标签
以 h1 元素为例，开始标签为
<h1>
,结束标签为
</h1>
,二者的区别为多了一个
/
HTML5 引入了很多更具描述性的 HTML 元素， 包括
main
、
header
、
footer
、
nav
、
video
、
article
、
section
等等。
这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。
main
元素让搜索引擎和开发者能很快地找到网页的主要内容。
在 HTML 中，注释的开始标签是
<!--
，结束标签是
-->
（3）给网站添加图片
我们使用
img
来为网站添加图片，其中
src
属性指向图片的地址，
img
元素没有结束标签
所有的 img 元素 必须 有 alt 属性。 alt 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。
注意： 如果图片是纯装饰性的，把 alt 的属性值设置为空是最佳实践。
理想情况下，alt 属性不应该包含特殊字符，除非有特殊需要。
例子：
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
(4)
a
元素
a
我们可以使用
a
元素来实现网页间的跳转，以及 网页内各个部分的跳转
a
需要一个
herf
属性来指向跳转的目的地，同时他应具有内容，如
<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
当使用
a
来创建内部链接时，我们需要将
herf
属性值设成一个
#
加上你想连接到的内部元素的
id
id
是描述网页元素属性的一个值，他的值在整个页面中唯一。
当用户点击了 Contacts 链接，页面就会跳转到网页的 Contacts 区域。
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
当用户点击 Contacts 链接，可以访问网页中带有 Contacts 标题元素的部分。效果如下
Contacts
…
Contacts
对于
a
元素的嵌套
<a href="https://www.freecodecamp.org" target="_blank"> ... </a>
target
是锚点元素的一个属性，它用来指定链接的打开方式。 属性值
_blank
表示链接会在新标签页打开
知道了嵌套之后，我们就可以将元素嵌套进
a
元素
如我们将图片嵌套进去
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Three kittens running towards the camera."></a>
如果把 a 的 href 属性值设置为 #，创建的是一个死链接（不跳转到其他画面）。
（5）有序列表，无序列表，输入框，表单
有序列表
ul
,无序列表
ol
,
输入框
<input type="text">
,为输入框添加占位符文本
placeholder="..."
输入框没有结束标签，但是有序列表和无序列表都有
创建表单，
<form action=“提交地址">
<input>
</form>
表单的
submit
提交按钮
<button type="submit">this button submits the form</button>
设置必填项
如把输入框作为必填项，在
input
元素中加上
required
属性就可以了
(6)单选按钮，复选按钮，
单选按钮h和复选框都是是
input
选择框的一种类型
单选按钮
<input type="radio">
，复选框
<input type="checkbox">
,使用
checked
每一个单选按钮和复选框都应该嵌套在它自己的 label 标签元素中，所有关联的单选按钮或复选框都应有相同的
name
属性
使得 input 与 label 关联的最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 复选框的 id 属性值相同。
如
<label for="loving">
<input id="loving" type="checkbox" name="personality"> Loving
</label>
提交表单时，所选项的值会发送给服务端。 radio 和 checkbox 的
value
属性值决定了发送到服务端的实际内容。
如果没有指明
value
属性值，则会使用默认值做为表单数据提交，也就是 on。 在这种情况下，如果用户选中
"indoor"
选项然后提交表单，表单数据则会包含
indoor-outdoor=on
。 这样的表单数据看起来不够直观，因此最好将
value
属性值设置为一些有意义的内容。·
使用
checked
属性把第一个复选框和单选按钮都设置为默认选中
(7)div元素
div 元素也叫内容划分元素，是一个包裹其他元素的通用容器。
它也是 HTML 中出现频率最高的元素。
和其他普通元素一样，你可以用
<div>
来标记一个 div 元素的开始，用
</div>
来标记一个 div 元素的结束。
2.CSS
在网页中，我们可以使用 CSS 来为网页的文本更改颜色 大小 图片形式 字体等
(1)CSS 元素选择器
在css界面中,我们可以通过元素选择器来改变文本的颜色等属性
①行内样式
<h2 style="color: blue;">CatPhotoApp</h2>
通过改变内联
style
的属性来改变元素的属性,
注意
:我们在使用行内模式时需要在内联 style 声明末尾加上
;
②内页样式
在样式声明区域内，可以为所有
h2
元素创建一个 CSS selector。 如果想让所有
h2
元素在变成红色，可以添加下方的样式规则：
<style>
h2 {
color: red;
}
</style>
注意
:每个元素的的样式规则都要有
{
}
,元素应在
<style>
声明的开始和结束标签中,元素中的样式规则都应在大括号之间,且应有
;
③外部样式
将CSS样式写在单独的文件中，再使用link引用。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
(2)class选择器
一个 CSS class 声明示例如下所示：
<style>
.blue-text {
color: blue;
}
</style>
这样我们就在
<style>
声明里创建了一个叫做
.blue-text
的class选择器，我们可以将class选择器应用于 HTML 元素中，如
<h2 class="blue-text">CatPhotoApp</h2>
注意
：在 CSS 中 ，class选择器前一定要有
.
,而在 HTML 中则不需要。
有了class选择器我们就可以将其运用到多个元素中。
而在一个元素中运用多个 class选择器，我们只需要用空格将其隔开就行。例如：
<img class="class1 class2">
（3）更改元素的字体大小和字体族名
字体大小由
font-size
属性控制，如下所示：
h1 {
font-size: 30px;
}
通过
font-family
属性，我们可以设置元素里的字体族名。
如果你想将
h2
元素的字体设置为
sans-serif
，可以这样写：
h2 {
font-family: sans-serif;
}
（4）更改图片
①更改大小
CSS 的
width
属性可以控制元素的宽度。 和设置文本字号一样，我们会以
px
（像素）为单位来设置图片的宽度。
例如，如果你想创建一个叫
larger-image
的 CSS class，来控制 HTML 元素的宽度为 500px，就可以这样写：
<style>
.larger-image {
width: 500px;
}
</style>
②为元素添加边框
CSS 边框具有
style
、
color
、
width
属性。
假如我们要将一个 HTML 元素边框设置为 5px 的红色实线边框，我们可以这样做：
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
将
border-radius
添加到上面的class选择器中 可以为图片添加圆角边框,它的单位是
px
当我们使用百分比来指定
border-radius
的值的时候，例如：50%，那么我们会将图片变成圆形
background-color
属性可以设置元素的背景颜色
(5)id选择器
每一个 HTML 元素都有一个
id
属性
我们可以通过
id
选择器来更改单个元素的样式
设置
id
,例如·
<h2 id="cat-photo-app">
在 style 标签里，如果我们想声明一个 id 选择器，那么需要在 id 前加上#
例如
#cat-photo-element {
background-color: green;
}
（6）调整元素的边距
所有的 HTML 元素都是以矩形作为基础
每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距
padding
、外边距
margin
、边框
border
。
在选择器中加上这三个属性，并修改他们的值，我们就可以修改元素的边距
CSS 允许你使用
padding-top
、
padding-right
、
padding-bottom
、
padding-left
属性来设置四个不同方向的
padding
值。
同理，margin 也是可以这样的
当然，我们也可以通过以下方式来实现
padding: 10px 20px 10px 20px;
,对应的顺序为顺时针排序
（7）属性选择器
以此为例
[type='radio'] {
margin: 20px 0px 20px 0px;
}
这段代码会改变所有
type
为
radio
的元素的外边距
（8)绝对单位和相对单位
绝对单位与长度的物理单位相关，如
px
,
mm
,
相对单位长度，比如
em
和
rem
，它们的实际值会依赖其他长度的值而决定
比如
em
的大小基于元素字体的字体大小。 如果使用它来设置
font-size
值，它的值会跟随父元素的
font-size
值来改变。
（9）CSS 的继承
每一个 HTML 页面都有一个
body
元素
当我们在
body
元素上使用 CSS 规则时，其他的元素也会继承
body
中所设置的样式
例如，在
body
的 CSS 规则里面添加
color: green;
，这会将页面内所有字体的颜色都设置为
green
。
当
body
元素中设置的样式与应用在一个元素中的class所设置的样式有冲突时，优先class的样式
即class的优先级高于继承样式
（10）选择器的优先级
在
<style>
标签里面声明的
class
顺序十分重要，之后的声明会覆盖之前的声明。 第二个声明的优先级始终高于第一个声明。
不过，在 HTML 中的class先后顺序无关紧要
ID 选择器的优先级要高于class选择器的优先级，无论其位置在
内联
important的优先级最高
color: red !important;
(11)使用16进制编码来获得颜色
回顾一下，十六进制编码使用 6 个十六进制字符来表示颜色，两个字符为一组，分别代表红（R）、绿（G）、蓝（B）。
通过三原色（红、绿、蓝），我们可以创建 1600 万种不同颜色。
例如，橘色是纯红色混合一些绿色而成，其中没有蓝色。 在十六进制编码里面，它可以写成
#FFA500
。
红色的
#FF0000
十六进制编码可以缩写成
#F00
。 在这种缩写形式里，三个数字分别代表着红（R）、绿（G）、蓝（B）三原色。
（12）使用 RGB 值
RGB 值与我们之前学到的十六进制编码不同。
RGB
值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。
下面是通过使用 RGB 值设置背景颜色为橘色的例子：
body {
background-color: rgb(255, 165, 0);
}
（13）使用 CSS 变量
为创建一个 CSS 变量，你只需要在变量名前添加两个连字符号，并为其赋值即可，例子如下：
--penguin-skin: gray;
这样就会创建一个
--penguin-skin
变量，它的值为
gray
。 现在，其他元素可通过该变量来使元素变成灰色。
创建变量后，CSS 属性可以通过调用变量名来使用它对应的值。
background: var(--penguin-skin);
因为引用了
--penguin-skin
变量的值，使用了这个样式的元素背景颜色会是灰色。 请注意，除非变量名称完全匹配，否则将不会应用样式。
如果要为 CSS 变量设置备用值，例子如下
background: var(--penguin-skin, black);
CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承。
:root
是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是
html
元素。 我们在
:root
里创建变量在全局都可用，即在任何选择器里都生效。
当你在
:root
里创建变量时，这些变量的作用域是整个页面。
如果在元素里创建相同的变量，会重写作用于整个页面的变量的值。
CSS 变量可以简化媒体查询的定义方式。
例如，当屏幕小于或大于媒体查询所设置的值，只要我们更新变量的值，那么使用了此变量的元素样式就都会更改。