前端学习第二周

目录

  • 二十一.表格
    • 21.1表格标签
      • 1. ````:表格的最外层容器
      • 2. ``
      • ``:定义表格行
      • 3. ``
      • ``:定义表头
      • 4. ``
      • ``:定义表格单元
      • 5. ``
      • ``:定义表格标题
      • 21.2表格属性
      • 二十二.表单
        • 22.1表单标签
          • 22.1.1````标签的常用属性
          • 22.1.2多行文本框
          • 22.1.3菜单
          • 22.1.4辅助表格的功能
        • 22.2表格和表单的综合使用
      • 二十三.````和````
        • 23.1``(块)``标签
        • 23.2``span(内联)``标签
        • 23.3实例
      • 一.CSS基础语法
        • 1.1格式
        • 1.2基本样式
        • 1.3长度单位
        • 1.4CSS注释
      • 二.内联样式与内部样式
        • 2.1内联(行内、行间)样式
        • 2.2内部样式
        • 2.3内部样式与内联样式的区别
      • 三.外部样式及两种写法
        • 3.1````标签
          • 3.1.1rel属性
          • 3.1.2````属性
      • 四.CSS颜色表示法
        • 4.1单词表示法
        • 4.2十六进制表示法
        • 4.3rgb三原色表示法
        • 4.4获取网页当中的颜色
      • 五.CSS背景样式
        • 5.1背景颜色
        • 5.2背景图片
        • 5.3背景图片的平铺方式
        • 5.4背景图片的位置
        • 5.5背景图随滚动条的移动方式
        • 5.6背景图片的大小
      • 六.背景实现视觉差效果
        • 6.1原理(区分相同标签的方法)
        • 6.2练习
      • 七.CSS边框样式
        • 7.1边框的大小
        • 7.2边框的颜色
        • 7.3边框的样式
        • 7.4代码案例
      • 八.边框实现三角形
        • 8.1原理
        • 8.2练习
      • 九.CSS文字样式
        • 9.1字体类型
        • 9.2衬线体与非衬线体
        • 9.3注意事项
          • 9.3.1设置多字体的方式
          • 9.3.2引号的问题
        • 9.4字体大小粗细样式
          • 9.4.1字体大小
          • 9.4.2字体粗细
          • 9.4.3字体样式
          • 9.4.4字体颜色
      • 十.CSS段落样式
        • 10.1文本修饰与文本大小写
          • 10.1.1文本修饰
          • 10.1.2:文本大小写(只针对英文)
        • 10.2文本缩进与文本对齐
          • 10.2.1文本缩进
          • 10.2.2文本对齐方式
        • 10.3文本的行高
          • 10.3.1定义行高
        • 10.4文本间距和英文折行
          • 10.4.1定义字间距
          • 10.4.2强制折行(只针对英文)
        • 10.5文本与段落实现个人简介
          • 10.5.1练习
        • 10.6CSS复合样式
          • 10.6.1定义
          • 10.6.2复合的写法
      • 十一.CSS选择器
        • 11.1ID选择器及注意事项
          • 11.1.1id选择器
          • 11.1.2注意事项
        • 11.2CLASS选择器及注意事项
          • 11.2.1class选择器
          • 11.2.2注意事项
      • 二十一.表格

        通过代码的编写可以在浏览器上实现表格

        21.1表格标签

        都是双标签,有嵌套关系,要严格符合嵌套规范。

        1. :表格的最外层容器

        2.

        :定义表格行

        3.

        :定义表头

        4.

        :定义表格单元

        5.

        :定义表格标题

        例:

        <table><tr><caption>原神角色caption><th>胡桃th><th>行秋th><th>草神th>tr><tr><td>td><td>td><td>td>tr>table>
        

        显示为

        原神角色
        胡桃行秋草神

        语义化标签

        <tHead>:表示头部,即<th>部分。
        用法:<thead><tr><caption>原神角色caption><th>胡桃th><th>行秋th><th>草神th>tr>thead>
        <tBody>:表示身体,即<td>部分。
        用法:  <tbody><tr><td>3.2或更后面td><td>无所谓td><td>3.2上半td>tr>tbody>
        <tFood>:表示尾部,用法同上。
        

        无实际意义,相当于一种标准,优化浏览器此这程序的运行,尽量使用。

        注:在一个table中tbody可以出现多次,但thead、tfood只能出现一次。

        21.2表格属性

        • 用于的属性
          border:表格边框
          cellpadding:单元格内的空间
          cellspacing:单元格之间的空间
          例:
        • 用于
        • 用于
        • 用于
        • 的属性
          align:左右对齐方式
          valign:上下对齐方式
          align:left(左)、center(中)、right(右)
          valign:top(上)、middle(中)、bottom(下)

          二十二.表单

          就是一些输入框,文本框等

          22.1表单标签

          下面是一些常见的表单标签

          1.<form>表单的最外层容器
          2.<input>(单标签)用于搜集用户信息,根据不同的type属性值,展示不同的控件,如输入框、密码框、复选框等。
          3.<textarea>多行文本框
          4.<select><option>下拉菜单
          5.<label>辅助表单
          

          表格标签的通用属性:checked、disabled、name、for…

          22.1.1标签的常用属性

          请添加图片描述

          • text属性:文本输入框

          placeholder属性是一个提示语,显示为在这里插入图片描述

           <h2>账号h2><input type="text">
          

          显示出一个账号框

          • password属性:密码输入框
           <h2>密码h2><input type="password">
          

          显示出一个密码框

          • checkbox属性:复选框(checked)

          checked属性会让后面的元素默认被选中,disabled属性会让后面的元素无法被选中。

           <input type="checkbox" checked>a<input type="checkbox" disabled>b<input type="checkbox">c
          

          会出来三个选项,可进行选择

          • radio属性:单选框

          name属性让他们成为一组,让浏览器识别,从而可以单选。

          <input type="radio" name="1">men
          <input type="radio" name="1">women
          

          进行单选

          • file属性:上传文件
          <h2>h2>
          <input type="file">
          
          • submit属性:提交(把用户输入的信息提交给form的action属性中的网址,以便后续操作)

          • reset属性:重置(重置输入信息)

           <form action="https://www.baidu.com/"> <h2>h2><input type="submit"><input type="reset">form>
          
          • multiple属性:多选
          <input type="file" multiple>
          

          可以进行文件的多选

          //去掉input点击后边框颜色

          input { outline:none; }

          //改变input触发后边框颜色

          input{ outline-color:red; }

          22.1.2多行文本框

          的属性
          rowspan:合并行
          例:
          的属性
          colspan:合并列
          例:
          胡桃