05超链接标签
<!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>
<!--
超链接：a标签
href：要跳转的目标地址
target：以什么方式跳转
_self 默认值
_blank 从新页面打开
title：
注意：
1. 不独立成行，不能设置行高 行内元素
2.如果href是网络地址，http://或 https://必须加
-->
<a href="https://www.baidu.com/" target="_blank" title="我炫富了" style="width: 100px; height: 200px;">百度一下</a>
<a href="https://www.baidu.com/">
<img src="../下载.jpg" alt="">
</a>
<a href="https://www.baidu.co/">
百度两下
</a>
<a href="./01基本骨架.html">
基本骨架
</a>
<!-- 锚点： 跟id搭配使用。 id：和身份证一个，一个页面内独一无二，不能重复
#id名称
-->
<br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1 id="work">不，去加班</h1>
<br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br
><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#work">回家</a>
<!-- 返回顶部 -->
<a href="#">返回顶部</a>
<!-- javascript:; 阻断页面的刷新，良好的开发习惯 -->
<a href="javascript:;">没想好</a>
<!-- 跳转其他页面的固定位置 -->
<a href="./03古诗练习.html#gushi" target="_blank">去古诗</a>
</body>
</html>
06文本格式化
<!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>
<!--
加粗： <strong></strong> <b></b>
-->
知名汽车博主“@二师兄”发文称，<strong> 这有啥</strong> ，他去年3月31日从老司机离职，
辞去了年薪百万的工作，然后 <b>5月份</b> 公司还给他发了最后一笔奖金。
<!-- 斜体倾斜：<em></em> <i></i>
-->
<br>
<em> 一个人一个企业，别听有些人说怎么怎么这人坏这企业有问题，你得看他怎么做，这才是最真的。</em>
<br>
<i>对于韩路的做法，不少网友在评论区表达了敬佩之情，“公司做得大，老板格局也大”。</i>
<!--
删除线：<del></del> <s></s>
-->
<br>
<del>原价2000</del> 现价100
<br>
<s>原价200</s>现价100
<!--
下划线： <ins></ins> <u></u>
-->
<br>
<ins>通常情况下，员工离职后未能收到全部工资的原因多种多样，包括公司财务状况不佳、
管理混乱或恶意拖欠等。在这起案件中，
我们首先需要明确员工的合法权益以及企业应承担的法律义务。
</ins>
<br>
<u>发起仲裁：若协商无果，可以向当地劳动仲裁委员会提起仲裁。
根据《劳动争议调解仲裁法》，劳动仲裁是解决劳动争议的首选途径。
</u>
</body>
</html>
07span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- css样式 -->
<style>
span{
color: rgb(211, 205, 255);
/* 下划线 */
text-decoration: underline;
/* 斜体 */
font-style: italic;
}
</style>
</head>
<body>
<!--
span标签：一般用来修饰特殊标记的文本，一般搭配css样式使用
-->
弗拉基米尔·弗拉基米罗维奇·普京（俄语：Владимир Владимирович Путин，英语：Vladimir Vladimirovich Putin），1952年10月7日出生于<span>苏联列宁格勒</span> （<span>今俄罗斯圣彼得堡</span> ）， [47]俄罗斯政治家，第2、4任<span>俄罗斯总统</span> ，曾任<span>俄罗斯总理 、统一俄罗斯党</span> 主席。
</body>
</html>
08div标签
<!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{
color: rgb(209, 219, 219);
/* 去掉下划线 */
text-decoration: none;
/* 外边距 */
margin-left: 15px;
margin-right: 15px;
}
</style>
</head>
<body>
<!--
div标签：division 用于分割页面，将页面分割成多个模块
其实就是装多个元素的盒子
-->
<div style="width: 100%; height: 60px;">
<div style="width: 600px;height: 60px; line-height: 60px;">
<!-- line-height: ;将行高设置与高度相同，可实现内容的垂直居中 -->
<a href="javascript:;">首页</a>
<a href="javascript:;">首页</a>
<a href="javascript:;">首页</a>
<a href="javascript:;">首页</a>
<a href="javascript:;">首页</a></div>
</div>
</body>
</html>
09列表标签
<!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>
<!--
1.无序列表 2.有序列表 3.自定义列表
-->
<!--
1.无序列表
ul li
-ul 和 li 必须一起使用，是个组合标签
-ul标签里不建议除了li以外的标签，li标签里可以包含其他标签
-type：
none 啥也没有
disc 实心圆点 默认
square 小方块
circle 空心圆
-->
<ul type="square">
<li>猪八戒</li>
<li>孙悟空</li>
<li>沙和尚</li>
</ul>
<!--
2.有序列表：
ol li
1 阿拉伯数字表示
a 小写英文字母表示
A 大写英文字母表示
i 小写罗马数字表示
I 大写罗马数字表示
-->
<ol type="a">
<li>蜘蛛精</li>
<li>白骨精</li>
<li>红孩儿</li>
</ol>
<!--
3. 自动以列表
dl;自定义列表
dt：自定义列表标题
dd：自定义列表描述
-->
<dl>
<dt>唐僧</dt>
<dd>18</dd>
<dt>孙悟空</dt>
<dd>18</dd>
</dl>
</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>
</head>
<body>
<!--
表格标签：table标签：
1.特点：行 列 单元格 表头 标题 边框
2.组合标签
表格划分区域（开发可省略）
-thead 表头
-tbody 表格的主题信息
-tfoot 表格的尾部信息
<caption></caption>专门设置表格标题 会自动居中 必须跟在table后面
th ：table head 设置表格的表头 自动加粗且居中
tr：table row 表格的行
td：单元格
3.属性：
border：表格的边框
width：表格的宽度
cellspacing:外边距 单元格和单元格之间的距离 默认为2px
cellpadding：内边距 单元格的内容和边框直接的距离
align 水平对齐方式 left center right
valign 垂直对齐方式 top middle bottom
bordercolor ： 表格边框颜色
bgcolor ：表格的背景颜色
-->
<table border="1" width="500px" cellspacing="0" cellpadding="20px" align="center" bordercolor="pink" bgcolor="red" height="500px">
<caption>学生表</caption>
<thead>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</thead>
<tbody>
<tr align="center" valign="bottom">
<td>李四</td>
<td>18</td>
<td>男</td>
</tr>
<tr valign="bottom">
<td>李四</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>18</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
<!--
单元格合并：
colspan： 跨列合并 横向合并单元格 只会向后合并 多余的删掉
rowspan：跨行合并 竖向合并单元格 只会向下合并 多余的删掉
-->
</html>
5721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
