1、

内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层叠样式表CSS（Cascading Style Sheets）。

<style>

  选择器 {属性名称: 属性值;}

  h2 {color: red;}

</style>

2、

类选择器：

<style>

  .blue-text {

    color: blue;

  }

</style>

上面的代码在 <style> 标记中声明了一个叫做 blue-text 的类样式。

注意：在CSS中，类选择器应该添加.为前缀。

而在HTML中，class属性不能添加.为前缀。

这是因为在CSS中如果类选择器前不添加. 浏览器就会误认为类选择器是一个元素选择器。

3、

字号是由样式属性font-size来控制的, 如下：

h1 {

  font-size: 30px;

}

4、

用font-family属性来设置元素的字体。

如果你想把副标题的字体设置为Sans-serif，你可以使用下面的CSS：

h2 {

  font-family: Sans-serif;

}

5、

有时你想为你的网站添加一个a元素，但此时你还不知道要将它们链接到哪儿，此时可以使用固定链接。

把你的a元素的href属性的值替换为一个#，别名hash(哈希)符号，将其变为一个固定链接。

6、

alt属性，也被称为alt text, 是当图片无法加载时显示的替代文本。alt属性对于盲人或视觉损伤的用户理解一幅图片中所描绘的内容非常重要，搜索引擎也会搜索alt属性。

简而言之，每一张图片都应该有一个alt属性！

你可以像下面例子中一样为img元素添加一个alt属性：

<img src="www.your-image-source.com/your-image.jpg" alt="your alt text">

7、

占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。

8、

使用HTML来构建可以跟服务器交互的Web表单(form)，通过给你的form元素添加一个action属性来达到此目的。

action属性的值指定了表单提交到服务器的地址。

9、

当你设计表单时，你可以指定某些选项为必填项(required)，只有当用户填写了该选项后，用户才能够提交表单。

例如，如果你想把一个文本输入字段设置为必填项，在你的input元素中加上required属性就可以了，你可以使用：

<input type="text" required>

10、

多选一的场景就用radio button(单选按钮)

单选按钮只是input输入框的一种类型。

每一个单选按钮都应该嵌套在它自己的label(标签)元素中。

下面是一个单选按钮的例子：

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

11、

checkboxes（复选按钮）。

 

复选按钮是input的输入框的另一种类型。

 

每一个复选按钮都应该嵌套进label元素中。

 

所有关联的复选按钮应该具有相同的name属性。

 

下面是复选按钮的例子：

 

<label><input type="checkbox" name="personality"> Loving</label>

12、

使用checked属性，你可以设置复选按钮和单选按钮默认被选中。

为此，只需在input元素中添加属性checked

<input type="radio" name="test-name" checked>

13.

声明一个叫cat-photo-element的ID选择器 ，并设置背景色为绿色。：

 

#cat-photo-element {

  

}

 

注意：在你的 style 元素内部，定义类选择器必须添加 . 为前缀，定义ID选择器必须添加 # 为前缀。

14、

有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

元素的 padding 控制元素内容 content和元素边框 border 之间的距离。

元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。

15、

注意：在 HTML 中这些 class 如何排序是无所谓的。

然而，在 <style> 部分中 class 声明的顺序却非常重要，第二个声明总是比第一个具有优先权。因为 .blue-text 是第二个声明，它覆盖了 .pink-text 属性。

16、

注意：你声明的这个 CSS 在 pink-text类选择器的上面还是下面是无所谓的，因为 id 属性总是具有更高的优先级。

17、

行内样式看起来是这样的：

<h1 style="color: green">

行内样式具有较高优先级

18、

让我们来给 pink-text 元素的 color 声明加上关键字 !important，以便 100% 确保你的 h1 元素是粉色的。

举例如下：

color: pink !important;

注意：优先级：！important>内联>id>class(class后面会覆盖前面)

19、

hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。

20、

在 CSS 中表示颜色的另一个方法是使用 rgb 值。

代表黑色的 RGB 值看起来是下面的样子：

rgb(0, 0, 0)

代表白色的 RGB 值看起来是下面的样子：

rgb(255, 255, 255)

使用 rgb，你通过 0 至 255 之间的一个数字来指定每种颜色的亮度，而不是像 hex code 那样使用六个十六进制数字。

如果你做个算术，16 乘以 16 总共有 256 个值，所以从零开始计数的 rgb，和 hex code 一样有完全相同数量的可能数值。