div 块级标签

span 行内标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div>

        <img src="cat.jpg" alt="cat" width="50px">

        cat

    </div>

    <div>

        <img src="cat.jpg" alt="cat" width="50px">

        cat

    </div>

<hr/>

    <span>

        <img src="cat.jpg" alt="cat" width="50px">

        cat

    </span>

    <span>

        <img src="cat.jpg" alt="cat" width="50px">

        cat

    </span>

</body>

</html>

块级标签：

<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>~<h6>、<p>、<form>、<hr>

行内标签：

<b>、<em>、<img>、<input>、<a>、<sup>、<sub>、<textarea>、<span>

行内元素不能包含块级元素，只能包含其他行内元素

块级元素不能放在p标签内

部分块级元素只能包含行内元素，不能再包含其他块级元素，如：

h1~h6 、 p、dt

块级元素与块级元素并列，行内元素与行内元素并列

案例实践

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

</head>

<body>

    <table width="100%" rules="none">

        <!-- 顶部 -->

        <tr bgcolor="#e1f2f9">

            <td width="20%"><img src="data:images/logo.png" alt="logo"></td>

            <td width="60%" align="center">

                <span>暹罗猫</span>&nbsp;&nbsp;

                <span>布偶猫</span>&nbsp;&nbsp;

                <span>苏格兰折耳猫</span>&nbsp;&nbsp;

                <span>英国短毛猫</span>&nbsp;&nbsp;

                <span>波斯猫</span>&nbsp;&nbsp;

                <span>俄罗斯蓝猫</span>&nbsp;&nbsp;

                <span>美国短毛猫</span>&nbsp;&nbsp;

                <span>异国短毛猫</span>

            </td>

            <td width="20%" align="center">

                快速通道&nbsp;<select name="" id=""><option value="">喵~</option></select>

            </td>

        </tr>

        <!-- banner -->

        <tr>

            <td colspan="3"><img src="data:images/banner.jpg" alt="banner" width="100%"></td>

        </tr>

        <!-- 新闻 -->

        <tr>

            <td colspan="3" align="center">

                <table width="60%">

                    <tr width="100%">

                        <td width="40%">

                            <p>暹罗猫 布偶猫 >></p>

                            <p>> 在古代,你家猫咪可能叫这个名字</p>

                            <p>> 同一个洞口猫咪钻进去后还钻得回来吗?</p>

                            <p>> 真香!网友带猫咪回家过年遭外公拒绝</p>

                            <p>> 猫咪洗澡也会致死?这不是个例</p>

                            <p>> 再可爱的猫咪,也会被你们“玩坏”! </p>

                            <p>> 猫咪闯进新闻播报现场,蹭记者腿求摸</p>

                            <p>> 我只是一只小猫咪,这样的日子实在是太难了</p>

                            <p>> 挨骂还这么跩!猫咪歪头到底为了啥?</p>

                        </td>

                        <td width="40%">

                            <p>波斯猫 俄罗斯蓝猫 >></p>

                            <p>> 猫咪若不会站立,那还是喵星人么?</p>

                            <p>> 喵:解放“双手”的感觉真好!</p>

                            <p>> 为了孕妇要抛弃猫咪吗?</p>

                            <p>> 我家猫咪,今天又来叫我起床了!</p>

                            <p>> “自从养了猫,每天早晨都要被猫咪舔醒”</p>

                            <p>> 如果猫咪也会发朋友圈,会是什么样的呢?</p>

                            <p>> 猫:根本停不下来</p>

                            <p>> 有这些表现的猫咪,说明它把你当妈妈了</p>

                        </td>

                        <td width="20%"><img src="data:images/weixin.png" alt="weixin"></td>

                    </tr>

                    <tr>

                        <td colspan="3">近期专题</td>

                    </tr>

                    <tr>

                        <td colspan="3">

                            <table width="100%">

                                <tr>

                                    <td align="center">

                                        <img src="data:images/1.png" alt="1">

                                        <p>喵喵喵</p>

                                    </td>

                                    <td align="center">

                                        <img src="data:images/2.png" alt="2">

                                        <p>喵喵喵</p>

                                    </td>

                                    <td align="center">

                                        <img src="data:images/3.png" alt="3">

                                        <p>喵喵喵</p>

                                    </td>

                                </tr>

                            </table>

                        </td>

                    </tr>

                </table>

            </td>

        </tr>

        <!-- 友链 -->

        <tr>

            <td colspan="3" bgcolor="#e1f2f9" align="center" height="50px">

                <span>暹罗猫</span>&nbsp;&nbsp;

                <span>布偶猫</span>&nbsp;&nbsp;

                <span>苏格兰折耳猫</span>&nbsp;&nbsp;

                <span>英国短毛猫</span>&nbsp;&nbsp;

                <span>波斯猫</span>&nbsp;&nbsp;

                <span>俄罗斯蓝猫</span>&nbsp;&nbsp;

                <span>美国短毛猫</span>&nbsp;&nbsp;

                <span>异国短毛猫</span>

            </td>

        </tr>

        <!-- 页脚 -->

        <td colspan="3" bgcolor="#89a9bd" align="center" height="80px">

            copyright &copy; 2020 cyy all right deserved

        </td>

    </table>

