web前端--02

表格

<table border="10px" width="900px" height="400px" cellspacing="0"
        <!-- 表头 rows  数据 data-->
        table：border（只控制最外围大小）、width、height(tbody 
        值是底线，只高不低)、cellspacing(单元格与单元格之间的距离)
        caption；通过css更改
        thead、tr、tbody、tfoot:height\align（水平）\valign（垂直）
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
       <!-- td   跨行：rowspan  跨列：colspan-->
        <tbody>
            <tr>
                <td rowspan="2">XXX</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
        </tbody>
        <tfoot>
            <tr align="right">
                <td colspan="5">共计:4人</td>
            </tr>
         </tfoot>

details

    <!-- details：详情标签    配合summary使用 -->
    <details>
        <summary>有志青年</summary>
        我们这里都是优秀的有志青年
    </details>

tabindex

<!-- tabindex：让本不能tab遍历获取焦点的元素可以获取 可以为负数，0，正数-->
    <input type="text">
    <a href="#">去百度</a>

表单 

<!-- 表单：网页交互区，收集用户信息 
      action:将数据交给谁处理
      name：必有属性
      method：提交方式   ajax
-->
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <input type="color">
        <input type="time">
        <button>提交</button>
    </form>

<form action="#">
        <!-- 文本框    maxlength:最大长度-->
        用户名：<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名："><br />
        <!-- 密码 -->
        密码：<input type="password" name="pwd"><br />
        <!-- 单选框 -->
        <input type="radio" name="gender" value="nan">男
        <input type="radio" name="gender" value="nv">女<br />
        <!-- 多选框   label标签-->

        <input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲 
        </label>
        <label><input type="checkbox" name="food">吃臭豆腐</label>
        <!-- checked默认选中 -->
        <input type="checkbox" name="food" checked>吃肥肉
        <!-- 隐藏域 -->
        <input type="hidden" name="hid" value="南德斯才能使调查">
        <!-- 确认按钮 -->
        <!-- <button type="submit"></button> -->
        <!--重置按钮 -->
        <input type="reset">

        <!-- 普通按钮 -->
        <input type="button">
        <!-- 文本域 -->
        <textarea cols="20" rows="10" maxlength="200
        ">

        </textarea><br />
        <!-- 下拉菜单 -->
        <select name="jiguan" id="one">
            <option value="南京">南京</option>
            <!-- selected下拉菜单的默认选中 -->
            <option value="成都" selected>成都</option>
            <option value="西安">西安</option>
        </select>
id身份证号,在一个页面中只能出现一次
class一类,可以出现多个.

全局属性

需要写在head中
    <style>
        .pink {
            color: pink;
        }
    </style>

css的三中引入方式

1.内部样式<写在head里>

<style>
          div{
              width: 300px;
              height:300px;
              background-color:aquamarine;
          }
</style>

2.行内样式

<div style="width:200px; height:200px; background-color:cornsilk;"></div>

3.外部结构

 <!-- 外部样式   推荐！！！！！ -->
    <link rel="stylesheet" href="./14-样式.css">

基本选择器

1.标签选择器-选择所有所选择的标签

p
{
  color:aqua;
}

2.id选择器

#box{
     color:aqua;
}

3.类选择器

.box{
    color:aqua;
}

4.通配符选择器

--选择所有标签

*{
color:aqua;
}

包含选择器

1.子代选择器--选亲儿子

.a>li{
       color:aqua;
}

2.后代选择器--选全部后代

.a li{
    color:aqua;
}

字体的样式

<style>
        div {
            cursor: pointer;
 
            /* 字体大小 */
            /* font-size: 40px; */
            /* 字体粗细 */
            /* font-weight: bold; */
            /* font-weight: 900; */
            /* 100-900 400===normal  800===bold  100-900越来越粗           
             font-weight: 400;*/
            /* 字体是否倾斜 */
            /* font-style: italic/normal; */
            /* font-family: "微软雅黑"; */
 
            /* italic 900可省略，字体大小，font-family必须存在 */
            font: italic 900 70px "微软雅黑"
 
        }
    </style>

复合选择器

把多个元素选择出来相加

<style>
      
        div,
        p,
        span {
            color: red;
        }
    </style>

属性选择器

/* type^="te"以te开头 */

input[type^="te"] {

background-color: red;

}

input[type$="l"] {

background-color: green;

}

/* type*="e" type值里边包含e */

input[type*="e"] {

background-color: chartreuse;

}