一、元素显示模式
<!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>元素显示模式</title>
</head>
<body>
<!-- 元素显示模式
块元素：独占一行 div 宽、高、内外边距可以设置
行内元素：一行可以存在多个 span 宽、高、内外边距不可以设置
行内块元素：一行可以存在多个 input 宽、高、内外边距可以设置
-->
<div>我是一个盒子</div>
</body>
</html>二、表格标签<table></table>
1.表格标签基本框架：
<table>
<caption></caption>
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
</td>
</tr>
</tfoot>
</table>
table是表格标签
<caption>是表格的名字
<thead>是表头也就是表格第一行的内容
<tbody>是表格的主体内容部分
<tfoot>是表格底端的一些注释等
<tr>代表一行
<th>和<td>代表单元格，不同的是<thead>中使用<th>,而<tbody>与<tfoot>中使用<td>
单元格内不仅可以放文字还可以放一些其他标签
<!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>
<table>
<!-- 表头 -->
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>吴旭晖</td>
<td>男</td>
<td>23</td>
<td>汉族</td>
<td>群众</td>
</tr>
<tr>
<td>吴旭晖</td>
<td>男</td>
<td>23</td>
<td>汉族</td>
<td>群众</td>
</tr>
<tr>
<td>吴旭晖</td>
<td>男</td>
<td>23</td>
<td>汉族</td>
<td>群众</td>
</tr>
<tr>
<td>吴旭晖</td>
<td>男</td>
<td>23</td>
<td>汉族</td>
<td>群众</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计4人</td>
</tr>
</tfoot>
</table>
</body>
</html>2.表格标签属性
table：border（只控制最外围大小）、width、height（tbody 值是底线，只高不低）、cellspacing（单元格与单元格之间的距离）
caption：通过css更改
thead、tr、tbody、tfoot：height\align(水平对齐方式)\valign(垂直对齐方式)
<!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>
<table border="1px" width="900px" height="400px" cellspacing="0">
<!-- 表头
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 heght="400px" align="center" valign="middle">
<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>23</td>
<td>汉族</td>
<td>群众</td>
</tr>
<tr>
<td>吴旭晖</td>
<td>男</td>
<td>23</td>
<td>汉族</td>
<td>群众</td>
</tr>
<tr>
<td>吴旭晖</td>
<td>男</td>
<td>23</td>
<td>汉族</td>
<td>群众</td>
</tr>
<tr>
<td>吴旭晖</td>
<td>男</td>
<td>23</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>
</html>3.表格单元格合并
一：先确定是跨行还是跨列合并，跨行用rowspan，跨列用colspan
二：找到合并单元格，写上合并方式="合并的单元格数量"，例：rowspan="2"
三：删除多余的单元格
<!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>
<!-- td 跨行：rowspan
跨列：colspan
-->
<table border="1px" width="800px" cellspacing="0">
<!-- 表头 -->
<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>23</td>
<td>汉族</td>
<td>群众</td>
</tr>
<tr>
<td>男</td>
<td>23</td>
<td>汉族</td>
<td>群众</td>
</tr>
<tr>
<td>吴旭晖</td>
<td>男</td>
<td>23</td>
<td>汉族</td>
<td>群众</td>
</tr>
<tr>
<td>吴旭晖</td>
<td>男</td>
<td>23</td>
<td>汉族</td>
<td>群众</td>
</tr>
</tbody>
<tfoot>
<tr align="right">
<td colspan="5">共计4人</td>
</tr>
</tfoot>
</table>
</body>
</html>三、详情标签<details></details>
details：详情标签 配合summary使用
使用方式如下图代码所示：
<!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>
<!-- details：详情标签 配合summary使用-->
<details>
<summary>有志青年</summary>
我们这里都是优秀的有志青年
</details>
</body>
</html>运行效果如下
四、tabindex标签
tabindex：让本不能tab便利获取焦点的元素可以获取 可以为负数（不能获取焦点），0（可以按照顺序获取焦点），正数（优先获取焦点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=4, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- tabindex：让本不能tab便利获取焦点的元素可以获取 可以为负数，0，正数-->
<input type="text">
<a href="#">去百度</a>
<div>我是第1个盒子</div>
<div tabindex="1">我是第2个盒子</div>
<div>我是第3个盒子</div>
<div>我是第4个盒子</div>
</body>
</html>五、表单
1.表单的基本结构
<form action="要提交给的网页地址">
<input type="text" name="wd">
<button>提交</button>
</form>
<!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>
<!-- 表单：网页交互区，收集用户信息
action：将数据交给谁处理
name：必有属性
-->
<form action="https://www.baidu.com/s" method="">
<input type="text" name="wd">
<button>提交</button>
</form>
</body>
</html>2.常见的表单元素
<!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>常见的表单元素</title>
</head>
<body>
<form action="#">
<!-- 文本框 maxlength：最大长度（文本域里也能用）-->
用户名：<input type="text" name="user" maxlength="5"><br/>
<!-- 密码 -->
密码：<input type="password" name="pwd"><br/>
<!-- 单选框 -->
<input type="radio" name="gander" value="男">男
<input type="radio" name="gander" value="女">女<br/>
<!-- 多选框 lable标签-->
<input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>
<input type="checkbox" name="food">吃臭豆腐
<!-- checked默认选中 -->
<input type="checkbox" name="food" checked>吃肥肉
<!-- 隐藏域 -->
<input type="hidden" name="hid" value="哈哈哈哈哈哈哈哈哈">
<!-- 确认按钮 -->
<input type="submit">
<!-- <button type="submit"></button> -->
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button">
<!-- 文本域 -->
<textarea name="" cols="30" rows="10" maxlength="50">
</textarea>
<!-- 下拉菜单 -->
<select name="jiguan" id="">
<option value="南京">南京</option>
<!-- selected下拉菜单的默认选中 -->
<option value="成都" selected>成都</option>
<option value=西安>西安</option>
</select>
</form>
</body>
</html>六、html的全局属性
下图代码中的id，class，accesskey，style，data-*（*自己填充）都是全局属性
id：身份证号,在一个页面中只能出现一次
class：一类
accesskey：设置快捷键
style：样式
data-*：自定义属性
<!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>
<style>
.pink{
color: pink;
}
</style>
</head>
<body>
<!-- id身份证号,在一个页面中只能出现一次 -->
<div id="one"></div>
<!-- class 一类 -->
<div class="pink">我是一个盒子</div>
<div class="pink">我是一个盒子</div>
<div class="pink">我是一个盒子</div>
<div class="pink">我是一个盒子</div>
<!-- accesskey 设置快捷键 -->
<form action="#">
<input type="text" name="a">
<button accesskey="s">提交</button>
</form>
<!-- style -->
<!-- data-* 自定义属性 -->
</body>
</html>七、html语义标签
<!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>
<div class="head"></div>
<div class="body"></div>
<div class="nav"></div>
<div class="footer"></div>
<header></header>
<nav></nav>
</body>
</html>八、h5表单
<!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>
<form action="#">
<input type="number">
<input type="color">
<input type="text">
<button>提交</button>
</form>
</body>
</html>九、css
下图所示代码就是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>
1.css的三种引入方式
第一种：行内模式，例：<div style="width: 300px; height: 300px; background-color: green;"></div> 在一行内修改了样式，不过因为可能造成代码冗余，故不推荐
第二种：内部样式
选择器{
属性名： 属性值；
属性名： 属性值；
}
例：
.box1{
width: 300px;
height: 300px;
background-color: pink;
}
第三种：外部样式
在头部先连接外部样式
<link rel="stylesheet" href="./14-样式.css">
注意：要使用外部样式时，记得选择器与要修改的东西的class或id等要保持一致
推荐使用
<!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>十、选择器
一.基本选择器
1.标签选择器
标签{
属性名： 属性值；
属性名： 属性值；
}
2.id选择器
#id值{
属性名： 属性值；
属性名： 属性值；
}
3.类选择器
.类值{
属性名： 属性值；
属性名： 属性值；
}
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>
<style>
/* 标签选择器 选中所有的p标签*/
p{
color: aqua;
}
/* id选择器 */
#box1{
color: pink;
}
/* 类选择器 */
.box2{
color: blueviolet;
}
/* 通配符选择器 */
*{
background-color: pink;
}
</style>
</head>
<body>
<p>我是一段文字</p>
<div id="box1">我是盒子1</div>
<div class="box2">我是盒子2</div>
<p>我是一段文字</p>
</body>
</html>二.包含选择器
1.子代选择器：例：.a>li 父与子之间用>连接
2.后代选择器：例：.a li 父与子之间用空格连接
<!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>三.复合选择器
例：
div,
p,
span{
color: red;
}
就可以同时修改div，p，span标签为同一样式
<!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>盒子1</div>
<p>盒子2</p>
<span>盒子3</span>
<ul>
<li>
盒子4
</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;
}
/* type$="l" 以l结尾 */
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>十一、字体的样式
font-size：字体大小，单位用px（像素）
font-weight：字体粗细，100-900 400===normal 800===bold 100-900越来越粗
font-style：倾斜
font-family：字体
<!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{
/* 字体大小 */
font-size: 40px;
/* 字体粗细 */
/* 100-900 400===normal 800===bold 100-900越来越粗 */
font-weight: 900;
/* 字体是否倾斜 */
font-style: italic;
font-family: "微软雅黑";
/* 复合 italic 900可省略,字体大小,font-family必须存在*/
font:italic 900 70px "微软雅黑"
}
</style>
</head>
<body>
<div>
我是图图小淘气,面对世界很好奇
</div>
</body>
</html>十九、首行缩进
text-indent：首行缩进
<!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{
/* em这个单位代表当前一个字的大小 */
text-indent: 2em;
font-size: 20px;
}
</style>
</head>
<body>
<p>
蔡徐坤（KUN），1998年8月2日出生于浙江省温州市，户籍湖南吉首 [137] ，中国内地男歌手、演员、原创音乐制作人 [1] 、MV导演 [105] 。
2012年8月，蔡徐坤参演的偶像剧《童话二分之一》播出，由此开始步入大众视线 [2] 。2018年1月，参加竞演类综艺节目《偶像练习生》并以总票数第一正式出道，成为限定男团NINE PERCENT队长 [3] ；8月，发行首张EP《1》 [4] ，获2018亚洲新歌榜年度盛典最受欢迎潜力男歌手奖 [5] ；随后，他还发行原创单曲《Wait Wait Wait》，并携手格莱美奖最佳MV获奖导演戴夫·迈尔斯打造歌曲MV。2019年1月，被授予“中牙友好大使暨中牙杰出青年领袖人物”称号 [8] ；3月，成功开启横跨三个国家、六座城市的海外公演《ONE》 [11-12]；7月，发行首张数字专辑《YOUNG》 [107] ；10月，携手中国儿童少年基金会共同设立“葵计划爱心基金”。
2020年3月，加盟《青春有你第二季》担任青春制作人代表 [15] ；4月9日，原创公益歌曲《Home》全网上线 [17] ；随后，加盟户外竞技真人秀《奔跑吧第四季》担任常驻MC [16] ；7月，获第27届东方风云榜最佳男歌手等三个奖项。2021年1月，获得第二届TMEA腾讯音乐娱乐盛典年度最具影响力唱作歌手和年度最具号召力歌手两个奖项，单曲《情人》获得年度十大金曲奖；4月13日，发行个人创作专辑《迷》 [103] ；7月17日，于北京凯迪拉克中心举办首场个人巡回演唱会，同年获第三届TMEA腾讯音乐娱乐盛典年度最具影响力制作人等多项荣誉 [48] 。
2023年1月24日,参加《奋进新征程——2023中国网络视听年度盛典》，演唱歌曲《默片》 [156] 。
</p>
</body>
</html>
58
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
