WEB编程（五）HTML页面内容填充，常用标签介绍

最新推荐文章于 2022-05-27 18:59:33 发布

liuhelong

最新推荐文章于 2022-05-27 18:59:33 发布

阅读量1.9k

点赞数

分类专栏： WEB编程

本文链接：https://blog.csdn.net/liuhelong/article/details/104467186

版权

WEB编程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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&amp;tpl=mn&amp;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&nbsp;&nbsp;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>	标签标示任务的进度（进程）。

以上所使用的百度信息，均为百度首页公开内容，这里仅作为学习使用。
如有不妥，请联系删除，谢谢！

liuhelong

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
WEB编程（五）HTML页面内容填充，常用标签介绍

目录WEB编程（一）前言学习目标WEB编程（二）拆解目标，分析页面结构WEB编程（三）使用工具准备介绍WEB编程（四）HTML页面框架搭建WEB编程（五）HTML页面内容填充，常用标签介绍WEB编程（六）CSS页面装修优化WEB编程（七）JS页面动态效果控制前景回顾上一篇我们了解了HTML页面的基本结构，页面结构是固定的，至于为啥，大家可以百科哈（偷个懒）。这篇开始使用常用标...
复制链接

扫一扫

专栏目录