目录
0. form表单提交的get和post的区别?(面试题)
浏览器默认的提交方式:GET
1)是否将表单的数据提交到地址栏上
form action="http://ip地址货域名/登录的接口"
get是可以提交到地址栏上 http://"http://ip地址货域名/登录的接口login?表单项的name属性值=输入的内容&name属性值2=内容2.... (地址栏携带参数)
post提交,不会提交地址栏上---在浏览器--f12--->网络部分可以查看到负载数据
2)是否安全(相对性)
get提交,相对post不安全,将数据信息(涉及到隐私数据)提交到地址上
post,相对安全 ---浏览器网络--->负载---查看form data
3)提交数据大小是否有限制
get,有限制(地址栏是不能无限去拼接数据 key=value&key2=value2...)
post,没有限制(后端io去读前端post数据)
1.form表单中的属性action和method是什么?
action
代表的是提交服务器后端地址 url(统一资源定位符)
url和uri的区别? url是带上了具体的协议 (url是uri的子集)
http://域名:端口号/项目名称/登录接口,前置范围小
uri:url的一部分"/项目名称/登录接口"(没有明确协议),后者范围大
method:提交方式:表单提交数据信息的一种格式
get/post
用框架做一个商品列表页面
1.框架集
rows="由上而下看的每一个部分占用的权重百分比"
cols=“由左往右的分每一部分占用的权重百分比”
frameset框架集 不能和body一块用，要么body标签去掉,要么在body前面去使用frameset
先分部分：
<html>
<head>
<meta charset="utf-8">
<title>xxx后台管理系统</title>
</head>
<frameset rows="20%,*">
<!-- 20%属于logo头部页面 -->
<frame src="header.html" />
<!-- *:代表属于的部分(整个从左到右整体部分) 又可以从左到右划分两部分
-->
<frameset cols="15%,*">
<!-- 15%属于左边菜单 -->
<frame src="menu.html" />
<!-- *,剩余中间主页 -->
<!--
src:框架包含的页面地址
name属性:给框架其名称标识
-->
<frame src="main.html" name="main" />
</frameset>
</frameset>
<!-- <body>
</body> -->
</html>
2.header.html
<html>
<head>
<meta charset="utf-8">
<title>logo部分</title>
</head>
<body>
<div>
<img src="../img/logo.png" height="100px" width="100%" />
</div>
</body>
</html>3.main.html
<html>
<head>
<meta charset="utf-8">
<title>中间主页</title>
</head>
<body>
<h3>欢迎访问xx后台管理系统</h3>
</body>
</html>
4.menu.html
<html>
<head>
<meta charset="utf-8">
<title>左边菜单页</title>
</head>
<body>
<ul>
<li>
<!-- 如果超链接在框架中 frame使用,target指定为在哪一个frame中打开
target必须和frame中的name属性名称一致
-->
<a href="product/product_list.html" target="main">商品管理</a>
</li>
<li>
<a href="../02_h5新增video元素.html" target="main">订单管理</a>
</li>
<li>
<a href="#">用户管理</a>
</li>
</ul>
</body>
</html>
5.product.html
<html>
<head>
<meta charset="utf-8">
<title>商品列表页面</title>
</head>
<body>
<table border="1px" align="center" bgcolor="gainsboro" width="100%" cellspacing="0" height="500px">
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品图片</th>
<th>商品描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>华为mate40pro</td>
<td>6799</td>
<td>
<img src="../../img/c_0013.jpg" />
</td>
<td>
为照相而生
</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>小米p10</td>
<td>1499</td>
<td>
<img src="../../img/c_0014.jpg" />
</td>
<td>
为发烧而生
</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>3</td>
<td>三星手机</td>
<td>5799</td>
<td>
<img src="../../img/c_0015.jpg" />
</td>
<td>
为爆炸而生
</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</tr>
</td>
<tr>
<td>3</td>
<td>iphone14pro</td>
<td>7999</td>
<td>
<img src="../../img/c_0012.jpg" />
</td>
<td>
为卖肾而生
</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table>
</body>
</html>
1.CSS：层叠样式表,给html标签进行修饰的!
2.CSS的三种使用方法
1)行内样式 (如果某个页面中某个位置单独去使用某个样式,可以使用行内样式)
每一个标签都有style属性="css代码"
样式名称:值;样式名称2:值2;...
2)内部样式(内联)
在style标签体 通过
选择器{
样式属性名称:值;
样式属性名称2:值2;
}
优点:一次性控制多个标签
弊端:css代码和html标签混合使用,不利于后期管理(阅读性差)
<style>
/* 选择器 */
a{
font-size: 30px;
color: orangered;
text-decoration: none;
}
</style>
3）:外部方式(外联) 导入css文件
link的href属性导入css文件地址
rel:固定写法 stylesheet:系统库中的层叠样式表
<html>
<head>
<meta charset="utf-8">
<title>css使用方式</title>
<link href="css/my.css" rel="stylesheet" />
</head>
<body>
<a href="#">手机数码</a>
<a href="#">电脑办公</a>
</body>
</html>
CSS设置属性：
a{
/*字体大小*/
font-size: 25px;
/*字体颜色*/
color: green;
/*字体类型*/
font-family: "楷体";
/*文本修饰:去掉下划线*/
text-decoration: none;
}4.常见的CSS选择器
通过选择器选中html标签,设置标签的样式!
选择器分类
①id选择器(同一个页面标签id属性值必须"唯一")
#id属性值{
样式名称:值;
}
优先级最大
②class 类选择器(一类元素)
同一个页面标签元素的class属性值是可以重复的
.class属性值{
属性名称:值;
属性名称2:值2;
}
优先级:
标签名称选择器 <class选择器 优先级<id选择器
③标签名称选择器
标签名称{
样式属性:值;
...
}
④ 后代选择器(包含) div span{}
⑤并集选择器:同时选中多个标签
⑥伪类选择器(描述元素的一种状态)
<style>
div{
font-family: "楷体";
font-size: 30px;
color: red;
}
.c1{
font-size: 20px;
color: skyblue;
}
#div1{
font-size: 25px;
color: deeppink;
} */
后代选择器:只要被包含在指定标签中都会被选中
选择器1 选择器2{
属性名称:值..;
}
div span{
font-size: 25px;
/*添加下划线*/
text-decoration: underline;
}
/子元素选择器
选择器1 > 选择器2{ //选择器2所在的标签是选择器1选中标签的子标签
属性名称:值..;
}
div > span{
font-size: 30px;
color: blue;
text-decoration: line-through;
}
并集选择器
选择器1,选择器2,...选择器n{
样式属性:值;..
}
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<style>
#mySpan,a{
font-size: 15px;
/* 字体类型:斜体 */
font-style: italic;
color: navajowhite;
}
</style>
</head>
<body>
<div class="c1" id="div1">
<p>
<span>helloworld</span>
</p>
<span>
你好,世界!
</span>
</div>
<div>div2</div>
<span id="mySpan">今天天气凉爽!</span>
<a href="#">手机数码</a>
</body>
</html>
5.伪类选择器
锚伪类:
将一个标签的状态划分为以下几种:
1)鼠标未访问过的状态 link
2)鼠标经过这个元素的状态 hover
3)鼠标经过了并且点击在这个元素状态:active
4)鼠标访问的状态(上面3)之后的,点击并且松开了) visited
代码:
选择器:状态名称(不区分大小写)
提示！
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类名称对大小写不敏感
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
/* 鼠标未访问*/
a:link{
font-size: 20px;
color: red;
}
/* 鼠标访问过的状态 */
a:visited{
font-size: 25px;
color: darkgray;
text-decoration: none;
}
/*鼠标经过 */
a:hover{
font-size: 30px;
color: blue;
}
/* 激活状态 */
a:active{
font-size: 35px;
color: green;
/* 加入下划线 */
text-decoration: underline;
}
</style>
</head>
<body>
<a href="02_h5新增video元素.html" target="_blank">京东超市</a>
</body>
</html>
6.CSS字体相关的样式属性
<html>
<head>
<meta charset="utf-8">
<title>字体相关样式属性</title>
<style>
body{
/* font-family:字体库的类型:楷体/宋体/其他/黑体 */
font-family: "楷体";
/* font-style:字体样式
normal:文字正常显示(正常体:默认值)
italic:文字"斜体"
*/
font-style: italic;
/* font-weight 属性指定字体的粗细
适当加粗:bold
*/
font-weight: bold;
/* font-sizy:字体大小*/
font-size: 30px;
}
</style>
</head>
<body>
今天天气不错!
</body>
</html>
7.CSS文本样式
<html>
<head>
<meta charset="utf-8">
<title>CSS之文本样式</title>
<style>
p{
/* 文本样式:color */
color: red;
/* text-align:文本对齐方式
left:默认值 左对齐
center:居中
right:右对齐
*/
text-align: left;
/* text-decoration:文本装饰 :
underline:设置下划线
overline:上划线
line-through中划线
none:去掉文本修饰
*/
text-decoration: none;
/* 文本转换:设置字母大写:uppercase/lowercase小写 */
text-transform: uppercase;
/* 文本缩进:第一行文本设置 缩进效果 */
text-indent: 50px;
/* 行高:line-height 属性用于指定行之间的间距 */
line-height: 60px;
/* word-spacing:单词间距
系统认定中文,必须两个子组成一个单词
*/
word-spacing: 10px;
/* text-shadow 属性为文本添加阴影
垂直和水平阴影 默认2px 后面可以指定颜色
*/
text-shadow: 2px 2px blue;
}
</style>
</head>
<body>
<p>今天 天气 不错</p>
<p>this is text style</p>
</body>
</html>
8.CSS边框样式属性
边框有四个边:
颜色/宽度/样式(必须有)(单实线/虚线/点/双实线)
边框颜色
边框宽度
边框样式
有简写属性格式(将四个边的颜色/宽度和样式进行简写,)
border-color:
border-width:
border-style:
特点:默认的方向 上右下左
某一边没有设置颜色/宽度/样式,会补齐对边的颜色/宽度/样式
给四个边设置边框的颜色
border-top-color: red;
border-bottom-color: blue;
border-left-color: orange;
border-right-color: darkgray;
border-color: blue ;
给四个边的边框设置宽度
border-top-width: 10px;
border-bottom-width: 20px;
border-left-width: 30px;
border-right-width: 40px;
border-width: 10px;
四个边框的样式
solid:单实线
double:双实线
dotted:点
dashed:虚线
border-top-style: solid;
border-bottom-style: dashed;
border-left-style: dotted;
border-right-style: double;
border-style: solid
边框的简写属性
border: 宽度 样式 颜色;
<html>
<head>
<meta charset="utf-8">
<title>CSS边框样式属性</title>
<style>
div{
border: 1px solid #000000;
/* 边框四个角的弧度 */
border-radius: 5px ;
/* 高度和宽度 */
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
这是一个块标签
</div>
</body>
</html><html>
<head>
<meta charset="utf-8">
<title></title>
<!--
写一个表格(4行4列,鼠标经过(hover伪类状态经常使用的)每一行背景色变成蓝色)
背景色样式属性:background-color:颜色名称;
-->
<style>
.myTr{
/* 文本对齐方式 */
text-align: center;
}
/* 鼠标经过每一行:背景色是蓝色 */
.myTr:hover{
background-color: blue;
}
.myTab{
/* css表格样式:让边框和单元格边框合并 */
border-collapse: collapse;
}
</style>
</head>
<body>
<table class="myTab" border="1" align="center" width="500px" height="450px">
<tr>
<th>用户编号</th>
<th>用户名称</th>
<th>用户性别</th>
<th>用户住址</th>
</tr>
<tr class="myTr">
<td>1</td>
<td>文章</td>
<td>男</td>
<td>西安市</td>
</tr>
<tr class="myTr">
<td>2</td>
<td>马保国</td>
<td>男</td>
<td>山西省太原市</td>
</tr>
<tr class="myTr">
<td>3</td>
<td>高圆圆</td>
<td>女</td>
<td>北京市</td>
</tr>
<tr class="myTr">
<td>4</td>
<td>刘锦安</td>
<td>男</td>
<td>大同市</td>
</tr>
</table>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
