前端三件套HTML+CSS+JS

最新推荐文章于 2024-08-10 10:42:27 发布
最新推荐文章于 2024-08-10 10:42:27 发布
阅读量1.2k 收藏 22
点赞数 18
分类专栏： 前端 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rainxxbow/article/details/135305670
版权

​

HTML

作用

HTML（HyperText Markup Language）技术主要用于解决以下问题：

  1. 内容结构化：HTML通过一系列标签定义文档的结构，允许开发者将文本、图像、音频、视频等各种媒体元素以及链接、列表、表格等组织成具有逻辑层次和关系的网页内容。

  2. 网页标准化：作为一种标准标记语言，HTML为创建和展示网页提供了一套统一的规则和语法，确保不同浏览器和设备能够一致地解析和渲染网页内容，从而促进信息在互联网上的互操作性。

  3. 可访问性：HTML标签有助于提升网页内容的可访问性，使得辅助技术（如屏幕阅读器）可以更好地理解页面结构，并向视觉障碍用户或其他特殊需求群体传达信息。

  4. 跨平台展示：HTML文件是自包含的，能够在各种操作系统、浏览器和设备上呈现内容，支持跨平台的Web应用开发和移动友好设计。

总之，HTML的核心作用在于定义网页内容的结构和意义，它是构成万维网（WWW）信息的基本单元，并与其他Web技术共同构成了现代Web应用程序开发的基础架构。

入门学习清单

HTML基础知识学习阶段

  1. 理解文档结构：

    • 学习并实践基本的HTML5文档模板，包括<!DOCTYPE>、<html>标签以及内部的<head>和<body>元素。

  2. 掌握基础标签：

    • 学习并使用文本内容相关的标签：标题（<h1>至<h6>）、段落（<p>）、换行（<br>）、水平线（<hr>）等。
    • 了解相对路径与绝对路径的区别。

  3. 语义化元素：

    • 理解并运用HTML5新增的语义化元素，如<header>、<footer>、<nav>、<section>、<article>等。

  4. 内联与块级元素：

    • 区分并掌握内联元素（如<span>）和块级元素（如<div>）的特点及应用场景。

  5. 注释与文档元数据：

    • 学习如何在HTML中添加注释（<!-- -->）。
    • 设置文档标题（<title>）和其他元数据（如字符集声明<meta charset="UTF-8">）。

  6. 属性与属性值：

    • 掌握常用HTML标签的各种属性及其作用，例如class、id、style、href、src等。

  7. 嵌套与组合：

    • 练习将多个元素合理地嵌套和组合以实现复杂页面布局。

文档结构

HTML（HyperText Markup Language）的文档结构是一种层级化的组织形式，它定义了网页内容的基本框架。每个HTML文档都遵循一个标准模板，确保浏览器能够正确解析和显示页面内容。以下是HTML文档的基本结构：

  1. 文档类型声明 (Document Type Declaration, DOCTYPE)：

    <!DOCTYPE html>

    这是HTML文档的第一行，用于告知浏览器当前文档遵循的是哪种HTML版本的标准。对于现代HTML5文档，声明通常是上面所示的简单形式。

  2. HTML根元素 (html 标签)：

    <html>
  <!-- 文档内容放置在这里 -->
</html>

    html 元素作为所有其他元素的容器，标志着HTML文档的开始与结束。

  3. 头部部分 (head 标签)：

    <head>
  <!-- 头部信息放置在这里 -->
</head>

    head 部分包含不直接显示在页面上的元数据，如：

    • 文档标题 (title)：显示在浏览器标签页上，也影响搜索引擎结果中的标题。
    • Meta信息：例如字符集声明、视口设置、关键词、描述等，用于告诉浏览器或搜索引擎关于页面的一些基本信息。
    • 链接外部资源：如CSS样式表（通过link标签）、JavaScript文件（通过script标签，通常会使用src属性引用外部文件，并且可能带有defer或async属性控制脚本加载执行时机）。
    • 页面图标链接：通过<link rel="icon" href="favicon.ico">添加。

  4. 主体部分 (body 标签)：

    <body>
  <!-- 页面可见内容放置在这里 -->
</body>

    body 标签内包含的所有内容将实际显示在网页中，包括文本、图像、音频、视频、表格、列表、表单元素等。这部分的内容可以根据需要嵌套多个HTML元素来构建复杂的布局和功能。

总结来说，一个完整的HTML5文档结构如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <!-- 其他头部信息 -->
    <link rel="stylesheet" href="styles.css">
    <script src="scripts.js" defer></script>
  </head>
  <body>
    <!-- 网页的实际内容 -->
    <header>
      <!-- 页面头部内容 -->
    </header>
    <main>
      <!-- 主要内容区域 -->
    </main>
    <footer>
      <!-- 页面底部内容 -->
    </footer>
  </body>
</html>

这个结构保证了网页信息的逻辑性和可读性，有助于浏览器正确解析和渲染页面，同时也有利于SEO优化和辅助技术对内容的理解。

基础标签

标题

关于HTML的标题，是一个浏览器打开一个网页之后，在导航中显示的内容
其标签为：

<title></title>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>欢迎来到我的个人博客 - 关于我</title>
  <!-- 其他头部元素例如样式表、脚本等 -->
</head>
<body>
  <!-- 页面主体内容 -->
</body>
</html>

段落

关于HTML的段落，就是一个文章的段段落意思
标签：

<p></p>

示例：

<p>这是一个段落。它包含了一些文本内容，用来展示网页上的普通段落格式。</p>

换行

由于显示的每行内容有限，因此需要将多余的内容分配到下一行进行显示。
标签：

<br>

示例：

<p>这是第一行文字<br>
这是第二行文字<br>
这是第三行文字</p>

水平线

水平线是为了划分不同的内容，从而形成的一条线
标签：

<hr>

示例：

<p>这是段落一的内容。</p>
<hr>
<p>这是段落二的内容。</p>

还有更多标签，请参考官网了解：HTML5

相对路径和绝对路径

在计算机文件系统和网页开发中，路径是用来定位文件或目录位置的一种表示方式。相对路径与绝对路径是两种不同的路径表达方法。

绝对路径（Absolute Path）

  • 绝对路径是从根目录开始的完整路径描述，指明了从文件系统的最顶层（通常是指硬盘分区或者服务器的主目录）到目标文件或目录所经过的所有子目录。
  • 例如，在Windows系统中，一个绝对路径可能如下所示：
    C:\Users\username\Desktop\file.txt
  • 在Linux或类Unix系统中，绝对路径示例为：
    /home/user/documents/project/report.pdf
  • 在Web开发中，绝对URL则是从协议（如http://、https://）和域名开始，包括所有子目录直到指定资源的完整地址：
    https://www.example.com/images/logo.png

