目录
- WEB编程(一)前言学习目标
- WEB编程(二)拆解目标,分析页面结构
- WEB编程(三)使用工具准备介绍
- WEB编程(四)HTML页面框架搭建
- WEB编程(五)HTML页面内容填充,常用标签介绍
- WEB编程(六)CSS页面装修优化
- WEB编程(七)JS页面动态效果控制
前景回顾
上一篇我们了解了HTML页面的基本结构,页面结构是固定的,至于为啥,大家可以百科哈(偷个懒)。这篇开始使用常用标签填充页面内容,还是以模拟百度为目标。
HTML标签
大家可以到w3school体验,所有HTML标签,上面有对每个标签的解释。
标签从大的分类来说,可以分为两种:
- 展示型:静态展示,带默认样式,不带有单独的事件功能,这种标签普遍具有可替代性。
- 功能型:基于展示型,另外携带有特有的事件,可以用属性或脚本控制(在文章最后有列出)。
模拟百度首页布局
之前我们分析过百度首页,从上至下分为三大块:
拆分如上图,现在我们开始分析页面中,所需要的标签:
- 拆分三大块,我们用<div>标签。
- 页头的超链接区域,我们用<a>标签。
- 内容区域,我们用<div>,<img>,<form>,<input>,<button>,<p>标签。
- 页脚区域,我们用<div>,<img>,<a>标签。
标签 | 说明 |
---|---|
<div> | 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。 |
<a> | 标签定义超链接,用于从一张页面链接到另一张页面。 |
<img> | 元素向网页中嵌入一幅图像。 |
<form> | 标签用于为用户输入创建 HTML 表单。 |
<input> | 标签用于搜集用户信息。 |
<button> | 标签定义一个按钮。 |
<p> | 标签定义段落。 |
下面我们就这些标签,构建页面内容:
<!DOCTYPE html>
<html>
<head>
<title>模拟百度页面</title>
</head>
<body>
<!--页头导航栏-->
<div>
<a href="http://news.baidu.com">新闻</a>
<a href="https://www.hao123.com">hao123</a>
<a href="http://map.baidu.com">地图</a>
<a href="http://v.baidu.com">视频</a>
<a href="http://tieba.baidu.com">贴吧</a>
<a href="http://xueshu.baidu.com">学术</a>
<a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F">登录</a>
<a href="http://www.baidu.com/gaoji/preferences.html">设置</a>
<a href="http://www.baidu.com/more/">更多产品</a>
</div>
<!--主显示区域-->
<div>
<!--Logo展示-->
<div>
<img src="http://www.baidu.com/img/bd_logo1.png" alt="">
</div>
<!--搜索输入框-->
<form id="form" action="https://www.baidu.com/s">
<input id="kw" name="kw" type="text">
<button type="submit" id="su">百度一下</button>
</form>
<!--二维码展示-->
<div>
<!--二维码-->
<div>
<img src="https://dss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_09b6296.png" alt="">
</div>
<!--二维码描述-->
<div>
<p>下载百度APP</p>
<p>有事搜一搜 没事看一看</p>
</div>
</div>
</div>
<!--页脚扩展内容-->
<div>
<!--第一排,不那么重要的内容-->
<div>
<a href="//www.baidu.com/cache/sethelp/help.html">把百度设为主页</a>
<a href="http://home.baidu.com">关于百度</a>
<a href="http://ir.baidu.com">About Baidu</a>
<a href="http://e.baidu.com/?refer=888">百度推广</a>
<a>(京)-经营性-2017-0020</a>
</div>
<!--第二排,基本不用的内容-->
<div>
<a href="http://www.baidu.com/duty/">使用百度前必读</a>
<a href="http://jianyi.baidu.com/">意见反馈</a>
<a>京ICP证030173号</a>
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a>
</div>
</div>
</body>
</html>
上面我们把百度首页上所能看到的内容,都搬到了我们的模拟页上,现在我们可以运行页面,看看效果。
效果已经出来了,虽然是紧巴巴的一团。
下一章
这里,已经把百度首页内容全部填充了进来,运行效果大家也看到了,跟原版还差着很远的距离,在下一章,我们开始进行美化操作,WEB前端的另一块内容CSS。
简单整理的功能型标签:
标签 | 说明 |
---|---|
<meta> | 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 |
<link> | 标签定义文档与外部资源的关系。 |
<base> | 标签为页面上的所有链接规定默认地址或默认目标。 |
<style> | 标签用于为 HTML 文档定义样式信息。 |
<script> | 标签用于定义客户端脚本,比如 JavaScript。 |
<form> | 标签用于为用户输入创建 HTML 表单。 |
<input> | 标签用于搜集用户信息。 |
<select> | 元素可创建单选或多选菜单。 |
<textarea> | 标签定义多行的文本输入控件。 |
<button> | 标签定义一个按钮。 |
<a> | 标签定义超链接,用于从一张页面链接到另一张页面。 |
<img> | 元素向网页中嵌入一幅图像。 |
<map> | 定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。 |
<audio> | 标签定义声音,比如音乐或其他音频流。 |
<video> | 标签定义视频,比如电影片段或其他视频流。 |
<object> | 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。 |
<canvas> | 标签定义图形,比如图表和其他图像。 |
<iframe> | 元素会创建包含另外一个文档的内联框架(即行内框架)。 |
<progress> | 标签标示任务的进度(进程)。 |
以上所使用的百度信息,均为百度首页公开内容,这里仅作为学习使用。
如有不妥,请联系删除,谢谢!