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. 3、MySQL 索引失效的场景

    索引失效的场景: 1.没有 where 条件 直接看 SQL 语句   2.where 条件中所在的列没有建立索引 show index from t;   3.从表中取得数据超过某个阈值.通常认为是 ...

  2. 实现一个简易的RPC

    之前写了一些关于RPC原理的文章,但是觉得还得要实现一个.之前看到一句话觉得非常有道理,与大家共勉.不是“不要重复造轮子”,而是“不要发明轮子”,所以能造轮子还是需要造的. 如果大家还有不了解原理的, ...

  3. used in key specification without a key length

    官方的解释: The error happens because MySQL can index only the first N chars of a BLOB or TEXT column. So ...

  4. centos 配置自动启动(nginx为例)

    [Unit] Description=nginx After=network.target [Service] Type=forking ExecStart=/usr/local/nginx/sbin ...

  5. 2019牛客多校2 F Partition problem(dfs)

    题意: n<=28个人,分成人数相同的两组,给你2*n*2*n的矩阵,如果(i,j)在不同的组里,竞争力增加v[i][j],问你怎么分配竞争力最 4s 思路: 枚举C(28,14)的状态,更新答 ...

  6. 工业狗转行AI的心路历程

    2020年2月16日,晴 昨晚下了一场雪,大概是晚上八九点的样子,细碎的雪花在无风的夜里直嗖嗖的往下掉,门前的轿车顶上覆了薄薄的一层.路灯下的小巷格外的寂静,裹着我的睡衣在昏黄的灯光下站了许久,冠状病 ...

  7. bootstrap 按钮组件

    按钮组件主要的类名: .btn-toolbar     把几个  .btn-group 组合在一起,更复杂的组件 .btn-group .btn-group-vertical   垂直堆叠显示    ...

  8. 7天用Go动手写/从零实现分布式缓存GeeCache

    1 谈谈分布式缓存 第一次请求时将一些耗时操作的结果暂存,以后遇到相同的请求,直接返回暂存的数据.我想这是大部分童鞋对于缓存的理解.在计算机系统中,缓存无处不在,比如我们访问一个网页,网页和引用的 J ...

  9. 【C++】C++程序加载lib静态库

    使用Visual Studio 编写C++程序有几种配置lib的方法,以下是在代码中加载lib文件的方法: 在项目所在目录下创建文件夹lib,将lib文件此路径下,包括Debug和Release两种模 ...

  10. Mybatis随记（一）update动态SQL

    <update id="updateUser"> UPDATE user_info SET <if test="gzhOpenId != null an ...