HTML/CSS
1.表单相关标签
表单标签<form>
概述
在html页面创建一个表单，表单标签在浏览器上没有任何显示。
如果数据需要提交到服务器，负责搜集数据的标签必须存放在表单标签体的内容
属性
action属性：请求路径，确定表单提交到服务器的地址（路径）
method属性：请求方式。常用的取值：get，post
get：默认值
提交时数据追加在请求路径上
数据格式k/v，追加使用？连接，之后每一对数据使用&连接
请求长度有限所以get请求提交的数据有限
如:/1.html?username=jack&password=1234
post:
提交数据不再请求路径上追加（即不显示在地址栏上）
提交是的数据大小不显示,相对来说比较安全
输入域标签:<input>
概述
最常用的标签。用于获取用户输入信息，type属性值不同，搜集方式不同。
属性
type
text:文本域（默认宽度为20）
password:密码框，该字段的字符以黑圆显示
radio:单选框
submit:提交按钮。会把表单数据提交到服务器，一般不写name属性，否则将"提交"两字提交到服务器
checkbox:复选框
file:文件上传组件，提供“浏览”按下可以选择需要上传的文件
hidden：隐藏字段，数据会发送给服务器，但浏览器不进行显示
reset：重置按钮。将表单数据恢复到默认值
image:图形提交按钮，将表单恢复到默认值
button:普通按钮，常用语与JavaScript混合使用
name
元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获取提交的数据
value
设置input标签的默认值，submit和reset为按钮显示数据
size：大小
checked
单选框或复选框被选中
readonly
是否只读
disabled
是否可用
maxlength
允许输入的最大长度
下拉列表标签:<select>
概述
可以进行单选或多选。需要使用子标签<option>指定列表项
属性
name:发给服务器的名称
multiple属性:不写默认单选，取值为“multiple”表示多选
size属性:多选时，可见选项的数目
子标签<option>
概述
下拉列表中的一个选项(一个条目)
属性
selected:勾选当前列表项
value:发送给服务器的选项值
文本域<testarea>
概述
多行的文本输入控件
属性
cols属性：文本域的列数
rows属性：文本域的行数
按钮标签:<button>
<button type="button|reset|submit">提供"普通|重置|提交"功能
div
概述
是一个普标签，进行区域划分
特征
div通常是块及元素
独自占一行
独自不能实现复杂效果，必须结合CSS样式进行渲染
<div>可定义文档中的分区或节
<div>标签可以把文档分割为独立的，不同的部分
如果使用id或class来标记<div>，那么该标签的作用会变得更加有效
2.CSS
概述
CSS：层叠式样式表，主要用于设置HTML页面中的文本内容、图片外形及版面的布局等外观显示样式，可以使HTML更好看
样式：给HTML标签添加需要显示的效果
层叠：使用不同的添加方式，可以多个样式叠加到一起，共同作用域该标签
CSS色系的搭配可以让用户更舒服
CSS+DIV布局更加灵活。更容易会出用户需要的结构
样式规则
格式：选择器{属性1：属性值；属性2：属性值；……}
代码结构特点：
1.CSS样式“选择器”严格区分大小写，属性和属性值不区分大小写
2.多个属性之间必须使用英文状态下的分号隔开，最后一个属性后的分号可以省略
3.如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的指引好。
4.css代码加注解
5.css代码中空格是不被解析的
6.属性和属性值之间不允许出现空格，否则浏览器会报错
引入CSS样式的
概述
CSS样式的引用方式非常灵活：可以嵌入在HTML文档中，也可以是一个单独的文件，如果是一个单独的文件则文件名必须以.css为扩展名
CSS和HTML集合的三种方式
行内样式
通过标签的style属性来设置元素的样式
如：<a style="color:#f00">
内部样式
又称内嵌式，将CSS代码集中写在HTML文档的<head>头部标签中，并且使用<style>标签定义
仅设计一个页面时，使用内嵌式是个不错的选择
外部样式
又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式文件中，通过<link>标签将样式连接到HTML文档中
3.选择器
概述
要想将CSS样式应用于特定的HTML元素，首先需要找到目标元素
在CSS中执行这一任务的样式规则部分被重围选择器
分类
元素选择器
概述
使用HTML标记名作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式
语法格式
标记名{属性1:属性值1;……}
优缺点
优点：快速的为页面中同类型的标记统一样式
缺点：不能设计差异化样式
ID选择器
概述
使用#号进行标识，后面跟id名
HTML中id是唯一的，只能对应于文档中某一个具体的元素
语法格式
#id名{属性1：属性值1;……}
类选择器
概述
使用.进行标识，后面紧跟class类名
语法格式
.类名{属性:属性值;……}
优势
可以为元素对象定义单独或相同的样式
属性选择器
概述
在标签后面使用中括号标记
是对“元素选择器”的扩展，对一组标签进一步过滤
语法格式
标签名[标签属性='标签属性值']{属性名：属性值；……}
包含选择器
概述
两个标签之间使用空格，给指定父标签的后代标签设置样式，可以方便在区域内编写
语法格式
父标签 后代标签{属性名:属性值;……}
4.CSS样式
边框和尺寸
border
取值：
solid（实线）
none(无边)
double(双线)
width
height
转换display
快标签
以区域块的方式出现
每个快标签独自占据一整行或多整行
常见：<h1><div><ul>
行内元素
不必在新的一行开始，同时也不强迫其他元素咋新的一行显示
常见的行内元素：<span><a>
字体
color
font-size
背景色
background-color
布局:float、clear
float
left:元素左浮动
right:元素右浮动
none:元素不浮动
clear
子主题 1
left:清除元素左浮动
right:清除元素右浮动
both:清除左右两侧浮动的影响
5.CSS盒子模型
概述
规定可元素框处理元素内容、内边框、边框和外边距的方式
内边距:Padding
padding-top
padding-right
padding-botton
padding-left
边框:border
boder-top-style
boder-right-style
boder-botton-style
boder-left-style
外边距:margin
margin-top
margin-right
margin-bottom
margin-left
6.案例实现
注册页面
总结：div和span比较
01-24
586
586
11-18
06-24
06-23
506
506
06-06
442
442
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
