01HTML
<!-- html框架快捷键：html :5 或英文状态！ -->
<!-- -->
<!-- -->
<!-- 注释：Ctrl + / 页面上看不见，给自己看的-->
<!-- DOCTYPE document Type 文档类型 声明这个页面为h5页面 -->
<!DOCTYPE html>
<!-- html是双标签带斜线的是结束标签，有结束标签的是双标签，是最大的html标签 -->
<!-- 单标签只有开始标签或者在标签内部加斜线是单标签 -->
<html lang="en">
<!-- head 页面的配置都写下这 :页面的配置标题都写在这-->
<head>
<!-- meta 元字符 提供页面相关信息 -->
<!-- charset字符集 UTF-8 万国码 -->
<!-- GBK 专门解决中文编码的 -->
<meta charset=" UTF-8">
<!-- viewport 移动端 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- keywords关键字 -->
<!-- content 内容 -->
<meta name="keywords" content="前端真好">
<!--description 描述 网页的描述 -->
<meta name="description" content="靠前端挣钱">
<!-- title 网页的标题 -->
<title>我的网页</title>
<!-- 样式 -->
<!-- js-->
</head>
<body>
今天星期五
<!-- 页面上所有 图片 文字 连接 都写在这 -->
</body>
</html>
02标题标签
<!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>
<!-- 标题标签 headline -->
<!-- 双标签-->
<!--
注意：
1.只能用于标题，不要为了文本加粗或是字体变大来使用标题标签
2.最好依次使用h1，h2....
3.h1到h6在网页上独立成行
块状元素：独立成行，可以设置宽高
width宽 单位 px像素
height高
background-color 背景颜色
-->
<!-- style 风格 -->
<h1 style="width: 300px; height: 100px; background-color: aqua;">我是个h1标签</h1>
<h2>我是个h2标签</h2>
<h3>我是个h3标签</h3>
<h4>我是个h4标签</h4>
<h5>我是个h5标签</h5>
<h6>我是个h6标签</h6>
</body>
</html>
03段落_换行_水平线
<!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.段落：paragraph
标签：<p></p>
作用：把一段文本标记成一个段落
-->
<!-- 100-400-700-900 -->
<!-- lighter--normal--bold--bolder -->
<p style="color: aqua; font-size: 30; font-weight: 100;">
法院经审理查明，
<!-- 空白折叠现象，把多个空格压缩成一个空格来显示 -->
许垚因公司经营管理问题与被害人林某产生矛盾。在预谋后，他于2020年12月14日至15日间，在林某的食物中投毒，导致林某中毒身亡。此外，许垚还因与赵某甲、赵某乙在工作上的矛盾，于2020年9月至12月期间，在两人的办公室内投毒，导致赵某甲、赵某乙等四人中毒。2020年12月18日，许垚被公安机关抓获。
</p>
<p>
上海一中院认为，许垚的行为已经构成了故意杀人罪和投放危险物质罪，两项罪名应数罪并罚。他是有预谋地以投毒方式实施犯罪，其犯罪动机卑劣，手段恶劣，后果严重，主观恶性极大，因此依法应予严惩。
</p>
<!--
独立成行
注意：p标签不能嵌套p标签
-->
<p>
<p>123</p>
</p>
<!--
换行：<br> <br/> <br /> 几个br换几行
-->
<p>
上 <br>海 <br>一 <br>中 <br>院 <br>认 <br>为
</p>
<!--
水平线 <hr> 分割页面内容
color： 配置水平线的颜色
width：配置水平线宽度
align：配置水平线对齐方式 left 居左 right 居右 center 居中
size：配置水平线高度
-->
<!-- style=text-align居中 -->
<!-- 块状元素默认浏览器宽度或父元素 -->
<hr color="green" width="500px" align="right" size="10">
</body>
</html>
04图片标签
<!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>
<!--
图片标签 ：image
-src：source 资源，图片文件存放的路径，可以是本机上的一个文件路径，也可以是网络路径
绝对路径：C:\Users\DELL\Desktop\课件\下载.jpg
C:/Users/DELL/Desktop/课件/下载.jpg（正斜线）
以上两种方式都可以，但是要统一使用，正斜线是规范
相对路径：
./ 点 斜线 代表当前路径（可省略不写）
../ 点 点 斜线 代表上一级路径
网络路径：https://ts1.cn.mm.bing.net/th/id/R-C.679eb85a807999f26156dc590f50484b?rik=jtm%2bhq7TlNhUdg&riu=http%3a%2f%2fimg.car.xingcheshixian.com%2fcar_v_article_img%2f167086.jpg&ehk=qbX6Y3u92s9Yjy5D%2bxykWySLDWBvTysh8EDZ3HTSX2c%3d&risl=&pid=ImgRaw&r=0
http://或 https://不能省略
-alt：图片加载失败时显示
-title：鼠标悬停到图片上时显示，通用
-width：图片高度
-height：图片高度
注意：
1.如果手动设置宽高，可能会导致图片变形（宽高与原图宽高不成比例）
2.解决只设置宽高中的一个，另一个浏览器会自动等比例缩放
img标签和h标签不同的是：不独立成行，能设置宽高。
-->
<img src="C:/Users/DELL/Desktop/课件/下载.jpg" alt="" title="我炫富了" width="200px" height="300px">
<img src="下载.jpg" alt="图片加载失败了">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.679eb85a807999f26156dc590f50484b?rik=jtm%2bhq7TlNhUdg&riu=http%3a%2f%2fimg.car.xingcheshixian.com%2fcar_v_article_img%2f167086.jpg&ehk=qbX6Y3u92s9Yjy5D%2bxykWySLDWBvTysh8EDZ3HTSX2c%3d&risl=&pid=ImgRaw&r=0" alt="">
<img src="" alt="">
</body>
</html>
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标签：点击跳转到别的页面
-->
<a href="https://www.baidu.com/">跳转到百度</a>
<!-- 跳转到本地文件：相对路径查找 -->
<!-- target="_blank 新窗口跳转页面 -->
<a href="./04图片标签.html" target="_blank">跳转到图片标签</a>
<a href="#">空连接</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加粗效果</strong>
<b>b 加粗</b>
<em>这是em的倾斜</em>
<i>这是i的倾斜</i>
<ins>这是ins下划线</ins>
<u>这是u下划线</u>
<del>这是del删除线</del>
<s>这是s删除线</s> -->
<strong>带有强调语义的加粗</strong><br>
<em>这是强调语义的倾斜</em><br>
<ins>这是带有强调语义的下划线</ins><br>
<del>这是带有强调语义的删除线</del>
</body>
</html>
07无语意标签预习
<!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>
<!-- 布局网页 都是双标签-->
<!-- div标签：独占一行 -->
<!-- span标签：不换行 -->
<div>这是div标签</div>
<!-- div标签是大盒子 -->
<div>这是div标签</div>
<span>这是span标签</span>
<!-- span标签是小盒子 -->
<span>这是span标签</span>
<!-- 空格字符实体 -->
我在百衫 学习
<!-- <小于号
>；大于号 -->
<p>
</body>
</html>
08列表标签预习
<!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>
<!-- 布局内容排列整齐的区域 -->
<!-- 分类：无序列表、有序列表、定义列表 -->
<!-- 无序列表
ul嵌套li，ul是无序列表，li是列表条目
作用：排列整齐，不需要顺序的区域 -->
<ul>
<li>列表条目1</li>
<li>列表条目2</li>
<li>列表条目3</li>
</ul>
<!-- 注意：
ul里面只能嵌套li
li里面能包裹任何内容 -->
<!-- 有序列表
ol嵌套li，ol是有序列表，li是列表条目
作用：排列整齐，需要顺序的 -->
<ol>
<li>第一个条目</li>
<li>第二个条目</li>
<li>第三个条目</li>
</ol>
<!-- 注意：
ol里面只能嵌套li
li里面能包裹任何内容 -->
<!-- 定义列表
dl嵌套dt和dd dl是定义列表整体，dt是定义列表的标题，dd是定义列表的描述/详情 -->
<dl>
<dt>服务中心</dt>
<dd>申请售后</dd>
</dl>
</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>
<!-- 表格标签 默认没有边框线使用border添加边框线-->
<!-- table嵌套tr，tr嵌套td/th
table 表格
tr 行
th 表头单元格
td 内容单元格-->
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>100</td>
<td>99</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</tfoot>
</table>
<!-- 表格结构标签
作用：让表格结构更清晰，语义更清晰 （针对浏览器来说）
thead
tbody
tfoot-->
</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>
<!-- 合并单元格，用来合并同类信息 -->
<!-- 跨行合并和跨列合并 -->
<!-- 合并步骤
1.明确合并目标
2. 保留最左最上的单元格，添加属性（取值是数字，表示合并的单元格数量）
跨行合并：保留最上单元格，添加属性rowspan
跨列合并：保留最左单元格，添加属性colspan
3.删除其他单元格-->
<!-- 注意：不能跨结构合并单元格 -->
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">100</td>
<td>99</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<!-- <td>100</td> -->
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>
</body>
</html>
5721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
