第二十六课：表单标签，div和span选择器，css选择器，文本相关样式，浮动，盒子模型

表单标签

from:表单，将数据提交给服务器的标签

label：label 标签为 input 元素定义标注（标记）

属性：

action: 服务器资源地址
method: 发送请求的方式 get[默认] post
enctype: 数据的类型 - 后面文件上传时需要修改

type：类型
text：普通文本框
password：密码框
radio：单选按钮，必须使用name属性进行分组
checkbox：多选按钮
file：文件
date：日历，h5新特性
submit：提交，将数据发给服务器
reseat:重置
hidden：隐藏一些不能改的值
button：普通按钮

select：
value：input框的值
placeholder：内容提示

readonly：只读

checked：默认选中状态，只有radio和checkbox有效

textarea：多行文本域

<form>
<input type="text" name="usename" placeholder="请输入用户名" /><br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" value="女"/>女<br>
<input type="checkbox" name="hobby" value="唱歌"/>唱歌<input type="checkbox" name="hobby" value="跳舞"/>跳舞
<input type="checkbox" name="hobby" value="打球"/>打球<br>
<input type="date" name="birthday"/><br>
<select>
    <option name="地址" value="北京">北京</option>
    <option name="地址" value="上海">上海</option>
    <option name="地址" value="广州">广州</option>
    <option name="地址" value="深圳">深圳</option>
    <option name="地址" value="浙江">浙江</option>
</select>
<input type="submit"  value="注册">
</form>>

div和span

div:块标签，自带换行->块元素

span：普通的文本标签，不带换行->行内元素

都是为了配合css使用的

CSS选择器

css的使用：

1.标签中添加style属性

2.head中添加style标签

3.link引入外部css文件

css选择器

1、基础选择器: id[#id] 类[.class] 元素[element] 组合[,]

2、派生选择器: 后代[空格] 子代[>] 兄弟[+]

3、伪类选择器: :first-child :last-child :hover :visited :active

4、属性选择器: div[name] div[name=‘a’]

文本相关样式

文本相关 text

字体相关 font

背景相关 background

<style>
    body{
        font-size: 20pt;
        font-family: "Bookman Old Style";
        text-shadow: darkseagreen;
        text-decoration: black underline;
        word-spacing: 20pt;
     background-color: aquamarine;
        background-image: url("img/1.jpg");
        background-repeat: no-repeat;
    }
</style>

浮动

div{
    //border: red solid 1px;
    float: left;
    list-style-type: none;
}

盒子模型

margin: 外边距 , 元素和相邻元素之间的距离

border: 边框

padding: 内边距 , 元素内容和边框之间的距离

width * height: 元素内容的宽和高