相对路径（Relative Path）

  • 相对路径则是相对于当前工作目录（对于操作系统而言）或当前文档（对于Web页面而言）的位置来指定文件或目录的路径。
  • 如果当前位置是在同一个目录下引用文件，则只需要提供文件名：
    file.txt
  • 如果要向上一级目录，可以使用 .. 来表示父目录：
    ../images/logo.png
  • 在Web开发中，相对URL基于当前网页所在目录：
    • 同级目录下的文件：./images/logo.png
    • 上一级目录：../css/style.css
    • 子目录中的文件：subfolder/page.html

总结来说，绝对路径独立于当前的工作目录或网页上下文，而相对路径则依赖于当前的位置来确定目标文件的位置。在选择使用哪种路径时，需要考虑的是移植性、维护性和程序运行环境等因素。

语义化元素

HTML5引入了一系列新的语义化元素，这些元素旨在提供网页内容更清晰的结构和意义，从而有助于搜索引擎优化、可访问性和开发者对内容更好的理解。以下是部分重要的HTML5新增语义化元素及其作用：

  1. <header>：定义文档或页面的一个头部区域，通常包含导航链接、logo、页面标题或其他介绍性内容。

  2. <footer>：表示文档或页面底部，常用于放置版权信息、联系方式、二次导航等附加信息。

  3. <nav>：专门用来包裹一组导航链接，明确表示这部分内容是网站的主要导航菜单或者相关链接列表。

  4. <section>：定义文档中的一个独立区块，每个区块可以有自己的标题和其他子内容，代表了文档结构上的一个逻辑部分，如章节、小节或专题区域。

  5. <article>：用于封装独立、完整且可重用的内容片段，比如博客文章、论坛帖子或新闻报道，它能自成一体，并且可以独立于其他内容被分发和引用。

  6. <aside>：定义与页面主要内容相关的侧栏或补充内容块，例如侧边栏、注解或广告模块。

  7. <figure> 和 <figcaption>：<figure> 标签用于封装图像、图表或其他媒体内容以及其配套说明文字（由 <figcaption> 提供），这样可以将图文作为一个独立单元处理。

  8. <main>：定义整个文档或应用的主要内容区域，不包括像导航栏、页脚或侧边栏这样的辅助性内容。

  9. <mark>：用于高亮文本，表示文本的某个部分需要特别关注或强调。

  10. <time>：用来表示日期和/或时间，支持机器可读的时间格式，并可通过datetime属性提供具体的日期和时间值。

通过使用这些语义化的标签，开发者能够更好地组织网页内容，提高代码可读性，同时也有利于搜索引擎爬虫理解页面结构，提升SEO效果，以及辅助技术设备正确识别并传达给用户页面的重要信息。

内联和块级元素

内联元素（Inline Elements）和块级元素（Block-level Elements）是HTML中两种不同类型的元素，它们主要在文档流、布局和样式应用上有着显著区别。

内联元素（Inline Elements）

  • 特点：

    • 内联元素不会从新的一行开始显示，而是与文本流保持在同一行。
    • 它们的宽度和高度通常由内容决定，并且无法直接设置宽高属性（可以使用CSS width 和 height，但效果不一定符合预期）。
    • 内联元素的左右margin和padding会生效，但上下margin和padding不会产生垂直空白空间，除非使用了特定CSS样式如display属性进行修改。
    • 多个连续的内联元素会在一行内按照顺序排列直到行尾，然后自动换行。

  • 常见内联元素：<a>（链接）、<span>（无特殊含义的行内容器，常用于添加样式或JavaScript操作）、<img>（图像）、<input>（表单输入控件）、<button>（按钮）、<strong>（强调文本，加粗）、<em>（着重文本，斜体）等。

  • 应用场景：

    • 在文本中插入链接、图片或者对文本片段进行样式修饰时常用到内联元素。
    • 使用<span>来包裹一小段文本或者与其他内联元素组合，以便通过CSS为这些部分应用独立样式或进行JavaScript操作。

块级元素（Block-level Elements）

  • 特点：

    • 块级元素默认情况下独占一行，在页面上以新行开始并结束，相邻的块级元素会各自占据单独的一行。
    • 可以直接设置宽高（width 和 height），并且默认宽度自动填满其父容器宽度，除非设置了固定宽度。
    • 块级元素可以包含内联元素和其他块级元素，并且可以设置内外边距（margin和padding），这些边距会产生水平和垂直方向上的空白区域。

  • 常见块级元素：<div>（通用块级容器）、<p>（段落）、<h1>至<h6>（标题）、<form>（表单）、<ul>、<ol>及<li>（列表）、<table>（表格）等。

  • 应用场景：

    • 布局设计中广泛使用<div>作为区块划分和布局的主要工具，它可以方便地创建和组织网页的不同部分。
    • 文档结构中，<p>标签用来表示段落，而<h1>至<h6>则用于定义不同级别的标题。
    • 创建分块内容区域，例如新闻列表、产品展示区、页脚信息等场景下都会用到块级元素。

总结来说，内联元素主要用于文本流中的内容嵌入和装饰，而块级元素则是构建网页布局和分隔不同内容区域的核心组件。理解这两种元素的特性有助于开发者更好地控制网页结构和样式。

注释与文档元注解

在HTML（以及许多编程语言中）中，注释和文档元数据是两种用于提供额外信息的不同方式。

注释 (Comments)：

  • 注释是在源代码中插入的文本，对于浏览器来说是不可见的，仅对开发者有意义。它们的作用是解释、说明或记录代码的功能、目的或者任何有助于理解代码的信息。
  • 在HTML中创建注释的方法是使用<!--开始，-->结束。例如：
    <!-- 这是一个注释，它不会在页面上显示 -->
<p>这是一段可见的文本。</p>
  • 注释主要用于提高代码可读性，方便团队协作时交流代码意图，也可以用来临时禁用某段代码而不删除（通过注释掉不希望执行的部分）。

文档元数据 (Metadata)：

  • 文档元数据是指关于HTML文档本身的非可视信息，这些信息通常位于HTML文档的<head>部分，主要服务于浏览器和搜索引擎等工具，而不是直接给用户看的。
  • 元数据的例子包括：
    • <title>：定义网页标题，出现在浏览器标签页和搜索结果中。
    • <meta>标签：用于提供文档字符集、描述、关键词、作者信息、viewport设置等。
      <meta charset="UTF-8">
