[HTML基础]11.编程练习总结
2019-12-30 本文已影响0人
SkylerAI
<html>
<head>
<!-- 网页标题为"hello"。-->
<title>hello</title>
</head>
<!-- 网页背景色为灰色。-->
<body bgcolor="gray">
<!-- 网页内容为“HELLO,everyone.This is my first page!”,p标签为段落标签。-->
<p>HELLO,everyone.This is my first page!</p>
</body>
</html>
<!-- 声明使用html5版本。-->
<!DOCTYPE html>
<html>
<haed>
<title>第一个网页</title>
<!-- 文档类型是html 编码为utf-8。-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p>大家好,一起来学习html标记语言</p>
</body>
</html>
<!doctype html>
<!-- 告知浏览器使用的是英文,浏览器会提示是否要翻译此页,如果改成zh-cn就没有翻译选项。-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<!-- align为对齐属性 center为居中对齐,<h1>至<h6>为标题标签,由大到小,<h6>之后无变化。-->
<h3 align="center">《早发白帝城》</h3>
<p align="center">朝辞白帝彩云间，千里江陵一日还。</p>
<p align="center">两岸猿声啼不住，轻舟已过万重山。</p>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<h1>敕勒歌</h1>
<h3>朝代：南北朝</h3>
<h4>作者：佚名</h4>
<p>
<!-- <br />为换行标签。-->
敕勒川，<br />
阴山下。<br />
天似穹庐，<br />
</p>
<!-- <pre>标签会保留网页书写格式,例如换行空格等。-->
<pre>
笼盖四野。
天苍苍，
野茫茫。
风吹草低见牛羊。
</pre>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<p align="center">
<!-- 代表空格,此处不能正常显示。-->
关于我们 | 招聘信息 | 联系我们 | 意见反馈
</p>
<hr />
<p align="center">
<!-- ©代表版权©,此处不能正常显示。-->
Copyright©2016 imooc.com All Rights Reserved
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<!--<sup>代表上标,<sub>代表上表,此处不能正常显示。-->
<p>公式：X<sup>2</sup>+X=0 解：X<sub>1</sub>=0; X<sub>2</sub>=-1</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<!--ul标签代表无序列表,disc为实心点(默认),square为实心方块,circle为空心圆。-->
<ul type="disc">
<li>朝辞白帝彩云间，</li>
<li>千里江陵一日还，</li>
<li>两岸猿声啼不住，</li>
<li>轻舟已过万重山，</li>
</ul>
<ul type="square">
<li>朝辞白帝彩云间，</li>
<li>千里江陵一日还，</li>
<li>两岸猿声啼不住，</li>
<li>轻舟已过万重山，</li>
</ul>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<!-- ol标签代表有序列表。-->
<ol>
<li>朝辞白帝彩云间，</li>
<li>千里江陵一日还。</li>
<li>两岸猿声啼不住，</li>
<li>轻舟已过万重山。</li>
</ol>
<ol>
<li>秦时明月汉时关，</li>
<li>万里长征人未还。</li>
<li>但使龙城飞将在，</li>
<li>不教胡马度阴山。</li>
</ol>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<!-- ol的type属性：1(默认) a A i I。-->
<ol type="a">
<li>朝辞白帝彩云间，</li>
<li>千里江陵一日还。</li>
<li>两岸猿声啼不住，</li>
<li>轻舟已过万重山。</li>
</ol>
<ol type="i">
<li>朝辞白帝彩云间，</li>
<li>千里江陵一日还。</li>
<li>两岸猿声啼不住，</li>
<li>轻舟已过万重山。</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<!-- img标签为图像标签,src代表图片地址,alt为图片显示不出来时显示的内容。-->
<p>
一幅画像：
<img src="http://img1.sycdn.imooc.com\/climg/58c112ed0001370f03000300.jpg" alt="最好写" width="30%"/>
</p>
<p>
一幅动画图像：
<img src="http://img1.sycdn.imooc.com\/climg/58c11324000144f703550220.jpg" alt="马图" width="50px" height="50px"/>
</p>
</body>
</html>
<!-- (转自他人)下述博客进行了target的对比 -->
<!-- [https://blog.csdn.net/BOKEhhh/article/details/89043764](https://blog.csdn.net/BOKEhhh/article/details/89043764)-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<!-- a为超链接标签。htef为链接地址,#代表空地址但有超链接样式。target代表如何打开新页面,_blank在新的空白页打开,_self在自身页面打开(默认),_top表示在整个窗口中打开，_parent表示在父框架集中打开。title为鼠标放至超链接上的提示文字。-->
<a href="http://www.imooc.com" target="_blank" title="慕课网，只学有用的">慕课网</a>
<a href="#" title="T在线教育">imooc</a>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>超级链接</title>
</head>
<body>
<a name="top">这里是顶部</a><br />
<!--设置水果锚点链接-->
<a href="#fruit">水果</a><br />
<!--设置蔬菜锚点链接-->
<a href="#vegetable">蔬菜</a><br />
<!--设置运动锚点链接-->
<a href="#sport">运动</a>
<!--设置水果标题-->
<a name="fruit"><h2>水果</h2></a>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>葡萄</li>
<li>梨</li>
<li>西瓜</li>
<li>樱桃</li>
<li>菠萝</li>
<li>橙子</li>
<li>柚子</li>
<li>芒果</li>
</ul>
<!--设置返回顶部链接-->
<a href="#top">返回顶部</a>
<!--设置蔬菜标题-->
<a name="vegetable"><h2>蔬菜</h2></a>
<ul>
<li>西红柿</li>
<li>黄瓜</li>
<li>土豆</li>
<li>芹菜</li>
<li>蒜薹</li>
<li>西葫芦</li>
<li>香菇</li>
<li>菠菜</li>
<li>豆角</li>
<li>油菜</li>
</ul>
<!--设置返回顶部链接-->
<a href="#top">返回顶部</a>
<!--设置运动标题-->
<a name="sport"><h2>运动</h2></a>
<ul>
<li>篮球</li>
<li>足球</li>
<li>乒乓球</li>
<li>跑步</li>
<li>竞走</li>
<li>羽毛球</li>
<li>举重</li>
<li>跳水</li>
<li>游泳</li>
<li>跳高</li>
</ul>
<!--设置返回顶部链接-->
<a href="#top">返回顶部</a>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<!-- mailto:邮箱地址 点击超链接时自动打开邮箱(本地电脑已安装此邮箱) -->
<a href="mailto:2018069867@qq.com">邮箱链接</a>
<a href="http://climg.mukewang.com/58ca5b6700018dfc02400135.jpg">文件下载</a>
</body>
</html>
