1、
<!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 border="1px" width="300px" height="200px" cellspacing="0">
<caption>学生信息表</caption>
<thead height="100px" aligh="right" valign="bottom">
<tr bgcolor="pink">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
</tr>
<tr bgcolor="red">
<td rowspan="2">张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
</tr>
<tr>
<td>男</td>
<td>18</td>
<td>汉</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"></td>
<td>共计:四人</td>
</tr>
</tfoot>
</table>
</body>
</html>
2、
<!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 border="1px">
<caption>优秀学生信息表格</caption>
<thead>
<tr>
<th>年纪</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">高三</td>
<td>迪丽热巴</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>古力娜扎</td>
<td>120</td>
<td>三年三班</td>
</tr>
<tr>
<td>评语</td>
<td colspan="3">你们很棒</td>
</tr>
</tbody>
</table>
</body>
</html>
3、
<!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>
<iframe src="" frameborder="1" width="880px"></iframe>
<iframe src="" frameborder="0"></iframe>
<a href="" target="ee">我的表格</a>
<iframe name="ee"></iframe>
</body>
</html>
4、
<!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>
<dialog>
<form action="#">
" 用户名:"
<input type="text" value>
</form>
</dialog>
<details open>
<summary>
关于文章
</summary>
关于文章的具体信息
</details>
<script>
const dia = document.querySelector("dialog")
dia.showModal()
dia.close()
</script>
</body>
</html>
5、
<!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>
.test {
color:pink;
}
.test2{
background-color:pink;
}
</style>
</head>
<body>
<!-- class -->
<div class="test" title="我">cdcdc</div>
<div class="test test2">cdcdc</div>
<p class="test">cnkdlckd</p>
<input type="test" name id>
<div tabindex="1" contenteditable="True">参考机动车道</div>
<a href="#">去百度</a>
<div class="nav"></div>
<div class="head">
<div class="aside"></div>
</div>
<div class="foot"></div>
<header> </header>
<nav> </nav>
</body>
</html>
6、
<!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="#">
性别:
<label>
<input type="radio" name="sex" id="">
男
</label>
<input type="radio" name="sex" id="nv">
<label for="nv">女</label>
</form>
</body>
</html>
7、
<!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>
<p>
 空格
<小于
>大于
©
</p>
</body>
</html>
8、
<!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>
/* 写css样式 */
/* 选择器{
}*/
div{
width:300px;
height:200px;
background-color:aqua;
}
</style> -->
<link rel="stylesheet"href="./09-test.css">
</head>
<body>
<!-- <div style="width: 200px; height: 100px; background-color: pink;"></div> -->
<div></div>
</body>
</html>
9、
<!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:200px;
height:200px;
background-color:pink;
}
/*类选择器*/
.box1{
background-color:aqua;
}
/*id选择器*/
#box1 {
color: aqua;
}
/*通配符选择器*/
*{
font-size: 30px;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
<p id="box1">我是一段文字</p>
<div>盒子2</div>
</body>
</html>
10、
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 包含选择器 */
.ul1>li {
background-color:pink
}
/* 后代选择器 */
.ul1 li {
background-color:rgb(213,213,19);
}
</style>
</head>
<body>
<ul class="ul1">
<li>101</li>
<li>102</li>
<li>103</li>
<ul>
<li>我是内层的</li>
</ul>
<li>104</li>
<li>105</li>
</ul>
</body>
</html>
11、
<!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,
.box {
color:pink;
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div class="box">盒子</div>
</body>
</html>
12、
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*input[type="url"]{
background-color:aqua;
}
input[name]{
background-color:blue;
}*/
input[type^="pa"] {
background-color:aquamarine;
}
input[type$="l"] {
background-color:rgb(22,26,25);
}
input[type*="a"] {
background-color:rgb(240,127,255);
}
</style>
</head>
<body>
<form action="#">
<input type="password" name="pwd">
<input type="text">
<input type="url">
</form>
</body>
</html>
13、
<!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:hover+div {
width:100px;
height:100px;
background-color:pink;
color:pink;
}
a:focus {
color:brown;
}
</style>
</head>
<body>
<a href="#">去百度</a>
<div></div>
</body>
</html>
14、
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li:nth-child(4) {
background-color:pink;
}
ul li:first-child {
background-color:blue;
}
ul li:last-child {
background-color:aquamarine;
}
ul li:nth-child(2n-1) {
background-color:chartreuse;
}
ul li:nth-of-type(4) {
background-color:aqua;
}
</style>
</head>
<body>
<ul>
<li>11</li>
<li>12</li>
<li>13</li>
<p>wos</p>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>110</li>
</ul>
</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>
ul li::before {
content:"666";
}
ul li::after {
content:"666";
}
p::selection {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<p>fwefefwefef</p>
</body>
</html>
11.16笔记
最新推荐文章于 2024-10-18 14:58:16 发布