demo1
第十期_前端开发_2019-12-19第一个作业demo1代码及运行结果
demo1源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局标签</title>
</head>
<body>
<!--页眉-->
<header>
<!--导航-->
<nav>
<a href="#" title="首页" target="_self">首页</a>
<a href="#" title="公司简介">公司简介</a>
<a href="#" title="产品中心">产品中心</a>
<a href="#" target="_blank">联系我们</a>
</nav>
</header>
<!--内容主体-->
<main>
<article>
<header>
<h1>新闻列表</h1>
<p>文章第一篇</p>
<p>文章第二篇</p>
<p>文章第三篇</p>
</header>
<section>
<h2>文章名称</h2>
<p>文章第一段</p>
<p>文章第二段</p>
<p>文章第三段</p>
</section>
</article>
<!-- 侧边栏-->
<aside>
<ul>
<li>推荐信息第1条</li>
<li>推荐信息第2条</li>
<li>推荐信息第3条</li>
<li>推荐信息第4条</li>
</ul>
</aside>
<section>
<span>广告位招租1</span>
<span>广告位招租2</span>
<span>广告位招租3</span>
</section>
</main>
<!--页脚版权信息-->
<footer>
<section>
<span>公司地址:广东省东莞市</span>
<span>公司邮箱地址：000000@qq.com</span>
<span>公司电话号码：传真号码：</span>
</section>
<!-- 友情连接-->
<div class="link">
<a href="#">百度</a>
<a href="#">阿里</a>
<a href="#">腾讯</a>
</div>
</footer>
</body>
</html>
demo2文章基本标签
demo2文章基本标签源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本文章标签</title>
</head>
<body>
<h1>这是一篇重要的文章请认真阅读了</h1>
<h2>开始文章的第一段</h2>
<p>我们就开始学习一下这篇重要的文章</p>
<h2>开始文章的第二段</h2>
<pre style="font-size: 18px;">
这到底是怎么样的一个人才能写出这样文章呢?
请我们这一些相当的崇拜万分，哦，原来是PHP中文的大神朱老师大作！
</pre>
<h2>这一本书的调查问题</h2>
<p >太棒！</br>
您说的太有道理了！
</p>
<span style="color:red">这一本书你们必须要去认真的看了才行！</span>
</body>
</html>
demo3语义化标签
demo3语义化标签源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语义化标签练习</title>
</head>
<body>
<header>
<h1>语义化标签练习项目开始</h1>
</header>
<article>
<h2/>什么是语义化标签 </h2>
<!-- 听老师说时间用语义化标签time容易被搜索收录-->
<time>练习写作时间：2019-12-20 11:32</time>
<p>
<abbr>HTML</abbr>看一下HTML是不是被这个abbrs标签缩写了？
</p>
<!--练习一下上标与下标的标签-->
<p>
2<sub>2</sub>=?这个2的下标怎么样读？求高手</br>
2<sup>3</sup>=8这个肯定是对的！
</p>
<!--删除-->
<s>猪肉原价：55.5元 </s><span>现价：55元</span></br>
<del>猪肉原价：55.5元</del>
<span>现价：55元</span>
<p>
<progress max="100" value="50">已完成50%</progress>
</p>
<p><b>加粗一下吧</b></p>
<p><strong>加粗一下吧<strong/></p>
<p><i>斜体</i></p>
<p><em>斜体</em></p>
<p>
<mark>高显示</mark>
</p>
<p>
<q>这是引用</q>
</p>
</article>
<footer>
<!--站长联系地址-->
<address>站长地址：写在这里了啦！</address>
</footer>
</body>
</html>
列表元素
列表元素代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表元素</title>
</head>
<body>
<!--无序列表-->
<ul>
<li>无序列表第1项</li>
<li>无序列表第2项</li>
<li>无序列表第3项</li>
<li>无序列表第4项</li>
</ul>
<!--有序列表用数字表示-->
<ol>
<li>有序列表第1项</li>
<li>有序列表第2项</li>
<li>有序列表第3项</li>
<li>有序列表第4项</li>
</ol>
<!--有序列表用字母表示-->
<ol start="1" type="A">
<li>小车类</li>
<li>卡车类</li>
<li>火车类</li>
<li>玩具车类</li>
</ol>
<!--自定义列表-->
<dl>
<dt>电话</dt>
<dd><a href="tel:180*******">180*</a></dd>
<dt>地址</dt>
<dd>广东省东莞市</dd>
</dl>
</body>
</html>
表格元素
表格元素源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>细说表格</title>
</head>
<body>
<table border="1" width="600px" cellpadding="5" cellspacing="0" align="center">
<!--表格标题-->
<caption>生产报价单</caption>
<!--表格头部-->
<thead style="background: aliceblue">
<tr>
<th>序号</th>
<th>产品名称</th>
<th>产品数量</th>
<th>产品单价</th>
<th>金额</th>
<th>备注</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>甲级防火门</td>
<td>500m<sup>2</sup></td>
<td>800元/m<sup>2</sup></td>
<td>40000元</td>
<td>12.19日出货</td>
</tr>
<tr>
<td>2</td>
<td>乙级防火门</td>
<td>200m<sup>2</sup></td>
<td>500元/m<sup>2</sup></td>
<td>10000元</td>
<td>12.20日出货</td>
</tr>
<tr>
<td colspan="2" align="center">合计：</td>
<td>700m<sup>2</sup></td>
<td></td>
<td>50000元</td>
<td>发完以上货回去过年</td>
</tr>
</table>
</body>
</html>
手写作业