<meta name="description" content="这是一个关于网页元数据的示例页面">
<meta name="keywords" content="元数据, HTML, Meta tags">
    • 链接CSS样式表或JavaScript文件，虽然它们不是严格意义上的元数据，但属于文档头部控制整体渲染效果的重要资源引用。

总结起来，注释是为了帮助开发人员理解和维护代码而存在的内部文档形式，而文档元数据则提供了有关HTML文档本身属性、内容摘要以及其他对浏览器和搜索引擎有用的信息。

标签属性和属性值

HTML标签的属性（Attribute）是用来提供额外信息或设置特定行为的修饰符，它们附加在HTML元素（Tag）上，以改变元素的行为、外观或意义。每个属性都有一个名字和值，值通常被放在等号（=）后面，并且用引号（单引号或双引号）括起来。

属性与属性值的基本结构：

<tag attribute="value" other-attribute='another value' ...>
   <!-- 标签内容 -->
</tag>

例如：

<a href="https://example.com" target="_blank">访问网站</a>

在这个例子中：

  • <a> 是标签。
  • href 是一个属性，它的值是 "https://example.com"，表明链接的目标URL。
  • target 也是一个属性，其值为 _blank，指示浏览器在新窗口或标签页中打开链接。

常见属性及其作用：

  1. src - 在图片（<img>）或其他媒体元素上使用，指定资源的位置。
  2. href - 在链接（<a>）上使用，定义超链接目标地址。
  3. alt - 图片（<img>）标签中的属性，用于提供图片无法加载时的替代文本描述。
  4. class 和 id - 分别用于给元素添加类名和唯一标识符，常用于CSS样式选择器或者JavaScript操作。
  5. title - 提供鼠标悬停时显示的提示信息，可用于任何元素。
  6. style - 直接在HTML内定义元素的内联样式。
  7. type - 用于脚本（<script>）和样式表（<link rel="stylesheet">）等，指定文件类型或MIME类型。
  8. name 和 value - 在表单元素（如<input>、<button>等）中，用来定义控件名称和提交数据的值。
  9. width 和 height - 在图像、视频等元素中定义尺寸大小。

以上只是部分示例，实际上HTML提供了大量的属性来控制各种功能和表现形式。每个属性都是为了扩展基础标签的功能，使其能够更好地适应网页设计和交互需求。

嵌套和组成

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 元数据区域：定义文档标题、字符集和样式表链接 -->
  <meta charset="UTF-8">
  <title>HTML嵌套与组合示例</title>
  <link rel="stylesheet" href="styles.css"> <!-- 引入外部CSS文件 -->

  <!-- 使用自定义元数据描述网页内容 -->
  <meta name="description" content="这是一个关于HTML标签嵌套与组合的示例页面">
</head>

<body>
  <!-- 块级元素（如div）可以包含内联元素和其他块级元素 -->
  <div id="main-container">
    <!-- header区域，通常包含导航等信息 -->
    <header>
      <h1>网站标题</h1>
      <!-- 内联元素（如a）在行内显示 -->
      <nav>
        <ul>
          <!-- li元素嵌套在ul中构成无序列表 -->
          <li><a href="#section1">章节一</a></li>
          <li><a href="#section2">章节二</a></li>
          <li><a href="#section3">章节三</a></li>
        </ul>
      </nav>
    </header>

    <!-- section用于逻辑上独立的内容区块 -->
    <section id="section1">
      <h2>章节一标题</h2>
      <!-- p元素嵌套在section中作为段落 -->
      <p>这是章节一的内容...</p>
      
      <!-- article元素表示独立的文章或内容模块 -->
      <article>
        <h3>子主题</h3>
        <p>这里是一个子主题的详细内容...</p>
      </article>
    </section>

    <!-- 同样地，其他section和嵌套结构会按照此模式进行组织 -->
    <!-- ... -->
    
    <!-- footer区域，通常包含版权、联系方式等 -->
    <footer>
      <p>版权所有 © 2023 示例网站。保留所有权利。</p>
    </footer>
  </div>
  
  <!-- 引入外部JavaScript文件 -->
  <script src="scripts.js"></script>
</body>
</html>

这个示例展示了如何使用HTML标签来构建一个结构化的网页，其中包含了不同层级的嵌套关系以及块级元素和内联元素的组合。通过合理地嵌套和组合这些标签，可以创建出有良好语义化、易维护且可读性强的HTML代码。

CSS

作用

CSS（层叠样式表，Cascading Style Sheets）技术主要是为了解决网页内容的表现形式和布局问题。在网页开发中，HTML用于定义网页的结构和内容，但无法精确控制这些内容的显示方式，如颜色、字体、大小、间距、布局等视觉样式特征。CSS正是为了将内容与表现分离而设计的一种样式语言。

通过CSS，开发者可以：

  1. 统一样式：为整个网站或特定部分设置一致的外观和格式，提高代码复用性和可维护性。
  2. 布局控制：实现复杂的页面布局，包括浮动布局、定位布局、Flexbox布局以及Grid布局等。
  3. 响应式设计：根据不同的设备和屏幕尺寸调整布局和样式，以适应不同分辨率和方向的屏幕。
  4. 增强可访问性：通过明确区分视觉样式和内容，有助于辅助技术更好地解析网页，提升残障用户访问体验。
  5. 动画与交互：CSS还可以添加动态效果，比如过渡效果、动画以及一些简单的交互行为。

总的来说，CSS让网页设计师能够独立于内容来控制网页的展示效果，并且提供了更加灵活和强大的设计能力。

学习清单

  1. 了解CSS概念与作用：

    • 学习CSS的基本原理，为何需要将结构（HTML）与表现（CSS）分离。
    • 了解层叠、继承和优先级等基本概念。

  2. CSS语法结构：

    • 学习如何编写CSS规则：选择器 + {} 内的属性声明。
    • 学习不同类型的CSS选择器（标签选择器、类选择器、ID选择器、通用选择器等）。

  3. 基本样式设置：

    • 文本样式（字体、颜色、大小、行高、对齐方式等）。
    • 背景（颜色、图像、重复、位置、附着等）。
    • 颜色表示方法（RGB、RGBA、HEX、HSL、HSLA）。

  4. 盒模型：

    • 内容区域、内边距、边框和外边距的概念及计算方式。
    • box-sizing 属性的作用和影响。

  5. 布局初步：

    • 浮动（floats）及其在布局中的应用。
    • 定位（positioning）：static、relative、absolute、fixed。
    • 显示模式（display property）：block、inline、inline-block等。

