一、input标签的属性值
二、下拉框
标签名称:<select> <option> </option> </select>
解释: <select> 就是下拉框
<option> 是下拉框的条目
属性: selected 表示默认选中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select>
<option>小学</option>
<option>初中</option>
<option selected>高中</option>
<option>大学</option>
</select>
</body>
</html>
三、文本域
标签名:<textarea> </textarea>
属性: cols 跨列 rows 跨行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<textarea cols="100px" rows="40px"></textarea>
</body>
</html>
四、frameset框架
frameset框架可以将多个界面组合到一起成为一个界面
使用frame来拼接界面
frameset可以将界面进行上下分隔 和左右分隔
注意点:
frameset不能和body同时存在
frameset可以嵌套使用
案例:
需求:
代码:
主界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- <body> -->
<!-- 上下分隔 -->
<frameset rows="20%,*">
<!-- 上界面 -->
<frame src="top.html"/>
<!-- 下界面 -->
<!-- 左右分隔 -->
<frameset cols="20%,*">
<!-- 左界面 -->
<frame src="left.html"/>
<!-- 右界面 -->
<frame src="rigth.html" name="kk">
</frameset>
</frameset>
<!-- </body> -->
</html>
上界面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/top_100.jpg" width="100%"/>
</body>
</html>
下界面的左界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li{
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li><a href="pro.html" target="kk">商品管理</a></li>
<li><a href="order.html" target="kk">订单管理</a></li>
</ul>
</body>
</html>
下界面的右界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>欢迎登录</h1>
</body>
</html>
商品界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>商品管理</h1>
</body>
</html>
订单界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>订单管理</h1>
</body>
</html>
五、div
div一般要与css进行搭配使用
大部分网站都是使用div来进行模块化开发
div是块状元素 独占一行 不会根据内容来进行填充
六、css
什么是css:
css是层叠样式表
css不仅可修饰静态的网页 还可以配置脚本动态对网页元素进格式化
css的作用:
主要用于美化网站
css可以用于做网页中的动画效果
用于css样式来美化网站的时候 实现html代码与css样式进行分离 代码清晰结构度比较高
css语法:
组成:1.选择器名称 2.样式声明
解释:
选择器名称: 也就是查找到指定html中的标签
样式声明 :编写css样式
注意点:
A.选择器名称是区分大小写 但是属性名与属性值是不区分大小写
B.每一组属性都是以英文的分号进行分割
C.属性名与属性值是以冒号进行分割
七、css三种引用方式
1.行内引入:
概念:直接在标签中编写样式
优点:简单便捷
缺点:html代码与css样式混合 代码结构清晰度比较差
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p style="font-size: 18px;color: red;">今天下雨了....</p>
</body>
</html>
2.内部引入:
概念:在头中编写样式
优点:html代码与css样式分离 代码结构清晰度比较高
缺点:代码扩展性比较差 只能在当前页面使用声明的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
border: solid red 1px;
height: 20px;
}
</style>
</head>
<body>
<div>
哈哈哈
</div>
</body>
</html>
3.外部引入:
概念:在css文件中新建一个样式文件 在页面进行引入
优点:代码扩展性比较高
缺点:需要避免样式冲突
外部引入的两种方法:
link: 引入 a. 边加载页面 边加载样式 体验度高 b.大部分浏览器都可以支持这种方式(大部分使 用这种方式)
@import: 导入 a. 先加载页面 再加载样式 体验度低 b.不支持低版本的ie浏览器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--rel 告诉浏览器以css方式进行加载
href 引入样式的路径
-->
<!--<link rel="stylesheet" href="css/demo.css" />-->
<style>
@import url("css/demo.css");
</style>
</head>
<body>
<h1>网红买微信号40万</h1>
</body>
</html>
4.三种引入方式的优先级:
行内 > 内部|外部(就近原则)
八、三种选择器
1.标签选择器
标签选择器:以 标签来进行命名的选择器就是标签选择器 例如: h1{} p{} div{}
语法: 标签名称 {样式}
2.类选择器
概念:以类命名的选择器就是类选择器 例如:.getClass{} getCla{}
语法:.类选择器的名称 {样式声明}
3.id选择器
概念:以id来进行命名的选择器 就是id选择器
语法: #选择器名称{样式} 例如 #getById{样式}
4.三种选择器的优先级
id选择器> 类选择器 > 标签选择器
测试:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 类选择器 */
.getClass{
color: blue;
}
/* id选择器 */
#kk{
color: green;
}
/* 标签选择器 */
p{
font-size: 24px;
color: red;
}
</style>
</head>
<body>
<p class="getClass" id="kk"> 班长喜欢足浴</p>
</body>
</html>
九、三种常用的选择器
属性选择器:
概念:以标签的属性来进行命名的选择器 就是属性选择器
语法:标签名称[属性='属性值'] 例如:input[type='text']
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
input[type='text']{
color: red;
}
</style>
<body>
<input type="text" value="hhhh" />
<input type="tel" value="1231332"/>
</body>
</html>
层级选择器:
概念:有上下级关系 或者是父子关系的选择器 就是层级选择器
语法: 标签名称 标签名称 类选择器名称 标签(三种基本选择器可以任意组合)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div p{
color: green;
}
ul li{
color: aqua;
}
</style>
</head>
<body>
<div>
<p>班长</p>
<p>黑福</p>
<p>男男</p>
<ul>
<li>gg</li>
<li>ww</li>
</ul>
<p>躲避</p>
</div>
</body>
</html>
伪类选择器:
a:link {}未访问的链接 默认状态
a:visited {} 已访问的链接 已经点击过的状态
a:hover {} 鼠标悬停链接上方的状态
a:active {} 已选择的链接 在点击时的状态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a:link{
color: red;
}
a:visited{
color: darkgrey;
}
a:hover{
color: yellow;
}
a:active{
color: darkmagenta;
}
</style>
</head>
<body>
<a href="#">跳转</a>
<a href="#">天上人间</a>
<a href="#">流连忘返</a>
</body>
</html>
十、常见的样式
字体样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
/* 文字大小 */
font-size: 100px;
/* 加粗 */
font-weight: bold;
/* 颜色 */
color: blueviolet;
/* 文字类型 */
font-family: "宋体";
/* 文字样式 */
font-style:italic;
}
</style>
</head>
<body>
<p>班长喜欢足浴</p>
</body>
</html>
文本样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: solid 1px red;
/* 水平居中 */
text-align: center;
/* 行高居中 */
line-height: 200px;
}
p{
font-size: 100px;
/* 文字阴影 水平 垂直 模糊度 颜色 */
text-shadow: 50px 50px 3px blueviolet;
}
h3{
text-indent: 100px;
}
</style>
</head>
<body>
<div>真不错</div>
<p>班长喜欢洗脚</p>
<h3>班长最喜欢洗脚了</h3>
</body>
</html>
背景样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: solid 1px red;
background-color: gray;
/*
背景图片
background-image: ;
是否平铺
background-repeat: ;
图片居中
background-position: center; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 5px blueviolet solid;
/* 角的弧度 */
border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
轮廓样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
font-size: 50px;
text-align: center;
outline-color: blueviolet;
outline-style: dashed;
outline-width: 10px;
/* 设置文字与框的间距 */
outline-offset: 30px;
}
</style>
</head>
<body>
<p>班长周末去洗脚</p>
</body>
</html>
列表样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul li{
/* 列表的前缀 */
list-style-type: none;
/* 列表的图片 */
list-style-image: url(img/icon1.bmp);
}
</style>
</head>
<body>
<ul>
<li>班长</li>
<li>喜欢</li>
<li>周末</li>
<li>洗脚</li>
</ul>
</body>
</html>
案例:
需求:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 70px;
height: 35px;
background-color:rebeccapurple;
font-size: 20px;
color: white;
border: solid 1px bisque;
border-radius: 25px;
text-align: center;
line-height: 35px;
}
</style>
</head>
<body>
<div>足浴</div>
</body>
</html>