复习html CSS选择器 组合选择器和属性选择器

input标签：

　　type属性

　　　　text   password  reset   submit   button   file   hidden   CheckBox   radio    date

　　name属性   分组，提交数据时的key，提交的数据value

　　value：指定默认值

　　默认选中     checked  

　　readonly   只读  可以提交

　　disabled    禁用

表格  table

　

   <table border="1" cellpadding="1" cellspacing="1">
        <thead>
        <tr>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        </tbody>
    </table>

form    表单

<img src="图片地址" alt="未显示出来提示的汉字" title="鼠标悬浮的提示，任何标签都可使用"  width="1" height="1">
    <form action="地址">
        <input type="text" name="username">
        <input type="radio" name="sex" value="1">
        <input type="radio" name="sex" value="2">
        <input type="radio" name="sex" value="3">
        <button>提交</button>
    </form>

a标签

<a href="超链接地址" target="_blank"></a>
<a href="超链接地址" target="_self"></a>

select标签

<select name="city" id="">
    <option value="1">上海</option>
    <option value="2" selected>深圳</option>
    <option value="3">惠州</option>
    </select>

多选

<select name="city" multiple>
    <option value="1">上海</option>
    <option value="2" selected>深圳</option>
    <option value="3">惠州</option>
    </select>

label标签    显示描述内容

<label for="password"></label>
<input type="text" name="password" id="password">

　CSS 样式  css选择器（Cascading Style Sheet,层叠样式表）

css代码写法：   h1{color:red;}   选择器{css属性：属性值；}

css代码引入：
　　head标签  方式一

    <style>
        div{
            background-color: red;
            height: 100px;
            width: 100px;
        }
    </style>

       内敛样式   方式二

<div style="background-color: blue;  100px;height: 100px">

</div>

　　方式三  外部文件引入的方式    head标签里面使用link标签引入 <link rel="stylesheet" href="test.css"> 

css选择器

　　元素选择器

    <style>
        /*元素选择器*/
        div{
            color: red;
        }
        #dazhuang{
            color: red;
        }
        #alex{
            color: green;
        }
        .c1{
            color: green;
        }
    </style>

id选择器（一个对应一个）     class选择器（可以同时将一类归在一起）可以重复 div.c1{ 2 color: green; 3 } 指定某一类

通用选择器  *{ 2 color:green; 3 } 

组合选择器：
后代选择器

　　　　

<style>
        div a{    # 找到div标签后代里面的所有a标签
            color: red;
        }
    </style>

    <style>
        div>a{     # 儿子标签   找到div的儿子标签这一代的a标签
            color: red;
        }
    </style>

毗邻选择器

    <style>
        div+a{     # 找到紧挨着div标签的下一个标签（是兄弟标签）
            color: red;
        }
    </style>

弟弟选择器

    <style>
        div~a{     #  找到的是同级的后面的所有兄弟标签
            color: blue;
        }
    </style>

属性选择器

    <style>
        div[title=xx]{    # 通过属性对应的值来查找
            color: red;
        }
        input[type]{     # 通过属性名来查找
            background-color: blue;
        }
    </style>

分组

    <style>
        div,p{     # div选择器和p选择器共同设置相同的样式，可以都好分隔
            color: red;
        }
    </style>