目录
web前端实训day02——html、css部分知识回顾
HTML
表单
<!--
表单:<form></form>
属性:
action:表单提交的地址
method:用于描述表单提交数据的方式,get,post
get形式传参:将参数拼接到url里面进行传参,存在大小限制,最大能够传递200多K
post形式传参:将参数封装并隐藏进行传参,不存在大小限制,上传文件的时候一般使用post
输入框:<input>
属性:
placeholder:提示使用
name:用于提交后台时的key,key:value,name属性为空时,对应表单项value不能提交
value: 输入框的值
type:
text:文本框
password:密码框
radio:单选框
checked:默认选中
形成单选框,通过name属性来使得多个input形成单选框组,达到选择互斥的效果
checkbox:复选框
checked:默认选中
file:提交文件
submit:提交表单,提交只针对当前所处的表单域有效,除了表单域就不能提交表单了
reset:重置表单,将表单还原成初始样子
button:默认情况下点击提交所处的form表单
type:
submit:默认值
button:按钮(点击不会触发所在form表单的提交)
reset:重置表单
label:用于文字和输入框进行绑定的
for:指向绑定的输入框(绑定的是id)
下拉选:<select></select>、<option></option>
注意点:1.默认选中的是第一个option
2.select传递的值是option里面的value值,并不是标签里面的内容
3.selected属性,值为selected,为默认选中
textarea:文本域
-->
<form action="" method="post">
<label for="username">用户名:</label>
<input type="text" placeholder="请输入用户名" name="username" id="username" value="我是默认值">
<br>
<label for="password">密码:</label>
<input type="password" placeholder="请输入密码" name="password" id="password" value="我是默认值">
<br>
<input type="radio" name="sex" value="男" checked="checked"><span>男</span>
<input type="radio" name="sex" value="女" ><span>女</span>
<br>
<input type="checkbox" checked="checked" id="agree">
<label for="agree">统一xxxxxx使用协议xxxxxxxxxxxxxxxxxxxxxx</label>
<br>
<input type="file"><br>
<select name="address" id="">
<option value="河南省">河南省</option>
<option value="山东省" selected="selected">山东省</option>
<option value="河北省">河北省</option>
</select><br>
<textarea name="suggestion" id="" cols="30" rows="10"></textarea><br>
<input type="submit" value="登录">
<button type="submit">按钮登录</button>
<br>
<input type="reset" value="重置">
<button type="reset">按钮重置</button>
</form>
案例四
<h2>用户注册</h2>
<form action="" method="post">
<table>
<tr>
<td><label for="mobile">手机号:</label></td>
<td><input type="text" name="mobile" id="mobile" placeholder="请输入手机号"></td>
</tr>
<tr>
<td><label for="password">密码:</label></td>
<td><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td><label for="name">姓名:</label></td>
<td><input type="text" name="xingming" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="man" value="男" checked="checked">
<span><label for="man">男</label></span>
<input type="radio" name="sex" id="woman" value="女">
<span><label for="woman">女</label></span>
</td>
</tr>
<tr>
<td>地址:</td>
<td>
<select name="address" id="">
<option value="河南省">河南省</option>
<option value="山东省">山东省</option>
<option value="河北省">河北省</option>
<option value="" selected="selected">请选择</option>
</select>
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="hobby" id="hobby1" value="eat">
<label for="hobby1">吃饭</label>
<input type="checkbox" name="hobby" id="hobby2" value="sleep">
<label for="hobby2">睡觉</label>
<input type="checkbox" name="hobby" id="hobby3" value="play">
<label for="hobby3">打豆豆</label>
</td>
</tr>
<tr>
<td><label for="introduction">自我介绍:</label></td>
<td><textarea name="intro" id="introduction" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
CSS
样式引入:
样式引入:内联样式、嵌入样式、外部样式
内联样式
<h1 style="color: red; font-size: 20px;">我h1标签</h1>
嵌入样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌入样式</title>
<!--
嵌入样式:在head里面使用<style></style>进行书写样式
css样式的注释方式:/*注释的内容*/
-->
<style>
/* 选择器{样式:样式值;样式:样式值} */
/* 给谁改样式{改什么样式} */
h1 {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>我是h1标签</h1>
</body>
</html>
外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<!--
外部样式:
1.样式是定义在css文件中的
2.使用时,需要使用link标签进行引用css文件
-->
<link rel="stylesheet" href="demo.css">
</head>
<body>
<h1>我是h1标签</h1>
</body>
</html>
demo.css
h1{
color: red;
}
选择器(以嵌入样式为例)
标签选择器
<style>
/*
标签选择器,选择的内容就是标签
好处,批量更改标签的样式
坏处,只能全部更改,不能部分更改
*/
h1 {
color: red;
}
</style>
<body>
<h1>h1标签</h1>
<h1>h1标签</h1>
<h1>h1标签</h1>
<h1>h1标签</h1>
<h1>h1标签</h1>
</body>
id选择器
<style>
/*
id选择器:#id
好处:可以针对某一个id的标签进行修改样式
坏处:因为id在当前html中是唯一的,所以id选择器不能够实现批量的修改样式
*/
#h1 {
color: red;
}
</style>
<body>
<h1 id="h1">我是具有id的h1</h1>
<h1>我是不具有id的h1</h1>
</body>
类选择器
<style>
/*
类选择器:.类名
总结:类选择器是最常用、最灵活的选择器
*/
.red-h1 {
color: red;
}
</style>
<body>
<h1 class="red-h1">h1标签</h1>
<h1>h1标签</h1>
<h1 class="red-h1">h1标签</h1>
</body>
通配符选择器
<style>
/*
通配符选择器:*{}
*代表所有
应用:通配符选择器通常用于初始化样式
*/
* {
color: red;
font-size: 20px;
}
</style>
<body>
<h1>我是h1标签</h1>
<p>我是p标签</p>
</body>
字体相关样式
<style>
/*
font-family:字体,浏览器默认是微软雅黑(Microsoft YaHei)
注意点:当使用的字体样式在电脑上没有的时候,会使用默认的字体
color:字的颜色
font-size:字的大小
font-weight:字体的加粗
text-decoration:划线,最常用在初始化a标签的时候
line-height:行高,用于元素(有一定限制)垂直居中
*/
p{
font-family: Arial, Helvetica, sans-serif;
color: red;
font-size: 26px;
font-weight: 600;
text-decoration: line-through;
}
a{
text-decoration: none;
}
</style>
<body>
<p>我是p标签</p>
<a href="">我是超链接</a>
</body>
文本相关样式
<style>
/*
lorem:生成占位文本的快捷方式
text-indent:缩进,常用于文本缩进,单位常使用em(字符)
text-align:水平方向上文本排列的方式,设置元素(某些)水平居中
vertical-align:文字在垂直方向上的排列方式
*/
p {
text-indent: 2em;/*缩进两个字符 */
text-align: center;
}
#span {
vertical-align: sub;
}
</style>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae nihil sed a assumenda omnis saepe minus incidunt praesentium error consectetur, delectus hic nemo soluta suscipit, placeat nam dicta eveniet pariatur!</p>
<span>X<span id="span">2</span></span>
</body>
CSS案例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS案例一</title>
<style>
p {
text-indent: 2em;
}
span {
color: red;
}
</style>
</head>
<body>
<h2>为波波维奇提供教父合同?篮网总经理:假的!</h2>
http://www.spbo.com 2020-07-06 15:13 <span>来源:新浪网体育</span><br>
<img src="images/image.png" alt="图片">
<p>近日有消息称篮网队将为波波维奇提供“教父合同”,今日篮网总经理接受采访时回应称该消息是谣言。</p>
<p>“我会说波波已经有工作了。我们都知道他是一名非常棒的教练,他更是一名极好的领导者。所以,他会继续执教马刺队,他和马刺密不可分,我相信他在那里一定很开心。”篮网总经理肖恩马克思说道。</p>
</body>
</html>