freecodecamp学习笔记1

最新推荐文章于 2022-11-01 21:46:36 发布

原创最新推荐文章于 2022-11-01 21:46:36 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #freecode

本文详细介绍了前端开发中常用的技巧，包括谷歌字体导入、多类应用、图片alt属性的重要性、表单必填项设置、单选与复选按钮使用、布局属性详解、响应式设计与Bootstrap框架应用、FontAwesome图标库使用等，旨在帮助开发者提升网页设计与用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、谷歌字体导入链接：

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

有几种默认的字体是所有浏览器都可用的，包括Monospace、Serif和Sans-Serif。
2、你可以应用多个class到一个元素，只需要在多个class之间用空格分开即可。
例如：

<img class="class1 class2">

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

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

4、当你设计表单时，你可以指定某些选项为必填项(required)，只有当用户填写了该选项后，用户才能够提交表单。（HTML5）action属性：
5、是自闭合标签，所以每一个单选按钮嵌套在它自己的label（标签）元素中。注意：所有关联的单选按钮都应该使用相同的name属性。

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

单选按钮的type=“radio”复选框的type=“checkbox”
注意：所有关联的复选按钮都应该使用相同的name属性。默认被选中使用属性checked

6、有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。
元素的 padding 控制元素内容 content和元素边框 border 之间的距离。
元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。
如果你将一个元素的 margin 设置为负值，元素将会变大。

7、除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，
举例如下：padding: 10px 20px 10px 20px;
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。（顺时针）

8、css
注意：在 HTML 中这些 class 如何排序是无所谓的。然而，在

color: pink !important;

8、color
hex code 遵循 red-green-blue（红-绿-蓝），或称为 rgb 格式。
hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。

9、响应式框架bootstrapBootstrap将会根据你的屏幕的大小来调整HTML元素的大小，通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：

 <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">   
 <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>   
 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

添加class class=“container-fluid”
想要图片的尺寸刚好等于我们手机的尺寸，通过Bootstrap，我们要做的只是给图片添加
class=“img-responsive”

居中元素添加classclass=“text-center"
使用bootstrap自己风格的button，添加classclass=“btn”

<button class="btn">like</button>

添加class=“btn-block”使button成为块级元素，按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。

  <button class="btn btn-block">Like</button>

深蓝色btn-primary是你的应用的主要颜色，被用在那些用户主要采取的操作上，
添加class=“btn-primary”

<button class="btn btn-block btn-primary">Like</button>

浅蓝色 btn-info 被用在那些用户可能会采取的操作上。
添加class=“btn-info”

<button class="btn btn-block btn-info">info</button>

红色btn-danger被用来提醒用户该操作具有“破坏性”
添加class=“btn-danger”

  <button class="btn btn-block btn-danger">delete</button>

Bootstrap 还有一种属于按钮的 class 属性叫做 btn-default

<button class="btn btn-default"></button>

Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。

网格中的每一行是由 12 个单元组成的，则可以使用这些单元定义列的尺寸，即要保证列之和为12.
Bootstrap 在超小型设备中，会查找带有xs的类并使用它们。
在小型设备中，会查找带有sm的类并使用它们，在中型设备中，会查找带有 md 的类并使用它们。

class属性 col-md-* , * 代表一个数字，它指定了这个元素所占的列宽

在大型设备中，会查找带有 lg 的类并使用它们。
类中都写上，它会自动根据设备选择相应的那个类。

<div class="container-liquid">//添加容器
  <div class="row">//添加行
    <div class="col-sm-3 col-md-6 col-lg-8">
    </div>
  </div>
</div>

Bootstrap 的 col-xs-*用在 form 元素中

<div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
</div>

class=“form-control”表单控件效果为：

宽度为100%
设置边框为浅灰色
控件具有4px的圆角
设置阴影效果，元素得到焦点时，阴影和边框效果会发生变化
设置placeholder的颜色为#999
一般为输入框添加

 <input type="text" class="form-control" placeholder="cat photo URL" required>

Bootstrap 有一个 class 属性叫做 well，它的作用是为设定的列创造出一种视觉上的深度感（一种视觉上的效果）

<div class="col-xs-6"><div class="well"></div></div>

10、span 标签来创建行内元素

块级元素：出现在新的一行中，无论前面的内容是什么，之后的内容将出现在他们的下一行。块级元素不能嵌套在行内元素中，当块级元素可以嵌套在另一个块级元素中。
行内元素：不能产生一个新行，只占用所需宽度。

11、Font Awesome

Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。
你可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标，比如：

<i class="fa fa-info-circle"></i>//带信息符号的圆，一般用于获取更多信息的按钮
<i class="fa fa-thumbs-up"></i>//点赞符号，一般用于喜欢的按钮
<i class="fa fa-trash"></i>//垃圾箱符号，一般用于删除的按钮
<i class="fa fa-paper-plane"></i>//纸飞机符号，一般用于提交按钮