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. MySQL8.0 MIC高可用集群搭建

    mysql8.0带来的新特性,结合MySQLshell,不需要第三方中间件,自动构建高可用集群. mysql8.0作为一款新产品,其内置的mysq-innodb-cluster(MIC)高可用集群的技 ...

  2. 【译】SQ3R学习法则

    SQ3R 观察-提问-阅读-复述-回顾 背景 SQ3R是一种理解策略,可帮助学生在阅读时思考他们正在阅读的文章. SQ3R通常被归类为学习策略,通过教导学生在初次阅读一篇文章时如何阅读和像高效读者一样 ...

  3. 浏览器无法进入GitHub(已解决)

    时间:2020/1/22 今天突然chrome登不上GitHub,一直出现响应时间过长的问题,如下: 开始还以为是GitHub服务器出问题了(虽然概率很小.....),但这种情况一直持续了几个小时,我 ...

  4. Kubernetes-Service资源详解

    service的三种工作模式:(userstats(效率低).iptables.ipvs) service可以自动实现负载均衡.service自动实现了负载均衡,service通过selector标签 ...

  5. python学习Day03

    [主要内容] 1. 编码 1. 最早的计算机编码是ASCII. 美国人创建的. 包含了英文字母(大写字母, 小写字母). 数字, 标点等特殊字符!@#$% 128个码位 2**7 在此基础上加了一位 ...

  6. OpenCV3入门（六）图像滤波

    1.图像滤波理论 1.1图像滤波理论 图像滤波即在尽量保留图像细节特征的条件下对目标图像的噪声进行抑制,是图像预处理中不可缺少的操作.消除图像中的噪声又叫做图像滤波或平滑,滤波的目的有两个,一是突出特 ...

  7. Codeforces_512_B

    http://codeforces.com/problemset/problem/512/B dp题,因为状态很多,所以用map保存,注意代码中的那个二层循环不能内外换,因为map会自动排序. #in ...

  8. ARTS Week 4

    标题: ARTS Week 4 分类: ARTS tags: ARTS ----------------------------------- Nov 18, 2019 ~ Nov 24, 2019 ...

  9. Go语言实现：【剑指offer】两个链表的第一个公共结点

    该题目来源于牛客网<剑指offer>专题. 输入两个链表,找出它们的第一个公共结点. Go语言实现: //长度长的先走个长度差,然后ab一起比较后面结点 //长度一样,公共结点可能在首结点 ...

  10. Wannafly挑战赛5 A珂朵莉与宇宙 前缀和+枚举平方数

    Wannafly挑战赛5 A珂朵莉与宇宙 前缀和+枚举平方数 题目描述 给你一个长为n的序列a,有n*(n+1)/2个子区间,问这些子区间里面和为完全平方数的子区间个数 输入描述: 第一行一个数n 第 ...