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. JQuery--使用JQuery 的$.ajax 方法进行异步请求，导致页面闪烁

    情景 目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件 代码片段 $.aj ...

  2. 百度MP3音乐API接口及应用

    当你在百度去搜索一首歌时,你会发现有种更简单的方法. http://box.zhangmen.baidu.com/x?op=12&count=1&title=歌名$$作者$$$$ 例如 ...

  3. qt QSplitter分割窗口

    #include <QApplication> #include <QFont> #include <QTextEdit> #include <QSplitt ...

  4. C语言关于getchar()的小笔记

    #include <windows.h> #include <mmsystem.h> #include <string.h> void main() { int a ...

  5. ubuntu 安装LAMP web 服务器， phpmyadmin 安装后无法打开解决

    安装方法: http://blog.chinaunix.net/uid-26495963-id-3173291.html 在上述文档中需要增加apache 支持mysql 功能. apt-get in ...

  6. Excel VBA: 自动生成巡检报表并通过邮件定时发送

    目录 环境说明逻辑结构效果说明及截图①.安装SecureCRT②. 自动巡检脚本③. 数据检索并FTP传送④. 安装Excel 2013⑤. 安装Serv-U⑥. 自动生成图表并邮件发送 环境说明 系 ...

  7. MySQL关系型数据库基础操作

    MySQL基础 一.MySQL常用数据类型 1.常用数值类型(INT,DOUBLE,FLOAT) ① int 或者 integer 类型: 大小(字节):4字节: 范围: (有符号: -2147483 ...

  8. Nginx 部署及配置

    Tengine + Luajit2 系统账号及环境配置 $ sudo useradd -g 100 -u 200 user_00 $ sudo groupadd -g 300 www $ sudo u ...

  9. Spring IOC容器源码分析

    注:本文转自https://javadoop.com/post/spring-ioc Spring 最重要的概念是 IOC 和 AOP,本篇文章其实就是要带领大家来分析下 Spring 的 IOC 容 ...

  10. 11--Java--JDBC知识梳理

    JDBC 一.概述:JDBC(java database connection),使用java语言连接数据库,是java提供一套操作数据库的接口(标准),实现对数据库的统一访问,是一个java引用应用 ...