HTML以及CSS

# 基础知识：



1. 开始结束标志：<>  </> 



2. h1,h2,h3,h4,h5,h6 标题等级由大到小



3. p段落（paragraph）、h标题（header）



4. 注释： <!--        -->



5. iorem ipsum text 占位符 段落中占位置无实际意义



6. 设置元素颜色：



     * 内联方式：  



        <h2 style="color: blue">内联颜色设置方式</h>



     * css层叠样式表：



        <style>选择器  {属性名称：属性值；} h2 {color:red;} </style>//为h2所有元素创建了一个元素选择器  全部设置为红色



     * css类选择器：css中，类选择器应该加.为前缀（不加浏览器以为是元素选择器）  HTML中class属性不能加.      

       <style>



        .bule-text



          {color:bule;}



       </style>



        <h2 class = "blue-text">类选择器</h2>



7. 设置字体样式：

          

         * <p style = "font-size:16px;">

            字体样式设置

            //内联<!--内联-->

            </p> 



         * <style>

            / .red-text{

              color:red;

             }



            p{

              font-size:16px;

            }

            //css<!--css-->

l           </style>

*** 

8. 设置元素字体

         ① <style><!--css-->//css

          p{

            font-family:Monospace ;

            }

          </style>

          ②设置谷歌字体：

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

          h2{

             font-family:Loster;

           }

 9. 几种浏览器兼容字体：

     Monospace Serif Sans-Serif  当某种字体不可用，浏览器自动降级到另一种字体

     例如，如果你想让段落的字体为Helvetica，但你同时想在Helvetica字体不可用时自动降级使用Sans-Serif字体，你可以使用如下CSS样式：

      p {

        font-family: Helvetica, Sans-Serif;

      }

10. 添加图片：

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

     img 是自关闭元素

     src指向图片具体地址

11. 改变图片大小（设置像素）：

     <style>.larger-image{width:500px}</style>     <img class="smaller-image" src="/images/relaxing-cat.jpg">//类里的写法

12. 图片边框：

     想要让一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为固体(solid)，代码如下:

     <style>

       .thin-red-border {

         border-color: red;         border-width: 5px;

         border-style: solid;        }

     </style>

13. 多个class元素 到一个元素：

     <img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg" >14. 通过CSS的一个叫border-radius(边框半径)的属性来让它的边框变成圆的：

     border-radius: 10px;

      border-radius: 50%;

      写在类属性里

15. 页面跳转链接：

    a（anchor）锚点元素  链接外部地址实现页面跳转，也能链接到当前页面某部分实现内部导航

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

    cat photos 为锚点文本 加在锚点结束标记</a>之前

    当你想添加一个固定链接时 href=#  （哈希符）空链接

    链接一个图片： <a href= #><img src="/images/relaxing-cat.jpg"></a>

    光标变手指

16. alt属性 alt text 当图片无法加载的时候显示的替代文本  其对于盲人或者视觉损伤的用户理解一幅图片所描绘的内容非常重要  搜索引擎也会有  每一张图都会     有alt属性

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



***

     



17. HTML有一个特殊元素，用于创建unordered lists（无序列表）, 或带项目符号的列表。

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

    例如：

    <ul>  字母数字分清楚U L  L I

      <li>milk</li>

      <li>cheese</li>

    </ul> 

18. HTML有一个特殊元素，用于创建ordered lists（有序列表）, 或数字编号列表。

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

     例如：

     <ol>

       <li>Garfield</li>

       <li>Sylvester</li>

     </ol>

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

    你可以用如下方法创建：

    <input type="text">

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

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

    你可以用如下方式创建占位符：

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

21. HTML来构建可以跟服务器交互的Web表单(form)，通过给你的form元素添加一个action属性来达到此目的。

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

    例如：

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

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

    下面是submit按钮的例子：

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

    按钮应该在你要提交的form表单中

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

   <input type="text" required>   //置空显示 必填字段 

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

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

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

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

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

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

  多选按钮形式：

  <form action="/submit-cat-photo">

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

  <button type="submit">Submit</button>

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

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

</form>

25. 多选 ：

    checkboxes（复选按钮）。

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

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

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

   下面是复选按钮的例子：

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

26. input 的三种形式默认选中 加checked

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

     每种形式建议第一种选中