2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入
<meta charset="utf-8" />
<!-- 网页标题 -->
<title>实验项目学习1</title>
<!-- 关键词（爬虫看） -->
<meta name="keywords" content="学习，复习，HTML">
<!-- 描述（给爬虫看） -->
<meta name="description" content="这是一个实验的项目">
<!-- 作者 -->
<meta name="author" content="Shanter">
<!-- 版权所有 -->
<meta name="copyright" content="版权声明">
<!-- 跳转网页
<meta http-equiv="refresh" content="5;ur1=http://baidu.com"> -->
<!-- 用于定义元素的CCS样式 p指的段落 颜色 格式如下 -->
<style>
p{
color: red;
}
</style>
<!-- link也可以引入外部样式文件（CSS文件）
要在css文件夹下有才能引用 格式如下 什么什么.cs-->
<link rel="stylesheet" href="css/ .cs">
<!-- 用于定义页面的JavaScript代码 也可以引用外部JavaScript文件
可以写js内容-->
<script>
</script>
<!-- base标签无意义，知道有就行
<base> 标签为页面上的所有链接规定默认地址或默认目标。 -->
body
<!-- p表示段落 -->
<p>这是一个实验</p>
<!-- 标题标签<h1>-<h6> h1只能用一次 -->
<h1>标签1</h1>
<h2>标签2</h2>
<h3>标签3</h3>
<h4>标签4</h4>
<h5>标签4</h5>
<h6>标签6</h6>
<!-- 文字加粗 strong带强调效果 -->
<strong>已经<br/>加粗了</strong>
<b>加粗了,且s方法</b>
<br>
<!-- 文字倾斜 em强调-->
<em>这是倾斜em</em>
<i>倾斜,s方法</i>
<br>
<!-- 下划线标签,ins带强调 -->
<ins>这是有下划线</ins>
<u>这也是下划线u</u>
<br>
<!-- 删除线的标签,del带强调 -->
<del>删除线del</del>
<s>删除线s</s>
<br>
<!-- 换行标签 可以放里面 -->
<br/>
<!-- 水平线标签 可以放里面 -->
<hr/>
<!-- src是指定图片的，
alt替换文本（图片无法显示时，显示040等文本内容）
title 提示文本（当鼠标放上去时显示文本内容） -->
<img src="./OI12P-C.jpg" alt="加载错误404" > <!-- 注意要点击刷新位置,停止加载-->
<img src="./eg_tulip.jpg" title="你真的要点击吗">
<p>hjahu1</p>
<!-- 通过width(宽)调节高度,height?(高),不常用,工作用ccs实现功能 -->
<img src="./OIP-C.jpg" width="200">
<img src="./OIP-C.jpg" height="200"><br/>
<!-- 相对路径, ./ 当前文件夹. ../上一级文件夹, ../../上两级文件夹 -->
<img src="../img/随机的图片.webp" alt="一个美国人"/><br/>
<!-- 当图片不在自己网址用 去网页复制就行https://img.alicdn.com/imgextra/i1/993831484/O1CN01zvusGU1MpiYJCENY9_!!993831484.png -->
<img src="https://img.alicdn.com/imgextra/i1/993831484/O1CN01zvusGU1MpiYJCENY9_!!993831484.png" />
<br/>
<!-- 超链接标签 跳转页面 是双标签 <a> 就是超链接用的 -->
<a href="https://www.baidu.com/">跳转到百度网站</a><br/>
<!-- 跳转本地路径,按相对标签写法 -->
<!-- 打开新标签页,且不会关这个 target="_blank" -->
<a href="./图片实验.html" target="_blank">跳转到图片实验</a><br/>
<!-- 经验:开发初期,不知道跳转链接的情况下,href 属性值写# 表示空链接,不跳转 -->
<a href="#">空链接</a><br/>
<!-- 音频播放 src是必要属性，controls可视化控制面板(属性名和属性值一样省略了)
，loop循环播放，autoplay自动播放 (一般浏览器禁用了)-->
<audio src="../music/天涯歌-..._lan.mp3" controls loop ></audio>
<br/>
<!-- 视频播放 controls控制面板，loop循环播放，
muted禁音播放，autoplay自动播放（需要先禁音）-->
<video src="../music/单片机.mp4" width="800" controls muted autoplay></video>
<!-- table 要包含整个表格-->
<table border="1">
<thead> <!--这是一个双标签，指表格头部 -->
<tr> <!-- tr就是分行 -->
<th>姓名</th> <!-- th列（标题的列） -->
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody> <!-- 这是双标签，表格主体包含住 -->
<tr>
<td>张三</td> <!-- td（内容的列） -->
<td>92</td>
<td>98</td>
<td rowspan=2"">190</td> <!-- rowspan是跨列合并 -->
</tr>
<tr>
<td>李四</td>
<td>92</td>
<td>98</td>
<!-- <td>190</td> --> <!-- 合并 需要注释掉 -->
</tr>
</tbody>
<tfoot> <!-- 这是双标签，表格尾部包含住 -->
<tr>
<td>总结</td>
<td colspan="3">全市第一</td> <!-- 跨列合并单元格 -->
<!-- <td>全市第一</td> -->
<!-- <td>全市第一</td> -->
</tr>
</tfoot>
</table>
<!-- 例如登录信息，注册页面，搜索区域都是用的表单 -->
<!-- 通过tape可以改变属性 -->
一个文本标签框<input type="text"> <!-- 不会换到下一行 -->
<br/><br/>
密码框标签<input type="password"> <!-- 不会换行 -->
<br/><br/>
单选框<input type="radio">
<br/><br/>
多选框<input type="checkbox">
<br/><br/>
上传文件<input type="file">
<br/><br/>
<!-- input 占位文本：提示信息 -->
可以输入文字，提示<input type="text" placeholder="请输入">
<br/><br/>
<!-- radio 单选展开：name然后取名字 name要一样-->
<!-- checked默认开局选 -->
<!-- label 让文字与单选绑定 for要和id对应-->
<!-- label简单粗暴写法 -->
性别：
<label><input type="radio" name="han">简单粗暴写法</label>
<input type="radio" name="han" id="man"><label for="man">男</label>
<input type="radio" name="han" id="" checked>女
<br/><br/>
<!-- 多选文件 multiple -->
上传文件<input type="file" multiple >
<br/><br/>
<!-- 多选打✔ -->
兴趣爱好：
<input type="checkbox" name="xing" checked>篮球 <!-- 默认选中checked -->
<input type="checkbox" name="xing" >羽毛球
<input type="checkbox" name="xing" >乒乓球
<br/><br/>
<!-- 下拉菜单 select-->
城市
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option selected>重庆</option>
</select>
<br/><br/>
<!-- 文本域标签textarea，比如发表评论，会回复 -->
<!-- 右下角有拖拽功能，可以放大文本框，但后面要禁用 -->
<!-- 前两个为后台发送，后两个为尺寸但一般用CSS -->
<textarea name="" id="" cols="" rows="" > 这个中间写提示文字</textarea>
<!-- 按钮button ，点击进行操作 -->
<!-- 暂时无法使用，功能为将数据提交到后台（默认功能） -->
<button type="submit">提交按钮</button>
<!-- 重置按钮 ，恢复默认值-->
<button type="reset">重置按钮 </button>
<!-- 普通按钮，本身无用，需要配合JavaScript -->
<button type="submit"> 普通按钮，配合JS</button>
<br/><br/>
<!-- div标签独占一行，与p标签有什么区别呢？
1、名称不同
div是布局框架标签;
p是段落标签，布局文章标签。
2、div与p基本css属性
div与p均独占一行的块元素标签，唯一区别,p自带有一定margin-top和margin-bottom属性值，而div两个属性值为0
也就是两个p之间有
—定间距，而div没有。
div上下没有间隔间距，而p有。 -->
<!-- 大格子 -->
<div>这是div标签</div>
<div>这是div标签</div>
<br/><br/>
<p>这是p标签效果</p>
<p>这是p标签效果</p>
<br/><br/>
<!-- span标签，不换行 <span> 标签被用来组合文档中的行内元素。
只有应用样式（CSS）才会看出效果，不然跟其他文本一样-->
<!-- 小格子 -->
<span>span标签</span>
<span>span标签</span>
<br/><br/>
<!-- 实体字符标签 可以避免出现<p>这种情况，防止浏览器误判-->
<!-- 在代码中按很多空格，网页只会识别一个空格，所以采用实体字符 -->
<!-- 空格 <小于号 >大于号 -->
<p>我 看见<了时>间</p>
<br/><br/>