</body>

</html>

搭建网页HTML结构的更多相关文章

  1. seo之google rich-snippets丰富网页摘要结构化数据（微数据）实例代码

    seo之google rich-snippets丰富网页摘要结构化数据(微数据)实例代码 网页摘要是搜索引擎搜索结果下的几行字,用户能通过网页摘要迅速了解到网页的大概内容,传统的摘要是纯文字摘要,而结 ...

  2. html网页基本结构

    <!DOCTYPE> 不是 HTML 标签.它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的. HTML5 DOCTYPE 的 HTML 文档类型如下: <!DOCT ...

  3. 网页html结构搭建方法总结

    在div+css布局中,一般都这样来整体构架的: <div id="header"></div><div id="center"& ...

  4. Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期

    目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. ...

  5. UIKIT网页基本结构学习

    没办法,哈哈,以后一段时间,如果公司没有招到合适的运维研发, 啥啥都要我一个人先顶上了~~~:) 也好,可以让人成长. UIKIT,BOOTSTRAP之类的前端,搞一个是有好处的,我们以前即然是用了U ...

  6. Html网页表格结构化标记的应用

    在讲网页表格的结构化标记之前,还是先看几幅图片. Html表格的结构化 所谓的结构化,正如上述第一副图所看到的,就是把我们的表格划分为三种:表头.表体.表尾.从而当我们在改动表体部分的时候,不会影响到 ...

  7. Vue脚手架（vue-cli）搭建和目录结构详解

    一.环境搭建 1.安装node.npm.webpack,不多说 2.安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V( ...

  8. 《锋利的jQuery》读书要点笔记6——制作商城网页：结构和样式设计

    第8章 用jQuery打造个性网站 做一个购物网站并用jQuery来完善.大体步骤是: 收集素材 确定网站结构 A. 文件结构,imagea文件夹用来存放将要用到的图片,styles文件夹存放CSS, ...

  9. 使用docker mediawiki，搭建网页wiki

    我只是想做一个大家都能访问的wiki,用于成员间共享和维护一些文档.找到了docker的mediawiki,这里记录一下我怎么搭的吧. 首先,如果你在一个局域网里,有公用的可以访问的服务器,那可以直接 ...

随机推荐

  1. centos7安装mysql-5.7.28

    mysql是我们最常用的开源的关系型数据库,mysql不同版本有时候安装的方式也不尽相同,下面以mysql5.7.28版本为例梳理一下安装细节: 1.下载mysql-5.7.28,URL:https: ...

  2. input输入框联想功能

    一直想找一个可以连接后台,可以根据后台内容的input输入框,可以实现联想功能,网上找到一个简单的静态页面的输入框联想,经过一番修改之后终于可以实现读取自己定义的数组的联想了,其实也比较简单就是格式的 ...

  3. 配置微软Azure大数据HDInsight云集群

    配置微软Azure大数据HDInsight云集群,存储账户.托管标识等问题也都参考官方文档解决了. 原文在我的开源中国博客 https://my.oschina.net/finchxu/blog/31 ...

  4. 微信小程序框架分析小练手（三）——仿香哈菜谱小程序制作

    香哈菜谱是一款围绕美食而成的小程序,在这里可以查看各式各样的菜谱. 一.打开微信开发者工具,新建一个项目:xhcp.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标.美食轮播图片.宫格导航图 ...

  5. 如何为wordpress 的文章添加分页

    原文参考:http://www.wpdaxue.com/add-next-page-button-wordpress-post-editor.html 1.在编辑文章时切到text 模式,然后加上&l ...

  6. webdriver高级应用 -无人干预地自动上传文件

    本节主要介绍通过程序代码无人干预地上传文件附件,并进行提交操作. 1.使用send_keys方法上传文件 #!/usr/bin/env python # -*- coding: utf-8 -*- # ...

  7. 二、Mongodb常用命令

    #进入admin数据库 use admin #进行权限认证 db.auth('userAdmin', '123456') #查询所有用户 db.system.users.find() #更新用户 db ...

  8. 【OpenGL】变换矩阵计算公式

    摘自: http://ogldev.atspace.co.uk/www/tutorial06/tutorial06.html, http://ogldev.atspace.co.uk/www/tuto ...

  9. 《C# GDI+ 破境之道》：第一境 GDI+基础 —— 第二节：画矩形

    有了上一节画线的基础,画矩形的各种边线就特别好理解了,所以,本节在矩形边线上,就不做过多的讲解了,关注一下画“随机矩形”的具体实现就好.与画线相比较,画矩形稍微复杂的一点就是在于它多了很多填充的样式. ...

  10. MySQL性能优化---索引

    一.什么是索引 索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都以B-树的形式保存.如果没有索引,执行查询时MySQL必须从第一个记录开始扫描整个表的所有记录,直至找到符合要求的记录.表里 ...