CSS概念

CSS（层叠样式表）的基本原理和结构与表现分离的原则是现代Web开发的核心理念之一。其核心目标在于提升网页内容的可维护性、可扩展性和适应性，以及实现更好的用户体验。

CSS基本原理：

  1. 层叠性（Cascading）：
    CSS遵循一种特定的优先级规则，通过“层叠”机制来决定哪些样式应用于元素。当多个选择器对同一个HTML元素设置了不同的样式时，浏览器会按照一定的优先级顺序进行应用，这个顺序基于选择器类型、是否为内联样式、是否使用了!important声明等因素。

  2. 继承（Inheritance）：
    CSS允许样式从父元素传递给子元素。例如，如果一个段落（<p>）的字体颜色被设置为红色，那么该段落内的所有文本也将默认为红色，除非有更具体的样式覆盖它。

  3. 样式表链接与引入：
    CSS可以以外部文件（.css）的形式与HTML文档关联，也可以嵌入在HTML文档的<style>标签内，甚至可以直接写在HTML元素的style属性中。外部样式表使样式和结构分离，并能跨多个页面复用样式。

结构与表现分离的重要性：

  • 提高可维护性：
    将内容（HTML）与样式（CSS）分开后，设计人员可以专注于页面布局和视觉效果的调整，而不会影响到实际内容。同时，内容编辑者可以修改或添加内容，而不必担心破坏整体布局。

  • 代码重用与模块化：
    分离后，可以编写独立的CSS文件来定义主题或组件样式，这些样式可以在整个网站中重复使用，减少代码冗余，提高开发效率。

  • 利于SEO与可访问性：
    结构清晰的HTML文档有利于搜索引擎抓取和理解内容，同时也有助于辅助技术更好地解析网页，从而提高残障用户获取信息的能力。

  • 方便改版与升级：
    当需要更新网站整体风格时，只需改动CSS文件，而无需逐一修改HTML文档中的内嵌样式。这使得网站改版变得简单且可控。

  • 响应式设计：
    在移动优先的设计策略下，CSS可以根据不同设备屏幕尺寸和方向提供不同的样式，确保内容能在各种环境下优雅呈现。

因此，将HTML和CSS分离是现代Web开发的最佳实践，旨在提高代码质量、降低维护成本，并最终提升用户体验。

CSS语法

编写CSS规则的核心是将选择器与属性声明结合起来，以定义特定HTML元素的样式。以下是详细的步骤和解释：

1. 选择器（Selectors）
选择器用于指定要应用样式的HTML元素、类或ID等。根据目标元素的不同特性，可以选择不同的选择器类型：

  • 元素选择器：直接基于HTML标签名称来选择元素，例如 h1 将匹配所有一级标题。

    h1 {
  /* 属性声明 */
}

  • 类选择器：使用.（点符号）后跟类名来选择具有该类的所有元素。

    .my-class {
  /* 属性声明 */
}

  • ID选择器：使用#号后跟ID名来选择具有该ID的唯一元素。

    #my-id {
  /* 属性声明 */
}

  • 组合选择器：可以组合上述基本选择器以实现更精确的选择，例如后代选择器、子代选择器、相邻兄弟选择器等。

    div p { /* 所有在div内的段落 */
  /* 属性声明 */
}

.parent > .child { /* 类名为child且是类名为parent直接子元素的元素 */
  /* 属性声明 */
}

a + b { /* 相邻兄弟选择器，选择所有紧跟在a元素后面的第一个b元素 */
  /* 属性声明 */
}

2. 属性声明（Property Declarations）
在花括号 {} 内部，你可以列出一系列的属性及其对应的值。每个属性声明由以下两部分组成：

  • 属性名：指明要改变的CSS属性，如 color（颜色）、font-size（字体大小）、background-color（背景颜色）等。

  • 属性值：设置该属性的具体样式，如 red、16px、#333 等。值的类型包括文本值、数字值、颜色值以及各种长度单位（像素、百分比、em/rem等）。

.example-selector {
  color: red; /* 设置文本颜色为红色 */
  font-size: 16px; /* 设置字体大小为16像素 */
  background-color: #333; /* 设置背景颜色为深灰色 */
}

3. 示例综合应用

下面是一个实际的例子，它设置了类为 .container 的元素的背景颜色、内边距以及内部所有段落（p）的字体颜色：

.container {
  background-color: lightblue; /* 容器背景色 */
  padding: 20px; /* 内边距 */
}

.container p {
  color: darkgreen; /* 容器内段落文字颜色 */
}

这样，当浏览器解析到这些CSS规则时，就会按照所选中的元素来应用相应的样式。

基本样式设置

在CSS中，基础样式设置包括但不限于对文本、颜色、字体、尺寸、布局以及元素可见性等方面的控制。以下是一些常见的基础样式属性及其用途：

  1. 文本相关样式

    • color：用于设置文本颜色，可以使用预定义的颜色名称（如 red）、RGB/RGBA值、十六进制颜色代码等。
      p {
  color: blue;
}
    • font-family：指定文本的字体系列，可以是多个字体以备浏览器按顺序解析和渲染。
      body {
  font-family: Arial, sans-serif;
}
    • font-size：设置文本的大小，可以使用相对单位（em、rem）或绝对单位（px、pt等）。
      h1 {
  font-size: 24px;
}
    • font-style：定义字体风格，如斜体（italic）或正常（normal）。
      em {
  font-style: italic;
}
    • font-weight：设置字体粗细，可选值包括从100到900的数字或者关键字bold和normal。
      strong {
  font-weight: bold;
}

  2. 段落和间距

    • line-height：设置行间距，影响文本行之间的垂直距离。
      p {
  line-height: 1.5; /* 设置为行高的1.5倍 */
}
    • text-align：设置文本对齐方式，如左对齐（left）、居中（center）、右对齐（right）或两端对齐（justify）。
      .centered-text {
  text-align: center;
}
    • padding 和 margin：分别设置元素内容区与边框间的内边距和元素与其他元素之间的外边距。
      div.container {
  padding: 10px;
  margin: 20px;
}

  3. 元素尺寸

    • width 和 height：设置元素的宽度和高度。
      img {
  width: 100%;
  height: auto;
}
    • max-width 和 max-height：限制元素的最大宽度和最大高度。
      img {
  max-width: 100%;
  height: auto;
}

  4. 显示模式与定位

    • display：决定元素如何显示，例如块级元素（block）、行内元素（inline）、Flexbox容器（flex）、Grid容器（grid）等。
      div {
  display: block;
}
span {
  display: inline;
}
    • position：设置元素定位类型，如静态（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）。
      #header {
  position: fixed;
  top: 0;
  left: 0;
}

  5. 链接样式

    • a:link, a:visited, a:hover, a:active：分别设置不同状态下的链接样式，比如未访问过的链接、已访问过的链接、鼠标悬停时的链接以及正在被点击的链接。
      a:link,
