九、HTML&CSS

HTML&CSS

HTML标签：表单标签

• 表单：

  • 概念：用于采集用户输入的数据的，用于和服务器进行交互。

  • form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

    • 属性：

      • action：指定提交数据的URL

      • method：指定提交方式

        • 分类：一共7种，2种比较常用

          • get：

            • 请求参数会在地址栏中显示，会封装在请求行中

            • 请求参数的长度是有限制的

            • 不太安全

          • post：

            • 请求参数不会在地址栏中显示。会封装在请求体中

            • 请求参数的长度没有限制

            • 较为安全

    • 表单项中的数据要想被提交：必须指定name属性

  • 表单项标签：

    • input：可以通过type属性值，改变元素展示的样式

      • type属性：

        • text：文本输入框，默认值

          • placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

        • password：密码输入框

        • radio：单选框

          • 注意：

            • 要想让多个单选框实现单选，则多个单选框的name属性值必须一样

            • 一般会给每一个单选框提供value属性，指定其被选中后提交的值

            • checked属性：可以指定默认值

        • checkbox：复选框

          • 注意：

            • 一般会给每一个单选框提供value属性，指定其被选中后提交的值

            • checked属性：可以指定默认值

        • file：文件选择框

        • hidden：隐藏域，用于提交一些信息

        • 按钮：

        • submit：提交按钮。可以提交表单

        • button：普通按钮

        • image：图片提交按钮

          • src属性指定图片的路径

      • label：指定输入项的文字描述信息

        • 注意：label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点

    • select：下拉列表

      • 子元素：option,指定列表项

    • textarea：文本域

      • cols：指定列数，每一行有多少个字符

      • rows：默认多少行

CSS

• 概念：Cascading Style Sheets 层叠样式表

  • 层叠：多个样式可以作用在同一个html的元素上，同时生效

• 好处：

  • 功能强大

  • 将内容展示和样式控制分离

    • 降低耦合度。解耦

    • 让分工协作更容易

    • 提高开发效率

• CSS的使用：CSS与html结合方式

  • 内联样式

    • 在标签内使用style属性指定css代码

  • 内部样式

    • 在head标签内，定义style标签，style标签的标签体内容是css代码

  • 外部样式

    • 定义css资源文件

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

  • 注意：

    • 1，2，3种方式css作用范围越来越大

    • 1方式不常用，后期常用2，3

• css语法：

  • 格式：

    • 选择器{

      • 属性名1：属性值1；

      • 属性名1：属性值1；

      • ……}

    • 选择器：筛选具有相似特征的元素

    • 注意：

      • 每一对属性需要使用；隔开，最后一对属性可以不加；

• 选择器：筛选具有相似特征的元素

  • 分类：

    • 基础选择器：

      • id选择器：选择具体的id属性值的元素，建议在一个html页面种id值唯一

        • 语法：#id属性值{}

      • 元素选择器：选择具有相同标签名称的元素

        • 语法：标签名称{}

        • 注意：id选择器优先级高于元素选择器

      • 类选择器：选择具有相同的class属性值的元素

        • 语法：.class属性值{}

        • 注意：类选择器优先级高于元素选择器

      • 注意：优先级从高到低为：id选择器>类选择器>元素选择器

    • 扩展选择器：

      • 选择所有元素：

        • 语法：*{}

      • 并集选择器：

        • 语法：选择器1，选择器2{}

      • 子选择器：筛选选择器1元素下的选择器2元素

        • 语法：选择器1空格选择器2{}

      • 父选择器：筛选选择器2的父元素选择器1

        • 语法：选择器1>选择器2{}

      • 属性选择器：选择元素名称，属性名=属性值的元素

        • 语法：元素名称 [属性名="属性值"]{}

      • 伪类选择器：选择一些元素具有的状态

        • 语法：元素:状态{}

        • 如：<a>

          • 状态：

            • link：初始化的状态

            • visited：被访问过的状态

            • active：正在访问的状态

            • hover：鼠标悬浮的状态

• 属性：

  • 字体、文本：

    • font-size：字体大小

    • color：文本颜色

    • text-align：对齐方式

    • line-height：行高

  • 背景：

    • background：

  • 边框：

    • border：设置边框，复和属性

  • 尺寸：

    • width：宽度

    • height：高度

  • 盒子模型：控制布局

    • margin：外边距

    • padding：内边距

      • 默认情况下内边距会影响整个盒子的大小

      • box-sizing:border-box;设置盒子的属性，让width和height就是最终盒子的大小

    • float：浮动

      • left

      • right