.标签

1.1meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看 charset 指定网页的字符集 name 指定的数据的名称 content 指定的数据的内容

keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

description 用于指定网站的描述

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

将页面重定向到另一个网站

1.2title标签

title标签的内容会作为搜索结果的超链接上的文字显示

<title>Document</title>

1.3标题

• h1 ~ h6 一共有六级标题
• 从h1~h6重要性递减，h1最重要，h6最不重要
• h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
• 标题元素是块元素
• <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
• 
  
• hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
• <hgroup>
  <h1>回乡偶书二首</h1>
  <h2>其一</h2>
  </hgroup>
• 其他标签
• p标签表示页面中的一个段落
• <p>在p标签中的内容就表示一个段落</p>
• em标签用于表示语音语调的一个加重
• <p>今天天气<em>真</em>不错！</p>
• strong表示强调，重要内容！
• <p>你今天必须要<strong>完成作业</strong>！</p>
• blockquote 表示一个长引用
• <blockquote>
  这句话我是从来没有说过的！
  </blockquote>
• q表示一个短引用
• 子曰<q>学而时习之，乐呵乐呵！</q>
• br标签表示页面中的换行
• <br>

1.4布局标签

header 表示网页的头部 main 表示网页的主体部分(一个页面中只会有一个main) footer 表示网页的底部 nav 表示网页中的导航 aside 和主体相关的其他内容（侧边栏） article 表示一个独立的文章 section 表示一个独立的区块，上边的标签都不能表示时使用section

div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素

span 行内元素，没有任何的语义，一般用于在网页中选中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分类

1.1.1.1有序列表

使用ol标签来创建无序列表，使用li表示列表项

<ul>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ul>

1.1.1.2 无序列表

使用ul标签来创建无序列表，使用li表示列表项

<ol>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ol>

1.1.1.3定义列表

使用dl标签来创建一个定义列表， 使用dt来表示定义的内容，使用dd来对内容进行解释说明

<dl>
       <dt>结构</dt>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
   </dl>

1.1.1.4列表之间可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超链接

1.6.1 作用

超链接可以让我们从一个页面跳转到其他页面， 或者是当前页面的其他的位置

1.6.2 定义

使用 a 标签来定义超链接

<a href="https://www.baidu.com">超链接</a>

1.6.3 属性

1.6.3.1属性1：href

指定跳转的目标路径

值可以是一个外部网站的地址

也可以写一个内部页面的地址

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

1.6.3.2 属性2：target

用来指定超链接打开的位置

_self 默认值 在当前页面中打开超链接

_blank 在一个新的要么中打开超链接

<a href="07.列表.html" target="_blank">超链接</a>

1.6.4其他

将#作为超链接的路径的展位符使用

javascript：; 来作为href的属性，此时点击这个超链接什么也不会发生

将超链接的href属性设置为#，这样点击超链接以后 页面不会发生跳转，而是转到当前页面的顶部的位置

跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三个自然段</a>
   <br><br>
<p>
  内容多一点
</p>
<a href="#">这是一个新的超链接</a>
   <br><br>
<a href="javascript：;">这是一个新的超链接</a>
   <br><br>
<a id="bottom" href="#">回到顶部</a>

1.7图片标签

img标签来引入外部图片，img标签是一个自结束标签

属性：src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示

<img src="./img/1.gif" alt="松鼠">

1.8内联框架

用于向当前页面中引入一个其他页面

• src 指定要引入的网页的路径
• frameborder 指定内联框架的边框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音视频标签

1.8.1音频

audio 标签用来向页面中引入一个外部的音频文件的

1.8.1.1 属性

• controls 是否允许用户控制播放
• autoplay 音频文件是否自动播放
• 如果设置了autoplay 则音乐在打开页面时会自动播放
• loop 音乐是否循环播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径

<audio controls>
       <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2视频

与 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>

2.表格table

• 在table中使用tr表示表格中的一行，有几个tr就有几行
• 在tr中使用td表示一个单元格，有几个td就有几个单元格
• rowspan 纵向的合并单元格
• colspan 横向的合并单元格

<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

长表格

