HTML基础

HTML 基础

框架

<!DOCTYPE html>
<!-- 保证文档正常读取 -->
<html>
<!-- 根元素 -->
  <head>
  <!-- 该元素的内容对用户不可见，包含例如面向搜索引擎的搜索关键字、描述、CSS 和字符编码等。 -->
    <meta charset="utf-8">
    <!-- 字符编码 -->
    <title>title</title>
    <!-- 页面标题 -->
  </head>
  <body>
  <!-- 标签内容 -->

  </body>
</html>

常用标签及其属性

  1. 图像:

    <img src="资源路径" alt="替代文本" usemap="#map映射id">
<map name="映射名称" id="映射id">
    <area  coords="点击坐标" href ="xx.html" target ="blank" />
</map>
<canvas id="画布id"></canvas>
通过js绘制
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

  2. 音视频:

    <audio src="音频资源" loop muted >
    <source src="xx.ogg" type="audio/ogg">
    <source src="xx.mp3" type="audio/mpeg">
</audio>
<video src="xx.ogg" controls> </video>

  3. 资源链接:

    <nav>
    <a href="引用路径">超链接</a>
</nav>

  4. 表单:

    <form action="提交URL地址" method="方法" name="名称" target="打开位置">
<input type="格式" name="名称" value="值">
<button type="按钮类型">按钮</button>
<select >
<option disable>xxx</option>
<optgroup label="描述">
    <option value="选项值">a</option>
    <option>xxx</option>
</optgroup>
</select>
<label for="绑定表单元素的id">
    <input type="text" id="xxx" />
</label>

  5. 框架:

    <frameset cols="每列占比">
<frame src="框架地址" />
<frame src="b.htm" />
</frameset>
<iframe>内联框架</iframe>

  6. 列表:

    <ul>
<li>无序</li>
</ul>
<ol>
<li>有序</li>
</ol>
<dl>
<dt>类别</dt>
<dd>内容</dd>
</dl>
<menu label="菜单描述">
    <button type="button" > </button>
    <button type="submit" > </button>
</menu>

  7. 表格

    <table border="1">
    <caption>表格标题</caption>]
    <thead>
        <tr>
            <th>第一列表头</th>
            <th>第二列表头</th>
            <th>第三列表头</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第一行第一列</td>
            <td colspan="向右列合并数">第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td rowspan="向下行合并数">第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>第一列脚注</td>
            <td>第二列脚注</td>
        </tr>
    </tfoot>
</table>

  8. 样式和语义

    <h#>标题标签</h#>
<div>块级标签</div>
<p>段落标签</p>
<br/>换行标签
<b>加粗<strong>着重<i>斜体<sub>下标<sup>上标<u>倾斜
<span>行内元素</span>
<header>头</header>
<main>内容</main>
<aside>侧边</aside>
<section>章节</section>
<article>文章</article>
<details>
    <summary>细节标题</summary>
    <p>xxx</p>
</details>
<footer></footer>

HTML 全局属性

accesskey 规定激活元素的快捷键。
class 类名。
contenteditable 规定元素内容是否可编辑。

contextmenu 规定元素的上下文菜单。

data-* 存储数据。

dir 文本方向。

draggable 规定元素是否可拖动。

dropzone 拖动数据时是否进行操作

hidden 规定元素仍未或不再相关。

id id。

lang 规定元素内容的语言。

spellcheck 拼写和语法检查。

style 行内样式。

tabindex 规定元素的 tab 键次序。

title 额外信息。

translate 翻译元素内容。

事件

  1. Window 事件属性

    onerror 在错误发生时运行。

    onload 页面结束加载之后触发。

    ononline 当文档上线时运行。

    onpageshow 当窗口成为可见时运行。

    onpopstate 当窗口历史记录改变时。

    onresize 当窗口被调整大小时触发。

    onstorage 在 WebStorage 区域更新后运行。

    onunload 一旦页面已下载时触发（或者浏览器窗口已被关闭）。

  2. Form 事件

    onblur 元素失去焦点时。

    onchange 在元素值被改变时。

    onfocus 当元素获得焦点时。

    onformchange 在表单改变时。

    onforminput 当表单获得用户输入时。

    oninput 当元素获得用户输入时。

    oninvalid 当元素无效时。

    onreset 重置按钮被点击时。HTML5 中不支持。

    onselect 在元素中文本被选中后。

    onsubmit 在提交表单时触发。

  3. Keyboard 事件 Mouse 事件

    onkeydown 在用户按下按键时触发。

    onkeypress 在用户敲击按钮时触发。

    onkeyup 当用户释放按键时触发。

    onclick 元素上发生鼠标点击时触发。

    ondblclick 元素上发生鼠标双击时触发。

    ondrag 元素被拖动时运行的脚本。

    ondragend 在拖动操作末端运行的脚本。

    ondragenter 当元素元素已被拖动到有效拖放区域时运行的脚本。

    ondragleave 当元素离开有效拖放目标时运行的脚本。

    ondragover 当元素在有效拖放目标上正在被拖动时运行的脚本。

    ondragstart 在拖动操作开端运行的脚本。

    ondrop 当被拖元素正在被拖放时运行的脚本。

    onmousedown 当元素上按下鼠标按钮时触发。

    onmousemove 当鼠标指针移动到元素上时触发。

    onmouseout 当鼠标指针移出元素时触发。

    onmouseover 当鼠标指针移动到元素上时触发。

    onmouseup 当在元素上释放鼠标按钮时触发。

    onmousewheel 当鼠标滚轮正在被滚动时运行的脚本。

    onscroll 当元素滚动条被滚动时运行的脚本。

