这篇博客详细介绍了HTML5和CSS3的基础知识。HTML5部分涵盖了标签使用、标题、输入框、图像、音频、链接等内容，CSS3部分讲解了选择器、字体、文本、伪类选择器、元素显示模式等特性。此外，还讨论了盒子模型、布局方式以及布局中的一些常见问题和解决方案。
前端
基础知识
HTML5首先知道
1.标签成对
<head>
<title> </title>
<body></body>
</head>
2.必有代码
<!DOCTYPE html>申明类型标签
<html lang="en"> 语言为英语
<html lang="zh-CN"> 语言为中文
<html lang="fr"> 语言为法语
<meta charset="UTF-8">保存文字类型（简、繁体）
<!-- 关键字 -->
<meta name="keywords" content="关键字">
<!--3秒之后刷新页面-->
<meta http-equiv="refresh" content="3;http://www.baidu.com" />
<!-- 页面描述 -->
<meta name="description" content="详情页" />
<!-- Link标签引入外部资源 -->
<link rel="shortcut icon" href="http://www.baidu.com/favicon.ico" type="image/x-icon" />
HTML5知识
1.标题
<!--标题独占一行-->
<h1></h1> ~ <h6></h6>
2.水平线
<hr>
# 修改水平线颜色
<style>
border: none; //去掉边框遮掩
height: 1px; //一定要设置水平线的大小
background-color: #ccc; //再设置颜色
</style>
3.设置按钮
<button>搜索</button>
4.输入框
<input type="text" value="请输入..." class="...">
5.图像标签
<img src="(指定图像的路径与文件名,必须与网页文件夹放在一起)"
alt="(当src无效时，显示alt)"
title="(鼠标放在图像上时，提示的文字)"
width="500" height="500"
width 与 height任意选择一个设置，则保持比例缩放，都更改容易改变比例
/>
① 相对路径
相对于网页文件夹，图片与网页同文件夹：
<img src="img.jpg"/>
相对于网页文件夹，图片在下级文件夹：
<img src="...（图像文件夹名）/img.jpg"/>
相对于网页文件夹，图片在上级文件夹：
<img src="../img.jpg"/>
② 绝对路径
<img src="D:\...\..."/>（不同电脑路径不同，跨电脑一般不建议使用）
6.插入音频
<!--
标签默认不允许用户控制，加入 controls 后用户就可以自主控制了
加入 autoplay 后，自动播放（但是大部分浏览器不支持自动播放）
加入 muted 后，默认静音播放（配合 autoplay 后就可以自动静音播放了）
加 loop 后，设置为循环播放-->
<audio controls,autoplay,muted,loop>
无法播放：
浏览器检测到<audio>标签，则播放，如果检测不到，则浮现这里的文字
<source src="xxx.mp3">
</audio>
<!--
视频标签中 controls autoplay loop 同上
不同的是，视频建议自动播放的同时，默认带上 静音播放：muted
-->
<div class="video">
<video src="picture/WLOP/WLOP.mp4"
style="width:100%;height:100%;object-fit:fill"
controls
autoplay
muted
loop></video>
</div>
视频会自带宽高大小的比例，如果想要更改，可以在video标签中加上style="width:100%;height:100%;object-fit:fill"
否则默认加上width:100%自适应即可
7.超链接
<a href="跳转目标" target="目标弹出方式">
超链接对象
</a>
① 这里的 href 链接的
- 若是网页，与图片的连接方式相似（文件夹方式）
- 若是 # 则代表空链接
- 若是文件，则链接的是一个下载链接，点击则下载文件（文件夹方式）
②
target="_self" 当前页面打开（默认）
"_blank" 开新页
③ 锚点链接（定位至页面中的某位置）
<!--需要该定位一个id名字，才可被定位-->
<h3 id="this"> 标题 </h3>
<a href="# this"> 文本 </a>
④ 想要更改超链接的样式，直接在 a 标签上面更改，父盒子更改容易无效
⑤ 去除超链接下面的下划线：
a {
text-decoration: none;
}
8.特殊字符
① 空格 和 
② < <小于号
> >大于号
③ & &
④ ¥ ¥
⑤ © ©，版权
⑥ ® ®，商标
⑦ ° ° ，摄氏度
⑧ ± ±，正负号
⑨ ××，乘号
⑩ ÷÷，除号
⑩① ²²，2次方
⑩②³ ³，3次方
9.内联框架
<iframe src="网址" width="500" height="500" frameborder="边框粗细">
10.表格框架
<table>
<tr>每一行，有几个<tr>标签对就有几行
<th>表头单元格</th>
<td>
1.行中的每一格，有几个<th>标签对，就有几格
2.中间插入图片与链接，正常嵌入即可
</td>
</tr>
</table>
11.表格属性
<!--居中-->
<table align="center">
<!--边框-->
<table border="1" 有
border="0" 无
最低0.47元/天 解锁文章
扫一扫
515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