• 可以将一个表格分成三个部分：
• 头部 thead
• 主体 tbody
• 底部 tfoot
• th 表示头部的单元格

<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合计</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合计</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格样式

• border-spacing: 指定边框之间的距离

border-spacing: 0px;

• border-collapse: collapse; 设置边框的合并

border-collapse: collapse;

• 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中tr不是table的子元素

3.表单（form）

• 使用form标签来创建一个表单
• action 表单要提交的服务器的地址
• 数据要提交到服务器中，必须要为元素指定一个name属性值

<input type="text" name="username">

• 单选按钮
• 像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
• checked 可以将单选按钮设置为默认选中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

• 多选框

<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>

• 下拉列表

<select name="haha">
          <option value="i">选项一</option>
          <option selected value="ii">选项二</option>
          <option value="iii">选项三</option>
      </select>

• 提交按钮

<input type="submit" value="注册">

属性

• autocomplete="off" 关闭自动补全
• readonly 将表单项设置为只读，数据会提交
• disabled 将表单项设置为禁用，数据不会提交
• autofocus 设置表单项自动获取焦点

<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按钮 -->
      <input type="reset">
      <!-- 普通的按钮 -->
      <input type="button" value="按钮">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按钮</button>
  </form>

4.注释

<!--
我是注释中的注释 注释不能嵌套
-->

5.属性

• 属性，在标签中（开始标签或自结束标签）还可以设置属性
• 属性是一个名值对（x=y）
• 属性用来设置标签中的内容如何显示
• 属性和标签名或其他属性应该使用空格隔开
• 属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来

6.文档声明

<!doctype html>

#34;夏哉ke"：quangneng.com/5065/

HTML5的介绍和案例实战

HTML5 是 HTML 的第五个主要版本，是用于构建和呈现网页内容的最新标准。它引入了许多新特性和改进，使得开发者能够创建更丰富、更交互性的网页应用。HTML5 的一些主要特性包括：

1. 语义化标记： HTML5 引入了许多新的语义化标签，如 <header>, <footer>, <nav>, <article> 等，使得开发者能够更清晰地描述网页的结构，有助于搜索引擎优化（SEO）和可访问性（Accessibility）。
2. 多媒体支持： HTML5 提供了原生支持音频和视频的 <audio> 和 <video> 标签，不再需要依赖第三方插件如 Flash。开发者可以直接在网页中嵌入音频和视频，并控制播放、暂停等操作。
3. Canvas 绘图： HTML5 的 <canvas> 元素允许开发者使用 JavaScript 绘制图形、动画和其他视觉效果。Canvas 提供了一种灵活的方式来创建交互式图形，如游戏、数据可视化等。
4. 本地存储： HTML5 引入了 Web Storage 和 IndexedDB，允许开发者在客户端存储数据，而无需依赖服务器。这对于创建离线应用程序和提高性能有很大帮助。
5. 响应式设计： HTML5 提供了更好的支持响应式设计的能力，使得网页能够适应不同设备的屏幕大小和分辨率，提供更好的用户体验。
6. Web 组件： HTML5 引入了 Web Components，允许开发者创建可重用的自定义 HTML 元素，从而提高开发效率和代码复用性。
7. 更严格的语法和错误处理： HTML5 规范对 HTML 的语法进行了更新和优化，使得浏览器能够更好地处理语法错误，并提供更准确的错误提示。

案例实战可以是：

1. 音乐播放器应用： 使用 HTML5 的 <audio> 标签和 JavaScript，创建一个简单的音乐播放器应用，允许用户播放、暂停和切换音乐。
2. 图像画廊： 使用 HTML5 的 <canvas> 元素和 JavaScript，在网页上创建一个交互式的图像画廊，允许用户查看和缩放图片。
3. 在线游戏： 使用 HTML5 和 Canvas 绘图功能，开发一个简单的在线游戏，如拼图、打砖块等，展示 HTML5 在游戏开发中的应用。
4. 数据可视化应用： 使用 HTML5、CSS 和 JavaScript，创建一个数据可视化应用，展示数据图表、地图等，并允许用户与数据进行交互。
5. 响应式网站： 使用 HTML5 和 CSS3，创建一个响应式网站，使得网页能够在不同设备上自适应布局，并提供良好的用户体验。

