欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-27 22:31:49
...

表单标签

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: 元素内容的宽和高