1.任务要求:
参考以下示例图,完成一个html页面代码编写
2.任务分析:
这是html编码最基础的内容,主要是考察标签的用法,能够用标签构建页面。接下来我们分析一个这个页面所需要的元素:
(1)各级标题:
<h1>-
<h6>依次变小;
(2)列表:包含了有序列表
<ol>和无序列表
<ul>,
<li>用于表示列表里的条目;定义列表<dl>则需要用
dd(定义列表)和
dt(描述列表)描述项目
(3)图片:
<img>,必备属性src(显示图形的url)和alt(图像的替代文本);
(4)链接:
<a>,title显示额外信息;
(5)表格:
<table>,表格中需要有表头
th,行
tr,列并没有但是通过单元
td排列可以构成整个表格,此外还可以对表格进行分组,把表格分为表头
thead,主题
tbody,表注
tfoot。值得注意的是表格中最后一行1000横跨两列,可以用colspan属性定义跨越的列数;
(6)表单:
<form>用于为用户创建html表单,从而向服务器传输数据,form的action属性定义了传输数据的位置,method属性定义了传输的方法;
表单的输入字段有很多形式,
<input>用于搜集输入信息,input中的属性type用于定义输入的形式,可以包括单行文本,按钮,复选框,下拉列表,密码,单选按钮,本次任务用到了单行文本text,单选按钮radio,复选框checkbox,密码password,按钮button,
必须设置name属性,因为这样的才能传递传递值。此外还用到了多行文本
<textarea>和一个选择多选菜单
<select>,
option定义菜单中每一项,selected属性可以定义默认选中项;
(7)空格:
<br>;
(8)段落:
<p>
以上就是整个任务需要的所有标签,按照布局选择需要使用的标签即可完成这个任务,整个过程中并无其他难点。
3.任务结果:
效果链接:http://s.codepen.io/w2b23333/debug/eWRoQo/WPMLYGGmpLLr
<head>
<meta charset="UTF-8" />
<title>任务一:零基础HTML编码</title>
</head>
<body>
<header>
<h1>网站一级标题</h1>
<ul>
<li><a href="#">导航链接一</a></li>
<li><a href="#">导航链接二</a></li>
<li><a href="#">导航链接三</a></li>
<li><a href="#">导航链接四</a></li>
</ul>
</header>
<main>
<article>
<h2>文章一级标题</h2>
<h3>文章二级标题</h3>
<span>文章作者 文章发表时间</span>
<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br />
这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br />
这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com/">这里有一个链接链接到http://ife.baidu.com/</a>这是一个很长很长的段落,这是一个很长很长的段落,<strong>这里有个粗体字</strong>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落。</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493801149536&di=c09fb8330a580cb25f249a74e6495f05&imgtype=0&src=http%3A%2F%2Fpic2016.5442.com%3A82%2F2016%2F0512%2F1%2F4.jpg%2521960.jpg" alt="郑合惠子" /><br />
<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br />
这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<strong>这里有个粗体字</strong>这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com/">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com/</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落。</p>
</article>
<article>
<h2>另一篇文章一级标题</h2>
<h3>文章二级标题</h3>
<span>文章作者 文章发表时间</span>
<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br />
这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br />
这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com/">这里有一个链接链接到http://ife.baidu.com/</a>这是一个很长很长的段落,这是一个很长很长的段落,<strong>这里有个粗体字</strong>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落。</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493801149536&di=c09fb8330a580cb25f249a74e6495f05&imgtype=0&src=http%3A%2F%2Fpic2016.5442.com%3A82%2F2016%2F0512%2F1%2F4.jpg%2521960.jpg" alt="郑合惠子" />
<ul>
<li>列表项目一</li>
<li>列表项目二</li>
<li>列表项目三</li>
</ul>
</article>
<article>
<h2>图片</h2>
<figure>
<figcaption>郑合惠子</figcaption>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493801149536&di=c09fb8330a580cb25f249a74e6495f05&imgtype=0&src=http%3A%2F%2Fpic2016.5442.com%3A82%2F2016%2F0512%2F1%2F4.jpg%2521960.jpg" alt="郑合惠子" />
</figure>
<figure>
<figcaption>郑合惠子</figcaption>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493801149536&di=c09fb8330a580cb25f249a74e6495f05&imgtype=0&src=http%3A%2F%2Fpic2016.5442.com%3A82%2F2016%2F0512%2F1%2F4.jpg%2521960.jpg" alt="郑合惠子" />
</figure> <figure>
<figcaption>郑合惠子</figcaption>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493801149536&di=c09fb8330a580cb25f249a74e6495f05&imgtype=0&src=http%3A%2F%2Fpic2016.5442.com%3A82%2F2016%2F0512%2F1%2F4.jpg%2521960.jpg" alt="郑合惠子" />
</figure> <figure>
<figcaption>郑合惠子</figcaption>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493801149536&di=c09fb8330a580cb25f249a74e6495f05&imgtype=0&src=http%3A%2F%2Fpic2016.5442.com%3A82%2F2016%2F0512%2F1%2F4.jpg%2521960.jpg" alt="郑合惠子" />
</figure>
</article>
<article>
<h2>最后一篇文章一级标题</h2>
<h3>文章二级标题</h3>
<span>文章作者 文章发表时间</span>
<ol>
<li>排名1</li>
<li>排名2</li>
<li>排名3</li>
</ol>
<table border="1">
<caption>下面是一个表格</caption>
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td colspan="2">1000</td>
</tr>
</tfoot>
</table>
</article>
</main>
<aside>
<h2>这里以后是一个侧栏,这是侧栏的标题</h2>
<form action="">
<lable for="address">请输入邮箱地址:</lable>
<input type="text" id="address" placeholder="这是一个文本输入框" />
<p>邮箱地址请按要求格式输入</p>
<lable for="password">请输入密码:</lable>
<input type="password" id="password" placeholder="这是一个文本输入框" />
<lable for="confirm-password">请重复输入密码:</lable>
<input type="password" id="confirm-password" maxlength="16" placeholder="这是一个文本输入框" />
<p>密码请为6-16位英文数字</p>
<lable for="sex">性别:</lable>
<input type="radio" name="sex" value="男" checked/>男
<input type="radio" name="sex" value="女" />女
<lable for="city">城市:</lable>
<select id="city">
<option value="北京" selected>北京</option>
<option value="洛阳">洛阳</option>
<option value="邹城">邹城</option>
<option value="绵竹">绵竹</option>
</select>
<lable for="favorite">爱好:</lable>
<input type="checkbox" name="favorite" value="运动" />运动
<input type="checkbox" name="favorite" value="艺术" />艺术
<input type="checkbox" name="favorite" value="科学" />科学
<lable for="description">个人描述:</lable>
<textarea name="description" cols="30" rows="2">这是一个多行输入框,输入您的个人描述</textarea>
<input type="submit" value="确定提交"/>
</form>
</aside>
<footer>
<span>版权所有 ©</span>
</footer>
</body>
</html>
4.总结思考:
(1)label的用处:label主要用于为input定义标注,通过for属性可以实现点击label标签则自动聚焦到对应控件上。
(2)input没有结束标签</input>,但是最好打上/代表标签结束。
(3)article和figure等标签的使用能够清晰的表达文章的结构。article用以表示独立的文章,figure用以表示独立的流内容(图像,图表,代码,照片等)
(4)input中value和placeholder的区别:这两个属性中的值都能直接显示出来,但是placeholder是辅助用户填写输入字段的提示,value则是赋值。
对于不同的输入类型,value 属性的用法也不同:
- type="button", "reset", "submit" - 定义按钮上的显示的文本
- type="text", "password", "hidden" - 定义输入字段的初始值
- type="checkbox", "radio", "image" - 定义与输入相关联的值