<!doctype html>
<!-- HTML5文档声明 -->
<html>
<head>
<!-- 在head处通过meta 设置网页字符集 -->
<meta charset= 'utf-8'>
<title> 《爱如潮水》</title>
</head>
<body>
<h1>如果这就是爱情</h1>
<h1>不问你为何流眼泪</h1>
<!--
这是另外一首歌
-->
<h2>明明你也最爱我</h2>
<!--
属性是用来设置显示内容，是一个名值对形式，即x=y，注意，属性名和标签名要空格隔开
-->
<h3> 这是用来测试<font color = 'red' size = '5'>属性</font>的!!!!</h3>
</body>
<img>
不知道这是什么？
<input>
</html>
实体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是本次的内容</title>
<body>
<p>
这个可以用来测试一下
</p>
<!-- HTML中的实体（转义）
使用规则：&实体名称;
空格
> 大于号
&glt; 小于号
© 版权符号
-->
<h1>这是一级标题</h1>
</body>
</head>
</html>
语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>《夏天的风》</title>
</head>
<body>
<!--
页面中所占一行的称为块元素
块元素（block element）：对页面布局
行内元素(inline element)： 包裹文字
-->
<p>p标签表示网页中的段落</p>
<!-- hgroup 用来给标题分组，标题之间有关 -->
<hgroup>
<h1>夏天的风</h1>
<h2>演唱：温岚 作曲：周杰伦</h2>
<p> 山的风，山的峰，吹成暖暖的山风</p>
<p>为什么你不在，问山风你不回来</p>
<!--
em 标签 表示语音语调的加重，属于行内元素
在页面不独占一行的元素：行内元素
p 元素不能放在块元素内
-->
<p>夏天的风正<em>暖暖</em>吹过</p>
<!--
strong 表示强调
blockquote 表示长引用
q 表示短引用
-->
<p>
我看见你<strong>酷酷</strong>的笑容！
<blockquote>也有腼腆的时候</blockquote>
<q> oho oo</q>
</p>
</hgroup>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="nothing" content="流行歌曲，popular songs，loveyou">
<title>这次就选择许嵩的吧《全球变冷》</title>
</head>
<body>
<h1>《全球变冷》</h1>
<h2>作词：许嵩 作曲：许嵩 演唱：许嵩</h2>
<p>
风在淅淅沥沥的雨中
<!--
布局标签（结构化标签）
header 网页头部
main 网页主体
footer 网页底部
navi 网页导航
aside 放旁边的一些东西
article 文章
section 表示 独立的区块
div 表示独立区块，使用较多
span 行内元素，使用较多，一般在网页内选中文字
注：这些只表示分区块，显示并没有什么区别
-->
</p>
<header>欢迎来到许嵩演唱会</header>
<main>lalala 欢迎</main>
<footer>最后随便写点什么</footer>
<aside>这里可以随便放点东西</aside>
<article>这里可以写文章</article>
</body>
</html>
列表
```bash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="LIST" content="list，practice">
<title>list</title>
</head>
<body>
<!--
列表：无序列表，有序列表，定义列表
无序列表：ol标签创建，使用li表达列表项
有序列表：ul标签创建，使用li表达列表项
定义列表：dl标签创建，使用dt表示定义内容，dd对内容解释说明
-->
<ol>
<li>周杰伦 《以父之名》</li>
<li>林俊杰 《爱笑的眼睛》</li>
<li>王力宏 《大城小爱》</li>
</ol>
<ul>
<li>许嵩 《全球变冷》</li>
<li>汪苏泷 《风度》</li>
</ul>
<dl>
<dt>这个随便写什么</dt>
<dd>嗯嗯嗯嗯嗯</dd>
</dl>
</body>
</html>
超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--
a 标签定义超链接
属性：href 定义跳转的指定路径（外部链接或者同一目录下的链接）
-->
<a href="http://www.baidu.com">点击进入百度链接</a>
<br>
<br>
<a href="03meta.html">这是用来测试同一路径下的超链接</a>
</body>
</html>
超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--
a 标签定义超链接
属性：href 定义跳转的指定路径（外部链接或者同一目录下的链接）
相对路径使用 ./ 或者 ../
./ 当前目录下的路径
../ 当前目录 下的上一级路径
-->
<a href="http://www.baidu.com">点击进入百度链接</a>
<br><br>
<a href="03meta.html">这是用来测试同一路径下的超链接</a>
<br><br>
<!--
id 属性，可以给链接加属性，使其精准定位到某个地方
id 值唯一 在 href="#id名"
-->
<a href="#bottom">点击跳转到底部</a>
<br> <br>
<a href= "#x">点击跳转到指定位置</a>
<!--
可以为段落或者网页
-->
<p> 1、勇者愤怒，抽刃向更强者；怯者愤怒，却抽刃向更弱者。不可救药的民族中，一定有许多英雄，专向孩子们瞪眼。这些孱头们。<br>
2、从来如此，便对吗？<br>
3、小的时候，不把他当人，大了以后也做不了人。<br>
<p id = "x">4、时间就像海绵里的水，只要愿挤，总还是有的。<br>
5、我好象是一只牛，吃的是草，挤出的是牛奶。</p>
6、我们目下的当务之急是：一要生存，二要温饱，三要发展。<br>
7、凡是总须研究，才会明白。<br>
8、愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。<br>
</p>
<!--
将href 属性设置为#，可以点击超链接之后回到页面顶部
且一般程序员会将href 设置为 JavaScript:; 作为一个超链接占位，点击该链接不会发生跳转
-->
<a href = "javascript:;">测试是否超链接跳转</a>
<br><br>
<a id="bottom" href="#">点击回到顶部</a>
</body>
</html>
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<!--
图片标签：引入外部图片
使用image 标签，是一个自引用标签，属于一个替换元素
src 属性指定外部图片的路径，类似于超链接
alt 描述图片
width,height 指定图片的宽度和高度
-->
<img alt="love" src="https://p.ssl.qhimg.com/dmfd/400_300_/t016b50f250b741e00f.jpg"
<br><br>
<img src="../测试路径.html/1.jpg" width="1000" alt="nothing">
</body>
</html>
音视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音视频播放</title>
</head>
<body>
<!--
audio/video 引入音频/视频
属性：
controls 可以使用户控制播放音乐/视频
autoplay 自动播放音乐/视频
loop 音乐自动循环播放/视频
-->
<audio controls loop src = "../code/测试路径.html/夏天的风.mp3"></audio>
<audio controls >
<source src="../code/测试路径.html/夏天的风.mp3"
</audio>
</body>
</html>
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
