html基础编程

来源：互联网发布：js获取所有兄弟元素编辑：程序博客网时间：2024/06/03 17:05

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>版权所有 &copy;</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" - 定义与输入相关联的值

1 0