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. Leetcode 题目整理

    1. Two Sum Given an array of integers, return indices of the two numbers such that they add up to a ...

  2. Linux防火墙之iptables扩展处理动作

    前文我们讲了iptables的扩展匹配,一些常用的扩展模块以及它的专有选项的使用和说明,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12285152.html ...

  3. 实验11：EIGRP

    实验8-1:EIGRP 基本配置 实验目的通过本实验可以掌握:(1)在路由器上启动EIGRP 路由进程(2)启用参与路由协议的接口,并且通告网络(3)EIGRP 度量值的计算方法(4)可行距离(FD) ...

  4. 7、EIGRP

    EIGRP Cisco私有协议1.高级距离矢量路由协议(混杂型hybrid)单播和组播结合,组播更新地址: 224.0.0.10 2.最快速收敛 (使用Diffusing Update 算法(DUAL ...

  5. 使用纯C++迭代器编写归并排序

    第一次尝试用C++迭代器编写算法,使用的是纯迭代器 void mergeSort(vector<int>::iterator beg, vector<int>::iterato ...

  6. [git]git入门

    usage: git [--version] [--help] [-C <path>] [-c name=value] [--exec-path[=<path>]] [--ht ...

  7. POJ_1485_dp

    题目描述: 每组数据给n个点,点按一维坐标升序给出,要求划分成k块,在每一块中,取一个站,要求每个块中所有的点到站的距离的和的总和最小. 思路: dp题,dp[i][j]表示i个点分成j块的最小距离, ...

  8. java12类的无参方法

    package com.jh.test01; public class AutoLion { // 属性: 颜色 黄色 String color = "黄色"; // 函数:跑,叫 ...

  9. 三、Mongodb Java中的使用

    添加maven依赖 <!--mongodb 驱动--> <dependency> <groupId>org.mongodb</groupId> < ...

  10. Go Module下使用本地包

    介绍两种方式: 方式一(推荐): 严格的说,方式一是使用项目目录下的go文件. 项目目录如下: |── studyModule //项目主目录 | |──log //主目录下文件夹 | | |──lo ...