freecodecamp 学习

1.<h></h> 标题

 2. <p></p>段落

3. style 样式  内联用法<h style="color:red;">111</h>

内联样式是为元素添加样式的最简单有效的方式,但是更易于维护的方式是使用层叠样式表css

4. <style>

</style>

在这个style元素内, 你可以为所有要操作的元素创建一个元素选择器。比如,如果你想要将所有的h2元素设置为红色, 你的代码:

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

注意:一定要在属性值的后面加上分号。

5. 类选择器   注意:在CSS中,类选择器应该添加.为前缀

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

</style>

6 font-size :5px;字体大小

font-family 字体样式

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">        导入谷歌字体

7.使用img元素来为你的网站添加图片,使用src属性指向一个图片的具体地址。

举例如下:

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

注意:img元素是自关闭元素,不需要结束标记。

8,CSS包含一个控制元素宽度的width属性。像控制字体一样,我们使用px(像素)来指定图片的宽度。width: 500px;

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

  border-color: red;

  border-width: 5px;

    border-style: solid;

    也可以通过CSS的一个叫border-radius(边框半径)的属性来让它的边框变成圆的  ,其值可以是px也可为百分比

9.a元素,也叫anchor(锚点)元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。有时你想为你的网站添加一个a元素,但此时你还不知道要将它们链接到哪儿,此时可以使用固定链接

alt属性,也被称为alt text, 是当图片无法加载时显示的替代文本。alt属性对于盲人或视觉损伤的用户理解一幅图片中所描绘的内容非常重要,搜索引擎也会搜索alt属性。

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

10.无序列表以<ul>元素开始,并包含一个或多个<li>元素。

  有序列表以<ol>元素开始,并包含一个或多个<li>元素。

   Text input(文本输入框)是用来获得用户输入的绝佳方式。

   你可以用如下方法创建:

  <input type="text">

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

     

     占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。

    你可以用如下方式创建占位符:一个文本输入字段设置为必填项,在你的input元素中加上required属性就可以了,你可以使用:
   <input type="text" required>

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

11 

     form元素添加一个action属性来达到此目的。

action属性的值指定了表单提交到服务器的地址。

例如:

      <form action="/url-where-you-want-to-submit-form-data"></form>

            把你的文本框嵌套进form元素,并为此form元素添加action="/submit-cat-photo"

              添加一个submit(提交)按钮,点击这个按钮,表单中的数据将会被发送到你通过action属性指定的地址上。

                下面是submit按钮的例子:

          <button type="submit">this button submits the form</button>

                为你的form元素添加一个type为submit的提交按钮,用"Submit"作按钮文本。

12 .

多选一的场景就用radio button(单选按钮)

单选按钮只是input输入框的一种类型。

每一个单选按钮都应该嵌套在它自己的label(标签)元素中。

注意:所有关联的单选按钮应该使用相同的name属性。

下面是一个单选按钮的例子:

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

 

复选按钮是input的输入框的另一种类型。

每一个复选按钮都应该嵌套进label元素中。

所有关联的复选按钮应该具有相同的name属性。

下面是复选按钮的例子:

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


13 

使用checked属性,你可以设置复选按钮和单选按钮默认被选中。

为此,只需在input元素中添加属性checked

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

14 

div元素,也被称作division(层)元素,是一个盛装其他元素的通用容器。

15 和类选择器一样,你也可以使用ID选择器来声明样式。 

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


16  

所有的 HTML 元素本质上是小的矩形块,代表着某一小块区域。

有三个影响HTML元素布局的重要属性:padding(内边距)margin(外边距)border(边框)

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

元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。 

元素的 margin 控制元素的 border 和元素实际所占空间的距离。

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

有时你想要自定义元素,使它的每一个边具有不同的 padding

CSS 允许你使用 padding-toppadding-rightpadding-bottompadding-left来控制元素上右下左四个方向的 padding

padding: 10px 20px 10px 20px;

这四个值以顺时针方式排列:顶部、右侧、底部、左侧,简称:上右下左。

17

每一个 HTML 页面都有一个 body 元素。

18    class 会覆盖 body 元素的 CSS, 

,可对 HTML 元素应用多个 class 属性:

class="class1 class2"

注意:在 HTML 中这些 class 如何排序是无所谓的。

然而,在 <style> 部分中 class 声明的顺序却非常重要,第二个声明总是比第一个具有优先权。

  id 属性总是具有更高的优先级。

行内样式将覆盖style 中定义的所有 CSS。


19添加 img-responsive class属性。这样图片的宽度就能完美地适配你的页面的宽度 

可以通过居中头部元素来使它看起来更棒。text-center

20 

通常情况下,你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素,你的按钮将会伸展并填满页面整个水平空间,任何在它之下的元素都会跟着浮动至该区块的下一行。

这张图阐述了行内元素与块级元素的区别:


注意,这些按钮仍然需要 btn class。

深蓝色btn-primary是你的应用的主要颜色,被用在那些用户主要采取的操作上。



















猜你喜欢

转载自blog.csdn.net/qq_41799189/article/details/80214562
今日推荐