FreeCodeCamp学习记录

Html中修改文字元素的方式：

<h1 style="color=red"> hello world </h1>

另外一种方式，使用元素选择器

<style>
  选择器 {属性名称: 属性值;}
  h2 {color: red;}
</style>

还有一种方式是使用类选择器

<style>
    .blue-text{
        color: blue;
    }
</style>
<h2 class="blue-text">hello world</h2>

字号是通过样式属性font-size来控制的，例子如下：

h1 {
 font-size: 30px;
 }

设置元素的字体：

h2 {
    font-family: Sans-serif;
}

引入其他字体，使用link标签来进行引入，这里比如说引入Google的Lobster字体：

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

引用完成之后就可以使用该字体了。

如果系统此时该字体不能用的是，我们可以设置一个备用的字体选项，也就是属于自动降级的一个机制，实现上非常简单，在font-family后添加一个新字体即可，当第一个字体不可用的时候，自动选择为第二字体：

h2 {
    font-family:Loster, Sans-Serif;
}

如何添加图片，非常简单，直接使用img元素就可以直接添加了，注意img元素不需要结束标识：

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

css中包含了控制元素宽度的width属性，使用px来指定图片的宽度。

在css中边框的属性有样式(style)，颜色(color)，宽度(width)，高度(height)，边框半径(border-radius)等属性

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

边框半径，除了可以使用像素来决定属性大小，也可以使用百分比来表示。

链接标签，就是可以实现点击该元素，然后跳转到另外一个页面的标签，a元素，也叫作anchor（锚点）元素，这个元素既可以是外部链接，也可以当前网页的导航功能。

<a href="www.baidu.com">Link to baidu</a>

如果你不知道当前的连接要写到哪里的话，可以将a元素的href属性替换为一个#将其变成一个固件连接。

alt属性，也被称为alt text，是当图片无法加载的时候显示的替代文本。这个属性很重要，不夸张的说，每张图片都应该添加一个alt属性。

html中的无序列表(unorderd lists)，或者带有项目符号的列表。例子如下：

<ul>
    <li>food</li>
    <li>furniture<li>
</ul>

另外一种是有序列表了，有序列表会显示对应的顺序，例子如下：

<ol>
    <li>food</li>
    <li>furniture</li>
</ol>

输入元素，input，有一个属性为placeholder text，称之为占位符，在没有任何输入信息的时候显示在输入的框的预定义文本。

<input type="text" placehodler="Please input you name ">

html中构建和服务器交互的web表单（form），并通过表单中action来执行相应的动作，并结合button实现相应的功能：

<form action="/submit">
  <input type="text" placeholder="Please input">
  <button type="submit">Submit</button> 
</form>

在设计表单的时候，我们会设定有一些表格需要必填，这个时候我们可以使用required属性，但是这个属性在safari浏览器不起作用，chrome上可以。

如何创建单选的按钮呢？例子如下：

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

复选按钮：

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

如果我们想这些按钮一开始就有一个默认选择项，那么我们可以设置checked属性。

div元素，也被称为divsion(层)元素，是一个盛装其他元素的通用容器。

除了class属性之外，我们还可以使用id属性。注意这两个的区别，在css中，类选择器的前缀为 . ，定义ID选择器的前缀为 # .