搭建网页HTML结构
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>
<span>布偶猫</span>
<span>苏格兰折耳猫</span>
<span>英国短毛猫</span>
<span>波斯猫</span>
<span>俄罗斯蓝猫</span>
<span>美国短毛猫</span>
<span>异国短毛猫</span>
</td>
<td width="20%" align="center">
快速通道 <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>
<span>布偶猫</span>
<span>苏格兰折耳猫</span>
<span>英国短毛猫</span>
<span>波斯猫</span>
<span>俄罗斯蓝猫</span>
<span>美国短毛猫</span>
<span>异国短毛猫</span>
</td>
</tr>
<!-- 页脚 -->
<td colspan="3" bgcolor="#89a9bd" align="center" height="80px">
copyright © 2020 cyy all right deserved
</td>
</table>
</body>
</html>
搭建网页HTML结构的更多相关文章
- seo之google rich-snippets丰富网页摘要结构化数据（微数据）实例代码
seo之google rich-snippets丰富网页摘要结构化数据(微数据)实例代码 网页摘要是搜索引擎搜索结果下的几行字,用户能通过网页摘要迅速了解到网页的大概内容,传统的摘要是纯文字摘要,而结 ...
- html网页基本结构
<!DOCTYPE> 不是 HTML 标签.它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的. HTML5 DOCTYPE 的 HTML 文档类型如下: <!DOCT ...
- 网页html结构搭建方法总结
在div+css布局中,一般都这样来整体构架的: <div id="header"></div><div id="center"& ...
- Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期
目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. ...
- UIKIT网页基本结构学习
没办法,哈哈,以后一段时间,如果公司没有招到合适的运维研发, 啥啥都要我一个人先顶上了~~~:) 也好,可以让人成长. UIKIT,BOOTSTRAP之类的前端,搞一个是有好处的,我们以前即然是用了U ...
- Html网页表格结构化标记的应用
在讲网页表格的结构化标记之前,还是先看几幅图片. Html表格的结构化 所谓的结构化,正如上述第一副图所看到的,就是把我们的表格划分为三种:表头.表体.表尾.从而当我们在改动表体部分的时候,不会影响到 ...
- Vue脚手架（vue-cli）搭建和目录结构详解
一.环境搭建 1.安装node.npm.webpack,不多说 2.安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V( ...
- 《锋利的jQuery》读书要点笔记6——制作商城网页：结构和样式设计
第8章 用jQuery打造个性网站 做一个购物网站并用jQuery来完善.大体步骤是: 收集素材 确定网站结构 A. 文件结构,imagea文件夹用来存放将要用到的图片,styles文件夹存放CSS, ...
- 使用docker mediawiki，搭建网页wiki
我只是想做一个大家都能访问的wiki,用于成员间共享和维护一些文档.找到了docker的mediawiki,这里记录一下我怎么搭的吧. 首先,如果你在一个局域网里,有公用的可以访问的服务器,那可以直接 ...
随机推荐
- CUDA学习（三）之使用GPU进行两个数相加
在CPU上定义两个数并赋值,然后使用GPU核函数将两个数相加并返回到CPU,在CPU上显示 #include "cuda_runtime.h" #include "dev ...
- 基于 Serverless +企业微信打造 nCoV 疫情监控小助手
最近的一些疫情信息很让人揪心,为了方便大家掌握疫情信息,在空闲之余做了一个关于 nCoV 的疫情监控小助手.主要的功能是通过企业微信的 WebHook 来推送疫情信息.这里将使用 Serverless ...
- String、StringBuilder、StringBuffer区别
=====================================String=================================★1.它在java.lang包中.String类 ...
- 林大妈的JavaScript进阶知识（一）：对象与内存
JavaScript中的基本数据类型 在JS中,有6种基本数据类型: string number boolean null undefined Symbol(ES6) 除去这六种基本数据类型以外,其他 ...
- CCF_ 201312-3_最大的矩形
遍历数组中每一元素,左右延伸得出宽度. #include<iostream> #include<cstdio> using namespace std; int main() ...
- socket实现文件上传（客户端向服务器端上传照片示例）
本示例在对socket有了基本了解之后,可以实现基本的文件上传.首先先介绍一下目录结构,server_data文件夹是用来存放客户端上传的文件,client_data是模拟客户端文件夹(目的是为了测试 ...
- LNK2019
原因:inline函数被外部文件的函数调用时,必须将inline函数定义在头文件中,不能定义在cpp文件中.
- scala中符号的意思
1. => 定义函数, xxx => yyy 左边是函数变量,右边是函数返回值 2. <- 遍历中的<- 将变量赋给索引 for( i <- arrs ) 3. -> ...
- golang 运算符
/* 算术运算符 : + - * / % ++ -- 关系运算符 : == != > < >= <= 逻辑运算符 : && || ! 赋值运算符 : = += ...
- 今天第一天开通博客，随笔总结一下resultType（属性）和resultMap，collection和association，Statement和PreparedStatement各自的区别
1.resultType(属性)和resultMap(标签引用)的区别? resultType不支持自定义返回结果,会将查询到的结果通过到type中java对象的同名的属性,对象中的属性名必须和数据库 ...