这些案例实战可以帮助开发者熟悉 HTML5 的各种特性和用法，并在实际项目中应用它们来构建丰富、交互性强的网页应用。

CSS3的介绍和案例实战

CSS3 是 CSS 的第三个主要版本，是用于样式化网页内容的最新标准。它引入了许多新特性和改进，使得开发者能够创建更漂亮、更交互性的网页设计。CSS3 的一些主要特性包括：

1. 新的选择器： CSS3 引入了许多新的选择器，如属性选择器、伪类选择器和伪元素选择器，使得开发者能够更精确地选中文档中的元素，并对其应用样式。
2. 盒子模型： CSS3 提供了更灵活的盒子模型，允许开发者使用 box-sizing 属性控制盒子的尺寸计算方式，包括 content-box 和 border-box，从而更方便地设计布局。
3. 圆角和阴影： CSS3 提供了 border-radius 属性和 box-shadow 属性，使得开发者能够轻松地为元素添加圆角和阴影效果，增强页面的美观度。
4. 渐变和背景图像： CSS3 允许开发者使用线性渐变和径向渐变来创建平滑的过渡效果，同时支持多个背景图像叠加，使得页面的背景更加丰富多彩。
5. 动画和过渡： CSS3 提供了 @keyframes 规则和 transition 属性，使得开发者能够创建简单的动画和过渡效果，而无需使用 JavaScript 或 Flash。
6. 响应式布局： CSS3 提供了媒体查询（Media Queries）功能，允许开发者根据设备的特性和屏幕大小来应用不同的样式，从而创建响应式布局的网页设计。
7. 字体和文本效果： CSS3 支持自定义字体（@font-face），以及文本阴影、文字溢出效果等，使得开发者能够更加灵活地设计文本样式。
8. Flexbox 和 Grid 布局： CSS3 引入了 Flexbox 和 Grid 布局模型，使得开发者能够更方便地设计复杂的网页布局，实现水平和垂直居中、自适应布局等功能。

案例实战可以是：

1. 响应式导航菜单： 使用 CSS3 的媒体查询和动画效果，创建一个响应式导航菜单，在不同设备上呈现不同的布局和样式。
2. 图片展示画廊： 使用 CSS3 的过渡和渐变效果，创建一个图片展示画廊，实现图片的平滑过渡和点击放大效果。
3. 卡片式布局： 使用 CSS3 的 Flexbox 或 Grid 布局，创建一个卡片式布局的网页，实现卡片的等高排列和自适应布局。
4. 轮播图效果： 使用 CSS3 的动画效果，创建一个简单的轮播图效果，实现图片的自动切换和淡入淡出动画。
5. 按钮样式设计： 使用 CSS3 的边框样式、阴影效果和渐变背景，设计一组漂亮的按钮样式，增强用户交互体验。

这些案例实战可以帮助开发者熟悉 CSS3 的各种特性和用法，并在实际项目中应用它们来实现各种炫酷的网页设计效果。

JavaScript的介绍和案例实战：

JavaScript 是一种高级的、动态的、解释性的编程语言，主要用于为网页添加交互性和动态功能。它是 Web 开发中最常用的脚本语言之一，可以直接嵌入到 HTML 中，也可以作为外部文件引入到 HTML 页面中。

JavaScript 的特点包括：

1. 客户端脚本语言： JavaScript 主要运行在用户的浏览器中，用于处理网页的交互逻辑，与用户进行实时的交互。
2. 轻量级和灵活性： JavaScript 的语法简洁明了，学习曲线较为平缓，开发者可以快速上手。同时，JavaScript 也是一种灵活的语言，支持多种编程范式，如面向对象编程（OOP）、函数式编程等。
3. 事件驱动和异步编程： JavaScript 是一种事件驱动的语言，可以通过监听用户的交互事件（如点击、滚动、键盘输入等）来触发相应的操作。同时，JavaScript 也支持异步编程模式，通过回调函数、Promise 或 async/await 等机制来处理异步操作，保持页面的流畅性和响应性。
4. 跨平台性： 由于 JavaScript 运行在浏览器中，因此具有较好的跨平台性，无论是在 Windows、macOS、Linux 还是移动设备上，都能够正常运行。
5. 丰富的生态系统： JavaScript 生态系统非常丰富，拥有大量的开源库和框架，如jQuery、React、Angular、Vue.js 等，可以帮助开发者快速构建复杂的 Web 应用程序。

