前端简单介绍
–day02
0.day01回顾
1.网页基本结构
2.常用标签
3.图片与超链接
1.表单
- 1.表单用于采集用户信息并且提交给服务器
- 2.组成:
- 1.表单元素
</head>
<body>
<!--form元素负责将表单数据按照指定的提交地址(action)和提交方式(method)发给服务器-->
<!--1.提交方式默认为get,将表单中的数据以参数的形式拼接在URL后面(?key1=value1&key2=value2)-->
<!--2.post方式提交数据会将数据封装在请求体中传输,所以post安全性更高,如果涉及二进制数据提交(图片,文件,音视频)
只能使用post方式提交,并且设置数据的编码类型为multipart/form-data-->
<form action="/login" method="GET" enctype="multipart/form-data">
<!--表单控件用于采集用户信息,只能放在form中使用,数据才会被提交-->
<!--
type:必填指定控件类型
name:必填指定控件名称(key)
placeholder:输入前的提示文本
maxlength:设置最大输入字符数
readonly:不需要取值,设置输入框只读
value:设置控件的值(value)
checked:设置默认
-->
<p>
用户姓名:
<input type="text" name="uname" placeholder="请输入用户名" maxlength="4" value="zs">
</p>
<p>
用户密码:
<input type="password" name="upwd">
</p>
<!--提交按钮,点击时将数据发送服务器-->
<p>
用户性别:
<!--一组按钮的控件名称必须保持一致,按钮中必须设置value-->
男<input type="radio" name="gender" value="boy" checked="checked">
女<input type="radio" name="gender" value="girl">
</p>
<!--label for id 实现文本与控件的绑定-->
<p>
兴趣爱好
<input id="sing" type="checkbox" name="hobby" value="sing" checked><label for="sing">唱</label>
<input id="dance" type="checkbox" name="hobby" value="dance"><label for="dance">跳</label>
<input id="rap" type="checkbox" name="hobby" value="rap"><label for="rap">rap</label>
<input id="basetball" type="checkbox" name="hobby" value="basetball" ><label for="basetball">篮球</label>
</p>
<!--文件选择框:二进制数据必须使用post方式并且修改编码类型-->
<p>
用户头像
<input type="file" name="uimg">
</p>
<!--隐藏域:发送当前页面的附加信息,对用户而言不可见,服务器必须的数据可以使用隐藏域提交-->
<p>
<input type="hidden" name="uid" value="001">
</p>
<!--下拉菜单-->
<p>
所在地址:
<select name="city">
<option value="wh">武汉</option>
<option value="hg">黄冈</option>
<option value="xg">孝感</option>
<option value="zj">荆州</option>
<option value="yc">宜昌</option>
<option value="sy">十堰</option>
<option value="es">恩施</option>
</select>
</p>
<p>
<!--多行文本域:允许用户手动调整尺寸.支持多行输入-->
个人介绍:
<textarea name="uinfo"></textarea>
</p>
<!--功能按钮:提交,重置,普通按钮,可以使用value属性设置按钮的显示文本-->
<!--提交按钮,点击时将数据发送到服务器-->
<input type="submit" value="注册">
<input type="reset" value="清空">
<input type="button" value="点击">
<!--
file:///login?
uname=zs02
&upwd=123456
&gender=boy
&hobby=sing
&hobby=dance
&uimg=
&uid=001
&city=sy
&uinfo=cool
-->
<!--button标签表示按钮,标签内容即为按钮的显示文本,书写在form中,等价于提交按钮,书写在form外部'
就是普通按钮,需要自定义点击处理-->
<button>form内</button>
</form>
<button>form外</button>
</body>
</html>
2.css
1.层叠样式表,实现网页布局及元素样式的设置
2.使用方式
- 1.行内样式
- 借助于style标签属性,书写样式声明
- 样式代码:
- css属性名:属性值
- 常用属性:
- font_size设置字体大小,取像素值
- color设置文本颜色,取颜色值
- background-color设置背景颜色
- 例:
- 2.内嵌样式表
- 使用书写样式代码.实现结构与样式的分离,使用选择器匹配文档中的元素并设置样式
- 选择器:根据标签名,属性值或者层级结构查找对应元素
- 例:标签选择器,根据标签名匹配元素
- 选择器
{
属性:值
}
p{
color:red
}
- 3.外链样式表
- 1.创建样式文件(.css),使用选择器匹配元素应用样式
- 2.在HTML文件中使用引入样式表
- 3.样式表特点
- 1.层叠性
- 多个样式共同作用于同一个元素
- 2.继承性
- 子元素可以继承父元素或者祖先元素的文本样式
- 注意:超链接的文本颜色需要自行设置
- 3.优先级
- 发生样式冲突时考虑优先级,优先级高用谁
- 优先级划分
- 1.行内样式的优先级最高
- 2.选择器样式优先级一致,发生样式冲突时,看样式代码的书写顺序,后来者居上
- 3.浏览器默认样式和继承样式优先级最低
- 4.选择器
- 1.标签选择器
- 根据标签名匹配元素,应用样式
- 2.id选择器
- 根据id属性值匹配唯一的元素
#d1{
}
<h1 id="d1"></h1>
- 3.类选择器
- 根据class属性值匹配元素,允许重复使用类名.实现样式的复用
.c1{
}
<h1 class="c1"></h1>
特殊:
1.class 属性可以设置多个值,使用空格隔开class="c1 c2 c3"
2.选择器可以组合使用,常见:标签选择与类选择器组合使用
p.c1{
}
- 4.群组选择器
- selector1,selector2{
}
为一组元素统一设置样式
- 5.后代选择器
selector1 selector2{
}
在选择器1中查找所有满足选择器的后代元素
- 6.子选择器
selector1>selector2{
}
在选择器1中查找所有满足选择器2的直接子元素
- 7.伪类选择器
伪类用于表示元素的某种状态,必须和基础选择器结合使用
- 分类:
- 1.超链接伪类选择器
:link 访问前
:visited访问后
- 2.动态伪类
:hover鼠标滑过(悬停) ****
:active鼠标点按(激活)
- 3.表单控件的状态
:focus输入框的焦点状态 ****
5.选择器的优先级
- 1.相同类型的选择器发生样式冲突,后来者居上
- 2.不同类型的选择器发生样式冲突,看权重,权重越高,优先级越高
标签选择器 1
类/伪类 10
id选择器 100- 3.后代选择器,子代选择器的权重由各个选择器的权重累加计算
- #box span{} /
100+1
/- #box>h1>.c1{} /
100+1+10
/
- 4.群组选择器的权重由各个选择器单独计算
- h1,#d1,.c1{} <==> h1{} #d1{} .c1{}
版权声明：本文为weixin_44808711原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。