FreeCodeCamp总结——基础标签和知识点

1.内联样式格式举例（注意= " " :  ;）

<h2 style="color:red;margin-left:30px"><h2>

优势：简单有效 缺点：维护不方便

2.元素选择器举例

首先文档顶端创建<style></style> 格式：选择器{属性名称：属性值；}

<style>
  h2{color: red;}
</style>

注意：一定要加上分号

3.字体大小属性名称：

h1 {
  font-size: 30px;
}

4.字体样式属性名称

h2 {
  font-family: Sans-serif;
}

5.使用谷歌字体

首要将代码放入编辑器的顶部引入想要的字体，例如想用Lobster字体

<img src="https://www.your-image-source.com/your-image.jpg">

 

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">

现在就可以将Lobster作为font-family属性的值了，效果为：

 

 

6.字体的自动降级

有几种默认字体是所有浏览器都可用的，比如Monospace/Serif/Sans-Serif，但是当某种字体不可用时，可以让浏览器自动降级到另一种字体。例如Helvetical字体不可用时，会自动降级使用Sans-Serif字体。

p {
  font-family: Helvetica, Sans-Serif;
}

7.导入图片，自关闭，src指向具体地址

<img src="https://www.your-image-source.com/your-image.jpg">

8.边框

属性有：style、color、width、height 例如：

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>

9.图片变圆角border-radius:像素值/百分比50%；

10.a（锚点）元素，可以链接到外部地址，也可以链接到当前页面的某部分实现内部导航。有时候如果想添加一个a元素，但是还不确定链接到哪里，可以用固定链接：href="#";

11.图片alt属性（当图片无法加载时显示的替代文本） 搜索引擎也会搜索alt属性，每一张图片都应有一个alt属性

<img src="www.your-image-source.com/your-image.jpg" alt="this is a cat">

12.输入框占位符(预定义文本)（例如："请输入账号"）

<input type="text" placeholder="this is placeholder text">

13.表单action，构建可以和服务器交互的web表单form，action的值为表单提交到服务器的地址。

14.设置某一些项为必填项：required 

<input type="texxt" required>

注：required属性在Safari浏览器中不起作用，推荐用Chrome浏览器学习

15.单选按钮radio button 只是输入框input的一种类型

每一个单选按钮都应该嵌套在它自己的label(标签)元素中，所有关联的单选那妞都应该使用相同的name属性

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

16.复选按钮CheckBox，也是input输入框的另一种类型，也都应嵌入到label元素中，关联的应有相同name属性

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

17.默认选中checked

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

知识点：

1.背景颜色background-color

2.所有的HTML元素本质上是小的矩阵块，有三个影响布局的属性：margin padding border

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

margin内边距控制着元素边框border和元素实际所占空间的距离，如果设置为负值，元素将会变大。

3.字体颜色属性：color：red;

4.优先级：行内样式>id>class

5.最强大的覆盖css的方法：为了不让使用的css库覆盖掉自己的css，可以使用!important

color: pink !important;

这样就可以确保字体颜色为粉红色了，

6.0是十六进制中最小的一个，代码颜色的完全缺失，F是最大的一个，代表最大亮度。遵循红绿蓝即rgb格式

前两位表示红色的数量，三四表示绿色，五六表示蓝色的数量。

注：应用多个class到一个元素：用空格分开,顺序无所谓，但是style里的class顺序很重要，后面的优先权大。

<img class="class1 class2">