图片无缝并排
<div style="text-align:center">
<img src="图片链接" alt="文字" title="文字" style="width:49%;display:inline-block">
<img src="图片链接" alt="文字" title="文字" style="width:49%;display:inline-block">
</div>表格
| 列标题1 | 列标题2 | 列标题3 |
|---|---|---|
| 行1，列1 | 行1，列2 | 行1，列3 |
| 行2，列1 | 行2，列2 | 行2，列3 |
<table>
<thead>
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1，列1</td>
<td>行1，列2</td>
<td>行1，列3</td>
</tr>
<tr>
<td>行2，列1</td>
<td>行2，列2</td>
<td>行2，列3</td>
</tr>
</tbody>
</table>`
有序列表
- 一
- 二
- 三
- 四
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ol>无序列表
- 一
- 二
- 三
- 四
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ul>折叠展开内容
<details>与<summary>
Epcot Center
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
点击查看详细内容
展开的内容
哈哈哈哈哈
哈哈哈哈哈
酷酷酷酷酷
屌屌屌屌屌
<details>
<summary>点击查看详细内容</summary>
输入展开的内容
</details>简单可折叠目录树
鼠标点击项目可折叠展开子项目
- apps #应用目录
- admin #后台
- api #API接口
- common #公共目录
- home #前台
- config #配置
- config.php #系统配置
- database.php #数据库配置
- route.php #自定义路由配置
<html>
<head>
<meta charset="utf-8">
<title>PbootCMS目录文件说明</title>
<style>
ul li ul {
display:none;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
$(document).ready(function(e) {
$("ul li").click(function(e) {
$(this).children("ul").toggle();
e.stopPropagation(); //阻止冒泡事件
});
});
</script>
</head>
<body>
<ul>
<li>apps #应用目录
<ul>
<li>admin #后台</li>
<li>api #API接口</li>
<li>common #公共目录</li>
<li>home #前台</li>
</ul>
</li>
<li>config #配置
<ul>
<li>config.php #系统配置</li>
<li>database.php #数据库配置</li>
<li>route.php #自定义路由配置</li>
</ul>
</li>HTML网页文章的摘要信息
- 一、< title>标签
网页的标题能给浏览者带来方便，首先，标题概括了网页的内容，能使浏览者迅速了解网页的大概；其次，如果浏览者喜欢该网页，将它加入书签中或保存到磁盘上，标题就作为该页面的标志和文件名；另外，使用搜索引擎显示的结果也是页面的标题。可见，标题是相当重要的。标题< title>标签的格式为：< title> 标题名 < /title>
在文档头部定义的标题内容并不在浏览器窗口中显示，而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题。例如，新浪网站的主页，对应的网页标题为：< title>新浪网页< /title>
打开网页后，将在浏览器窗口的标题栏中显示“新浪首页”的标题。
- 二、< meta>标签
< meta>标签共有两个属性，分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。主要讲解一下name属性，用于设置搜索关键字和描述。< meat>标签的name属性的语法格式为：
< meta name="参数"content="参数值"> name属性主要用于描述网页摘要信息，与之对应的属性值为content，content中的内容主要是便于搜索引擎查找和分类信息用的。
name属性主要有以下两个参数：keywords和description。
- 1.
keywords（关键字）
keywords用来告诉搜索引擎网页使用的关键字。例如，国内著名的新浪网，其主页的关键字设置如下：
< meta name="keywords"content="新浪,新浪网,SINA,sina,sina.com.cn,新浪首页,门户,资讯"/>- 2.
description(网站内容描述）
description用来告诉搜索引擎网站主要的内容。例如，新浪网站主页的内容描述设置如下：
< meta name="description"content="新浪网为全球用户24小时提供全面及时的中文资讯，内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等，设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道，同时开设博客、视频、论坛等自由互动交流空间。"/>当浏览者通过百度搜索引擎搜索“新浪”时，就可以看到搜索结果中显示出网站主页的标题、关键字和内容描述，如图所示：
鼠标经过超链接显示图片二维码等
在需要出现的位置
<a class="social weixin" href="javascript:">
<img class="qrcode" src="图片链接" alt="文字描述">
此处需要显示的文字 比如 微信二维码
</a>CSS样式表内追加
.weixin {
position: relative;
}
.weixin img.qrcode {
position: absolute;
z-index: 99;
top: -135px;
right: -28px;
width: 7.5rem;
max-width: none;
height: 7.5rem;
transform: scale(0);
transform-origin: top right;
opacity: 0;
border: .1rem solid #0085ba;
border-radius: .25rem;
-webkit-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.weixin:hover img.qrcode {
transform: scale(1);
opacity: 1;
}html中PDF插入方法 office 预览
一、<iframe>
插入PPT 、word、excel等其他材料
此部分链接可以通过上传附件，点击插入获得；
此文件需要上传到微软才可以，所以建议一般文档转换成pDF通过上面方式获取
<iframe src='https://view.officeapps.live.com/op/view.aspx?src=链接地址.pdf' width='100%' height='100%' frameborder='1'></iframe>PDF插入方法，直接启用插入即可；
连接地址，可以使用右侧的附件工具，上传后点击插入获取到地址，然后替换对应的文件地址即可；
二、embed
<embed src="文件地址.pdf" type="application/pdf" width="100%" height="100%" />三、<iframe>
就比一少了个微软的链接
<iframe src="文件地址.pdf" height="100%" width="100%"></iframe>