zqy233的前端学习笔记

主题

回到顶部
索引

html

超文本标记语言（HyperText Markup Language）简称：html，是一种用于创建网页的标准标记语言，html 运行在浏览器上，由浏览器来解析

emmet

vscode中快捷生成html代码的快捷键语法，使用tab触发

!

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

.className

html
<div class="className"></div>

<div class="className"></div>

.className1.className2

html
<div class="className1 className2"></div>

<div class="className1 className2"></div>

#idName

html
<div id="idName"></div>

<div id="idName"></div>

.a + .b

html
<div class="a"></div>
<div class="b"></div>

<div class="a"></div>
<div class="b"></div>

.a > .b

html
<div class="a">
    <div class="b"></div>
</div>

<div class="a">
    <div class="b"></div>
</div>

ul>li*5

html
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul>li.a$*3

html
<ul>
   <li class="a1"></li>
   <li class="a2"></li>
   <li class="a3"></li>
</ul>

<ul>
   <li class="a1"></li>
   <li class="a2"></li>
   <li class="a3"></li>
</ul>

ul>li>a{item}*5

html
<ul>
   <li>
      <a href="">item</a>
      <a href="">item</a>
      <a href="">item</a>
      <a href="">item</a>
      <a href="">item</a>
   </li>
</ul>

<ul>
   <li>
      <a href="">item</a>
      <a href="">item</a>
      <a href="">item</a>
      <a href="">item</a>
      <a href="">item</a>
   </li>
</ul>

meta标签

html
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  • width 设置 viewport 的宽度，正整数或字符串device-width
  • height 设置 viewport 的高度，正整数或字符串device-height
  • initial-scale 设置设备宽度与 viewport大小之间的缩放比例，0.0-10.0之间的正数
  • maximum-scale 设置最大缩放系数，0.0-10.0之间的正数
  • minimum-scale 设置最小缩放系数，0.0-10.0之间的正数
  • user-scalable 如果设置为 no 用户将不能缩放网页，默认为 yes，可选参数为yes / no

语义化标签

HTML5新增的语义化标签主要有：<header>、<nav>、<article>、<section>、<aside>、<footer>等

优点：

  • 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
  • 比<div>标签有更加丰富的含义，方便开发与维护
  • 方便搜索引擎能识别页面结构，有利于SEO
  • 方便其他设备解析（如移动设备、盲人阅读器等）
  • 有利于合作，遵守W3C标准

页面或布局的头部区域

页面或布局的头部区域的导航列表

article

相对比较独立、完整的的内容区块，可以互相嵌套，如一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论

aside

页面或布局的侧边区域，具有独立性，是对页面的补充，如侧边栏、广告、友情链接等

section

一组或者一节内容

div、section、article

  • div应用广泛，任意一个区域

  • section包含的内容是一个明确的主题，通常有标题区域

  • article用于页面中需要一个单独的模块来实现一个单独的功能，其他时候都用section

页面或者页面中底部区域，如版权信息、联系方式等信息

address

必须用于联系信息，如邮编地址、邮件地址等等,一般出现在footer

form

action属性用于表单提交后跳转指定页面

css
<form action="home" >

<form action="home" >

type="submit" 的input标签可以触发form表单的提交事件

css
<input type="submit" value="登录" class="sign-btn" />

<input type="submit" value="登录" class="sign-btn" />

音频

audio

js
<embed height="100" width="300" src="./video/undefined.mp3" />
<audio src="./video/undefined.mp3" controls loop></audio>

<embed height="100" width="300" src="./video/undefined.mp3" />
<audio src="./video/undefined.mp3" controls loop></audio>
js
<audio id="bgMusic">
    <source = src="hangge.mp3" type="audio/mp3">
    <source = src="hangge.ogg" type="audio/ogg">
</audio>

<audio id="bgMusic">
    <source = src="hangge.mp3" type="audio/mp3">
    <source = src="hangge.ogg" type="audio/ogg">
</audio>

预加载媒体文件

设置preload不同的属性值，可以告诉浏览器应该怎样加载一个媒体文件： （1）值为auto：让浏览器自动下载整个文件 （2）值为none：让浏览器不必预先下载文件 （3）值为metadata：让浏览器先获取音频文件开头的数据块，从而足以确定一些基本信息（比如音频的总时长）

通过pause()和play()方法可以使音乐暂停和继续播放（结合currentTime属性可以实现停止和重新播放）

表格

