整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
【H5教程-2.3.3小节】
2.3.3HTML5列表、块和布局
1.块元素
块元素在显示的时候，通常会以新行开始
如：<h1> <p> <ul>
<!-- 块—>注释
<p>hello</p>
<h1>world</h1>
出来的结果是:
hello
空一行
world
hello 和world 之间有新的一行
2.HTML内联元素
内联元素通常不会以新行开始 如<b> <a> <img>
<b>这是一个加重标签</b>
<a>哈哈</a>
结果是 这是一个加重标签 哈哈
没有 再起一行
3. HTML <div>元素
<div>元素也被称为块元素，其主要是组合HTML元素的容器
4.HTML<span>元素
<span>元素是内联元素，可作为文本的容器.
例子：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 块-->
<title>块元素</title>
<style type = text/css>
span{
color: aqua;
}
</style>
</head>
<body>
<p>大家好!</p>
<h1>的第三款了你的扣篮考虑到那看的扣篮了卡单身快乐你登陆看两三款单你卡上</h1>
<b>这是一个加重标签</b>
<a>哈哈</a>
<div>
<p>
极客学院
</p>
</div>
<div>
<p>
<span>
这是一个测试结果
</span>
span 是一个什么样子
</p>
</div>
</body>
</html>
5.DIV元素布局 和 table元素布局
DIV布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div布局</title>
<style type = "text/css">
body{
margin: 0px;
}
#container{
width: 100%;
height: 950px;
background-color: lightgray;
}
#heading{
width: 100%;
height: 10%;
background-color: aqua ;
}
#content_menu{
width: 30%;
height: 80%;
background-color: aquamarine;
float: left;
}
#content_body{
width: 70%;
height: 80%;
background-color: blueviolet;
float: left;
}
#footing{
width: 100%;
height: 10%;
background-color: black;
clear: both;
}
</style>
</head>
<body>
<div id = "container" >
<div id="heading">头部</div>
<div id=" content_menu">内容菜单</div>
<div id="content_body">内容主题</div>
<div id="footing">底部</div>
</div>
</body>
</html>
其中：
在html中常用于布局、定位、区分。DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。
个人感觉像OC里面的View。
在上面 container 为最外层的View 相当于OC一个ViewController的View，id = "container" 个人CO理解的是 这块View 的name 叫 container，
<div id="heading">头部</div> 理解的是 一块叫heading的view 里面 加了一个label ， label的内容显示的是 头部，#footing{
width: 100%;
height: 10%;
background-color: black;
clear: both;
}
这块代码的OC理解就是拿到footing的地址，对这块View做布局和颜色等等的操作。
# 就相当于 OC 里面的 *
footing 就相当于下面的 view（地址名字）UIView *view = [UIView new];
CGRect frame = controller.view.bounds;
frame.size.width = controller.view.frame.size.widthframe.size.height = controller.view.frame.size.height * 0.1
view.backGroundColor = [UIColor blackColor];
得在body 使用DIV标签（标签里面声明 view），在head 里面设置 DIV标签的一些属性.
浏览器的结果是： 去掉 黑色上面 那一栏 就把2个图片综合一下
table布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height = "950px" style="background-color: lightgray">
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: aqua">这是头部</td>
</tr>
<tr>
<td width="30%" height="80%"style="background-color: blue">
<ul>
<li>iOS</li>
<li>HTML5</li>
<li>swift</li>
</ul>
</td>
<td width="60%" height="80%" style="background-color: blueviolet">主题内容</td>
<td width="20%" height="80%" style="background-color: deeppink">右菜单</td>
</tr>
<tr>
<td width="100%" height="10%" colspan="3" style="background-color: darkcyan">这是底部</td>
</tr>
</table>
</body>
</html>
<body>里面 给一个table
<table width="100%" height = "950px" style="background-color: lightgray"> 设置tale 的 宽和高 PX就像素100%就是全屏的宽度 * 1
<tr>是表格的一行,放在table或者body标签里面的
<td> 标签定义 HTML 表格中的标准单元格。td 元素中的文本一般显示为正常字体且左对齐。
HTML 表格有两类单元格：
表头单元 - 包含头部信息（由 th 元素创建）
标准单元 - 包含数据（由 td 元素创建）
求：前端HTML5，VUE2，VUE3，支持大文件分片，分段，分块，分割上传，支持断点续传，支持加密上传，支持批量上传，支持关闭浏览器后重新打开仍然能够继续上传，支持1000个文件批量上传，支持离线进度信息保存功能。支持IE浏览器，政府单位有些用户用的是WIN7+IE8，上传下载必须都支持。提供前后端源码，VUE源码，控件源码。
用户上传的文件比较大，有20G左右，直接用HTML传的话容易失败，服务器也容易出错，需要分片，分块，分割上传。也就是将一个大的文件分成若干个小文件块来上传，另外就是需要实现秒传功能和防重复功能，秒传就是用户如果上传过这个文件，那么直接在数据库中查找记录就行了，不用再上传一次，节省时间，实现的思路是对文件做MD5计算，将MD5值保存到数据库，算法可以用MD5，或者CRC，或者SHA1，这个随便哪个算法都行。
分片还需要支持断点续传，现在HTML5虽然提供了信息记录功能，但是只支持到了会话级，也就是用户不能关闭浏览器，也不能清空缓存。但是有的政府单位上传大文件，传了一半下班了，明天继续传，电脑一关结果进度信息就丢失了，这个是他们的一个痛点。
切片的话还有一点就是在服务器上合并，一个文件的所有分片数据上传完后需要在服务器端进行合并操作。
功能的话支持20G文件上传和续传，支持秒传，支持文件夹上传，支持在服务端保存文件夹层级结构，支持将文件夹层级结构信息保存到数据库中，支持下载时能够将文件夹层级结构下载下来，支持下载文件夹，下载文件夹支持断点续传，支持VUE2,VUE3,React，支持IE，Chrome和信创国产化环境，比如银河麒麟，统信UOS，龙芯，支持加密传输，包括加密上传，加密下载，加密算法支持国密SM4，支持云对象存储，比如华为云，阿里云，腾讯云，七牛云，AWS，MinIO,FastDFS，需要提供手机，QQ，微信，邮箱等联系方式，提供7*24小时技术支持，提供长期技术支持和维护服务，提供远程1对1技术指导，提供二次开发指导，提供文档教程，提供视频教程。
1.下载示例
https://gitee.com/xproer/up6-vue-cli
将up6组件复制到项目中
示例中已经包含此目录
1.引入up6组件
2.配置接口地址
接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表
参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de
3.处理事件
启动测试
启动成功
效果
数据库
TML前端开发最终取决于掌握标签的多少
HTML大概有七八百个标签
楼主这里给大家总结了下HTML常用标签
标签描述
<!--...-->定义注释。
<!DOCTYPE> 定义文档类型,所有H5都是这玩意打头。
<a>定义锚。
<abbr>定义缩写。
<acronym>定义只取首字母的缩写。
<address>定义文档作者或拥有者的联系信息。
<applet>不赞成使用。定义嵌入的 applet。
<area>定义图像映射内部的区域。
<article>定义文章。
<aside>定义页面内容之外的内容。
<audio>定义声音内容。
<b>定义粗体字。
<base>定义页面中所有链接的默认地址或默认目标。
<basefont>不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi>定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo>定义文字方向。
<big>定义大号文本。
<blockquote>定义长的引用。
<body>定义文档的主体。
<br>定义简单的折行。
<button>定义按钮 (push button)。
<canvas>定义图形。
<caption>定义表格标题。
<center>不赞成使用。定义居中文本。
<cite>定义引用(citation)。
<code>定义计算机代码文本。
<col>定义表格中一个或多个列的属性值。
<colgroup>定义表格中供格式化的列组。
<command>定义命令按钮。
<datalist>定义下拉列表。
<dd>定义定义列表中项目的描述。
<del>定义被删除文本。
<details>定义元素的细节。
<dir>不赞成使用。定义目录列表。
<div>定义文档中的节。
<dfn>定义定义项目。
<dialog>定义对话框或窗口。
<dl>定义定义列表。
<dt>定义定义列表中的项目。
<em>定义强调文本。
<embed>定义外部交互内容或插件。
<fieldset>定义围绕表单中元素的边框。
<figcaption>定义 figure 元素的标题。
<figure>定义媒介内容的分组，以及它们的标题。
<font>不赞成使用。定义文字的字体、尺寸和颜色。
<footer>定义 section 或 page 的页脚。
<form>定义供用户输入的 HTML 表单。
<frame>定义框架集的窗口或框架。
<frameset>定义框架集。
<h1> to <h6>定义 HTML 标题。
<head>定义关于文档的信息。
<header>定义 section 或 page 的页眉。
<hr>定义水平线。
<html>定义 HTML 文档。
<i>定义斜体字。
<iframe>定义内联框架。
<img>定义图像。
<input>定义输入控件。
<ins>定义被插入文本。
<isindex>不赞成使用。定义与文档相关的可搜索索引。
<kbd>定义键盘文本。
<keygen>定义生成密钥。
<label>定义 input 元素的标注。
<legend>定义 fieldset 元素的标题。
<li>定义列表的项目。
<link>定义文档与外部资源的关系。
<map>定义图像映射。
<mark>定义有记号的文本。
<menu>定义命令的列表或菜单。
<menuitem>定义用户可以从弹出菜单调用的命令/菜单项目。
<meta>定义关于 HTML 文档的元信息。
<meter>定义预定义范围内的度量。
<nav>定义导航链接。
<noframes>定义针对不支持框架的用户的替代内容。
<noscript>定义针对不支持客户端脚本的用户的替代内容。
<object>定义内嵌对象。
<ol>定义有序列表。
<optgroup>定义选择列表中相关选项的组合。
<option>定义选择列表中的选项。
<output>定义输出的一些类型。
<p>定义段落。
<param>定义对象的参数。
<pre>定义预格式文本。
<progress>定义任何类型的任务的进度。
<q>定义短的引用。
<rp>定义若浏览器不支持 ruby 元素显示的内容。
<rt>定义 ruby 注释的解释。
<ruby>定义 ruby 注释。
<s>不赞成使用。定义加删除线的文本。
<samp>定义计算机代码样本。
<script>定义客户端脚本。
<section>定义 section。
<select>定义选择列表（下拉列表）。
<small>定义小号文本。
<source>定义媒介源。
<span>定义文档中的节。
<strike>不赞成使用。定义加删除线文本。
<strong>定义强调文本。
<style>定义文档的样式信息。
<sub>定义下标文本。
<summary>为 <details> 元素定义可见的标题。
<sup>定义上标文本。
<table>定义表格。
<tbody>定义表格中的主体内容。
<td>定义表格中的单元。
<textarea>定义多行的文本输入控件。
<tfoot>定义表格中的表注内容（脚注）。
<th>定义表格中的表头单元格。
<thead>定义表格中的表头内容。
<time>定义日期/时间。
<title>定义文档的标题。
<tr>定义表格中的行。
<track>定义用在媒体播放器中的文本轨道。
<tt>定义打字机文本。
<u>不赞成使用。定义下划线文本。
<ul>定义无序列表。
<var>定义文本的变量部分。
<video>定义视频。
<wbr>定义可能的换行符。
<xmp>不赞成使用。定义预格式文本。
标签描述
<!DOCTYPE> 定义文档类型。
<html>定义 HTML 文档。
<title>定义文档的标题。
<body>定义文档的主体。
<h1> to <h6>定义 HTML 标题。
<p>定义段落。
<br>定义简单的折行。
<hr>定义水平线。
<!--...-->定义注释。
格式
标签描述
<acronym>定义只取首字母的缩写。
<abbr>定义缩写。
<address>定义文档作者或拥有者的联系信息。
<b>定义粗体文本。
<bdi>定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo>定义文字方向。
<big>定义大号文本。
<blockquote>定义长的引用。
<center>不赞成使用。定义居中文本。
<cite>定义引用(citation)。
<code>定义计算机代码文本。
<del>定义被删除文本。
<dfn>定义定义项目。
<em>定义强调文本。
<font>不赞成使用。定义文本的字体、尺寸和颜色
<i>定义斜体文本。
<ins>定义被插入文本。
<kbd>定义键盘文本。
<mark>定义有记号的文本。
<meter>定义预定义范围内的度量。
<pre>定义预格式文本。
<progress>定义任何类型的任务的进度。
<q>定义短的引用。
<rp>定义若浏览器不支持 ruby 元素显示的内容。
<rt>定义 ruby 注释的解释。
<ruby>定义 ruby 注释。
<s>不赞成使用。定义加删除线的文本。
<samp>定义计算机代码样本。
<small>定义小号文本。
<strike>不赞成使用。定义加删除线文本。
<strong>定义语气更为强烈的强调文本。
<sup>定义上标文本。
<sub>定义下标文本。
<time>定义日期/时间。
<tt>定义打字机文本。
<u>不赞成使用。定义下划线文本。
<var>定义文本的变量部分。
<wbr>定义可能的换行符。
表单
标签描述
<form>定义供用户输入的 HTML 表单。
<input>定义输入控件。
<textarea>定义多行的文本输入控件。
<button>定义按钮。
<select>定义选择列表（下拉列表）。
<optgroup>定义选择列表中相关选项的组合。
<option>定义选择列表中的选项。
<label>定义 input 元素的标注。
<fieldset>定义围绕表单中元素的边框。
<legend>定义 fieldset 元素的标题。
<isindex>不赞成使用。定义与文档相关的可搜索索引。
<datalist>定义下拉列表。
<keygen>定义生成密钥。
<output>定义输出的一些类型。
框架
标签描述
<frame>定义框架集的窗口或框架。
<frameset>定义框架集。
<noframes>定义针对不支持框架的用户的替代内容。
<iframe>定义内联框架。
图像
标签描述
<img>定义图像。
<map>定义图像映射。
<area>定义图像地图内部的区域。
<canvas>定义图形。
<figcaption>定义 figure 元素的标题。
<figure>定义媒介内容的分组，以及它们的标题。
音频/视频
标签描述
<audio>定义声音内容。
<source>定义媒介源。
<track>定义用在媒体播放器中的文本轨道。
<video>定义视频。
链接
标签描述
<a>定义锚。
<link>定义文档与外部资源的关系。
<nav>定义导航链接。
列表
标签描述
<ul>定义无序列表。
<ol>定义有序列表。
<li>定义列表的项目。
<dir>不赞成使用。定义目录列表。
<dl>定义定义列表。
<dt>定义定义列表中的项目。
<dd>定义定义列表中项目的描述。
<menu>定义命令的菜单/列表。
<menuitem>定义用户可以从弹出菜单调用的命令/菜单项目。
<command>定义命令按钮。
表格
标签描述
<table>定义表格
<caption>定义表格标题。
<th>定义表格中的表头单元格。
<tr>定义表格中的行。
<td>定义表格中的单元。
<thead>定义表格中的表头内容。
<tbody>定义表格中的主体内容。
<tfoot>定义表格中的表注内容（脚注）。
<col>定义表格中一个或多个列的属性值。
<colgroup>定义表格中供格式化的列组。
样式/节
标签描述
<style>定义文档的样式信息。
<div>定义文档中的节。
<span>定义文档中的节。
<header>定义 section 或 page 的页眉。
<footer>定义 section 或 page 的页脚。
<section>定义 section。
<article>定义文章。
<aside>定义页面内容之外的内容。
<details>定义元素的细节。
<dialog>定义对话框或窗口。
<summary>为 <details> 元素定义可见的标题。
元信息
标签描述
<head>定义关于文档的信息。
<meta>定义关于 HTML 文档的元信息。
<base>定义页面中所有链接的默认地址或默认目标。
<basefont>不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
编程
标签描述
<script>定义客户端脚本。
<noscript>定义针对不支持客户端脚本的用户的替代内容。
<applet>不赞成使用。定义嵌入的 applet。
<embed>为外部应用程序（非 HTML）定义容器。
<object>定义嵌入的对象。
<param>定义对象的参数。
属性描述
accesskey规定激活元素的快捷键。
class规定元素的一个或多个类名（引用样式表中的类）。
contenteditable规定元素内容是否可编辑。
contextmenu规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-*用于存储页面或应用程序的私有定制数据。
dir规定元素中内容的文本方向。
draggable规定元素是否可拖动。
dropzone规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden规定元素仍未或不再相关。
id规定元素的唯一 id。
lang规定元素内容的语言。
spellcheck规定是否对元素进行拼写和语法检查。
style规定元素的行内 CSS 样式。
tabindex规定元素的 tab 键次序。
title规定有关元素的额外信息。
translate规定是否应该翻译元素内容。
*请认真填写需求信息，我们会在24小时内与您取得联系。
