快速引用类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px" width="500px">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td colspan="2">yanyyu</td>
<!-- <td>33</td> -->
<td rowspan="2">东莞</td>
</tr>
<tr>
<td colspan="2">言语</td>
<!-- <td>20</td> -->
<!-- <td >深圳</td> -->
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <form action="往后端的路径" method="get"> -->
<!-- get 登录 框 （post） -->
<h1>登录界面</h1>
<!-- </form> -->
<form action="">
账号：<input type="text" name="id" placeholder="手机号码/邮箱">
<br>
密码：<input type="password" name="mm" placeholder="数字/字母组成">
<br>
<!-- 单选框 -->
性别：<label><input type="radio" name="sex">男</label>
<label>
<input type="radio" name="sex" checked>女
</label>
<br>
爱好：
<label><input type="checkbox" name="aihao">羽毛球</label>
<label><input type="checkbox" name="aihao" checked>游戏</label>
<label><input type="checkbox" name="aihao">音乐</label>
<br>
地区：
<select name="addr">
<option value="">--请选择--</option>
<option value="东莞">东莞</option>
<option value="东莞">广州</option>
<option value="东莞">深圳</option>
<option value="东莞">中山</option>
</select>
<br>
上传文件：
<input type="file">
<br>
上传多文件：
<input type="file" multiple>
<br><br><br>
<br>
<input type="button" value="提示" onclick="alert('安全提示')">
<br><br><br>
<!-- 提交数据 -->
<input type="submit" value="登录" >
<!-- 代表 一个空格 -->
<input type="submit" value="注册" >
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 空格 -->
>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
1独占行 块级元素
</div>
<div>
2独占行 块级元素
</div>
<span>
同一行 ，行内 元素
</span>
<span>
同一行 ，行内 元素
</span>
<span>
同一行 ，行内 元素
</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在 head 标签中写 style -->
<style>
/* 内嵌式（吧 CSS写在 网页代码中） */
/* 标签 {CSS代码 } 标签选择器*/
body{
background-color: antiquewhite;
}
</style>
</head>
<body>
<!--
行内式（直接在标签上写CSS） 》 内嵌式
<pre style="color: red ; font-size: 32px; font-family: 楷体;"> -->
<pre style="color: red ; font-size: 32px; font-family: 楷体;">
wreygntrlkb言语
不过你回头i人
nhtegn
通过你呢 让统计化工i人 还具有特哦i好久没见
</pre>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
/* bgc 设置背景色 */
background-color: #e1dada;
color: blue;
/* 设置标签内 文字的 颜色 */
font-size: 32px;
font-family: 楷体;
}
h1{
color: red;
}
</style>
</head>
<body>
<h1>登录界面</h1>
restgqhre jto
fhyo pihtnnmjopihjnmytoki
<br>
grtnhe你们家哦i让你家后人
</body>
</html>
mycss.css
/* body{
color: aquamarine;
} */
h1{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./mycss.css">
<!-- href = " css 外部文件的路径" -->
</head>
<body>
<h1>研究CSS
</h1>
<form action="">
</form>
jtrjoihj
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
/* 通配符 （大家都一样 ）
跟优先级
*/
color: blue;
}
body{
/* 系统的标签名{} ---标签选择器 */
}
/* 类=选择器 自定义 . 类名（随便写的）
class=”类名“
*/
.font-red{
/* 字体 红 --》 红色字体 */
color: red;
}
/* id 选择器 #id名字 id = "名字" */
#font-family{
font-family:楷体 ;
}
</style>
</head>
<body>
<h1 class="font-red">登录界面</h1>
<i id="font-family">我是一个倾斜标签</i>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.font{
font-style: italic;
/* i 倾斜 */
font-weight: 700;
/* 字体 大小 */
font-size: 24px;
/* 浏览器默认 16px */
line-height: 1.5;
/* 行高 */
/* 字体的大小的多少倍 */
font-family: 楷体;
}
#suojin{
text-indent: 2em;
/* 缩进 两个字
3em 5em
*/
}
</style>
</head>
<body>
<div class="font">
我在学习 CSS
</div>
言语给
<div id="suojin">
Java诞生于1991年5月，来源于名为"Oak"的项目，当时是由Sun公司的一个小工程师团队在设计和开发。该团队称自己为绿队(Green Term)，团队成员有James Gosling、Mike Sheridan、 Patrick Naughton等人。James Gosling(詹姆斯高斯林)是项目负责人。Oak中文名是"橡树"，橡树是力量和耐用性的象征。时间证明，这个名字是非常适合的，甚至是预言性的，尽管在1995年被迫改名为Java(当时Oak已经被注册为另一个商标的一部分导致无法继续使用)。先附上一张JAVA爸爸(詹姆斯高斯林)的帅照：
</div>
<br>
<a href="www.baidu.com" style="text-decoration: none;">百度</a>
<a href="www.baidu.com" style="text-decoration: overline;">百度</a>
<a href="www.baidu.com" style="text-decoration: line-through;">百度</a>
<a href="www.baidu.com" style="text-decoration: underline;">百度</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\], initial-scale=1.0">
<title>Document</title>
<style>
.font{
/* w宽度的数字+h高度的数字 */
width: 300px;
height: 300px;
background-color: #b99b72;
text-align: center;
/* 水平 居中 */
/* 垂直 居中 让 行高= 盒子 的高度
标签====盒子 === 元素 任何一个标签 都是一个 盒子
*/
line-height: 300px;
}
</style>
</head>
<body>
<div class="font">
居中ing
</div>
</body>
</html>