a:visited {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #f00;
}

以上仅为部分基础样式设置，实际应用中还有很多其他样式属性，如边框样式、背景属性、列表样式、表格样式等等。通过灵活组合这些样式规则，开发者能够创造出丰富多样的网页视觉效果和布局结构。

盒模型

CSS盒模型（Box Model）是网页布局中一个非常重要的概念，它描述了元素在页面中的大小、边距、填充和边框如何计算。每个HTML元素都可以看作是一个矩形盒子，这个盒子由四个主要部分构成：

  1. 内容区域（Content）：

    • 这是盒模型的中心部分，用于放置实际内容，如文本、图片等。
    • 宽度（width）和高度（height）属性定义的就是内容区域的尺寸。

  2. 内边距（Padding）：

    • 内边距位于内容区域与边框之间，用来增加内容与边框之间的空间。
    • 通过padding-top, padding-right, padding-bottom, padding-left四个属性分别控制上、右、下、左边的内边距。

  3. 边框（Border）：

    • 边框围绕在内边距和内容区域之外，可以设置颜色、宽度、样式等属性。
    • 可以使用border-width, border-style, border-color来单独或合并设置各边上边框的宽度、样式和颜色，也可以直接用border简写属性一次设置所有边框属性。

  4. 外边距（Margin）：

    • 外边距是元素外部的空间，用于与其他元素保持距离，不影响背景色的渲染，它是透明的。
    • 同样有margin-top, margin-right, margin-bottom, margin-left四个属性分别控制四边的外边距。

根据W3C的标准盒模型（也称为“content-box”模式），元素总宽度（或高度）的计算方式如下：

总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度 + 左外边距 + 右外边距

或者

总高度 = 内容高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度 + 上外边距 + 下外边距

然而，在旧版IE浏览器（IE5-7）中存在一种非标准的盒模型，即“怪异盒模型”或“IE盒模型”。在这种模型下，width和height属性包括了内容、内边距和边框的总尺寸，而外边距依然独立于width/height计算之外。现代浏览器一般默认遵循W3C标准盒模型，但在处理老式代码时，可通过box-sizing属性来改变盒模型的计算方式，例如：

box-sizing: border-box;

当将box-sizing设置为border-box时，元素的总宽度和总高度会包括内容、内边距以及边框，这种模式有助于简化布局计算，尤其是在需要固定元素尺寸的情况下。

初步布局

在CSS布局初步阶段，主要是学习如何通过CSS来控制HTML元素在网页中的排列和定位。早期的网页布局主要依赖表格（table）实现，但随着Web技术的发展，现代布局更倾向于使用CSS来创建灵活、响应式的设计。以下是CSS布局初步需要掌握的核心概念和技术：

  1. 普通流布局 (Normal Flow)：

    • 在普通流中，元素按照其在HTML文档中的顺序从上到下、从左到右排列。
    • 块级元素（如div、p等）默认情况下会占据一整行宽度，并且每个块级元素下面紧接着放置下一个元素。
    • 行内元素（如span、a等）则在同一行内水平排列，直到一行空间不足时才会换行。

  2. 盒模型与尺寸控制：

    • 了解并熟练应用盒模型计算元素的总宽度和总高度，包括内容区域、内边距、边框和外边距。
    • 使用width和height属性设置元素的内容区域大小，同时结合padding、border和margin进行布局调整。

  3. 内联元素与浮动 (Floats)：

    • 浮动是早期布局方法之一，通过设置float: left或float: right可以使元素脱离普通文档流，允许其他内容围绕它流动。
    • 利用浮动可以创建多列布局，但要注意清除浮动以防止父元素塌陷等问题，例如使用clear:both或者clearfix技巧。

  4. 定位机制 (Positioning)：

    • position属性有四个可选值：static（默认值，遵循普通流）、relative（相对定位，基于元素原位置进行偏移）、absolute（绝对定位，相对于最近的非static定位祖先元素进行定位）和fixed（固定定位，相对于浏览器视口进行定位）。
    • 学习如何利用top、right、bottom和left属性配合定位属性来精确地控制元素的位置。

  5. Flexbox布局：

    • Flexbox（弹性盒布局模型）是一个用于处理一维（横向或纵向）布局的强大工具，能够轻松创建复杂的自适应布局。
    • 关键概念包括：flex容器（通过display: flex创建）、主轴与交叉轴、flex-direction、justify-content、align-items以及子元素的flex-grow、flex-shrink和flex-basis属性。

  6. Grid布局：

    • CSS Grid Layout提供了一个二维网格系统，允许开发者自由地对网页元素进行两维度的布局。
    • 关键概念包括：grid容器（通过display: grid创建）、网格线、grid-template-columns、grid-template-rows、grid-gap、grid-auto-flow等属性，以及子元素的grid-column和grid-row定位。

初学者通常从理解和实践普通流布局开始，然后逐步引入浮动、定位以及其他高级布局技术，以便更好地构建适应不同屏幕尺寸和设备环境的现代网站。

JS

作用

JavaScript技术最初是为了解决以下几个核心问题而出现的：

  1. 动态网页交互性：在互联网早期，网页内容主要是静态的，用户与网页之间缺乏实时交互。JavaScript作为一种客户端脚本语言，能够在浏览器端直接运行，使得开发者能够创建具有丰富交互性的网页应用，如表单验证、响应鼠标点击事件等。

  2. 减轻服务器负担：JavaScript允许数据验证和一些基本逻辑处理在客户端进行，这意味着不需要每次操作都向服务器发送请求并刷新整个页面。这样既节省了宝贵的网络带宽，也提高了用户的体验，因为局部更新比整体页面刷新更为迅速且平滑。

  3. 增强用户体验：通过JavaScript，网页可以提供更流畅的用户体验，比如实现动态菜单、图片轮播、动画效果等，这些都是静态HTML无法提供的功能。

  4. 异步通信：随着Ajax（Asynchronous JavaScript and XML）的发展，JavaScript进一步实现了无需刷新页面即可从服务器获取新数据的能力，这极大地推动了Web 2.0时代的RIA（Rich Internet Applications）应用程序的发展。

