Free Code Camp 知识点整理：HTML5 and CSS

Free Code Camp

第二节 Front End Development

一、HTML5 and CSS

1.Say Hello to HTML Element

<h1>Hello Worldh1>

• HTML是英文Hyper Text Markup Language(超文本标记语言)的缩写。
• 元素：h1就是一个HTML元素，h1是header1的简写，意思是一级标题。
• 开始标记：

  　　结束标记：

  　开始标记和结束标记的唯一区别就是结束标记多了一个/。

2.Headline with the h2 Element

<h1>Hello Worldh1>
<h2>CatPhotoApph2>

• h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT等。h1是主标题，h2是副标题，h3、h4、h5、h6依次递减字体的大小。

3.Inform with the Paragraph Element

<h1>Hello Worldh1>
<h2>我家的猫咪h2>
<p>"Hello Paragraph"p>

• p是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样。

4.Uncomment HTML

• 注释有两个功能：

  1. 想让某一段代码不起作用，但你又不想删除这一段代码。
  2. 就是给代码添加一些说明，方便团队合作或日后自己查看，但又不想影响代码本身。

• 可以通过删除来删除注释。

5.Comment out HTML

<h2>我家的猫咪h2>

• 注释的开始标记是

6.Fill in the Blank with Placeholder Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• Web开发者通常用lorem ipsum text来做占位符，占位符就是占着位置的一些文字，没有实际意义。

7.Delete HTML Elements

• 手机的屏幕空间是有限的。让我们删除不必要的元素

8.Change the Color of Text

<h2 style="color: red">我家的猫咪h2>
<p>在大家心目中……p>

• 样式的属性有很多，其中color用来指定颜色。
• 我们可以通过修改h2元素的style(样式)来达到目的。

9.Use CSS Selectors to Style Elements

<style>
  h2{color: red}
style>
<h2>我家的猫咪h2>
<p>在大家心目中……p>

• 样式的属性多达几千个，但别担心，按照80-20原则，常用的也就几十个，你完全可以掌握它。
• 当你键入

  CatPhotoApp

  ，你就给h2元素添加了inline style(内联样式)。
• 内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层叠样式表CSS（Cascading Style Sheets）。
• 在代码的最顶端，创建一个如下的style元素：
  

  CSS
>
>
  在这个 style元素内, 你可以为所有的 h2元素创建一个 元素选择器。比如，如果你想要将所有的h2元素设置为红色, 你的代码应该看起来像这样：
  css
>
>

• 注意：一定要在属性值的后面加上分号;。
• 错误：添加层叠样式表CSS后要删除内联样式，因为内联样式有更高的优先级。

10.Use a CSS Class to Style an Element

<style>
  .red-text{
    color: red;
  }
style>
<h2 class="red-text">我家的猫咪h2>
<p>在大家心目中……p>

• 上节课我们学习了元素选择器，这节课我们学习类选择器。

• 我们先声明一个类选择器：

  <style>
    .blue-text {
      color: blue;
    }
  style>

  上面的代码在
>

18.Add Borders Around your Elements

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }
  h2 {
    font-family: Lobster, Monospace;
  }
  p {
    font-size: 16px;
    font-family: Monospace;
  }
  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }
  .smaller-image {
    width: 100px;
  }
style>
<h2 class="red-text">CatPhotoApph2>
<img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg">

• CSS边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。
• 如果我们想要让一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为固体(solid)，代码如下:
  

  CSS
>
>

• 提示：你可以应用多个class到一个元素，只需要在多个class之间用空格分开即可。例如：

19.Add Rounded Corners with a Border Radius

<style>
.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 10px;
}

• 我们可以通过CSS的一个叫border-radius(边框半径)的属性来让它的边框变成圆的。
• 你同样可以使用像素来指定border-radius的属性值。
• 注意：这个任务有多种解决方案。你可以添加border-radius到.thick-green-border类选择器，也可以添加到.smaller-image类选择器。

20.Make Circular Images with a Border Radius

<style>
.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
}

• 除了像素，你还可以使用百分比来指定border-radius边框半径的值。
• border-radius的值为50%时图片即为圆形，0%时为正方形。

21.Link to External Pages with Anchor Elements

<a href="http://freecatphotoapp.com">cat photosa>

• a元素，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

22.Nest an Anchor Element within a Paragraph

<p>Here's a link to <a href="http://freecatphotoapp.com">cat photosa> p>

• Nesting（嵌套）就是把一个元素放在另一个元素里面。

23.Make Dead Links using the Hash Symbol

<p>Here's a link to <a href="#">cat photosa> p>

• 有时你想为你的网站添加一个a元素，但此时你还不知道要将它们链接到哪儿，此时可以使用固定链接。
• 把你的a元素的href属性的值替换为一个#，别名hash(哈希)符号，将其变为一个固定链接。

