一、表单

含义：所有表单元素放在 form 标签里面

<form action="提交的地址" method="提交方式默认get">表单元素

</form>

页面get传值的写法

路径？属性=属性值

键值对

键=值 & 键=值

知识点：所有的表单元素，除了提交和重置和文件，其他表单 元素可以在form标签外面用

1.表单元素的类型

文本类型：disabled/readonly：不可编辑

文本框：text

密码框：password

隐藏域：hidden

*多行文本：textarea

2.按钮类型：

普通按钮：button

重置按钮：reset

提交按钮：submit

3.选择类型：

单选：radio

复选：checkbox

注意：这两个表单元素name属性不仅有键的作用还有分组的作用

checked：默认选中

disable：不可选中

label标签

单选label标签的两种用法：

1 男2             3             5              女6              

*下拉：<select>

<option>163</option>

<option>126</option>

<option>163</option>

</select>

selected:默认选中 是option的属性

multiple：多选 是select的属性 和size联合使用

size：显示选项的个数 select属性

案例练习：

1 
      
        2 
        3     
       
         4         
           5             
 6             
 7         
 8         
           9             
10             
11         
12         
          13             
14             
19              
20              
21              
22         
23         
          24             
25             
32             
33             
40                 
41         
42         
          43             
44             
        
         
          
用户名：
          
         
         
          
密码：
          
         
         
          
性别：
          
男    15             17              女18              
          
喜欢哪种家宠
          
狗
          
猫
         
         
          
兴趣：
          
26                 篮球27                 足球29                 毽球31             
          
舞蹈种类
          
34                 拉丁舞35 民族舞36 肚皮舞37 38 39                 
          
         
         
          
个人介绍
          
</td>45         </tr>46     </table>47     48     49     50 
         
        
       
      

4.文件：file

form属性enctype="multipart/form-data"

表单元素通用格式

<input type="类型" name="后台接受键" value="值" />

特殊格式

<textarea>

</textarea>

案例截图：

ifram:把别的页面以窗口的形式显示在本页面

音视频标签：<video>

<video src="音视频路径" autoplay controls></video>

<audio src="音视频路径" autoplay controls></video>

autoplay:音视频

 

代码练习：

1 3     
      

案例截图：

二、css

含义:层叠样式表 美化页面

用法分类：

1.内联：在标签中以属性的形式表现 属性名 style

样式：样式值；

<div style="color:blanchedalmond;">

这是一个div111

</div>

注意：不推荐使用，优先级最高

2.内嵌：在head标签中以标签的形式表现 标签名style

3.外部引用：在head标签中以标签形式表现，标签名link用来引入一个CSS文件

<link rel="stylesheet" href="index.css">

项目中最常用

4.选择器：

选择器：把指定的样式应用于某一个、组、类标签上

（1）.标签选择器

（2）id选择器：通过id属性值找标签 关键符号"#id值{样式}"

（3）class（类）选择器：通过class属性值找标签 关键符号".class值{样式}"

（4）复合选择器：

并列 关键符号",用法： 选择器1,选择器2{样式}"

后代 符号"空格 " 用法：选择器1 选择器2{样式} 就近原则

筛选 关键符号. 用法：选择器class选择器

属性选择器 语法：选择器[属性名=属性值]{样式}

（5）*通用选择器

{padding：0px;

margin:0px;}

优先级排列：权值

1.内联样式

2.id选择器（系统定义的属性：id(值唯一) class   name  value）

3.class选择器

4.标签选择器

5.通用选择器

代码练习：

1  2  3 
       4  5 
       6  7  8  9 10 
      
       11     
       12     
       13     
       14     
       15 
      
16 17 18 

1 .p1,.p2,.p3,.p4{ 2     width: 100px; 3     height: 100px; 4     display: inline-block; 5     background-repeat: no-repeat; 6     background-size: cover 7      8 } 9 .p1{
    background-image: url(12.22/code/images/boy.gif)}10 .p2{
    background-image: url(12.22/code/images/freddie.png)}11 .p3{
    background-image: url(12.22/code/images/mondriaan.gif)}12 .p4{
    background-image: url(12.22/code/images/puddytat.gif)}13 .p1:hover{
    background-image: url(12.22/code/images/v_boy.gif)}14 .p2:hover{
    background-image: url(12.22/code/images/v_freddie.gif)}15 .p3:hover{
    background-image: url(12.22/code/images/v_mondriaan.gif)}16 .p4:hover{
    background-image: url(12.22/code/images/v_puddytat.gif)}

 

案例截图：