总之，JavaScript的出现是为了让网页变得更加动态、响应更快、用户体验更好，并减轻服务器处理负载。随着现代Web开发的发展，JavaScript现在已经成为构建复杂Web应用程序、移动混合应用以及后端服务的重要技术栈组成部分。

学习清单

JavaScript基础阶段

  1. HTML与CSS基础：

    • 学习HTML5的基本结构和标签。
    • 掌握CSS3的选择器、布局、样式属性等基础知识，理解响应式设计。

  2. JavaScript语法基础：

    • 变量声明（var, let, const）及作用域规则。
    • 数据类型（Number, String, Boolean, null, undefined, Symbol, BigInt, Object, Array）。
    • 运算符（算数运算符、比较运算符、逻辑运算符、赋值运算符等）。
    • 控制流程语句：条件语句（if…else, switch）、循环（for, while, do…while, for…of, forEach等）。
    • 函数定义与调用（包括箭头函数和传统函数表达式）。
    • 异常处理（try…catch…finally）。

  3. 数据结构与内置对象：

    • 数组操作方法（push, pop, shift, unshift, slice, splice, map, filter等）。
    • 对象字面量、原型链和构造函数，了解this关键字的工作原理。
    • 内置对象如Date, Math, RegExp等的使用。

  4. DOM操作：

    • 获取DOM元素（getElementById, querySelector, getElementsByClassName等）。
    • 改变DOM元素的内容、属性、样式。
    • DOM节点遍历与操作（childNodes, parentNode, nextSibling, previousSibling等）。
    • 创建、添加、删除DOM元素。

  5. 事件处理：

    • 事件注册（addEventListener, attachEvent等）与解绑（removeEventListener, detachEvent）。
    • 常见事件类型（click, mouseover, keypress等）及其处理机制。
    • 事件冒泡与捕获、事件委托。

JS语法基础

变量声明及其作用域

var

  1. 作用域：var声明的变量具有函数作用域（在ES6之前，JavaScript没有块级作用域）。这意味着如果在一个函数内部声明一个var变量，那么该变量在整个函数体内部都是可访问的，而不是仅仅限于声明它的那个代码块内。如果在函数外部声明var变量，则它将成为全局变量，在整个脚本或全局上下文中都可以被访问。

  2. 变量提升（Hoisting）：var声明的变量会发生变量提升现象，即无论声明语句在哪里，都会被“移动”到其所在函数或全局作用域的顶部进行处理。因此，即使在声明之前使用变量，也不会抛出错误，而是返回undefined（如果没有初始化的话）。

  3. 重复声明：在同一作用域内，可以多次用var声明同一个变量，后面的声明不会报错，只会覆盖前面的声明值。

let

  1. 作用域：let声明的变量具有块级作用域，这意味着它只在其所在的任何封闭大括号（{}）内有效，比如if语句、for循环或者独立的代码块中。出了这个块，该变量将不可见。

  2. 暂时性死区（Temporal Dead Zone, TDZ）：与var不同，let声明的变量在声明之前无法访问，即使是在同一作用域内。试图访问未声明的let变量会引发ReferenceError。

  3. 不允许重复声明：在同一作用域内，不能用let重复声明同一个变量，否则会导致语法错误。

const

  1. 作用域：const声明的变量也具有块级作用域，同样遵循let变量的作用域规则。

  2. 常量性质：const声明的是常量，一旦赋值后，它的值就不能再改变（对原始值类型如字符串、数字、布尔值是绝对不可变；对对象或数组等复杂数据类型则是指针不可变，即不能重新赋值为另一个引用，但对象或数组的内容本身是可以修改的）。

  3. 声明和初始化必须同时完成：const声明的变量必须立即初始化，否则也会引发SyntaxError。并且在同一个作用域内，也不能用const重复声明同名变量。

综上所述，var由于其变量提升和较为宽松的作用域管理特性，在现代JavaScript开发中已不推荐广泛使用，取而代之的是更严格、更具可控性的let和const。let用于一般场景下的变量声明，const则用于那些不应改变的值的声明，以增强代码的可读性和安全性。

常见的数据类型

在JavaScript中，数据类型主要分为基本数据类型和引用数据类型。以下是这些类型的详细描述：

