元素显示模式
<div>我是一个盒子</div>
<span>我是span</span>
<ul>
<li>我是li</li>
</ul>
<body>
<!--元素显示模式：
块元素：独占一行 div 宽、高、内外边距可以设置
行内元素：一行可以存在多个 span 宽、高、内外边距不可以设置
行内块元素：
-->
<div>我是一个盒子</div>
<span>我是span</span>
<ul>
<li>我是li</li>
</ul>
</body>
表格标签
| 姓名 | 性别 | 年龄 | 民族 | 政治面貌 |
|---|---|---|---|---|
| 王鑫宇 | 男 | 18 | 汉 | 党员 |
| 王鑫宇 | 男 | 18 | 汉 | 党员 |
| 王鑫宇 | 男 | 18 | 汉 | 党员 |
| 王鑫宇 | 男 | 18 | 汉 | 党员 |
| 共计:4人 |
<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>
<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>共计:4人</td>
</tr>
</tfoot>
</table>
</body>
表格标签属性
<body>
<table border="10px" width="900px" height="400px" cellspacing="0">
<!-- 表头 rows data
table：border（只控制最外围大小）、width、height(tbody 值是底线，只高不低)、cellspacing(单元格与单元格之间的距离)
caption；通过css更改
thead、tr、tbody、tfoot:height\align（水平）\valign（垂直）
-->
<caption>学生信息</caption>
<thead height="200px" align="center" valign="middle">
<tr height="400px" align="center" valign="center">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody height="600px" align="center" valign="middle">
<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>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot height="600px" align="center" valign="middle">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计:4人</td>
</tr>
</tfoot>
</table>
</body>
单元格合并
| 姓名 | 性别 | 年龄 | 民族 | 政治面貌 |
|---|---|---|---|---|
| 王鑫宇 | 男 | 18 | 汉 | 党员 |
| 男 | 18 | 汉 | 党员 | |
| 王鑫宇 | 男 | 18 | 汉 | 党员 |
| 王鑫宇 | 男 | 18 | 汉 | 党员 |
| 共计:4人 | ||||
<body>
<!-- td 跨行：rowspan
跨列：colspan
-->
<table border="1px" width="800px" cellspacing="0">
<!-- 表头 rows data-->
<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>
<tr>
<td>王鑫宇</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot>
<tr align="right">
<td colspan="5">共计:4人</td>
</tr>
</tfoot>
</table>
</body>
details
有志青年 我们这里都是优秀的有志青年<body>
<!-- details：详情标签 配合summary使用 -->
<details>
<summary>有志青年</summary>
我们这里都是优秀的有志青年
</details>
</body>
tabindex
去百度
我是第一个盒子
我是第2个盒子
我是第3个盒子
我是第4个盒子
<body>
<!-- tabindex：让本不能tab遍历获取焦点的元素可以获取 可以为负数，0，正数-->
<input type="text">
<a href="#">去百度</a>
<div>我是第一个盒子</div>
<div tabindex="0">我是第2个盒子</div>
<div>我是第3个盒子</div>
<div>我是第4个盒子</div>
</body>
表单的基本结构
<body>
<!-- 表单：网页交互区，收集用户信息
action:将数据交给谁处理
name：必有属性
method：提交方式 ajax
-->
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>提交</button>
</form>
</body>
常见的表单元素
<body>
<form action="#">
<!-- 文本框 maxlength:最大长度-->
用户名：<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名："><br />
<!-- 密码 -->
密码：<input type="password" name="pwd"><br />
<!-- 单选框 -->
<input type="radio" name="gender" value="nan">男
<input type="radio" name="gender" value="nv">女<br />
<!-- 多选框 label标签-->
<input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>
<label><input type="checkbox" name="food">吃臭豆腐</label>
<!-- checked默认选中 -->
<input type="checkbox" name="food" checked>吃肥肉
<!-- 隐藏域 -->
<input type="hidden" name="hid" value="南德斯才能使调查">
<!-- 确认按钮 -->
<!-- <button type="submit"></button> -->
<!--重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button">
<!-- 文本域 -->
<textarea cols="20" rows="10" maxlength="200
">
</textarea><br />
<!-- 下拉菜单 -->
<select name="jiguan" id="">
<option value="南京">南京</option>
<!-- selected下拉菜单的默认选中 -->
<option value="成都" selected>成都</option>
<option value="西安">西安</option>
</select>
<input type="submit">
</form>
</body>
html的全局属性
<body>
<!-- id身份证号，在一个页面中只能出现一次 -->
<div id="one"></div>
<!-- class 一类 可以出现多个-->
<div class="pink" style="font-size: 40px;">我是哟个盒子</div>
<div class="pink">我是哟个盒子</div>
<div class="pink">我是哟个盒子</div>
<div class="pink">我是哟个盒子</div>
<!-- accesskey 设置快捷键 -->
<form action="#">
<input type="text" name="a" id="">
<button accesskey="s">提交</button>
</form>
<!-- style -->
<!-- data-* 自定义属性 -->
</body>
h5表单
<body>
<form action="#">
<input type="number">
<input type="color">
<input type="time">
<button>tijaio</button>
</form>
</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>
div {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div>我是盒子1</div>
</body>
</html>
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>
/* css基本结构
选择器{
属性名： 属性值；
属性名： 属性值；
}
*/
.box1 {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">我是盒子</div>
<!-- 行内样式：不推荐 -->
<div style="width: 300px; height: 300px; background-color: green;"></div>
<div class="box2">我是box2</div>
</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>
<style>
/* 标签选择器 选中所有的p标签*/
p {
color: aqua;
}
/* id选择器 */
#box1 {
color: pink;
}
/* 类选择器 */
.box2 {
color: blueviolet;
}
/* 通配符选择器
*{
}
*/
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子一</div>
<div class="box2">我是盒子2</div>
<div class="box2">我是盒子3</div>
<p>我是一段文字</p>
</body>
</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>
<style>
/* 子代选择器 选中亲生儿子*/
.a>li {
background-color: pink;
}
/* 后代选择器 找到后代所有要找的元素*/
.a li {
color: blueviolet;
}
</style>
</head>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</ul>
</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>
<style>
div {
cursor: pointer;
/* 字体大小 */
/* font-size: 40px; */
/* 字体粗细 */
/* font-weight: bold; */
/* font-weight: 900; */
/* 100-900 400===normal 800===bold 100-900越来越粗 font-weight: 400;*/
/* 字体是否倾斜 */
/* font-style: italic/normal; */
/* font-family: "微软雅黑"; */
/* italic 900可省略，字体大小，font-family必须存在 */
font: italic 900 70px "微软雅黑"
}
</style>
</head>
<body>
<div>
我是图图小淘气，面对世界很好奇
</div>
</body>
</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>
<style>
/* div {
color: pink;
}
p {
color: pink;
}
span {
color: pink;
} */
div,
p,
span {
color: red;
}
</style>
</head>
<body>
<div>wisjiajsskmx</div>
<p>cndklcdsmc</p>
<span>jnckdsmc</span>
<ul>
<li>吃饱穿暖CNBCCDC</li>
</ul>
</body>
</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>
<style>
input {
background-color: pink;
}
input[type="password"] {
background-color: aquamarine;
}
div[id] {
width: 300px;
height: 300px;
background-color: blue;
}
/* type^="te"以te开头 */
input[type^="te"] {
background-color: red;
}
input[type$="l"] {
background-color: green;
}
/* type*="e" type值里边包含e */
input[type*="e"] {
background-color: chartreuse;
}
</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>
<div>2</div>
</body>
</html>
首行
<title>Document</title>
<style>
p {
/* text-indent: 32px; */
font-size: 20px;
text-indent: 2em;
}
</style>
</head>
<body>
<p>
戕害美的行径，在人类社会中从未消失过，只是从未像今天这样严峻：
一方面，君主时代，艺术和审美，被君王和贵族垄断；今天虽已进入大众民主时代，但各种各样的“政治正确”导致“温和的暴政”，这是最令人绝望的审美专制主义。
另一方面“网红审美”、“娘炮审美”、“土味审美”等恶俗的审美，从未像今天这般盛行；“美被恶制”，从未像今天这样严峻。艺术之美，似乎已然夕阳日落。
但“美的丧失”只不过是一个结果，更重要的是回归她诞生的源泉，因为美的发展，从来不是1+2+3的线性叠加，由0到1的创造新事物，才是美的艺术。越古老的美，反而愈能历久弥新。因此，当下尤有必要回溯美的源泉——欧洲文艺复兴，重新发现艺术大师们创造的艺术之美。
因此，有人说，未来只有两种纸质书不会消亡，第一种是全人类共同的经典，例如《圣经》等。另外一种，就是《欧洲文艺复兴大师》这样的艺术经典。
◎ 文艺复兴，不仅是美的胜利，更是反抗中世纪黑暗统治的认知觉醒
说到文艺复兴，许多读者自然会想到“文艺复兴三杰”——达芬奇、拉斐尔、米开朗基罗。
然而，三杰的成就虽然突出，却不能代表整个文艺复兴。除了复兴三杰，还有两位大师，对文艺复兴同样重要，却少为人知，一位是博斯，一位是卡拉瓦乔。
《欧洲文艺复兴大师》推出五位艺术大师，时间上，博斯是文艺复兴早期代表，三杰代表的是文艺复兴盛期，卡拉瓦乔则是晚期巴洛克艺术的奠基人。这样的五个人，能够更好反映欧洲文艺复兴的全貌。
</p>
</body>
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>青春不常在，抓紧谈恋爱</h2>
<form action="#">
性别
<input type="radio" name="gender" value="nan">男
<input type="radio" name="gender" value="nv">女<br />
生日
<select name="jiguan" >
<option value="--请选择年--">--请选择年--</option>
<option value="--请选择年--">2023</option>
<option value="--请选择年--">2022</option>
</select>
<select name="jiguan" >
<option value="--请选择月--">--请选择月--</option>
<option value="--请选择月--">1</option>
<option value="--请选择月--">2</option>
</select>
<select name="jiguan" >
<option value="--请选择日--">--请选择日--</option>
<option value="--请选择日--">1</option>
<option value="--请选择日--">2</option>
</select><br />
所在地区 <input type="text" name="wd" value="北京思密达"><br />
婚姻状况 <input type="radio" name="gender">未婚
<input type="radio" name="gender">已婚
<input type="radio" name="gender">离婚<br />
学历 <input type="text" name="wd" value="幼儿园"><br />
喜欢的类型 <input type="checkbox" id="wumeide"><label for="wumeide">妩媚的</label>
<input type="checkbox" name="type" id="liulian"><label for="liulian">可爱的</label>
<input type="checkbox" name="type" id="xiaoxianrou"><label for="xiaoxianrou">小鲜肉</label>
<input type="checkbox" name="type" id="laolarou"><label for="laolarou">老腊肉</label>
<input type="checkbox" name="type" id="douxihuan"><label for="douxihuan">都喜欢</label><br />
<p>自我介绍 <textarea cols="16" rows="3">自我介绍</textarea></p>
<button>免费注册</button><br />
<input type="checkbox" name="gender">我同意注册条款和会员加入标准<br />
<a href="https://www.baidu.com/" >我是会员，立即登录</a>
</form>
<h2>我承诺</h2>
<ul type="disc">
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</body>
</html>
扫一扫
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
