本文详细介绍了HTML中的表格标签、单元格合并、无语义标签、元素显示模式以及H5的新标签。同时，探讨了CSS的样式应用，包括内联样式、内部样式表、外部样式表、基础选择器、包含选择器、逗号选择器、属性选择器和伪类选择器等，展示了如何通过CSS控制元素的样式和行为。
21.表格标签
<table border="x px" cellspacing="0" width="800px" height="500px" >
--table：cellspacing：单元格与单元格之间的间距
--cellspacing="0"---单元格与单元格之间的间距为零
--width:设置宽度
--height:设置高度 thead,tfoot不改变
--tr\tbody\tfoot属性一样
<caption>学生信息</caption>
<thead height="200px" align="center" valign="middle">
--align="center" ：居中
--valign="middle"：垂直
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody height="200px" align="center" valign="middle">
<tr>
<td>xx</td>
<td>xx</td>
<td>xx</td>
<td>xx</td>
<td>xx</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
22.单元格合并
<table boeder="1" width="400px" height="400px" cellspacing="0">
<tr bgcolor="xx">
<td rowspan></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
23.无语义标签
<!--<p></P> <h1></h1> <a href="#"></a> -->
<div>我是一个盒子<a href="#">点击链接</a></div>
<div>我是一个盒子</div>
<div>我是一个盒子</div>
<h1>wshiyigehezu</h1>
cnslhih
<!--span 一行多个-->
<span>xx</span>
<span>xx</span>
<span>xx</span>
<span>xx</span>
24.元素显示模式
<!--
元素显示模式：
块元素：独占一行，宽、高、内外边距可以设置 div h1~h6 li
行内元素：一行多个，宽、高、内外边距设置无效 span a
行内块元素：可以一行多个，还可以设置宽高、内外边距 img
-->
<div>我是块元素</div>
<span></span>
<a href="#">去百度</a>
<a href="#">去百度</a>
<a href="#">去百度</a>
<a href="#">去百度</a>
<img src="../../day1/灰太狼.jpg">
<img src="../../day1/灰太狼.jpg">
<img src="../../day1/灰太狼.jpg">
25.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>
<nav>
</nav>
<header>
</header>
<article>
<section></section>
</article>
<footer>
</footer>
<details>
<summary>点击我查看详情</summary>
你小子，被骗了
</details>
</body>
</html>
26.全局属性
id，class
<!-- id: 同一个页面id值不能重复 一个元素只能有一个id名
除了: body html head script style -->
<!-- class: 分类 配合层叠样式表
一个网页中可以有多个类名相同的元素，一个元素可以有多个类名
-->
<!-- title ：鼠标悬停时，提示词-->
<!-- tabindex : 正数 负数 0 -->
<!--spellcheck:拼写检查 true false -->
<!-- accesskey：设置快捷键的属性 谷歌浏览器里：配合alt按键，才能完成 -->
<!-- autocapitalize 启动大小写-->
<!-- contenteditable：设置元素中内容是否可以更改 true false-->
eg:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- id: 同一个页面id值不能重复 一个元素只能有一个id名
除了: body html head script style -->
<div id="box1"></div>
<a href="#" id="a1"></a>
<!-- class: 分类 配合层叠样式表
一个网页中可以有多个类名相同的元素，一个元素可以有多个类名
-->
<div class="box1 box2"></div>
<div class="box1 box3"></div>
<div class="box1 box4"></div>
<div class="box1 box5"></div>
<a href="#" class="a1"></a>
<!-- title ：鼠标悬停时，提示词-->
<img src="../../day1/灰太狼.jpg" alt="" title="我是一个灰太狼">
<div title="你中奖了，小可爱~">我是盒子</div>
<a href="#" title="恭喜你，上天了">去云端</a>
<!-- tabindex : 正数 负数 0 -->
<input type="text" name="ux" id="">
<a href="#"> dicdncd </a>
<div title="你中奖了，小可爱~" tabindex="1">我是盒子</div>
<div title="你中奖了，小可爱~" tabindex="2">我是盒子</div>
<!--spellcheck:拼写检查 true false -->
<input type="text" spellcheck="false">
<!-- accesskey：设置快捷键的属性 谷歌浏览器里：配合alt按键，才能完成 -->
<form action="#">
<input type="text" name="user" id="">
<button accesskey="l">提交</button>
</form>
<!-- autocapitalize 启动大小写-->
<!-- contenteditable：设置元素中内容是否可以更改 true false-->
<div contenteditable="true">我是一个不允许编辑的盒子</div>
<!-- dir -->
<div dir="rtl">我是一个不允许编辑的盒子</div>
<!-- hidden -->
<div hidden>我是一个不允许编辑的盒子cdcdcd</div>
<a href="#" hidden>cdjcdj</a>
</body>
</html>
----------------------------------------------------------css------------------------------------------------------------------
1.体验css
div {
width: 300px;
height: 300px;
background-color: pink;
}
/* css书写规范：
选择器 {
属性名： 属性值；
属性名： 属性值；
}
*/
2.行内样式
<body>
<div style="width: 700px; height: 50px; background-color: pink;">我是一个盒子</div>
</body>
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>
<style>
/* 内部样式 */
div {
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
4.外部样式
eg:
<!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="./13-外部样式.css">
</head>
<body>
<div></div>
</body>
</html>
.css需另建
eg：
./13-外部样式.css:
div {
width: 300px;
height: 300px;
background-color: pink;
}
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>
/* 标签选择器:选中当前页面中所有符合标签 */
h1 {
color: rgb(32, 27, 28);
}
/* id选择器 #id*/
#box1 {
color: rgb(6, 106, 194);
}
/* 类选择器 .类名 */
.box1 {
background-color: pink;
}
/* 通配符选择器 选中所有的元素*/
* {
font-size: 60px;
}
</style>
</head>
<body>
<div>我是一个不允许编辑的盒子</div>
<p>我是一段文字</p>
<h1 class="box1">我是标题</h1>
<div id="box1">我是一个不允许编辑的盒子</div>
<div class="box1">我是一个不允许编辑的盒子</div>
</body>
</html>
/* 标签选择器:选中当前页面中所有符合标签 */
/*id选择器 #id*/
/*类选择器 .类名*/
/*通配符选择器 选中所有的元素*/
*{
font-size：60px；
}
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>
<style>
/* 子代选择器 只选中亲生儿子 */
ul>li {
background-color: pink;
}
/* 后代选择器 */
/* css样式表存在层叠性，后边的会将前边的覆盖掉 */
ul li {
background-color: aqua;
}
ul div>li {
background-color: brown;
}
</style>
</head>
<body>
<ul>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
<div>
<li>我是孙子</li>
<li>我是孙子</li>
</div>
</ul>
</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>
<style>
/* div {
background-color: pink;
}
h1 {
background-color: pink;
}
p {
background-color: pink;
} */
/* 复合选择器 */
div,
p,
h1 {
background-color: aqua;
}
</style>
</head>
<body>
<div>我是一个div</div>
<p>我是小p</p>
<h1>我是标题</h1>
</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>
input[type="text"] {
background-color: pink;
}
input[type="password"] {
background-color: aqua;
}
input[name] {
background-color: red;
}
/* *type的属性值里包含e的input元素
*/
input[type*="e"] {
background-color: blueviolet;
}
input[type^="p"] {
background-color: chartreuse;
}
input[type$="l"] {
background-color: red;
}
</style>
</head>
<body>
<form action="#">
<input type="text">
<input type="password">
<input type="email" name="email">
<input type="number">
</form>
</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>
/* a:link 、a:visited 、a:hover 、a:active */
/* 伪类选择器：元素在不同状态下的样式 */
/* ：link 为访问的来凝结样式 */
a:link {
color: green;
}
/* 访问之后的样式 */
a:visited {
color: red;
}
/* 获取焦点时的样式 */
a:focus {
color: blue;
}
/* 鼠标悬停时的样式 */
/*
+表示下一个
~表示之后所有的兄弟元素 */
a:hover+div {
color: pink;
}
/* active 用户点击之后按住鼠标 */
a:active {
background-color: pink;
}
div:hover {
background-color: pink;
}
</style>
</head>
<body>
<a href="#">点击我去百度
</a>
<div>我是一个div</div>
</body>
</html>
10.结构伪类选择器
<!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:nth-child(9) {
background-color: pink;
}
ul li:last-child {
background-color: red;
}
ul li:first-child {
background-color: aqua;
}
ul li:nth-child(2n+1) {
background-color: blue;
}
ul li:nth-child(2n) {
background-color: rgb(33, 227, 124);
}
</style>
</head>
<body>
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
<li>我是li6</li>
<li>我是li7</li>
<li>我是li8</li>
<li>我是li9</li>
<li>我是li10</li>
</ul>
</body>
</html>
11.结构伪类选择器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>
<style>
/* 先找.father，然后对所有的子元素进行排序，找到对应序号的子元素，然后再去看子元素是否满足条件（.son） */
.father .son:nth-child(2) {
background-color: pink;
}
/* 先找.father，再找.father里的.son，然后对.son进行排序 */
.father .son:nth-of-type(2) {
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
<p>nihao</p>1
<div class="son">我是盒子</div>2
<div class="son">我是盒子</div>3
<div class="son">我是盒子</div>4
<div class="son">我是盒子</div>5
</div>
</body>
</html>
12.伪元素选项器
<!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::before {
content: "##3#";
color: pink;
}
p::after {
content: "and you";
color: red;
}
input::placeholder {
color: pink;
}
div::selection {
color: aqua;
}
</style>
</head>
<body>
<p>a</p>
<p>b</p>
<p>c</p>
<input type="text" placeholder="请输入用户名：">
<div>
xxx
</div>
</body>
</html>
14.伪类选择器练习题
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-class Selector Practice</title>
<link rel="stylesheet" href="styles.css">
<style>
ul li a {
color: blue;
}
ul li a:hover {
color: red;
}
ul li a:active {
color: green;
}
ul li:nth-child(1) a {
color: blueviolet;
}
</style>
</head>
<body>
<h1>Welcome to Pseudo-class Selector Practice</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</body>
</html>
15.作业
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器练习题</title>
</head>
<body>
<div class="container">
<h1>主标题</h1>
<ul class="list">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<p class="text">这是一个段落。</p>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
</div>
<p class="text">另一个在容器外的段落。</p>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
