FreeCodeCamp 前端学习笔记-1（前端开发）

最新推荐文章于 2022-07-12 21:58:25 发布

YHmoun

最新推荐文章于 2022-07-12 21:58:25 发布

阅读量555

点赞数

分类专栏：前端与数据可视化学习笔记

本文链接：https://blog.csdn.net/YHmoun/article/details/90231585

版权

这篇博客详细介绍了FreeCodeCamp前端认证的第一部分，包括HTML5的基本元素和CSS的选择器、类与样式。还探讨了Bootstrap的响应式布局和常见组件，以及jQuery的基本操作，如修改样式、添加类和动态改变HTML内容。同时，介绍了JavaScript的基础语法和对象编程概念。

摘要由CSDN通过智能技术生成

Front End Development Certification

注释

<!--
-->

style 的组织方式

<h2 style="color:blue">
  xxx
</h2>

记住这里的冒号和分号

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

<h2>
  xxx
</h2>

定义的时候前面必须加 .，使用的时候不要加 .；这是为了在定义的时候区分自定义 CSS Class 和内置

<style>
  .red-text {
    
    color: red;
  }
</style>

<h2 class="red-text">
  xxx
</h2>

style 的种类

关于字体

可以使用 font-family 修改字体，例如

Sans-serif
Monospace
Lobster (需要在页面最前面添加 <link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">)

h2 {
   
    font-family: Lobster, Monospace;
}

image image 是自关闭元素，不需要在结尾

<img src="..." alt="xxx">

将多个 class 应用于同一个元素 <img class="class1 class2">

alt 在图片不能显示的时候进行显示

border 边框

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

CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。

border-radius 也可以使用 xx%

link

<a href="http://freecodecamp.cn"> link to FreeCodeCamp中文社区 </a>

在不知道应该 link 到什么链接到时候，可以使用 #

可以使用 <a></a> 去嵌套 <img>

unordered list

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

ordered list

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol

关注

专栏目录