1.标签 ：
<body>
<h1>回乡偶书<h1>
<h2>贺知章</h2>
<!--短引用-->
<p>少小离家<q>老大回</q></p>
<!--长引用-->
<p>乡音无改<blockquote>鬓毛衰</blockquote></p>
<!--表示内容的重要性-->
<p>儿童想见<strong>不相识</strong></p>
<!--语调的加重-->
<p>笑问客从<em>何处来</em></p>
</body>
2.页面重定义
<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>重定义</title>
<!--
charset 指定网页的字符集
name 指定的数据名称
content 指定的数据内容
-->
<!--页面重定义-->
<meta http-equiv="refresh" content="0.1;url=http://www.baidu.com">
</head>注意：这是写在head中的
3.列表
<body>
<!--有序列表-->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<!--无序列表-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<!--定义列表-->
<dl>
<!--显示内容dt-->
<dt>结构：</dt>
<!--解释说明dd-->
<dd>显示网页中那些是标题，那些是段落</dd>
</dl>
</body>
4.超链接
<body>
<a href="http://127.0.0.1:5500/Exercise/03%E5%88%97%E8%A1%A8.html">列表</a>
<br><br>
<a href="http://www.baidu.com">百度</a>
<br><br>
</body><br>是换行符，一个<br>换一行
<!--
target属性：
_self 默认值 在当前页面中打开超链接
_blank 在一个新的页面中打开超链接
-->
<a href="http://127.0.0.1:5500/ExerciseHtml/03%E5%88%97%E8%A1%A8.html" target="_blank">chaolianjie</a><!--id属性：唯一不重复，都是字母开头-->
<a href="#bottom">去底部</a>
<br>
<a href="#san">第三段</a>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P id="san">lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia hic quos maiores fugit id obcaecati, fugiat dolorum. Numquam fuga inventore ab. Porro quis dolor assumenda tempore omnis quia neque?</P>
<br><br>
<a id="bottom" href="#">回到顶部</a>运行结果略
5.图片标签：img
<!--img用来引入外部图片,是一个自结束标签,属于替换元素，介于块和行内元素之间
src属性指定的是外部图片的路径
alt属性图片的描述，搜索引擎会根据alt中的内容来识别照片
width
height
两者等比例缩放
-->
6.内联框架
<body>
<!--内联框架：用于想当前页面中引入一个其他页面
src 指定要引入网页的路径
frameborder 指定内联框架的边框
-->
<iframe src="http://www.qq.com" width= "800" height= "400" frameborder="0"></iframe>
</body>7.音视频引入
<body>
<!--
audio标签 用来向页面中引入一个外部的音频文件
音频文件引入时，默认情况下 不允许 用户自己控制播放暂停
此时，使用 controls属性
autoplay 自动播放；但大部分浏览器在第一个打开网页时都不会自动播放
loop 循环播放
-->
<audio src="../img图片/mountain.mp4" controls></audio>
<!--除了通过src来指定外部文件，还可以通过source来指定-->
<audio controls>
对不起，你的浏览器不支持播放，请升级
<source src="../img图片/mountain.mp4">
<!-- <source src="../img图片/mountain.ogg"> -->
优先使用mp4
</audio>
<!--embed网页刷新时自动播放,适合老版本浏览器-->
<!-- <embed src="../img图片/mountain.mp4" type="video/mp4" width="200" height="150"> -->
<!--video标签 向网页引入一个视频-->
<br><br>
<video src="../img图片/mountain.mp4" controls loop width="200" height="200"></video>
</body>
扫一扫
2236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