tr定义行，td定义列

html
  <table border="1" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <td></td>
          <td>同比</td>
          <td>环比</td>
        </tr>
      </thead>
      <tbody class="table-main">
        <tr>
          <td>
            123
          </td>
          <td>
            456
          </td>
        </tr>
      </tbody>
    </table>

  <table border="1" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <td></td>
          <td>同比</td>
          <td>环比</td>
        </tr>
      </thead>
      <tbody class="table-main">
        <tr>
          <td>
            123
          </td>
          <td>
            456
          </td>
        </tr>
      </tbody>
    </table>

svg

html
<svg width="300" height="300">
  <path d="M 50 50 C 80 80, 120 120, 150 150 C 180 180, 220 220, 250 250 M 50 250 C 80 220, 120 180, 150 150 C 180 120, 220 80, 250 50 Z" stroke="black" stroke-width="2" fill="none"/>
</svg>

<svg width="300" height="300">
  <path d="M 50 50 C 80 80, 120 120, 150 150 C 180 180, 220 220, 250 250 M 50 250 C 80 220, 120 180, 150 150 C 180 120, 220 80, 250 50 Z" stroke="black" stroke-width="2" fill="none"/>
</svg>

这段代码是一个 SVG 路径，它描述了一个由两条曲线组成的闭合形状。让我们逐步解释代码：

  • M 50 50: 这是路径的起点，指定了路径的起始坐标（x=50, y=50）。
  • C 80 80, 120 120, 150 150: 这是一个三次贝塞尔曲线的命令，用于绘制路径的第一条曲线。它的控制点为 (80, 80) 和 (120, 120)，终点为 (150, 150)。
  • C 180 180, 220 220, 250 250: 这是另一个三次贝塞尔曲线命令，用于绘制路径的第二条曲线。它的控制点为 (180, 180) 和 (220, 220)，终点为 (250, 250)。
  • M 50 250: 这是一个新的路径起点，位于 (50, 250) 处。
  • C 80 220, 120 180, 150 150: 这是另一个三次贝塞尔曲线命令，用于绘制路径的第三条曲线。它的控制点为 (80, 220) 和 (120, 180)，终点为 (150, 150)。
  • C 180 120, 220 80, 250 50: 这是最后一条三次贝塞尔曲线命令，用于绘制路径的第四条曲线。它的控制点为 (180, 120) 和 (220, 80)，终点为 (250, 50)。
  • Z: 这是路径命令，用于闭合路径，从最后一个终点连接到起点。

因此，这个路径由两个曲线组成，它们交叉在 (150, 150) 处，形成一个凸起的交点。如果您将此路径描绘出来，您将会看到一个由两个凸起的曲线组成的形状，中间形成了一个尖锐的交点。

C 80 80, 120 120, 150 150为什么从80开始，而不是50

C 是三次贝塞尔曲线命令，用于绘制平滑的曲线段。它有两个控制点来控制曲线的形状，这些控制点可以使曲线弯曲，扭曲或变形。

在这个路径中，M 50 50 指定了路径的起点 (50, 50)。然后，第一个 C 命令的第一个控制点是 (80, 80)，这意味着曲线会从起点 (50, 50) 开始向 (80, 80) 弯曲。第二个控制点 (120, 120) 是更远的点，它进一步弯曲曲线。最终，曲线结束于 (150, 150)。

因此，C 80 80, 120 120, 150 150 中的 80 80 不是起点，而是曲线的第一个控制点。如果您需要从起点开始的平滑曲线，请在第一个 C 命令之前添加 L 命令来指定线段的终点，例如 L 80 80。然后，第一个 C 命令的第一个控制点将是终点 (80, 80)，这样就会从起点开始绘制平滑的曲线。

svg图片viewbox

viewBox第一个参数时是x轴位置，从右往左减少，第二个参数是y轴位置，从上往下减少

html
<svg onload="Init('4E4A2EE6B19FE88B8F5FE99D92E9BE99E5B1B1E58F982E6661632E7069632E67');" viewBox="-90.40000000000005 347.599999999999966 2153 1169" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:web="http://www.naritech.cn">

<svg onload="Init('4E4A2EE6B19FE88B8F5FE99D92E9BE99E5B1B1E58F982E6661632E7069632E67');" viewBox="-90.40000000000005 347.599999999999966 2153 1169" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:web="http://www.naritech.cn">

Released under the MIT License.

Copyright © 2022.4-2024.5