H5 新特性

  • 语义化标签
    < header>< /header> 头部区域

    < footer>< /footer> 尾部区域

    < nav>< /nav> 导航

    < section>< /section> 章节

    < article>< /article> 内容区域

    < aside>< /aside> 侧边栏内容

    < detailes>< /detailes> 文档细节

    < summary>< /summary> details 的标题

    < dialog>< /dialog> 对话框

  • 增强型表单
    color 主要用于选取颜色

    date 从一个日期选择器选择一个日期

    datetime 选择一个日期（UTC 时间）

    datetime-local 选择一个日期和时间 (无时区)

    email 包含 e-mail 地址的输入域

    month 选择一个月份

    number 数值的输入域

    range 一定范围内数字值的输入域

    search 用于搜索域

    tel 定义输入电话号码字段

    time 选择一个时间

    url 地址的输入域

    week 选择周和年

  • 新增媒体元素

    可以使用 dom 操作来控制视频的播放暂停，如 play() 和 pause() 方法。

  • Canvas 绘图

    1. 创建一个画布< canvas>。
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<!-- 标签通常需要指定 id, width 和 height 属性定义的画布的大小，使用 style 属性来添加边框。 -->
    1. 使用 JS 来绘制图像
    <script>
  <!-- 获取节点 -->
　　var c=document.getElementById("myCanvas");
  <!-- 创建2d对象 -->
　　var ctx=c.getContext("2d");
  <!-- 颜色填充 -->
　　ctx.fillStyle="#FF0000";
  <!-- 矩形当前的填充方式 -->
　　ctx.fillRect(0,0,150,75);
</script>
    1. 画线
      var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  // 开始坐标
  ctx.moveTo(0,0);
  // 结束坐标
  ctx.lineTo(200,100);
  // 闭合
  ctx.stroke();
    1. 文本
    <!-- 字体设置 -->
ctx.font="30px Arial";
<!-- 实心文本 -->
ctx.fillText("Hello World",10,50);
<!-- 空心文本 -->
ctx.strokeText("Hi",50,50)
    1. 渐变
    // 线条渐变
var grd=ctx.createLinearGradient(0,0,200,0);
// 径向/圆渐变
var grd=ctx.createRadialGradient(x,y,r,x1,y1,r1);
<!-- 颜色停止 -->
grd.addColorStop(0,"red");
<!-- 颜色停止 -->
grd.addColorStop(1,"white");
// 颜色填充
ctx.fillStyle=grd;
// 填充方式
ctx.fillRect(10,10,150,80);
    1. 图像
    <!-- img对象 -->
var img=document.getElementById("scream");
<!-- 图像填充 -->
ctx.drawImage(img,10,10);

  • 本地存储

    cookie - 有大小个数限制 4kb20 个,可以自定保存时间

    document.cookie= "key=value;expires=''"

    localStorage - 没有时间限制的数据存储

    sessionStorage - 当用户关闭浏览器窗口后，数据会被删除。

    保存数据：localStorage.setItem(key,value);

    读取数据：localStorage.getItem(key);

    删除单个数据：localStorage.removeItem(key);

    删除所有数据：localStorage.clear();

    得到某个索引的值: localStorage.key(index);

  • Web Workers

    JS 是单线程的,影响浏览器性能,Web Worker 的作用，就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程，将一些任务分配给后者运行。允许主线程创建 Worker 线程，将一些任务分配给后者运行。

    一些计算密集型或高延迟的任务，被 Worker 线程承担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

    Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

    Web Worker 注意点

    1. 同源限制:分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

    2. DOM 限制:Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用 document、window、parent 这些对象。但是 Worker 线程可以 navigator 对象和 location 对象。

    3. 通信联系:Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

    4. 脚本限制:Worker 线程不能执行 alert()方法和 confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

    5. 文件限制:Worker 线程无法读取本地文件，它所加载的脚本，必须来自网络。

    Web Worker 用法

    创建

    var worker = new Worker('work.js');