基本数据类型（Primitive Data Types）

  1. Number：

    • 表示数值，可以是整数或浮点数。JavaScript中的Number类型包括正负整数、小数、NaN（Not-a-Number）和Infinity/-Infinity。

  2. String：

    • 用来表示文本信息，由一个或多个16位的Unicode字符组成，使用单引号(')或双引号(")包围。字符串是不可变的，一旦创建，就不能更改其内容。

  3. Boolean：

    • 只有两个值：true和false，用于逻辑判断。

  4. null：

    • 一种特殊的值，表示“无”或者“空对象引用”。虽然在技术上属于object类型的一个子类，但在实际编程中通常被视为一种独立的基本类型，用来表示变量没有具体指向的对象。

  5. undefined：

    • 表示变量已声明但未赋值，或者对象属性不存在时返回的默认值。它与null不同，null是有意为之的空值设定，而undefined更多是表明状态未知或尚未定义。

  6. Symbol（ES6新增）：

    • 一种原始数据类型，代表独一无二且不可变的值。Symbol常用于定义对象的唯一属性名或作为Map/Set等集合结构中的唯一键值。

  7. BigInt（ES2020新增）：

    • 用来表示大于Number.MAX_SAFE_INTEGER或小于Number.MIN_SAFE_INTEGER的大整数，用n后缀表示，如9007199254740991n。
引用数据类型（Reference Data Type）

  1. Object：

    • JavaScript中最复杂的数据类型，它可以包含任意类型的属性和方法。每个对象都是基于原型的，并且可以通过构造函数创建实例。包括但不限于Function、Array、Date、RegExp等内置对象类型。

  2. Array：

    • 一种特殊的对象类型，存储有序的元素列表，元素可以是任何数据类型。数组通过索引访问元素，索引从0开始。

总结起来，基本数据类型直接保存了具体的值，它们之间不能进行隐式类型转换；而引用数据类型实际上是对内存中某个位置的引用，当两个变量引用同一个对象时，改变其中一个会影响另一个。同时，数组虽然是引用类型，但它表现得更像基本类型，因为它的长度是可以动态变化的，并提供了许多操作数组内元素的方法。

数据结构和内置对象

在JavaScript中，数据结构和内置对象是构建复杂程序的基础。数据结构是指组织、管理和存储数据的方式，而内置对象则是JavaScript语言提供的一些预定义的对象，它们封装了一些常用的功能或数据结构。

数据结构

  1. 数组（Array）：

    • 数组是一种线性数据结构，可以存储多个有序的值，通过索引访问元素。索引从0开始，例如let arr = [1, 2, 3, 4]。数组支持多种方法如push, pop, shift, unshift, slice, splice, map, filter等进行操作。

  2. 对象（Object）：

    • 对象是键值对的集合，允许关联任何类型的数据。键必须是字符串或者Symbol类型，值可以是任意类型。对象可以通过.或[]来访问属性，例如let obj = {name: "Alice", age: 25}。

  3. Map（ES6新增）：

    • Map是一个可迭代的数据结构，它允许存储任意类型的键值对，每个键值对都是一个独立的项，且键可以是任何类型的值（包括对象）。Map提供了与数组类似的方法，如set, get, delete, clear等。

  4. Set（ES6新增）：

    • Set是一个包含唯一值的无序集合，不包含重复的元素。它可以用来检查某个值是否存在，并提供add, delete, has等方法。

  5. WeakMap 和 WeakSet（ES6新增）：

    • 这两种数据结构类似于Map和Set，但它们的键是弱引用，当没有其他变量引用键时，垃圾回收机制会自动删除这些键对应的条目。

  6. 栈（Stack） 和 队列（Queue）：

    • 虽然JavaScript本身并未直接提供栈和队列这两种数据结构，但是可以通过数组或其他方式模拟实现。栈遵循后进先出（LIFO）原则，队列遵循先进先出（FIFO）原则。
内置对象

  1. Function：

    • 函数在JavaScript中被视为对象，可以被赋值给变量，作为参数传递，也可以作为其他函数的返回值。函数内部还可以通过arguments对象访问到传入的所有参数。

  2. Date：

    • Date对象用于处理日期和时间，可以获取当前日期/时间，也可以创建表示特定日期/时间的新对象。

  3. Math：

    • Math对象提供了一系列数学相关的常数和函数，比如求绝对值、取整、最大值、最小值、随机数生成等。

  4. RegExp：

    • 正则表达式对象，用于文本字符串的模式匹配、查找、替换等操作。

  5. Error：

    • JavaScript中的错误对象，用于捕获并抛出异常，如TypeError、ReferenceError等。

  6. Promise：

    • Promise对象用于异步编程，代表一个现在、将来或永远可能可用或不可用的结果。

  7. Global Objects：

    • 如globalThis（全局对象），JSON（用于JSON格式的序列化和反序列化），以及Intl（国际化相关对象）等。

以上数据结构和内置对象为JavaScript开发者提供了丰富的工具，使得能够更高效地处理各种复杂的业务逻辑。

DOM操作

DOM（Document Object Model）操作是JavaScript编程中至关重要的部分，它允许开发者动态地访问、修改和更新HTML或XML文档的内容、结构及样式，原理如下。

DOM树：
浏览器在加载HTML文档时会自动构建一棵DOM树（Document Object Model tree）。DOM树是一种数据结构，它将HTML文档表示为一系列节点，这些节点对应于HTML中的元素、属性和文本内容。这个过程通常称为“解析”或“解析HTML”。

当浏览器接收到HTML文档后，其内部的HTML解析器开始读取字符流并分析其中的标签、属性和文本内容。对于每个打开的标签，解析器会在DOM树中创建一个相应的元素节点，并将其插入到适当的位置。闭合标签则标志着元素节点的结束。

DOM树的根节点始终是一个document对象，所有其他元素都是该节点的后代。通过这种方式，整个文档的内容和结构都转换成了一个可由JavaScript程序访问和操作的对象模型。

浏览器在构建DOM树的同时，还会解析CSS样式表并构建CSSOM（CSS Object Model），然后结合DOM树和CSSOM来生成渲染树（Render Tree），进一步进行布局计算（Layout）和绘制（Painting），最终完成页面的渲染。

可视化：
在这里插入图片描述

以下是DOM操作的一些关键方面：

1. 选择元素
  • document.getElementById(id): 根据给定的ID获取单个DOM元素。
  • document.querySelector(selector): 使用CSS选择器获取第一个匹配的元素。
  • document.querySelectorAll(selector): 获取所有匹配指定CSS选择器的元素列表，返回NodeList集合。
  • element.getElementsByTagName(tagName): 获取指定标签名的所有后代元素。
  • element.getElementsByClassName(className): 获取具有指定类名的所有后代元素。
2. 修改元素属性
  • element.setAttribute(name, value): 设置元素的属性值。
  • element.getAttribute(name): 获取元素的属性值。
  • element.style.property = value: 改变元素的内联样式属性。
  • element.innerHTML: 设置或获取元素内的HTML内容，包括所有的HTML标签。
  • element.textContent 或 element.innerText: 设置或获取元素内的纯文本内容，不包含任何HTML标签。innerText在IE浏览器中有额外的支持。
3. 添加/删除元素
  • document.createElement(tagName): 创建一个新的DOM元素节点。
  • element.appendChild(newChild): 向元素的子节点列表末尾添加一个新节点。
  • element.insertBefore(newChild, referenceNode): 在某个已存在的子节点之前插入新节点。
  • element.removeChild(childNode): 从元素的子节点列表中移除指定的子节点。
  • element.replaceChild(newChild, oldChild): 将一个子节点替换为另一个新的子节点。
4. 事件处理
  • element.addEventListener(type, listener[, options]): 为元素添加事件监听器，当事件触发时执行回调函数。
  • element.removeEventListener(type, listener[, options]): 移除已添加到元素上的指定事件监听器。
  • event.preventDefault(): 阻止事件的默认行为。
  • event.stopPropagation(): 阻止事件向上冒泡到父元素。

通过这些DOM操作方法，我们可以构建动态交互式的网页应用程序，根据用户的行为和程序逻辑实时更新页面内容。例如，响应按钮点击以显示隐藏内容，或者通过AJAX请求加载新的数据并插入到页面中。

事件处理

事件处理是JavaScript中用于响应用户交互、页面加载以及其他系统级事件的关键机制。在Web开发中，通过监听和处理各种事件，可以实现动态网页的交互功能。

事件流

  • 事件冒泡（Bubbling）：当一个DOM元素上的事件被触发时，该事件会从最具体的元素（事件的目标节点）开始，向上逐级传播到其所有父元素，直至根元素（document对象）。这意味着，如果一个事件没有被任何中间层的处理程序阻止，则会在整个DOM树上触发。

  • 事件捕获（Capturing）：与事件冒泡相反，事件捕获是从最不具体的节点（通常是window对象或document对象），向下传播到最具体的节点（事件的实际目标）。现代浏览器支持通过addEventListener方法的第三个参数useCapture设置为true来启用事件捕获阶段的监听。

添加/移除事件监听器

  • DOM0级事件处理：早期HTML元素可以直接在属性中指定事件处理函数，如<button onclick="handleClick()">Click me</button>。也可以通过赋值方式添加或删除事件处理器，例如element.onclick = function() {...} 和 element.onclick = null;。

  • DOM2级事件处理：使用addEventListener和removeEventListener方法添加和移除事件处理器。这两个方法更强大且推荐使用，因为它们允许同一事件类型有多个监听器，并且支持事件捕获和事件冒泡阶段的选择：

    element.addEventListener('click', handleClick, false); // 默认是在事件冒泡阶段执行
element.removeEventListener('click', handleClick, false);
事件对象

每当事件发生时，都会创建一个事件对象并传递给事件处理器。这个对象包含有关事件的各种信息，比如：

  • event.type：表示事件的类型，如"click"、"mouseover"等。
  • event.target：触发事件的实际元素，可能与事件处理器绑定的元素不同。
  • event.preventDefault()：阻止事件的默认行为，如点击链接跳转或表单提交。
  • event.stopPropagation()：阻止事件继续向上冒泡到父元素。
内置事件

JavaScript支持多种内置事件，包括但不限于以下几种：

  • 用户交互事件：click, dblclick, mousedown, mouseup, mousemove, mouseenter, mouseleave, mouseover, mouseout, keydown, keyup, keypress, change, focus, blur 等。
  • 页面生命周期事件：load, unload, beforeunload, DOMContentLoaded 等。
  • 表单相关事件：submit, reset, input, select, formdata 等。
  • 鼠标滚轮事件：wheel。
  • AJAX及数据加载事件：abort, error, load, progress, readystatechange 等。

通过这些事件处理机制，开发者可以编写出丰富的交互式Web应用程序，确保用户与页面内容进行实时交互并得到及时反馈。

程序员小瑜
关注
  • 18
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端三件套（一）：HTML CSS
qq_44630167的博客
06-19 668
开始学前端啦，加油 1.b/s 软件架构 客户端————服务器端 客户端： 浏览器 服务器端： web服务器 页面由： 内容（表现），结构，行为 三部分组成 内容：是我们在页面上看到的数据 一般用html技术展示 表现：在内容在页面上的展示形式。 比如说：布局，颜色，大小等等， CSS 技术实现 行为： 页面元素与输入设备交互响应 用js实现 HTML： <html> ··表示整个html页面的开始 <head> ··头信息 <tittle
前端三件套 HTML +CSS +JS基础知识内容
a1272159758的博客
12-27 2282
HTML 课堂笔记 1、什么是HTML？ Hyper Text Markup Language 超文本标记语言 超文本？超级文本，例如流媒体，声音、视频、图片等。 标记语言？这种语言是由大量的标签组成。 任何一个标签都有开始标签和结束标签，例如： <标签> : 开始标签 </标签> : 结束标签 HTML严格意义上来只能说是一种规范，一种浏览器上的规范， 标签语言，不能称为编程语言，因为HTML中没有变量、数据类型 控制语句if 、for，这些都没有的。
html，css和js
weixin_44985964的博客
11-30 5806
访问某个变量。没有被定义创建函数/函数声明/函数定义function 函数名（形参列表）{函数体return 返回值；}
快速入门 HTML + CSS + JS （附带简单案例）
最新发布
SoyMilk的博客
08-10 650
HTML是网页内容的标准标记语言，用于定义网页的结构和内容。它由一系列的元素（elements）组成，这些元素可以包含文本、图片、链接以及其他媒体内容。 CSS用于设置HTML元素的样式和布局，它不是编程语言，而是一种样式表语言，用于描述HTML文档的呈现方式。 JavaScript是一种脚本语言，通常用于网页上实现交互功能，也可以用于服务器端（如Node.js）。
前端（HTML + CSS + JS）
wuweixiaoyue的博客
11-24 4427
CSS可以控制页面的展示效果，HTML决定页面结构。
前端“三件套“——HTML,CSS,Javascript（一）
qq_50692350的博客
09-21 5266
HTML
前端三件套（一）：HTML
weixin_46236591的博客
03-09 1523
目录标题一、认识HTML1、HTML2、HTMl发展史3、HTML5的优势4、W3C5、HTML的基本结构二、网页基本信息1、DOCTYPE声明2、title标签3、meta标签三、网页基本标签1、标题标签2、段落标签3、换行标签4、水平线标签5、字体样式标签6、注释和特殊符号四、图像标签五、链接标签六、块元素与行内元素七、列表八、表格 一、认识HTML 1、HTML 英文全称：Hyper Text Markup Language（超文本标记语言） 超文本：文字、图片、音频、视频、动画等 2、HTMl发展史
运用html+css+js三件套实现动态圣诞树
12-21
运用html+css+js三件套实现动态圣诞树
前端三件套学习过程（Html+Css+Js）
08-18
源代码 链接：https://pan.baidu.com/s/1m93MIjKINOVt1kxA_iwo6Q 提取码：html
前端三件套html，css，JavaScript.zip
12-29
前端三件套——HTML、CSS和JavaScript，构成了网页内容、样式和交互性的基础。这三者协同工作，为用户提供丰富的浏览体验。接下来，我们将深入探讨这三个核心技术及其在网页开发中的作用。 **HTML（HyperText ...
前端开发三件套HTML&CSS&JavaScript
02-23
0 前端三件套 HTML CSS JavaScript 1.HTML 1HTML常见文本标签 2HTML属性 3HTML块元素与行内元素 4HTML表单 2.CSS 5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位 3.JavaScript 11JS导入方式...
前端开发入门基础三件套
07-03
适合新手学习
html+css+js
05-31
html5+css3从入门到精通；CSS权威指南（第三版）；JavaScript权威指南(第6版)(中文版) PDF大全
HTML+CSS+JS
06-26
HTML+CSS+JS
HTML+css+js
10-14
完全展示了js在html的用法。
细谈HTTP，唯我独尊
weixin_44621617的博客
05-06 269
细谈正则，唯我独尊 1. 正则是什么？ 正则表达式（Regular Expression、regex或regexp，缩写为RE），也译为正规表示法、常规表示法，是一种字符模式，用于在查找过程中匹配指定的字符。 许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。 正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开的。 支持正则表达式的程序如：locate |find| vim| grep| sed |awk 2. 正则能干什么
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值