01-元素显示模式
<!--元素显示模式：
块元素：独占一行 div 宽、高、内外边距可以设置
行内元素：一行可以存在多个 span 宽、高、内外边距不可以设置
行内块元素：
-->
<div>我是一个盒子</div>
<span>我是span</span>
<ul>
<li>我是li</li>
</ul>
02-表格标签
<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>
03-表格标签属性
<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>
04-单元格合并
<!-- 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>
05-details
<!-- details：详情标签 配合summary使用 -->
<details>
<summary>有志青年</summary>
我们这里都是优秀的有志青年
</details>
06-tabindex
<!-- tabindex：让本不能tab遍历获取焦点的元素可以获取 可以为负数，0，正数-->
<input type="text">
<a href="#">去百度</a>
<div>我是第一个盒子</div>
<div tabindex="0">我是第2个盒子</div>
<div>我是第3个盒子</div>
<div>我是第4个盒子</div>
07-表单的基本结构
ody>
<!-- 表单：网页交互区，收集用户信息
action:将数据交给谁处理
name：必有属性
method：提交方式 ajax
-->
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>提交</button>
</form>
08-常见的表单元素
<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>
09-html的全局属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pink {
color: pink;
}
</style>
</head>
<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>
10-html5语义标签
<div class="head"></div>
<div class="body">
<div class="nav"></div>
</div>
<div class="footer"></div>
11-h5表单
<form action="#">
<input type="number">
<input type="color">
<input type="time">
<button>tijaio</button>
</form>
12-css体验
<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>
13-css的三种引入方式
<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>
14-样式
.box2 {
width: 300px;
height: 300px;
background-color: blue;
}
15-基本选择器
<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>
16-包含选择器
<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>
17-字体的样式
<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>
18-复合选择器
<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>
19-属性选择器
<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>
20-首行缩进
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<title>Document</title>
</head>
<body>
<h2>青春不常在，抓紧谈恋爱</h2>
<table><form action="#">
<tr>
<td>性别</td>
<td><input type="radio" name="gender" value="nan" checked>男
<input type="radio" name="gender" value="nv">女</td>
</tr>
<tr><td>生日</td>
<td><select name="area" id="">
<option value="--请选择年--">--请选择年--</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
<select name="area" id="">
<option value="--请选择月--">--请选择月--</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<select name="area" id="">
<option value="--请选择日--">--请选择日--</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option></td>
</select></tr>
<tr><td>所在地区</td>
<td><input type="text" name="text" value="北京思密达"></td></tr>
<tr><td>婚姻状况</td>
<td><input type="radio" name="" value="" checked>未婚
<input type="radio" name="" value="">已婚
<input type="radio" name="" value="">离婚</td></tr>
<tr><td>学历</td>
<td><input type="text" name="" value="幼儿园""></td></tr>
<tr><td>喜欢的类型</td>
<td><input type="checkbox" name="" id="" value=""><label>妩媚的</label>
<input type="checkbox" name="" id="" value=""><label>可爱的</label>
<input type="checkbox" name="" id="" value=""><label>小鲜肉</label>
<input type="checkbox" name="" id="" value=""><label>老腊肉</label>
<input type="checkbox" name="" id="" value=""><label>都喜欢</label></td></tr>
<tr><td>自我介绍</td>
<td><textarea cols="20" rows="2" maxlength="200" placeholder="自我介绍"></textarea></td></tr>
<tr><td></td>
<td><input type="submit" value="免费注册"></td></tr>
<tr><td></td><td><input type="checkbox" name="" value="" checked><label>我同意注册条款和会员加入标准</label></td></tr>
<tr><td></td><td><a href="./作业4.html">我是会员，立即登录</a></td></tr>
<tr><td></td><td><h3>我承诺</h3></td></tr>
<tr><td></td><td><ul>
<li>年满20岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul></td></tr>
</form></table>
</body>
</html>
扫一扫
4476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