24.Turn an Image into a Link

<a href="#"><img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg">a>

• 你可以通过把某元素嵌套进a元素使其变成一个链接。
• 一旦完成，把你的光标悬停在你的图片上。你的光标此时应该由光标指针变成手形指针。图片现在是一个链接了。

25.Add Alt Text to an Image for Accessibility

<a href="#"><img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg" alt="A cute orange cat lying on it's back">a>

• alt属性，也被称为alt text, 是当图片无法加载时显示的替代文本。alt属性对于盲人或视觉损伤的用户理解一幅图片中所描绘的内容非常重要，搜索引擎也会搜索alt属性。
• 简而言之，每一张图片都应该有一个alt属性！
• 你可以像下面例子中一样为img元素添加一个alt属性：
  

  HTML
>
>

26.Create a Bulleted Unordered List

<p>Things cats love:p>
<ul>
  <li>cat nipli>
  <li>laser pointersli>
  <li>lasagnali>
ul>

• HTML有一个特殊元素，用于创建unordered lists（无序列表）, 或带项目符号的列表。
• 无序列表以
  元素开始，并包含一个或多个
  • 元素。
  • 例如：
    

    “`HTML
    

    
    
    • milk
    • cheese

    
    将会创建一个带项目符号的”milk”和”cheese”列表。

  27.Create an Ordered List

  <p>Things cats love:p>
  <ul>
    <li>cat nipli>
    <li>laser pointersli>
    <li>lasagnali>
  ul>
  <p>Top 3 things cats hate:p>
  <ol>
    <li>flea treatmentli>
    <li>thunderli>
    <li>other catsli>
  ol>

  • HTML有一个特殊元素，用于创建ordered lists（有序列表）, 或数字编号列表。
  • 有序列表以
    元素开始，并包含一个或多个
    1. 元素。
    2. 例如：
       

       HTML
       >

       
       >
       1. Garfield
       
       >
       2. Sylvester
       
       >

       
       >
       将创建一个包含”Garfield”和”Sylvester”的数字编号列表。

  28.Create a Text Field

  type="text">

  • 现在让我们来创建一个form(表单)。
  • Text input(文本输入框)是用来获得用户输入的绝佳方式。
  • 你可以用如下方法创建：
    

    HTML
>
>

  • 注意,input元素是自关闭的。

  29.Add Placeholder Text to a Text Field

  type="text" placeholder="cat photo URL">

  • 占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。
  • 你可以用如下方式创建占位符：
    

    HTML
>
>

  30.Create a Form Element

  <form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
  form>

  • 使用HTML来构建可以跟服务器交互的Web表单(form)，通过给你的form元素添加一个action属性来达到此目的。
  • action属性的值指定了表单提交到服务器的地址。
  • 例如：
    

    HTML
    >

    
    >

  31.Add a Submit Button to a Form

  <form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
    <button type="submit">Submitbutton>
  form>

  • 让我们来为你的form添加一个submit(提交)按钮，点击这个按钮，表单中的数据将会被发送到你通过action属性指定的地址上。
  • 下面是submit按钮的例子
    

    HTML
> this button submits the form
>

  32.Use HTML5 to Require a Field

  <form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submitbutton> 
  form>

  • 当你设计表单时，你可以指定某些选项为必填项(required)，只有当用户填写了该选项后，用户才能够提交表单。
  • 例如，如果你想把一个文本输入字段设置为必填项，在你的input元素中加上required属性就可以了，你可以使用：
  • 注意：required属性在Safari浏览器中不起作用.

  33.Create a Set of Radio Buttons

  <form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submitbutton>
    <label><input type="radio" name="indoor-outdoor">indoorlabel>
    <label><input type="radio" name="indoor-outdoor">outdoorlabel>
  form>

  • 多选一的场景就用radio button(单选按钮)
  • 单选按钮只是input输入框的一种类型。
  • 每一个单选按钮都应该嵌套在它自己的label(标签)元素中。
  • 注意：所有关联的单选按钮应该使用相同的name属性。
  • 下面是单选按钮的例子:
    

    HTML
> Indoor
>

  34.Create a Set of Checkboxes

  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
    <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
    <label><input type="checkbox" name="personality"> Lovinglabel>
    <label><input type="checkbox" name="personality"> Lazylabel>
    <label><input type="checkbox" name="personality"> Energeticlabel>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submitbutton>
  form>

  • checkboxes（复选按钮）复选按钮是input的输入框的另一种类型。
  • 每一个复选按钮都应该嵌套进label元素中。
  • 所有关联的复选按钮应该具有相同的name属性。
  • 下面是复选按钮的例子:
    

    HTML
> Loving
>

  35.Check Radio Buttons and Checkboxes by Default

  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoorlabel>
    <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
    <label><input type="checkbox" name="personality" checked> Lovinglabel>
    <label><input type="checkbox" name="personality"> Lazylabel>
    <label><input type="checkbox" name="personality"> Energeticlabel>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submitbutton>
  form>

  • 使用checked属性，你可以设置复选按钮和单选按钮默认被选中。
  • 为此，只需在input元素中添加属性checked
    

    HTML
>
>

  36.Nest Many Elements within a Single Div Element

  <div>
  <p>Things cats love:p>
  <ul>
    <li>cat nipli>
    <li>laser pointersli>
    <li>lasagnali>
  ul>
  <p>Top 3 things cats hate:p>
  <ol>
    <li>flea treatmentli>
    <li>thunderli>
    <li>other catsli>
  ol>
  div>

  • div元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。
  • 所以可以利用CSS的继承关系把div上的CSS传递给它所有子元素。
  • 你可以用
    来标记一个div元素的开始，然后用
    来标记一个div元素的结束。

  37.Give a Background Color to a Div Element

  <link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
  <style>
    .red-text {
      color: red;
    }
  
    h2 {
      font-family: Lobster, Monospace;
    }
  
    p {
      font-size: 16px;
      font-family: Monospace;
    }
  
    .thick-green-border {
      border-color: green;
      border-width: 10px;
      border-style: solid;
      border-radius: 50%;
    }
  
    .smaller-image {
      width: 100px;
    }
    .gray-background {
      background-color: gray;
    }
  style>
  
  <h2 class="red-text">CatPhotoApph2>
  
  <p>Click here for <a href="#">cat photosa>.p>
  
  <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/images/relaxing-cat.jpg">a>
  
  <div class="gray-background">
    <p>Things cats love:p>
    <ul>
      <li>cat nipli>
      <li>laser pointersli>
      <li>lasagnali>
    ul>
    <p>Top 3 things cats hate:p>
    <ol>
      <li>flea treatmentli>
      <li>thunderli>
      <li>other catsli>
    ol>
  div>

  • 你可以用background-color属性来设置一个元素的背景颜色。
  • 例如，如果你想把一个元素的背景颜色设置为green，你应该把这些加到你的style元素中：
    

    CSS
> .green-background {
> background-color: green;
> }
>

  38.Set the ID of an Element

  <form action="/submit-cat-photo" id="cat-photo-form">
    <label><input type="radio" name="indoor-outdoor" checked> Indoorlabel>
    <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
    <label><input type="checkbox" name="personality" checked> Lovinglabel>
    <label><input type="checkbox" name="personality"> Lazylabel>
    <label><input type="checkbox" name="personality"> Energeticlabel>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submitbutton>
  form>

  • 除了class属性之外，每一个HTML元素还可以使用id属性。
  • 使用id属性有若干好处，一旦当你开始使用jQuery的时候你会有更深的体会。
  • id属性应该是唯一的，虽然浏览器并不强制唯一，但基于最佳实践，这一点是被广泛认可的，所以请不要给一个以上的元素设置相同的id属性。
  • 下面举例说明了如何设置h2元素的id属性为cat-photo-app。
    

    HTML
>

    
>

  39.Use an ID Attribute to Style an Element

  <link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
  <style>
    .red-text {
      color: red;
    }
  
    h2 {
      font-family: Lobster, Monospace;
    }
  
    p {
      font-size: 16px;
      font-family: Monospace;
    }
  
    .thick-green-border {
      border-color: green;
      border-width: 10px;
      border-style: solid;
      border-radius: 50%;
    }
  
    .smaller-image {
      width: 100px;
    }
  
    .gray-background {
      background-color: gray;
    }
    #cat-photo-form {
      background-color: green;
    }
  style>
  
  <h2 class="red-text">CatPhotoApph2>
  
  <p>Click here for <a href="#">cat photosa>.p>
  
  <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/images/relaxing-cat.jpg">a>
  
  <div class="gray-background">
    <p>Things cats love:p>
    <ul>
      <li>cat nipli>
      <li>laser pointersli>
      <li>lasagnali>
    ul>
    <p>Top 3 things cats hate:p>
    <ol>
      <li>flea treatmentli>
      <li>thunderli>
      <li>other catsli>
    ol>
  div>
  
  <form action="/submit-cat-photo" id="cat-photo-form">
    <label><input type="radio" name="indoor-outdoor" checked> Indoorlabel>
    <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
    <label><input type="checkbox" name="personality" checked> Lovinglabel>
    <label><input type="checkbox" name="personality"> Lazylabel>
    <label><input type="checkbox" name="personality"> Energeticlabel>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submitbutton>
  form>

  • 和类选择器一样，你也可以使用ID选择器来声明样式。
  • 声明一个叫cat-photo-element的ID选择器 ，并设置背景色为绿色：
    

    CSS
> #cat-photo-element {
> background-color: green;
> }
>

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

  40.Adjusting the Padding of an Element

  <style>
    .injected-text {
      margin-bottom: -25px;
      text-align: center;
    }
    .box {
      border-style: solid;
      border-color: black;
      border-width: 5px;
      text-align: center;
    }
    .yellow-box {
      background-color: yellow;
      padding: 10px;
    }
    .red-box {
      background-color: red;
      padding: 20px;
    }
    .green-box {
      background-color: green;
      padding: 20px;
    }
  style>
  <h5 class="injected-text">marginh5>
  <div class="box yellow-box">
    <h5 class="box red-box">paddingh5>
    <h5 class="box green-box">paddingh5>
  div>

  • 现在让我们把 Cat Photo App 暂时搁置，以学习更多的 HTML 样式。
  • 你可能早已经注意到了这点，所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。
  • 有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。
  • 元素的padding控制元素内容content和元素边框border之间的距离。
  • padding即padding-top&padding-bottom。

  41.Adjust the Margin of an Element

  <style>
    .green-box {
      background-color: green;
      padding: 20px;
      margin: 20px;
    }

  • 元素的外边距margin控制元素边框border和元素实际所占空间的距离。
  • margin即padding-left&padding-right。

  42.Add a Negative Margin to an Element

  <style>
    .red-box {
      background-color: red;
      padding: 20px;
      margin: -15px;
    }
    .green-box {
      background-color: green;
      padding: 20px;
      margin: -15px;
    }

  • 如果你将一个元素的margin设置为负值，元素将会变大。

  43.Add Different Padding to Each Side of an Element

  <style>
    .green-box {
      background-color: green;
      padding-top: 40px;
      padding-left: 40px;
      padding-right: 20px;
      padding-bottom: 20px;
    }

  • 有时你想要自定义元素，使它的每一个边具有不同的padding。
  • CSS允许你使用padding-top、padding-right、padding-bottom和padding-left来控制元素上右下左四个方向的padding。

  44.Add Different Margins to Each Side of an Element

  <style>
    .green-box {
      background-color: green;
      margin-top: 40px;
      margin-left: 40px;
      margin-right: 20px;
      margin-bottom:20px;

  • 有时你想要自定义元素，使它的每一个边具有不同的margin。
  • CSS允许你使用margin-top、margin-right、margin-bottom和margin-left来控制元素上右下左四个方向的margin。

  45.Use Clockwise Notation to Specify the Padding of an Element

  <style>
    .green-box {
      background-color: green;
      padding: 40px 20px 20px 40px;
    }

  • 除了分别指定元素的padding-top、padding-right、padding-bottom和padding-left属性外，你还可以集中起来指定它们，举例如下：
    

    HTML
> padding: 10px 20px 10px 20px;
>
    这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

  46.Use Clockwise Notation to Specify the Margin of an Element

  <style>
    .green-box {
      background-color: green;
      margin: 40px 20px 20px 40px;
    }

  • 让我们再试一次，但这次是用于margin。
  • 除了分别指定元素的margin-top、margin-right、margin-bottom和margin-left属性外，你还可以集中起来指定它们。

  47.Style the HTML Body Element

  <style>
  body {
      background-color: black;
  }
  style>

  • 现在让我们来一个全新的开始，讲一讲 CSS 继承。
  • 每一个 HTML 页面都有一个body元素。
  • 通过将其background-color设置为黑色，我们可以证明body元素的存在。

  48.Inherit Styles from the Body Element

  <style>
    body {
      background-color: black;
      color: green;
      font-family: Monospace;
    }
  style>
  <h1>Hello Worldh1>

  • 现在我们证明了每一个 HTML 页面都有一个body元素，并且其body元素同样能够应用样式。
  • 记住，你可以像对其他 HTML 元素一样对你的body元素应用样式，并且所有其他元素将继承你的body元素的样式。

  49.Prioritize One Style Over Another

  <style>
    body {
      background-color: black;
      font-family: Monospace;
      color: green;
    }
    .pink-text {
      color: pink;
    }
  style>
  <h1 class="pink-text">Hello World!h1>

  • 有时你的 HTML 元素会得到相互冲突的多个样式。
  • 当我们创建一个使其文字为粉色的class，然后将其应用到某元素，我们的class会override（覆盖）body元素的color: green; CSS 属性。

  50.Override Styles in Subsequent CSS

  <style>
    body {
      background-color: black;
      font-family: Monospace;
      color: green;
    }
    .pink-text {
      color: pink;
    }
    .blue-text {
      color: blue;
    }
  style>
  <h1 class="blue-text pink-text">Hello World!h1>

  • 我们刚刚证明了我们的class会覆盖body元素的 CSS，那么下一个合乎情理的问题就是，我们怎样才能覆盖我们的pink-text class呢？
  • 注意：在 HTML 中这些class如何排序是无所谓的。然而，在