下面是任务一的代码，写起来虽然不难但还是先把html的标签过了一遍，非常的蛋疼，因为我发现语义化太“严重”了，难以记忆，但还是把一些用到的标签都仔细斟酌了一边，就是<figure>标签用的非常蠢，别人都是直接上列表<ul>标签的（orz）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>人物一</title>
</head>
<body>
<header>
<h1>网站一级标题</h1>
<nav>
<ul>
<li>导航链接一</li>
<li>导航链接二</li>
<li>导航链接三</li>
<li>导航链接四</li>
</ul>
</nav>
</header>
<section>
<hgroup>
<h2>文章一级标题</h2>
<h3>文章二级标题</h3>
</hgroup>
<address>文章作者 文章发表时间</address>
<article>
<p>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落</p>
<br>换行了
<p>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落<b>这里有个粗体字</b>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落</p>
</article>
<img src="https://img.haomeiwen.com/i3810664/f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<article>
<p>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落</p>
<br>换行了
<p>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落<b>这里有个粗体字</b>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落</p>
</article>
</section>
<section>
<hgroup>
<h2>另一篇文章一级标题</h2>
<h3>文章二级标题</h3>
</hgroup>
<address>文章作者 文章发表时间</address>
<article>
<p>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落</p>
<br>换行了
<p>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落<b>这里有个粗体字</b>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落</p>
<img src="https://img.haomeiwen.com/i3810664/f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
</article>
</section>
<ul>
<li>列表项目一</li>
<li>列表项目二</li>
<li>列表项目三</li>
</ul>
<h4>图片</h4>
<figure>
<img src="https://img.haomeiwen.com/i3810664/f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<figcaption>好看的图片</figcaption>
</figure>
<figure>
<img src="https://img.haomeiwen.com/i3810664/f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<figcaption>好看的图片</figcaption>
</figure>
<figure>
<img src="https://img.haomeiwen.com/i3810664/f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<figcaption>好看的图片</figcaption>
</figure>
<figure>
<img src="https://img.haomeiwen.com/i3810664/f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<figcaption>好看的图片</figcaption>
</figure>
<figure>
<img src="https://img.haomeiwen.com/i3810664/f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<figcaption>好看的图片</figcaption>
</figure>
<figure>
<img src="https://img.haomeiwen.com/i3810664/f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<figcaption>好看的图片</figcaption>
</figure>
<figure>
<img src="https://img.haomeiwen.com/i3810664/f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<figcaption>好看的图片</figcaption>
</figure>
<figure>
<img src="https://img.haomeiwen.com/i3810664/f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<figcaption>好看的图片</figcaption>
</figure>
<figure>
<img src="https://img.haomeiwen.com/i3810664/f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<figcaption>好看的图片</figcaption>
</figure>
<section>
<hgroup>
<h2>最后一篇文章标题</h2>
<h3>文章二级标题</h3>
</hgroup>
<ol type="1">
<li>排名1</li>
<li>排名2</li>
<li>排名3</li>
</ol>
<table border: 1px>
<p>下面是一个表格，给表格增加了一个border="e;1"e;好让你看出是一个表格</p>
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<th>表内容单元格</th>
<th>表内容单元格</th>
<th><a href="#">操作</a></th>
</tr>
<tr>
<th>表内容单元格</th>
<th>表内容单元格</th>
<th><a href="#">操作</a></th>
</tr>
<tr>
<th>表内容单元格</th>
<th>表内容单元格</th>
<th><a href="#">操作</a></th>
</tr>
<tr>
<th>表内容单元格</th>
<th>表内容单元格</th>
<th><a href="#">操作</a></th>
</tr>
</tbody>
<tfoot>
<tr>
<th>总计</th>
<th colspan="2">1000</th>
</tr>
</tfoot>
</table>
<aside>
<h3>这里以后是一个侧栏，这是侧栏的标题</h3>
<h3>侧栏注册窗口标题</h3>
<form name="" method="" action="">
<label>请输入一个邮箱:</label>
<input type="email" name="email" placeholder="这是一个文本输入框">
<p>邮箱请按格式要求输入</p><br/>
<label>请输入密码：</label>
<input type="password" name="password1" placeholder="这是一个文本输入框">
<label>请重复输入密码：</label>
<input type="password" name="password2" placeholder="这是一个文本输入框">
<p>密码请为6-16位英文数字</p><br/>
<label>性别：</label>
<input type="radio" name="sex" value="男" checked="checked"> 男
<input type="radio" name="sex" value="女"> 女
<label>城市：</label>
<select>
<option value="北京">北京</option>
<option value="广州">广州</option>
<option value="上海">上海</option>
</select>
<label>爱好：</label>
<input type="checkbox" name="yundong" name="运动"> 运动
<input type="checkbox" name="yishu" name="艺术"> 艺术
<input type="checkbox" name="kexue" name="科学"> 科学
<label>个人描述：</label>
<textarea cols="30" rows="2">这是一个多行输入框，输入您的个人描述</textarea><button>确认提交</button>
</form>
</aside>
<footer>版权所有</footer>
</section>
</body>
</html>
网友评论