html基础编程

最新推荐文章于 2023-05-17 19:00:57 发布

a497883766

最新推荐文章于 2023-05-17 19:00:57 发布

阅读量369

点赞数 1

分类专栏： html 文章标签： html 标签

本文链接：https://blog.csdn.net/a497883766/article/details/71124676

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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" - 定义与输入相关联的值

a497883766

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础编程

1.任务要求：参考以下示例图，完成一个html页面代码编写2.任务分析：这是html编码最基础的内容，主要是考察标签的用法，能够用标签构建页面。接下来我们分析一个这个页面所需要的元素：（1）各级标题：-依次变小；（2）列表：包含了有序列表和无序列表，用于表示列表里的条目；定义列表则需要用dd（定义列表）和dt（描述列表）描述项目（3）图片：，必备属性src（显示图形的u
复制链接

扫一扫

专栏目录