前端语言协作配合与HTML5 ｜ 青训营

江漓Jeffrey
51 阅读2分钟

前端语言协作配合

CSS in HTML

"CSS in HTML"是指在HTML文件中直接使用style​属性、​标签来以及引入外部样式表定义和应用样式。 

 <style>
    h1 {
      color: blue;
    }
 </style>

<h1 style="color: blue;">Hello, World!</h1>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

JS in HTML与HTML in JS

"js in html"是指在HTML文件中嵌入JavaScript代码，而"html in js"是指在JavaScript代码中生成HTML内容。

CSS in JS

"CSS in JS"是指使用JavaScript来管理和应用样式。通过将样式定义为JavaScript对象，然后在组件中动态地应用这些样式。这方面的例子就是JSS

JSS 官网：JSS

jsx把js和DOM写在了一起，而jss却要把js+css+DOM写在一块。例子：

Button.jsx using JSS:

import { jsx, css } from '@emotion/react';

const Button = ({ children }) => {
  const buttonStyles = css`
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  `;

  return (
    <button css={buttonStyles}>
      {children}
    </button>
  );
};

export default Button;

HTML5

H5是HTML5吗？

HTML5虽然简称“H5”，但通常说的H5并不是指HTML5，而是一种移动端的营销活动网页，在微信平台中比较多，能在微信内部浏览器打开。

HTML知识

  1. head标签

    title：标题，全局唯一

    base：向页面所有相对URL提供前缀，全局唯一，不建议使用

    meta：通常是约定好的键值对，例外：charset、http-equiv

    link：rel决定类型，href决定引入地址

    script：type指定MIME类型，可内嵌代码，可外链文件

  2. html aria

    HTML ARIA（Accessible Rich Internet Applications）是一种用于增强Web应用程序可访问性的技术规范。它为开发人员提供了一组属性和角色，用于描述Web页面上的交互元素，以便能够更好地支持残障人士和辅助技术设备的使用，它也可以为我们设计UI系统提供指导意义。

HTML5

  1. 语义化标签

    如<header> <footer> <nav> <article>等。

  2. 表单增强

    HTML5对表单元素进行了增强，引入了一些新的表单类型和属性。例如，<input>元素的type属性新增了email、url、date等类型，使得表单验证更加方便。

  3. 本地存储

    HTML5引入了本地存储机制，包括localStorage和sessionStorage。

  4. Web存储

    HTML5引入了Web存储API，包括IndexedDB和Web SQL Database。这些API提供了一种在客户端存储和检索结构化数据的方式，类似于传统的数据库。

  5. 视频和音频支持

    提供了​和​标签。

  6. 画布(Canvas)

    ​​元素可以用于绘制图形、动画和游戏等。

  7. Web Workers

    Web Workers允许在后台运行脚本，不会阻塞页面的交互。这对于处理复杂的计算任务或大量数据的处理非常有用。

...

avatar
文章
阅读
粉丝