跳至主要內容
Html

Html

1. Html介绍

  • 超文本标记语言（HyperText Markup Language）不是编程语言
  • 超文本指页面可以包含图片、链接等非文字内容，比普通文本更强大
  • 标记就是使用标签的方法将需要的内容包起来。使用一组标签对内容进行描述的语言
  • 标签不区分大小写，建议小写，扩展名html或htm
  • HTML：它是整个网站的骨架。
  • CSS：它是对整个网站骨架的内容进行美化(修饰)
  • Javascript：它能够让整个页面具有动态效果。
HeChuangJun大约 5 分钟前端Html
CSS

CSS介绍

  • cascacing style sheet层叠样式表
  • 用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
  • 样式：给HTML标签添加需要显示的效果，通常存储在样式表中
  • 层叠：使用不同的添加方式給同一个HTML标签添加样式，最后所有的样式叠在一起共同作用于该标签

CSS使用

3.png
3.png
HeChuangJun大约 26 分钟前端CSS
Html

Html介绍

  • 超文本标记语言（HyperText Markup Language）不是编程语言
  • 超文本指页面可以包含图片、链接等非文字内容，比文本强大，标记指使用标签的方法将内容包起来
  • 标签不区分大小写，建议小写，扩展名html或htm
  • HTML：网站的骨架、CSS：美化网站的骨架、Javascript：让页面具有动态效果

开发环境（调试、Emmet写法、PxCook）

安装vscode（安装打开网页插件open in browser，汉化菜单插件Chinese）、Chrome浏览器
调试工具：检查、调试代码，发现并解决代码问题
F12 或 浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查，黄色表示属性有错误
4.png

HeChuangJun大约 10 分钟前端Html
Less

介绍

在px单位转换到rem单位过程中，除法运算难。CSS不支持计算写法。可以通过Less实现。

  • Less是一个CSS预处理器，Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力
  • 注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件
  • VS Code 插件：Easy LESS，保存 less文件后自动生成对应的 CSS 文件
  • less注释：
    • 单行注释：语法：// 注释内容，快捷键：ctrl + /
    • 块注释：语法：/* 注释内容 */快捷键： Shift + Alt + A
HeChuangJun大约 2 分钟前端Less
立体呈现
<!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>立体呈现</title>
    <style>
      .cube {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        transition: all 2s;
        transform-style: preserve-3d;
        /* 旋转与案例效果无关，用来看前后移动的效果 */
        /* transform: rotateY(89deg); */
      }
      .cube div {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
      }
      .front {
        background-color: orange;
        transform: translateZ(100px);
      }
      .back {
        background-color: green;
        transform: translateZ(-100px);
      }
      .cube:hover {
        transform: rotateY(90deg);
      }
    </style>
  </head>
  <body>
    <div class="cube">
      <div class="front">前面</div>
      <div class="back">后面</div>
    </div>
  </body>
</html>
HeChuangJun小于 1 分钟前端CSS