案例实战可以是：

1. 交互式表单验证： 使用 JavaScript 实现表单的实时验证功能，包括验证必填字段、邮箱格式、密码强度等，并在用户输入不符合要求时给出相应的提示信息。
2. 图片轮播效果： 使用 JavaScript 编写轮播图组件，实现图片的自动播放、手动切换、指示器显示等功能，提升网页的视觉效果和用户体验。
3. 无限滚动加载： 使用 JavaScript 监听页面滚动事件，当用户滚动到页面底部时，自动加载更多的内容，实现无限滚动效果，提升页面的内容呈现效果。
4. 实时搜索功能： 使用 JavaScript 编写实时搜索组件，当用户在搜索框中输入关键字时，自动展示匹配的搜索结果，并支持关键字高亮显示，提升搜索体验。
5. 模态框和弹出窗口： 使用 JavaScript 编写模态框（Modal）或弹出窗口（Popup）组件，实现在页面上弹出特定内容的交互式窗口，如登录框、消息提示框等。

这些案例实战可以帮助开发者熟悉 JavaScript 的语法和常用操作，理解 JavaScript 在网页开发中的应用场景，从而更好地运用 JavaScript 来实现各种动态和交互式的功能。

文本插件TINYMCE使用CTRL+V粘贴图片上传到远程服务器

最近项目中有一个需求，需要在编辑器增加Word内容一键粘贴的功能，粘贴后能够自动将Word中的图片上传到服务器中，并且保留Word文档中的文本样式，比如颜色，字体，字体大小，表格等。粘贴操作要求支持快捷键操作（Ctrl + V），Web编辑器使用的TinyMCE5

用户每天需要发布新闻，新闻都是由编辑写好，保存在Word文档中，之前发的时候图片处理比较麻烦，都是一张张上传，效率比较低，现在希望能够批量自动上传，提高工作效率。

希望在现有的后台管理系统中直接集成到现有的编辑器（tinymce）中，做成一个按钮，用户点击按钮后就能粘贴，图片自动上传。操作尽量简单，用户体验尽量的好用。

网上搜了一下，基本上大部分文章讲的都是用VUE+HTML5来实现的。我们实际测试后发现这种方案局限性比较大，而且兼容性也不够好，在有些电脑上不行，有些客户电脑又行，暂时找不到原因，开源方案也没人联系，没有任何技术支持，所以放弃。图片是转成了BASE64上传，与原始图片相比尺寸更大些，应该是自动转换时出了问题，清晰度也有下降。

找了几个星期最终只找到了一个最符合需求的插件：泽优Word一键粘贴控件（WordPaster），实际测试后发现效果还不错基本能够满足需求。提供了完整的示例代码，整合教程和视频教程，集成起来也非常的方便，用户体验做的也很好。

项目组建议最好能够以插件方式进行使用，这样集成升级后期维护更方便，前端没有使用VUE框架，而是HTML+JS。用户希望直接集成到编辑器（UEditor）中，在工具栏中提供一个按钮，点击按钮后就能粘贴，图片自动上传。这样的用户体验是最好的

另外一点就是希望稳定可靠，因为用的人比较多，几乎每天都会使用，使用频繁也很高，出了问题就比较影响工作效率。客户那边要求提供手机和微信需要技术支持。

上面的几点能够满足的话基本就没有什么问题，领导希望最好提供OEM或者买断的采购方式，因为我们是软件公司，也是专门做政府单位项目，客户比较多，领导希望能够买断集成在我们自己的产品中，这样就能够为所有用户提供这个功能，用户体验也能够统一。主要是领导不想每次都要单独采购，太麻烦了。

示例下载：