01-元素显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 元素显示模式
块元素:独占一行 div 宽、高、内外边距可以设置
行内元素:一行可以存在多个 span 宽、高、内外边距不可以设置
行内块元素:br
-->
<div>oqjxihnz</div>
<span>xojzojojih</span>
</body>
</html>
02-表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<!-- 表头 rows data-->
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计3人</td>
</tr>
</tfoot>
</table>
</body>
</html>
03-表格标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- table (只控制最外围大小)、width、height(它的值是底线)、cellspacing -->
<!-- caption 通过css更改 -->
<!-- thead 表头 height、align(水平位置)、valign(垂直位置) -->
<!-- tbody 表干 height、align、valign -->
<table border="1px" width="900px" height="400px" cellspacing="0">
<caption>学生信息</caption>
<thead>
<!-- tr height、align、valign -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<!-- td height、align、valign -->
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计3人</td>
</tr>
</tfoot>
</table>
</body>
</html>
04-单元格合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
td 跨行 rowspan
跨列 colspan
-->
<table border="1px" width="900px" height="400px" cellspacing="0">
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot>
<tr align="right">
<td colspan="5">共计3人</td>
</tr>
</tfoot>
</table>
</body>
</html>
05-details
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
summary 详情
details 详情内容
-->
<details>
<summary>有志青年</summary>
我们都是有志青年
</details>
</body>
</html>
06-tabindex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- tabindex 让本不能tab遍历获取焦点的元素可以获取,可以为负数 -->
<input type="text">
<a href="#">去百度</a>
<div>我是1</div>
<div tabindex="1">我是2</div>
<div>我是3</div>
<div>我是4</div>
</body>
</html>
07-表单的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 表单 网页交互区,搜集用户信息 -->
<!-- action 将数据交给谁处理 -->
<!-- name 必有属性 -->
<!-- method 提交方式(get/post) -->
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>登录</button>
</form>
</body>
</html>
08-常见的表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<!-- 文本框 -->
<!-- placeholder 默认显示 -->
用户名:<input type="text" name="user" value="gouxin" placeholder="Apple ID"><br />
<!-- 密码 -->
密码:<input type="password" name="pwd"><br />
<!-- 单选框 -->
<input type="radio" name="gender" value="man">男
<input type="radio" name="gender" value="woman">女<br />
<!-- 多选框 label标签 -->
<!-- 多选框的默认选中为 checked -->
<input type="checkbox" name="number" id="1"><label for="1">1</label>
<input type="checkbox" name="number" id="2" checked><label for="2">2</label>
<input type="checkbox" name="number" id="3"><label for="3" >3</label><br />
<!-- 隐藏域 -->
<input type="hidden" name="hid" value="z,pqwk,slmc">
<!-- 确认按钮 -->
<input type="submit">
<!-- <button type="submit"></button> -->
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button">
<!-- 文本域 -->
<textarea cols="20" rows="2o"></textarea>
<!-- 下拉菜单 -->
<!-- 下拉菜单的默认选中为 selected -->
<select name="112" id="">
<option value="123" selected>123</option>
<option value="456">456</option>
<option value="789">789</option>
</select>
</form>
</body>
</html>
09-html的全局属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- id身份证,在一个页面中只能出现一次 -->
<div id="one"></div>
<!-- class 一类 可以出现多个 -->
<div class="pink" style="font-size: 40px;">10084</div>
<div class="pink">10086</div>
<div class="pink">10086</div>
<div class="pink">10086</div>
<!-- accesskey 设置快捷键 -->
<form action="#">
<input type="text" name="a" id="">
<button accesskey="s">提交</button>
</form>
<!-- style -->
<!-- date-* 自定义属性 -->
</body>
</html>
10-html5语义标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="head"></div>
<div class="body">
<div class="nav"></div>
</div>
<div class="footer"></div>
</body>
</html>
11-h5表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<input type="number">
<input type="color">
<input type="time">
<button>提交</button>
</form>
</body>
</html>
12-css体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div>我</div>
</body>
</html>
13-css的三种引入方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式:推荐 -->
<link rel="stylesheet" href="./14-样式.css">
<!-- 内部样式 -->
<style>
div{
/* css基础结构
选择器{
属性名:属性值;
属性名:属性值;
}
*/
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="box1">我是盒子</div>
<!-- 行内样式:不推荐 -->
<div style="width: 300px; height: 300px; background-color: rgb(221, 58, 13);"></div>
<div class="box2">我是bow2</div>
</body>
</html>
15-基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标签选择器 选中所有p标签 */
p {
color: bisque;
}
/* id选择器 */
#box1 {
color: blueviolet;
}
/* 类选择器 */
.box2 {
color: blue;
}
/* 通配符选择器 */
* {
background-color: aqua;
}
</style>
</head>
<body>
<p>我是123</p>
<div id="111">我是111</div>
<div class="333">我是333</div>
</body>
</html>
16-包含选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 子代选择器 选中亲儿子 */
.a>li {
background-color: aqua;
}
/* 后代选择器 找到后代所有要找的元素 */
.a li {
color: rgb(255, 0, 89);
}
</style>
</head>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</ul>
</body>
</html>
17-字体的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* 字体大小 */
font-size: 20px;
/* 字体粗细 */
/* 100-900越来越粗 400=normal 800=bold */
font-weight: 500;
/* 字体是否倾斜 */
/* font-style: italic/normal; */
font-family: "微软雅黑";
/* italic 900可省略,字体大小,font-family必须存在 */
font: italic 900 70px "微软雅黑"
}
</style>
</head>
<body>
<div>
我是TNT
</div>
</body>
</html>
18-复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 复合选择器 , */
div,
p,
span {
color: aquamarine;
}
</style>
</head>
<body>
<div>qoewdlov</div>
<p>cv vojviojiv</p>
<span>cinihfcuef</span>
<ul>
<li>qedstrgte5rr</li>
</ul>
</body>
</html>
19-属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
background-color: bisque;
}
input[type="password"] {
background-color: blue;
}
div[id] {
background-color: aquamarine;
}
/* type^="te"以te开头 */
input[type^="te"] {
background-color: aliceblue;
}
/* type$="1"以te结尾 */
input[type$="1"] {
background-color: beige;
}
/* type*="e" type值里边包含e */
input[type*="e"] {
background-color: brown;
}
</style>
</head>
<body>
<input type="text"><br />
<input type="password"><br />
<input type="search"><br />
<input type="url"><br />
<input type="number"><br />
<div id="aquamarine">1</div>
</body>
</html>
20-文本外观
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-size: 20px;
text-indent: 2em;
/* text-indent:2em; em表示当前字体大小 */
}
</style>
</head>
<body>
<p>dwaighyaxskjglcyasckyzhcfg</p>
<div>caugcsblajogtcjzitcgyujkc<div>
</body>
</html>