web前端实训day02——html、css部分知识回顾
目录
- web前端实训day02——html、css部分知识回顾
- HTML
- 表单
- 案例四
- CSS
- 样式引入：
- 内联样式
- 嵌入样式
- 外部样式
- 选择器（以嵌入样式为例）
- 标签选择器
- id选择器
- 类选择器
- 通配符选择器
- 字体相关样式
- 文本相关样式
- CSS案例一
web前端实训day02——html、css部分知识回顾
HTML
表单
<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使用协议xxxxxxxxxxxxxxxxxxxxxxlabel>
<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>
嵌入样式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌入样式title>
<style>
/* 选择器{样式:样式值；样式:样式值} */
/* 给谁改样式{改什么样式} */
h1 {
color: red;
font-size: 20px;
}
style>
head>
<body>
<h1>我是h1标签h1>
body>
html>
外部样式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式title>
<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的h1h1>
<h1>我是不具有id的h1h1>
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">2span>span>
body>
CSS案例一
<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>