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

input标签：

　　type属性

　　　　text password reset submit button file hidden CheckBox radio date

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

　　value：指定默认值

　　默认选中 checked

　　readonly 只读可以提交

　　disabled 禁用

表格 table

 1    <table border="1" cellpadding="1" cellspacing="1">
 2         <thead>
 3         <tr>
 4             <th>2</th>
 5             <th>3</th>
 6             <th>4</th>
 7         </tr>
 8         </thead>
 9         <tbody>
10         <tr>
11             <td>1</td>
12             <td>2</td>
13             <td>3</td>
14         </tr>
15         </tbody>
16     </table>

form 表单

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

a标签

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

select标签

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

多选

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

label标签显示描述内容

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

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

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

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

1     <style>
2         div{
3             background-color: red;
4             height: 100px;
5             width: 100px;
6         }
7     </style>

内敛样式方式二

1 <div style="background-color: blue;  100px;height: 100px">
2 
3 </div>

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

css选择器

　　元素选择器

 1     <style>
 2         /*元素选择器*/
 3         div{
 4             color: red;
 5         }
 6         #dazhuang{
 7             color: red;
 8         }
 9         #alex{
10             color: green;
11         }
12         .c1{
13             color: green;
14         }
15     </style>

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

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

组合选择器：
后代选择器

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

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

毗邻选择器

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

弟弟选择器

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

属性选择器

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

分组

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

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

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