H5 Mosh教程笔记
先列出教程中会用到的网站
网站H5规范验证网站
CSS格式规范验证网站
转义字符查询
免费图片下载网站
免费图片视频下载网站
浏览器HTML标签，CSS属性支持情况查询网站
CSS一致化工具安装
渐变色代码生成网站
CSS形状代码生成网站
字体网站fontsquirrel
字体网站fonts
字体网站myfonts
教程开始
·HTML主体结构，常用标签简介
<!DOCTYPE html> <!-- 文档类型说明 -->
<html lang="en"> <!-- 文档语言说明 -->
<head> <!-- 文档头部元素 -->
<meta charset="UTF-8"> <!-- 文档头部元素中的字符集说明 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 文档头部元素中的http请求头信息，当浏览器从服务端获取网页时，会加上这里描述的http头 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 文档头部元素中的视界说明，就是浏览器内能看到的范围，缩放比例等，可用于页面适配 -->
<meta name="keywords" content="HTML, CSS"> <!-- 文档头部元素中的标题 -->
<meta name="description" content="此内容将显示页面在搜索引擎搜索结果中，用于网站简介"> <!-- 文档头部元素中的网站描述 -->
<title>Document</title> <!-- 文档头部元素中的标题 -->
</head>
<body> <!-- 文档主体内容 -->
</body>
</html>
· 文本标签
p标签, em标签，strong标签，转义字符
<!DOCTYPE html> <!-- 文档类型说明 -->
<html lang="en"> <!-- 文档语言说明 -->
<head> <!-- 文档头部元素 -->
<meta charset="UTF-8"> <!-- 文档头部元素中的字符集说明 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 文档头部元素中的http请求头信息，当浏览器从服务端获取网页时，会加上这里描述的http头 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 文档头部元素中的视界说明，就是浏览器内能看到的范围，缩放比例等，可用于页面适配 -->
<meta name="keywords" content="HTML, CSS"> <!-- 文档头部元素中的标题 -->
<meta name="description" content="此内容将显示页面在搜索引擎搜索结果中，用于网站简介"> <!-- 文档头部元素中的网站描述 -->
<title>Document</title> <!-- 文档头部元素中的标题 -->
<style>
</style>
</head>
<body> <!-- 文档主题内容 -->
<p>I love you</p> <!-- 在body中，用p标签，段落元素来显示普通文本，这里会在页面中显示I love you -->
<p>I love <em>you</em></p> <!-- em元素表示文本强调，默认使用斜体显示强调的文本内容，可用css修改强调内容的字体，颜色等 -->
<p>I love you </p> <!-- strong元素表示重要信息，默认使用粗体显示重要文本内容，可用css修改强调内容的字体，颜色等 -->
<p>I love you, <lsert >! © </p> <!-- 转义字符&开头，;结尾，小于符号：< 大于符号：> 版权符号：© -->
</body>
</html>
· a标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="top">Top</p>
<p id="welcome">Welcome</p>
<a href="about.html" target="_blank"> <!-- href表示跳转的目标，可以是域名，或者网站文件的相对路径，target表示 -->
<!-- <img src="" alt=""> --> <!-- a标签内可以包含图片或其他文字内容，达到点击图片或者文字就跳转的功能 -->
<!-- Text -->
</a>
<a href="https://www.google.com" target="_blank"> Google</a><!-- 点击Google，将会打开谷歌页面 -->
<a href="image.png"> Photo</a> <!-- 点击Photo将会在网页中显示图片 -->
<a href="image.png" download> Photo</a> <!-- 点击Photo将会在下载图片 -->
<a href="#welcome"> to welcome</a> <!-- 点击to top将跳转到Welcome的位置，实际就是跳转到id所在的元素位置 -->
<a href="#"> to top</a> <!-- 点击to top将跳转到页面顶部位置 -->
<a href="mailto:example@example.com">Email Me</a> <!-- 点击Email Me将打开系统默认的邮件发送软件发送邮件-->
</body>
</html>
· 图片 - img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 200px;
height: 200px;
/* 以合适的大小覆盖在200x200的盒子里显示图片，保证图片不变形，但可能无法完整显示图片*/
/*是比较常用的图片显示方式*/
object-fit: cover;
}
</style>
</head>
<body>
<!-- img标签的src是图片源，可以是图片的URL或者本地路径，alt是图片描述，尽量用有意义的文字 -->
<img src="images/coffee.jpg" alt="a cup of coffee on the table">
</body>
</html>
· 音视频标签 - video, audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
video {
width: 450px;
}
</style>
</head>
<body>
<!-- video 视频标签，src是视频源，controls是播放控制 -->
<!-- controls是html的布尔变量，写出这个变量，就表示true，在标签中就会生效，不写就是false -->
<!-- autoplay是自动播放，也是布尔变量，设置autoplay后，视频在加载后会自动播放 -->
<!-- loop是循环播放，也是布尔变量，设置loop后，视频在播放完后会自动再次播放 -->
<!-- Your browser doesn`t support videos会在浏览器不支持video标签时显示 -->
<!-- audio 与video类似，也有controls，autoplay，loop变量 -->
<video controls autoplay loop src="videos/video.mp4">
Your browser doesn`t support videos.
</video>
<audio src=""></audio>
</body>
</html>
· 无序列表 - ul
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
/* 列表li最左边的符号，可以是方形，原点等，或者none，没有符号 */
list-style-type: none;
}
</style>
</head>
<body>
<!-- ul表示无序列表 -->
<ul>
<!-- li表示无序列表的列，这里有3列 -->
<li>About Me</li>
<!-- 无序列表嵌套 -->
<li>Image
<ul>
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ul>
</li>
<li>Video</li>
</ul>
</body>
</html>
· 有序列表 - ol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ol {
/* 列表li最左边的符号，可以是方形，原点等，或者none，没有符号 */
/* list-style-type: none; */
}
</style>
</head>
<body>
<!-- ol表示有序列表 -->
<ol>
<!-- li表示有序列表的列，这里有3列 -->
<li>About Me</li>
<!-- 有序列表嵌套 -->
<li>Image
<ol>
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ol>
</li>
<li>Video</li>
</ol>
</body>
</html>
· 描述列表 - dl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- dl表示有序列表 -->
<dl>
<!-- dt表示描述列表的列，这里有3列术语 -->
<dt>About Me</dt>
<!-- dd表示对术语的解释-->
<dd>Describe about me</dd>
<dt>Image</dt>
<dd>Describe image 1</dd>
<dd>Describe image 2</dd>
<dd>Describe image 3</dd>
<dt>Video</dt>
<dd>Describe video</dd>
</dl>
</body>
</html>
· 表格 - table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, tr, td, th {
/* border是边框，1px是边框宽度，solid是边框线的类型，grey是边框的颜色 */
border: 1px solid grey;
/* 去除相邻单元格的间隙 */
border-collapse: collapse;
/* 单元格里的内边距增加5px，内容就不会感觉占满了单元格 */
padding: 5px;
}
tfoot {
/* 文字左对齐 */
text-align: left;
}
</style>
</head>
<body>
<!-- 表格标签，仅表示开始表格的描述了 -->
<table>
<!-- thead表示表头区域，方便搜索引擎或读屏器识别，同时会有默认的样式 -->
<thead>
<tr>
<!-- colspan表示单元格扩展，这里是横向扩展，2表示扩展到2个单元格，Expenses就占据两个单元格 -->
<th colspan="2">Expenses</th>
</tr>
<tr>
<!-- th表示表头 -->
<th>Category</th>
<th>Amount</th>
</tr>
</thead>
<!-- tbody表示表内容，方便搜索引擎或读屏器识别-->
<tbody>
<!-- tr表示行 -->
<tr>
<!-- td表示列，或者叫单元格 -->
<td>Marketing</td>
<td>$100</td>
</tr>
<tr>
<td>Accounting</td>
<td>$300</td>
</tr>
</tbody>
<!-- tbody表示表结尾，方便搜索引擎或读屏器识别，同时会有默认的样式-->
<tfoot>
<th>Total</th>
<th>$400</th>
</tfoot>
</table>
</body>
</html>
· 容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.highlight_div {
background-color: yellowgreen;
}
.highlight_span {
background-color: yellow;
}
</style>
</head>
<body>
<p>
<!-- div是容器，是块级元素，在不给背景色的情况下不可见，块级元素默认情况下总是独自占满一行 -->
<div class="highlight_div">Lorem</div>
<!-- span是行内元素，不会占满一行，默认情况下，可与其他行内元素紧挨着排列 -->
<span class="highlight_span">ipsum</span>
dolor sit amet consectetur adipisicing elit. Dolores, officia?
</p>
</body>
</html>
· 语意元素 - aritcle, figure, figcaption, mark, time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 语意化的元素就是让搜索引擎明白我们的元素作用，本质都是块级元素，都可以当作div使用 -->
<!-- article元素是块级元素，表示任何独立的，自述的内容，本质和div没有区别，但会让搜索引擎知道这段内容是什么作用 -->
<article>
<!-- 一级标题元素 -->
<h1>Heading</h1>
<!-- time标签，表示发布时间，发表时间等 -->
<!-- time标签有一个datetime参数，称为机器时间，供引擎读取，按照YY-MM-DD HH:MM方式赋值 -->
<p>Published <time datetime="2022-01-01 20:00">January 1 2022 08:00pm</time></p>
<p>
<!-- mark标签，是标记文字或高亮文字的标签，是行内元素 -->
<mark>Lorem</mark> ipsum, dolor sit amet consectetur adipisicing elit.
Quis magnam assumenda incidunt enim quos, harum odit natus
consectetur aliquam excepturi nihil quibusdam cupiditate
officiis non labore est nesciunt quia hic provident nobis
repellat voluptas nisi, laborum quas. Cum illum neque distinctio,
aspernatur necessitatibus esse quidem quas quod! Suscipit,
reiciendis voluptatum.
</p>
<!-- 插图元素，表明这是一段内容的插图，而不是页面的产品图，介绍图等等 -->
<figure>
<img src="images/coffee.jpg" alt="a cup of coffee on the table">
<!-- 插图说明元素，是对插图的文字描述 -->
<figcaption>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, minima?
</p>
</figcaption>
</figure>
</article>
</body>
</html>
· 语意化的网页结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- header表示页面顶部内容，通常包括导航栏 -->
<header>
<!-- 导航栏 -->
<nav>
<!-- 导航栏内容 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</header>
<!-- 网页主体内容标签，一个页面仅有一个，多个在网页验证的时候会报警告 -->
<main>
<!-- 网页主体内容块，是对主体内容的分组-->
<section>
<h2>Products</h2>
<article>1</article>
<article>2</article>
<article>3</article>
</section>
<!-- 网页主体内容块，是对主体内容的分组-->
<section>
<h2>Testimonial</h2>
<article>1</article>
<article>2</article>
<article>3</article>
</section>
</main>
<!-- 侧边栏 -->
<aside></aside>
<!-- 页脚 -->
<footer>
<!-- 页脚导航栏 -->
<nav>
<ul>
<li>f1</li>
<li>f2</li>
<li>f3</li>
</ul>
</nav>
</footer>
</body>
</html>
