本文介绍了HTML中的表格标签，包括基本结构、单元格合并以及details和tabindex的使用。此外，详细讲解了常见的表单元素如文本框、密码输入、单选框、多选框等，并提及了全局属性如id、class和style。还概述了CSS的引入方式和选择器类型，如基本选择器、包含选择器、复合选择器及属性选择器。
Day2
一、表格标签
1.基本结构：
<table>
<caption></caption>
<thead>（ --------表头）
<tr>
<th></th>
</tr>
</thead>
<tbody></tbody>(主要使用)
<tfoot></tfoot>
</table>注释：.表头 rows行（tr） data数据（td单元格）
.caption:通过css更改
.<thead>、<tbody>、<tfoot>均可水平调节<align>和垂直<valign>
2.单元格的合并
<table border="1px" width="600px" cellspacing="0" >
<thead >个人简历</thead>
<tbody height="600px" align="center" valign="middle">
<tr>
<td>姓名：</td>
<td>张三</td>
<td>年龄：</td>
<td>18</td>
<td rowspan="3" ><img src="C:\Users\姜汁撞牛奶\Desktop\微信图片_20230704235132.jpg"></td>
</tr>
<tr>
<td>性别：</td>
<td>男</td>
<td>籍贯：</td>
<td>中国</td>
</tr>
<tr>
<td>手机号：</td>
<td>1781231456</td>
<td>QQ号:</td>
<td>233333</td>
</tr>
<tr>
<td>毕业院校：</td>
<td>清华大学</td>
<td>电子邮箱：</td>
<td colspan="2">233333@qq.com</td>
</tr>
</tbody>
<tfoot align="centre">
<tr>
<td>住址：</td>
<td colspan="4">翻斗花园1单元708</td>
</tr>
</tfoot>
</table>
</body>注：.table:border 只控制外围大小、width、height(tbody 值是底线设置的高只高不低 )、cellspacing(单元格与单元格时间的距离)
. 跨行跨列：rowspan（跨行）、colspan（跨列）、thead、tr、tbody、
3.details和tabindex
.details多使用于详情展示且多和<summary>搭配使用
.tabindex：全局属性 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航 tabindex=负值/0/正数 通常tabindex="1
二、常见的表单元素及基本机构
.常见的表单元素及基本结构：
<form action="#">--------#访问地址为空的即当前页面
<!-- 文本框 maxlength：最大长度 placeholder：提示词-->
用户名：<input type="user" value="" max="6" placeholder="请输入用户名：" ><br/>
<!-- 密 码 -->
密 码：<input type="password" name="pwd" ><br/>
<!-- radio 单选框 -->-------------------------必须要value
<input type="radio" name="nan">男
<input type="radio" name="nv">女<br/>
<!-- 多选框 label扩大选择范围-->-----------------必须要value
<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>吃屎<br/>
<!-- 隐藏域 -->
<input type="hidden" name="hid" value="ggboy"><br/>
<!-- 提交按钮 -->
<input type="submit">
<!-- <button type="submit"></button> -->
<!-- 重置按钮 -->
<input type="reset" ><br/>
<!-- 普通按钮 -->
<input type="button">
<!--文本域 -->
<textarea cols="20" rows="10">
</textarea><br/>
<!-- 下拉菜单也是默认选中 -->
<select name="籍贯" id="">
<option value="">南京</option>
<option value="">西安</option>
<option value="">成都</option>
</select>
</form>-------form必须要有name属性.其中checked和下拉菜单斗士默认选中
.<form>中必须要有name属性其中单选框（radio）和多选框（checkbox）需要有value（赋值）
三、全局属性和语义标签
1.全局属性
<!-- id身份证号，一个页面只出现一次 -->
<!-- class 一类 可重复出现-->
<!-- style 全局属性 data-*自定义属性 -->
<div class="pink" style="font-size: larger;">你是猪</div>
<form action="#">
<input type="text" name="a" id="">
<button accesskey="s">提交</button> ----想要提交按住s键效果相同
</form>2.语义标签
<div class="head"></div>----------和<header></header>一样
<div class="body">--------和<nav></nav>一样
<div class="nav"></div>
</div>
<div class="footer"></div>
<header></header>
<nav></nav>四、CSS三种引入方式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<!-- 外部样式 推荐 -->
<link rel="stylesheet" href="./11242.html">
<!-- 内部样式 -->
<style>
/* css基本结构 */
/* 选择器{ */
属性名： 属性值；
属性名： 属性值；
/* } */
.box1{
width: 300px;
height: 500px;
background-color: bisque;
}
</style>
</head>
<body>
<div>五十赫兹</div>
</body>五、选择器
1.基本选择器
<head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 标签选择器 */
p{
color: green;
}
/* id选择器 #*/
#box1{
color: pink;
}
/* 类选择器 .*/------box类都会被执行该命令
.box2{
color: blueviolet;
}
/* 通配符选择器 选中所有标签* */
*{
background-color: pink;
}
</style>
</head>
<body>
<p>我是一个文字</p>
<div id="box1">五十赫兹1</div>
<div class="box2" >石河子</div>
</body> /* id选择器 #*/
#box1{
color: pink;
}
/* 类选择器 .*/------box类都会被执行该命令
.box2{
color: blueviolet;
}
/* 通配符选择器 选中所有标签* */
*{
background-color: pink;
}
</style>
</head>
<body>
<p>我是一个文字</p>
<div id="box1">五十赫兹1</div>
<div class="box2" >石河子</div>
</body>
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>
/* <!-- 子代选择器 选中亲儿子即ul下的小li*/
.a>li{
background-color:pink;
}
/* 后代选择器 找到后代所有要找到的元素*/
.a{
color: antiquewhite;
}
</style>
</head>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<ul>
<li>2</li>
</ul>
</ul>
</body>
</html>
3.复合选择器
<style>
/* div{
color: pink;
}
p{
color: pink;
}
span{
color: pink;
} */
div,-------为了方便操作，将上面三个选择器写在一块
p,
span{
color: pink;
}
</style>
</head>
<body>
<div>yftgftftft</div>
<p>rrwrty</p>
<span>hfgvfuvj</span>
<ul>
<li>1</li>
</ul>
</body>4.属性选择器
<style>
input{
background-color: pink;
}
input[type="password"]{-------根据[]中被选中的的属性来执行命令
background-color: green;
}
div[id]{
width: 300;
height: auto;
background-color: blueviolet;
}
/* type^"te" 一te开头的 */
input[type^="te"]{
background-color: blue;
}
/* type$=l 一type以l结尾的 */
input[type$="l"]{
background-color: gray;
}
/* type="e" type里含有e的 */
input[type*="e"]{
background-color: grey;
}
</style>
</head>
<body>
<input type="text"><br/>
<input type="number"><br/>
<input type="url"><br/>
<input type="password"><br/>
<input type="search">
<div id="antiquewhite"></div>
</body>六.字体样式
<style>
div{
/* 字体大小 */
font-size: 40px;
/* 字体粗细 */
/* font-weight:bold; */
/* 100-900 400==normal 800==bold 100-900越来越粗*/
/* 字体是否倾斜 */
/* font-style: italic/normal; */
/* font-family: "微软雅黑"; */
/* italic 900可省略，字体大小，font-family必须存在 */
font: italic 900 70px "黑体"
字体 ：；字体格式（斜体） 字体粗细 字体大小 字体样式
font-weight:100;
color: rgb(86, 29, 139);
}
</style>
</head>
<body>
<div>你是兔兔小淘气，</div>
</body>首行缩进：
<style>
p{
/* text-indent首行缩进: 32px; */
text-indent: 2em; ------32px==2em
}
</style>
</head>
<body>
文本......
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
