目录
一、表单
概述：表单用于将前端数据跳转到后端进行数据交互； 例如：注册，登录等功能，都使用了表单
1.表单属性
表单控件为：form标签； 属性有action，method，enctype
action：跳转到后端服务器路径中，类似超链接的href（web中重点）
method：跳转到后端的方式，值为get或post（web中重点）
get： 以url方式传参到后端； 特点：不安全，性能高 一般传文本内容
post：以请求体方式传参，url中不显示参数； 特点：安全，性能 可传文本和二进制内容（图片资源）
enctype: 文件上传时才需要该属性 默认传文本表单内容（application/x-www-form-urlencoded）； 如果上传文件(二进制)则值修改为：multipart/form-data
2.表单控件
<!--form表单
input子控件 type属性表示不同控件
注意：表单中常用提交按钮，一般不会用普通按钮，因为普通按钮不能和服务器交互
子控件的name属性：表单中传参数到后端 value存值或显示值
name属性的另一个用法：用于单选和复选控件的分组
-->
<form action="" method="get" enctype="multipart/form-data">
文本框： <input type="text" name="aa" value="666"/><br />
密码框: <input type="password" /><br />
单选框: <input type="radio" /><br />
复选框: <input type="checkbox" /><br />
取色控件: <input type="color" /><br />
日期控件: <input type="date" /><br />
日期时间: <input type="datetime" /><br />
本地日期: <input type="datetime-local" /><br />
邮箱控件: <input type="email" /><br />
上传文件: <input type="file" /><br />
隐藏控件: <input type="hidden" /><br />
数字框: <input type="number" /><br />
范围控件: <input type="range" /><br />
普通按钮: <input type="button" value="普通按钮"/><br />
重置按钮: <input type="reset" value="重置按钮" /><br />
提交按钮: <input type="submit" value="提交按钮" /><br />
图片按钮: <input type="image" src="../img/002.png" width="100px" height="50px" /><br />
</form>3.常用控件
<h2>用户注册</h2>
<!-- checked="checked": 单选和复选的选中属性
selected="selected" 下来选中属性
name="sex"： 分组
-->
<form>
账户： <input type="text"/><br />
密码: <input type="password" /><br />
性别: <input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" />女<br />
爱好: <input type="checkbox" name="love" checked="checked" />吃<input type="checkbox" name="love" />喝<br />
省份：<select>
<option>湖南</option>
<option>湖北</option>
<option selected="selected">广东</option>
<option>广西</option>
</select><br />
基本介绍：<textarea rows="10" cols="30">这家伙很懒，什么都没留下。。。</textarea><br/>
<input type="submit" 注册 />
</form>二、框架集
概述：可以将多个子页面组装到一起，形成综合应用的页面
说明：框架集现在用得比较少，很多灵活性强的页面现在大都是通过div容器的包裹完成； 只适用一些简单的固定的框架结构
框架集标签：frameset； 与body不能共存
1.基本应用
<!-- 框架集： framseset 子标签 frame：用于指定子页面路径
属性：行列的划分 cols="30%,40%,*"：按列划分为3列
noresize="noresize":固定大小不能拖拽
-->
<frameset cols="30%,40%,*">
<frame src="a.html" />
<frame src="b.html" noresize="noresize" />
<frame src="c.html" />
</frameset><!--a.html-->
<body>aaaaaaa</body>
<!--b.html-->
<body>bbbbbbb</body>
<!--c.html-->
<body>ccccccc</body>2.应用案例
<!-- frameset嵌套： 先按行划分，再按列划分 -->
<frameset rows="20%,*">
<frame src="head.html" />
<frameset cols="15%,*">
<frame src="menu.html" />
<!-- name属性： 类似于设置锚点位置，a标签的target即可跳转过来 -->
<frame src="content.html" name="cont" />
</frameset>
</frameset><!-- menu.html -->
<body bgcolor="green">
<a href="http://taobao.com" target="cont">百度一下</a><br />
<a href="http://sina.com.cn" target="cont">新 浪一下</a>
</body>三、CSS概述
1.概述与作用
CSS描述：层叠样式表，多种样式效果可以层叠到一个标签中；如果样式效果有冲突，则选择优先级高的；如果没有冲突则样式效果都组合到该标签中
与HTML区别：HTML看成是一栋房子的基础结构； 那么CSS就是房子的装修
作用：
美化页面效果； 内容与表现分离，达到复用性效果
书写格式：
通过选择器进行CSS样式设计： 例如，选择器{属性：值}
2.样式分类
<!-- 2.内部样式：作用在当前页面的标签中 写法通过选择器进行编写 -->
<style>
/* 选择器设置样式效果 */
div{
font-size: 30px;
color: blue;
}
</style>
<!-- 3.外部样式：使用href引入外部样式的css文件 -->
<link rel="stylesheet" type="text/css" href="../css/test.css"/>
<!-- 应用场景：
行内样式：相对较少使用，一般只用在简单测试中（复用性和维护性都很差）
内部样式： 当前页面的标签中可复用，一般用在综合性简单写的案例中，例如我们讲解所写的案例
外部样式：在项目中常用，多个页面都可复用
-->
<!-- 样式优先级： 行内>(内部=外部，看顺序) --><!-- 1.行内(内联)样式：在当前标签中设置的样式（不推荐）
style="color: red;"
-->
<div>容器</div>
<p>段落</p>/* test.css文件 */
div{
font-weight: bold; /*字体加粗效果 */
color: green;
}四、选择器
1.基本选择器
<style type="text/css">
/* 标签选择器： 标签{属性：值;} */
h3{
color: red;
}
/* 类选择器 .类名{属性:值;} */
.yy{
color: blue;
}
/* ID选择器 #id名{属性：值;} */
#aa{
color: green;
}
/* 扩展：通配符选择器 *{属性：值} */
*{
color: yellow;
}
/*
* 选择器优先级：ID>类名>标签>通配符
* 应用场景：
* 1.以后常用ID和类名选择器；因为ID代表唯一表示的标签，class是多个标签的选择
* 2.标签选择器只适合测试中；通配符一般不推荐使用
* */
</style>2.属性选择器
<style type="text/css">
/* 标签选择器： 标签{属性：值;} */
h3{
color: red;
}
/* 类选择器 .类名{属性:值;} */
.yy{
color: blue;
}
/* ID选择器 #id名{属性：值;} */
#aa{
color: green;
}
/* 扩展：通配符选择器 *{属性：值} */
*{
color: yellow;
}
/*
* 选择器优先级：ID>类名>标签>通配符
* 应用场景：
* 1.以后常用ID和类名选择器；因为ID代表唯一表示的标签，class是多个标签的选择
* 2.标签选择器只适合测试中；通配符一般不推荐使用
* */
</style>3.伪元素选择器
<head>
<style>
a:link{ /* 静止状态 */
color: yellow;
}
a:hover{ /* 悬停状态 */
color: red;
}
a:active{ /* 触发状态 */
color: green;
}
a:visited{/* 完成状态 */
color: #f0f;
}
</style>
</head>
<body>
<h1><a href="#">超链接效果</a></h1>
</body>4.层次选择器
<head>
<style type="text/css">
/* 层次选择器：后代，子代，相邻兄弟 */
/* 后代选择器： 祖先 子{属性：值} */
/*ul a{
color: red;
}*/
/* 子代选择器： 父 >子{属性：值} */
/*ul>a{
color: red;
}*/
/* 相邻兄弟选择器：选择器+选择器{属性：值} */
#aa+li{ /* 作用到相邻兄弟 */
color: red;
}
</style>
</head>
<body>
<ul>
<li id="aa"><a>床前明月光</a></li>
<li><a>疑是地上霜</a></li>
<li><a>举头望明月</a></li>
<a>低头思故乡</a>
</ul>
</body>五、样式属性
1.字体与文本
/* 1.字体属性： */
font-family: "微软雅黑"; /*字体家族 */
font-size: 40px; /* 字体大小 */
font-weight: bold; /*1~599细体 600~900粗体 */
font-style: italic; /* 斜体 */
/* 2.文本属性 */
color: red; /* 文本颜色 */
text-align: center; /* 居中对齐 */
text-indent: 60px; /*缩进 */
text-decoration: underline; /*划线修饰 */
/*letter-spacing: 30px;*/ /*字间距*/
word-spacing: 30px; /*单词间距 自己需要给定空格 */
/*文本阴影-四个取值依次是： 水平偏移；垂直偏移；模糊值；阴影颜色；*/
text-shadow: 20px 30px 10px gray;
/*height: 120px;*/ /* 行高 */
line-height: 520px; /*行高 */
/* 3.背景属性 */
background-color: yellow; /*背景颜色 */
background-image: url(../img/005.png); /*背景图片*/
background-repeat:no-repeat; /*设置平铺x，y轴或不平铺 */
background-position: 30px 50px; /*左30像素 上50像素 */
/* 背景属性的组合 */
/*
background: yellow url(../img/003.png) no-repeat center;
*/2.列表属性
/* 列表属性：可以进行列表类型转换及自定义列表效果(不常用) */
ol{
list-style-type: circle; /* 列表类型转 */
list-style-image: url(../img/007.png); /* 句号变图片标记 */
list-style-position: inside; /* 图片显示进来 */
}3.尺寸与显示
<head>
<style type="text/css">
div{
/* 尺寸 */
width: 120px;
height: 80px;
background-color: red;
/* 显示属性： display div默认为block 块级标签 */
/* inline行级标签-不换行，省略宽高属性
inline-block:行级标签特点-不换行，保留宽高属性
* */
display: inline-block; /*none隐藏 */
}
</style>
</head>
<body>
<div>盒子一</div>
<div>盒子二</div>
</body>4.轮廓属性
<head>
<style type="text/css">
div{
width: 120px;
height: 80px;
background-color: red;
/* 轮廓属性：将整体内容在外围括起来 */
outline-color: blue;
outline-style: dashed; /*虚线 dotted点线 solid实线 */
outline-width: 2px;
/* 组合 */
/*outline: dotted gray 3px;*/
}
</style>
</head>
<body>
<div>div容器</div>
</body>5.浮动
描述：可以使原本竖着排列的控件，横向排列起来
注意：设置了浮动后，一定要清除浮动‘；否则，脱离了标准文档流，后面的排版就乱了
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
