习题任务-01
任务一:零基础html编码
收获:
1.基础知识的巩固(h标签,p标签,a标签,ul列表,ol列表,table表格,标签的嵌套使用)
2.小常识(空格: 加粗:strong标签)
3.input标签的使用(type: 单选框,复选框,下拉框)
4.代码没有布局,还需努力(代码如下,多多指正)
5.colspan表示单元格合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任务一:零基础HTML编码</title>
</head>
<body>
<!-- 设置网站标题,h1到h6 -->
<h1>网站一级标题</h1>
<!--
利用ul表示无序列表
设置导航链接,a标签表示链接
-->
<ul>
<li><a href="#">导航链接一</a></li>
<li><a href="#">导航链接二</a></li>
<li><a href="#">导航链接三</a></li>
<li><a href="#">导航链接四</a></li>
</ul>
<!-- 标题设置,h2的使用 -->
<h2>文章一级标题</h2>
<h2>文章二级标题</h2>
<!--
p标签表示文章段落
br标签表示换行
a标签表示链接
标签可以嵌套使用
strong标签加粗字体
表示空格
-->
<p>文章作者 文章发表时间</p>
<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<br>换行了<br>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br>这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://www.baidu.com">这里有一个链接连接到http://www.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,<strong>这里有个粗体字</strong>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落.</p>
<!-- html插入图片标签:img标签 -->
<img src="001.jpg" width="500px" height="200px" alt="">
<!--
p标签表示文章段落
br标签表示换行
a标签表示链接
标签可以嵌套使用
strong标签加粗字体
-->
<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<strong>这里有个粗体字</strong>这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://www.baidu.com">这里有一个新的链接点一下试试</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落.</p>
<!--
标题设置,h2/h3的使用
上面内容的重复
-->
<h2>另一篇文章一级标题</h2>
<h2>文章二级标题</h2>
<p>文章作者 文章发表时间</p>
<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<br>换行了<br>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br>这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://www.baidu.com">这里有一个链接连接到http://www.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,<strong>这里有个粗体字</strong>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落.</p>
<img src="001.jpg" width="500px" height="200px" alt="">
<ul>
<li>列表项目一</li>
<li>列表项目二</li>
<li>列表项目三</li>
</ul>
<!--
图片标题的设置,依然用h2
图片的载入标签:img
img标签中的alt属性作用:设置对这张图片文字描述，通常设置描述是为了搜索引擎能读懂你这张图片表达内容
-->
<h2>图片</h2>
<p>头号玩家</p><img src="001.jpg" width="500px" height="200px" alt="">
<p>头号玩家</p><img src="001.jpg" width="500px" height="200px" alt="">
<p>头号玩家</p><img src="001.jpg" width="500px" height="200px" alt="">
<p>头号玩家</p><img src="001.jpg" width="500px" height="200px" alt="">
<p>头号玩家</p><img src="001.jpg" width="500px" height="200px" alt="">
<h2>最后一篇文章一级标题</h2>
<h2>文章二级标题</h2>
<p>文章作者 文章发表时间</p>
<ol>
<li>排名1</li>
<li>排名2</li>
<li>排名3</li>
</ol>
<p>下面是一个表格</p>
<table border="1px">
<tr>
<td>表头</td>
<td>表头</td>
<td>表头</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>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>总计</td>
<td colspan="2">1000</td>
</tr>
</table>
<h2>侧栏标题</h2>
<h3>侧栏注册窗口标题</h3>
<p>请输入邮箱地址:<input type="text" name="email" value="这是一个文本输入框"></p>
<p>按格式输入邮箱地址</p>
<p>请输入密码: <input type="text" name="密码" value="这是一个文本输入框">
请再次输入密码:<input type="text" name="密码" value="这是一个文本输入框"></p>
<p>密码为6-16位英文或数字</p>
<p>
<input type="radio" value="男" name="sex" checked="true">男
<input type="radio" value="女" name="sex">女
城市:
<select id="city">
<option>北京</option>
<option>上海</option>
</select>
爱好:
<input type="checkbox" value="运动">运动
<input type="checkbox" value="艺术">艺术
<input type="checkbox" value="科学">科学
个人描述:
<input type="text" value="多行输入框">
<input type="button" value="确认提交">
</p>
</body>
</html>
309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
