尚硅谷_前端基础2023（HTML5+CSS3

用户31290622395
119 阅读2分钟

一、HTML5 高级特性

简介：HTML5 引入了许多语义化标签，使网页结构更加清晰，有助于SEO和可访问性。

尚硅谷禹神HTML+CSS前端基础_优课it

  • 常用标签：

    • <header>：页面或区域的页眉。
    • <nav>：导航链接部分。
    • <main>：主要内容区域。
    • <article>：独立的内容块，如博客文章、新闻报道等。
    • <section>：文档中的一个区域或节。
    • <aside>：侧边栏或与主要内容相关的内容。
    • <footer>：页面或区域的页脚。

  • 应用场景：提高网页的可读性和SEO效果。

2. 多媒体元素

  • <video> 和 <audio> 标签：

    • 属性：src, controls, autoplay, loop, muted, poster（视频）等。

    • 格式支持：MP4, WebM, Ogg（视频）；MP3, WAV, Ogg（音频）。

    • 示例：

      html
取消自动换行
复制
<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

  • <canvas> 标签：

    • 用途：用于绘制图形、动画和游戏。

    • JavaScript API：提供丰富的绘图功能。

    • 示例：

      html
取消自动换行
复制
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(10, 10, 150, 80);
</script>

3. 表单增强

  • 新输入类型：

    • email, url, tel, number, range, date, time, color等。

    • 示例：

      html
取消自动换行
复制
<input type="email" name="email" placeholder="Enter your email">

  • 新属性：

    • placeholder, required, pattern, min, max, step, autocomplete等。

    • 示例：

      html
取消自动换行
复制
<input type="password" name="password" placeholder="Enter your password" required>

  • 表单验证：利用HTML5的验证功能，减少JavaScript代码。

4. 本地存储（Web Storage）

  • Local Storage：

    • 特点：持久化存储，数据不会随浏览器关闭而消失。
    • API：localStorage.setItem(key, value), localStorage.getItem(key), localStorage.removeItem(key), localStorage.clear()。

  • Session Storage：

    • 特点：会话级存储，数据在浏览器会话结束时消失。
    • API：sessionStorage.setItem(key, value), sessionStorage.getItem(key), sessionStorage.removeItem(key), sessionStorage.clear()。

  • 应用场景：保存用户偏好、缓存数据等。

5. 地理定位（Geolocation）

  • API：navigator.geolocation.getCurrentPosition(success, error, options)。

  • 示例：

    javascript
取消自动换行
复制
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Latitude: " + position.coords.latitude);
    console.log("Longitude: " + position.coords.longitude);
  });
} else {
  console.log("Geolocation is not supported by this browser.");
}

6. Web Workers

  • 简介：允许在后台线程中运行脚本，不阻塞主线程。

  • 用途：处理复杂计算、数据处理等。

  • 示例：

    javascript
取消自动换行
复制
// main.js
var worker = new Worker('worker.js');
worker.postMessage('Start');
worker.onmessage = function(event) {
  console.log('Received: ' + event.data);
};

// worker.js
onmessage = function(event) {
  if (event.data === 'Start') {
    // 模拟复杂计算
    var result = 0;
    for (var i = 0; i < 1000000; i++) {
      result += i;
    }
    postMessage(result);
  }
};

二、CSS3 高级特性

1. 选择器

  • 属性选择器：

    • element[attribute="value"], element[attribute^="value"], element[attribute$="value"], element[attribute*="value"]等。

  • 伪类选择器：

    • :nth-child(), :nth-of-type(), :first-child, :last-child, :not(), :hover, :active, :focus等。

  • 伪元素选择器：

    • ::before, ::after, ::first-letter, ::first-line等。

  • 示例：

    css
取消自动换行
复制
/* 属性选择器 */
input[type="email"] {
  border-color: blue;
}

/* 伪类选择器 */
li:nth-child(2n) {
  background-color: #f0f0f0;
}

/* 伪元素选择器 */
p::first-letter {
  font-size: 2em;
}

2. Flexbox

  • 简介：一种一维布局模型，用于在容器中分配空间和排列子元素。

  • 主要属性：

    • display: flex;
    • flex-direction: row, column, row-reverse, column-reverse.
    • justify-content: flex-start, flex-end, center, space-between, space-around.
    • align-items: flex-start, flex-end, center, baseline, stretch.
    • flex-grow, flex-shrink, flex-basis, flex.

  • 示例：

    css
取消自动换行
复制
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.item {
  flex: 1;
  margin: 10px;
}

3. Grid Layout

  • 简介：一种二维布局模型，用于在容器中创建网格布局。

  • 主要属性：

    • display: grid;
    • grid-template-columns, grid-template-rows.
    • grid-gap, grid-row-gap, grid-column-gap.
    • grid-row, grid-column.
    • justify-items, align-items, justify-content, align-content.

  • 示例：

    css
取消自动换行
复制
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.item {
  background-color: #ccc;
  padding: 20px;
}

4. 响应式设计

  • 媒体查询（Media Queries） ：

    • 简介：根据设备特性（如屏幕宽度、分辨率）应用不同的样式。

    • 语法：

      css
取消自动换行
复制
@media (max-width: 768px) {
  /* 样式 */
}

    • 示例：

      css
取消自动换行
复制
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

  • 响应式单位：

    • vw, vh, vmin, vmax, %, rem, em等。

  • 响应式图片：

    • 使用srcset和picture标签实现不同分辨率的图片加载。

5. 过渡与动画

  • 过渡（Transitions） ：

    • 属性：transition-property, transition-duration, transition-timing-function, transition-delay.

    • 示例：

      css
取消自动换行
复制
.button {
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #ff0000;
}

  • 动画（Animations） ：

    • 关键帧（@keyframes） ：

      css
取消自动换行
复制
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

    • 应用动画：

      css
取消自动换行
复制
.fadeIn {
  animation: fadeIn 1s ease-in-out;
}

    • 动画属性：animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode.

6. 预处理器

  • Sass/SCSS：

    • 变量、嵌套、混入（Mixins） 、继承等。

  • Less：

    • 类似Sass，提供变量、嵌套、混入等功能。

  • 示例（Sass）：

    scss
取消自动换行
复制
$primary-color: #ff0000;
.container {
  .header {
    background-color: $primary-color;
  }
  .footer {
    background-color: lighten($primary-color, 20%);
  }
}

7. CSS变量

  • 简介：CSS自定义属性，允许在CSS中定义变量，提高样式的可维护性。

  • 语法：

    css
取消自动换行
复制
:root {
  --primary-color: #ff0000;
  --secondary-color: #00ff00;
}
.button {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

8. CSS预处理器与后处理器

  • 预处理器：如Sass, Less, Stylus等。
  • 后处理器：如PostCSS，提供插件化的CSS处理，如自动添加前缀、压缩CSS等。
avatar
文章
阅读
粉丝