HTML+CSS学习笔记

最近在FCC学习前端，将学到的知识点整理如下：

1、常用标签及基本样式设置

1）标题

     h1 一级标题 主标题，h2 副标题，h3,h4···字体依次往下减小

2）段落标签p

    段落标签<p></p>，用来创建段落

3）注释

    html中注释用<!-- 中间为注释内容 -->

4）设置样式

    第一种：直接在元素中使用style进行修改，如，<h2 style="color:red">可爱的猫咪</h2>

    第二种：在元素前统一使用

    <style>

    选择器{属性名称：属性值;} 属性值后面一定要加上英文分号 

    </style>进行样式设置，这里的选择器可以是元素选择器，类选择器，

    元素选择器如<style>  h2{color:blue;} </style>

    类选择器如<style> .red-text{color:blue;}</style> 必须使用.

    

    第三种：单独建立.CSS文件，在html中直接引用

5）font-size与 font-family

    font-size设置字号 font-family设置字体 

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

    有几种默认的字体是所有浏览器都可用的，包括Monospace、Serif和Sans-Serif。当某种字体不可用时，你可以让浏览器自动降级到另一种字体。

    如，p {
               font-family: Helvetica, Sans-Serif;
             }当Helvetica字体不能用时，自动降级到Sans-Serif字体

6）img标签

     img元素是自关闭元素，不需要结束标记。如，<img src="https://www.your-image-source.com/your-image.jpg"> 使用src属性指向一个图片的具体地址。

     设置图片大小，使用width属性设置图片的宽度

     当图片无法加载时，使用alt属性进行文字提示代替图片显示，如，<img src="www.your-image-source.com/your-image.jpg"  alt="your alt text">

7）设置元素边框

     可以使用border-color: red;border-width: 5px;border-style: solid;这三种属性分别来设置，还可以合起来设置border:5px solid red;
 
     对于矩形边框，为了使其美观，可以使用border-radius属性来设置边框外形，

    例如border-radius：10px;，得到的效果如图所示，设置出来是边角半径为10px的一个边框；border-radius：50%;使用百分比来设置边框半径的值，效果如图

8）a标签

     用于链接地址<a href=" 链接地址" >链接显示名称</a>   a可以放在段落中间，即可以进行嵌套，如，<p>Here's a <a href="链接地址"> 链接显示名称 </a> 段落文本</p>

     如果想为你的网站添加一个a元素，但此时你还不知道要将它们链接到哪儿，此时可以使用固定链接，即将href后的链接改为“#”，将其变为一个固定链接。

     可以通过把某元素嵌套进a元素使其变成一个链接，如<a href="#"><img src="/images/relaxing-cat.jpg"></a>，当点击图片时鼠标将变为手型。

 9）无序列表ul

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

      如<ul>

           <li>milk</li>

           <li>fish</li>

               ``````

        </ul>

10）有序列表ol

       和ul类似

11）表单form1   

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

      可以创建为：<input type="text"> 注意，input元素是自关闭的

      占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。如，<input type="text" placeholder="this is placeholder text">

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

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

      为form添加一个submit(提交)按钮，点击这个按钮，表单中的数据将会被发送到通过action属性指定的地址上。如，<button type="submit">this button submits the form</button>

      整个的一个表单如下，实现效果如图具体代码如下:

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

12）表单form2     

       当设计表单时，可以指定某些选项为必填项(required)，只有当用户填写了该选项后，用户才能够提交表单。

       例如，如果你想把一个文本输入字段设置为必填项，在你的input元素中加上required属性就可以了，你可以使用：<input type="text" required>

13）单选按钮radio button

       单选按钮只是input输入框的一种类型，每一个单选按钮都应该嵌套在它自己的label(标签)元素中。

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

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

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

 14）复选按钮checkboxes

        复选按钮是input的输入框的另一种类型，每一个复选按钮都应该嵌套进label元素中。和单选按钮类似，所有关联的复选按钮应该具有相同的name属性。      

        如： <label><input type="checkbox" name="personality">Loving</label>
             <label><input type="checkbox" name="personality">outgoing</label>
             <label><input type="checkbox" name="personality">shy</label>

        使用checked属性，你可以设置复选按钮和单选按钮默认被选中。如<input type="radio" name="test-name" checked>

15）div和background

       div元素，也被称作division(层)元素，是一个盛装其他元素的通用容器       background-color 属性来设置一个元素的背景颜色，如：.green-background {background-color: green;}

16）基本选择器

       通配选择器 选择文档中所有HTML元素

       元素选择器 选择指定类型的HTML元素

       类选择器    选择指定class属性值为“class”的任意类型的任意多个元素   定义类选择器必须添加 . 为前缀

       ID选择器   选择指定ID属性值为“id”的任意类型元素   id 属性应该是唯一的 定义ID选择器必须添加 # 为前缀，id 属性具有更高的优先级。

       群组选择器 将每一个选择器匹配的元素集合并

       类选择器后面设置的样式可以覆盖前面设置的样式，ID选择器样式可以覆盖类选择器设置的样式，行内样式设置可以覆盖类选择器和ID选择器设置的样式

       如果需要某个样式不被覆盖，可以使用！important，如，color: pink !important;

17）HTML元素布局

      padding（内边距）控制元素内容 content和元素边框 border 之间的距离，CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding。

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

      如果上下相同，左右相同，则可以写成padding: 10px 20px；如果上下左右均相同，则可以写为padding:20px;

      margin（外边距） 控制元素边框 border 和元素实际所占空间的距离，将一个元素的 margin 设置为负值，元素将会变大。简写类似padding

      border（边框）简写为border:5px solid red;

18）颜色表示

      英语

      16进制。16进制用6位数表示，前2位代表R红色，0最小，F最大，中间2位代表G绿色，最后2位代表B，蓝色，如#00FF00，代表纯绿色，可以简写为#0F0。

      RGB值。 background-color: rgb(0,0,0);  表示纯黑。