<!-- 与主线程引入到同一个页面中,通过 Blob() 将页面中的 Worker 代码进行解析。 -->
<script id="worker" type="app/worker"></script>

    主线程向 worker 线程通信

    worker.postMessage('Hello World');

    主线程监听 worker 消息

    worker.onmessage = function (event) {
  console.log('获取传递的数据 ' + event.data);
  doSomething();
}

    主线程监听 worker 错误

    worker.onerror(function (event) {});

    主线程销毁 worker

    worker.terminate();

    worker 监听 message 事件发送消息

    this.addEventListener('message', function (e) {
  this.postMessage('You said: ' + e.data);
}, false);

    worker 关闭自身

    self.close()

    worker 引入脚本

    importScripts('script1.js');

    Worker 中可以使用的函数和类:

    clearInterval()clearTimeout()setInterval()setTimeout()

    importScripts()close()postMessage()

    Fetch WebSocket XMLHttpRequest

  • 拖放 API

    拖拽事件:
    dragstart：拖动开始
    drag：拖动中
    dragend：拖动结束

    目标对象事件：
    dragenter：拖动着进入
    dragover：拖动着悬停
    dragleave：拖动着离开
    drop：释放(需要再 dragover 事件中 event.preventDefault())

    <div id="myDrag" draggable="true" ondragstart=""></div>
<div id="content"></div>
document.querySelector("#content").addEventListener("drop",()=>{})

    DataTransfer 对象用于保存拖动过程中的数据。

    在拖动源对象事件中使用 e.dataTransfer 属性保存数据：
e.dataTransfer.setData( k, v )
在拖动目标对象事件中使用 e.dataTransfer 属性读取数据：
var value = e.dataTransfer.getData( k )

    文件拖拽上传:

      <div class="out-main-top">
      <!-- 拖拽 -->
      <div id="dropbox" class="drag-box">
          或者将文件拖到此处
      </div>
      <!-- 上传 -->
      <button type="button" onclick="uploadFileNow()">上传</button>
  </div>
  <!-- 展示 -->
  <ul id="canvasImg" class="canvas-img"></ul>

  <script>
      // 图片展示
      var canvasImg = document.getElementById('canvasImg');
      //目标对象
      var dropbox = document.getElementById('dropbox');
      // 图片
      var allBaseImg = []; //需要给到后台的图片数据
      // 大小限制
      var AllowImgFileSize = 1024 * 400; //上传图片最大值(单位字节)超过400K上传失败

      dropbox.addEventListener('dragover', function (ev) {
          ev.preventDefault();

          // 阻止默认的些事件方法等执行。
          // 在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。
      })
      dropbox.addEventListener('drop', function (ev) {
          // 通知web浏览器不要执行与事件关联的默认行为,浏览器打开图片
          ev.preventDefault();
          // 文件
          console.log(ev.dataTransfer.files);
          var dtfiles = ev.dataTransfer.files;
          //转化成base64
          transferDataToBase64(dtfiles);
      });

      // 转换为base64
      function transferDataToBase64(files) {
          for (let i = 0, len = files.length; i < len; i++) {
              var file = files[i];
              // 实例化h5对象
              var reader = new FileReader();
              console.log(reader);
              //转化为base64的格式 ，异步
              reader.readAsDataURL(file);
              // 转化成功
              reader.onload = function (ev) {
                  console.log(ev.target);
                  // 转换后的结果,存储到数组中
                  var base64Img = ev.target.result;
                  var index = allBaseImg.indexOf(base64Img);   //includes
                  // 去重
                  if (index != -1) {
                      return;
                  }
                  // 判断图片大小是否符合
                  console.log(base64Img);
                  if (base64Img.length > AllowImgFileSize) {
                      alert('图片上传失败，需要小于400K');
                      return;
                  }
                  // 渲染到html中
                  var str = `<li> <img src='${base64Img}'> <i class='close'>X</i></li>`;
                  canvasImg.innerHTML += str;
                  // 添加到数组中
                  allBaseImg.push(base64Img);
              }
          }
      }

      //监听缩略图 的删除事件 ,事件委托冒泡
      canvasImg.addEventListener('click', function (ev) {
          var target = ev.target;
          if (target.className == 'close') {
              // 获取点击的img
              var thisbase = target.previousElementSibling; //方式一
              // 截取
              var sindex = allBaseImg.indexOf(thisbase);
              allBaseImg.splice(sindex, 1); //更新数据
              //删除缩略图DOM
              target.parentElement.remove();
          }
      })

      //需要调接口，给图片数据到后端服务
      function uploadFileNow() {
          console.log(allBaseImg);
          console.log('调接口');
      }
  </script>

  • WebSocket

    WebSocket 是在单个 TCP 连接上进行全双工通讯的协议。

    在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

    浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

      var ws = new WebSocket("xxx.html");
  // 发送数据
  ws.onopen = function()
  {
      // Web Socket 已连接上，使用 send() 方法发送数据
      ws.send("发送数据");
  };
  // 监听数据
  ws.onmessage = function (evt)
  {
      var received_msg = evt.data;
  };
  // 连接关闭
  ws.onclose = function()
  {
      // 关闭 websocket
      alert("连接已关闭...");
  };
posted @ 2023-03-02 15:16  ni好哇  阅读(30)  评论(0)    收藏  举报