HTML标签：表单标签

  • 表单：
    • 概念：用于采集用户输入的数据的。用于和服务器进行交互。
    • from :用于定义定义表单的。可以定义一个范围，范围代表用户采集的范围
      • 属性：
        • action：指定用户提交的URL
        • method：指定提交的方式
          • 分类：一共七种，两种常用
            • get:
              1. 请求的参数会在地址栏中显示
              2. 请求参数的长度是有限制的
              3. 不太安全
            • post:
              1. 请求参数不在地址栏中显示，会封装在请求体中
              2. 请求参数的大小没有限制
              3. 较为安全
      • 表单项中的数据如果想要被提交，必须指定name属性
    • 表单项标签
      • input：可以通过type属性值，改变元素展现的样式
        • type属性：
          • text：文本输入框
            • placeholder：指定输入框提示的信息，当输入框的内容发生变化，会自动清空提示信息的
          • password：密码输入框
            • placeholder：指定输入框提示的信息，当输入框的内容发生变化，会自动清空提示信息的
          • radio： 单选框
            • 注意：
              1. 要先让单选框实现单选的效果，则多个单选框的name属性值必须一样
              2. 一般给每一个单选框提供value属性，指定其被选中后提交的值
              3. checked属性，可以指定默认值
          • checkbox：复选框
            • 注意：
              1. 一般会给每一个复选框提供value值，指定其被选中后提交的值
              2. checked属性，可以指定默认值
          • file：文件选择框
          • hidden：隐藏域，用于提交一些信息
          • 按钮：
            • submit：提交
            • button：一个按钮
            • image：图片的提交按钮
              • src属性指定图片的路径
        • label：指定输入项的文字描述信息
          • 注意：
            • label的for属性一般会和 input 的 id 属性值对应。如果对应了，则点击label区域，会让对应的输入框获取焦点。
      • select：下拉列表
        • 子元素：option，指定列表项
      • textarea：文本域
        • cols：指定列数，每一行有多少个字符
        • rows：默认多少行

CSS：页面美化和布局控制

  1. 概念：Cascading Style Sheets 层叠样式表

    • 层叠：多个样式可以作用于同一个html的元素上，同时生效
    1. 好处：
      1. 功能强大
      2. 将内容展示和样式控制分离
      • 降低耦合度。解耦
      • 让分工协作更加容易
      • 提高开发的效率

    2. css的使用：css与html的结合方式

      1. 内联样式
        • 在标签内使用style属性指定的css代码
        • 如：<div style="color:red ;">hello css</div>

      2. 内部样式

        • 在head标签内，定义style标签，style标签的标签体内容就是css代码
          1. <!DOCTYPE html>
          2. <html lang="en">
          3. <head>
          4. <meta charset="UTF-8">
          5. <title>css</title>
          6. <style>
          7. div{
          8.  color: blue;
          9. }
          10. </style>
          11. </head>
          12. <body>
          13. <div>hello css</div>
          14. </body>
          15. </html>

      3. 外部样式

        1. 定义css资源文件

        2. 在head标签内，定义link标签，引入外部的资源文件

          • css文件css div{ color: green; }

          • html文件```html <!DOCTYPE html>

hello css
- 注意： - 1,2,3种方式，css作用范围越来越大，1不常用，23常用 - 第三种格式引入可以这样写html 2. <a name="86dc5bbe"></a> ### css语法 + 格式： css 选择器{ 属性名1:属性值1; 属性名2:属性值2; ... } + 选择器：筛选具有相似特征的元素 + 注意： + 每一对属性需要使用;隔开，最后一对可以不加分号 1. 选择器 + 分类： 1. 基本选择器 1. id选择器：选择具体的id属性值的元素，建议在一个html中id值唯一 + 语法：#id属性值{} 2. 元素选择器：选择具有相同标签名称的元素 + 语法：标签名称{} + 注意：id选择器优先级要高于元素选择器 3. 类选择器：选择具有相同class属性值的元素 + 语法：.class属性值{} + 注意：类选择器 优先级高于 元素选择器 低于 id选择器 ```html <!DOCTYPE html>
冷暖自知
杰哥无敌
  1.          <p class="cls1">圆脸胖鸡</p>
  2.          <p class="cls1">杰哥霸气</p>
  3.      </body>
  4.      </html>
  5.      ```
  9.   2. 扩展选择器
  11.      1. 选择所有元素：
  12.         * 语法：`*{}`
  13.      2. 并集选择器：
  14.         + 语法：`选择器1，选择器2{}`
  15.      3. 子选择器：筛选选择器1下的选择器2
  16.         + 语法：`选择器1 选择器2{}`
  17.      4. 父选择器：筛序选择器2的父选择器1
  18.         + 语法：`选择器1 > 选择器2{} `
  19.      5. 属性选择器：选择元素名称，属性名=属性值的元素
  20.         + 语法：`元素名称[属性名='属性值']{}`
  21.      6. 伪类选择器：选择一些元素具有的状态
  22.         + 语法：`元素:状态{}`
  23.         + 如：`<a>`
  24.           + 状态：
  25.             + link：初始化的状态
  26.             + visited：被访问过的状态
  27.             + active：正在访问的状态
  28.             + hover：鼠标悬浮状态

  1. 属性

    1. 字体，文本

      • font-size：字体大小
      • color：字体颜色

      • text-align：字体对齐方式

      • line-height：行高

    2. 背景

      • background：复合属性
      • 如：background：url(img/img1) no-repeat center

    3. 边框

      • border：设置边框，复合属性
      • 如：border:1px soild red

    4. 尺寸

      • width：宽度
      • height：高度

    5. 盒子模型：控制布局

      • margin：外边距
      • padding：内边距
        • 默认情况下，内边距会影响整个盒子的大小
        • box-sizing: border-box;解决盒子被内边距影响的问题
      • float：浮动
        • left
        • right ```