3.[前端开发-CSS]Day3-CSS属性-Chrome调试-浏览器渲染

于 2025-01-22 15:07:20 发布
阅读量885 收藏 20
点赞数 14
文章标签： css chrome 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_55135449/article/details/145289942
版权

一、邂逅CSS样式

1 认识CSS

认识CSS

CSS的历史

2 编写CSS样式

CSS如何编写呢？

如何将CSS样式应用到元素上？

inline style行内样式

全局属性 style->添加内联样式

<div style="color: red"> 我是div元素</div>

内联样式（inline style）

内部样式表（internal style sheet）

要多一些思考，为什么这么写。比如说刚开始我们可以直接用元素选择器div，但这样我么们无法区分究竟给哪个div添加样式。由于class是全局属性，可以放在div里，因此我们可以找到class为.div-one的元素，来添加样式 

外部样式表（external style sheet）

@import

以上三种，都要反复练习掌握

3 CSS注释

CSS的注释

4 常见的CSS属性

常见的CSS元素（理解）

样式很多，不必全部记住，知道哪里查就行

必须掌握的CSS属性

CSS属性的官方文档（理解）

CSS东西很多，开发两三年没有人敢说精通CSS

查找可以先去MDN

目前需要掌握的CSS属性

CSS属性 - background-color

CSS属性 - color

5 案例练习

案例练习：星球介绍

先分析结构，哪些是整体，用HTML搭好框架和结构，然后再用CSS添加样式

<!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>
  <style>
    .item {
      width: 500px;
      background-color: skyblue;

      /* 不让div独占一行(单独学习, 了解) */
      /* 方式一: 改变元素的特性和垂直方向的布局 */
      display: inline-block;
      vertical-align: top;

      /* 方式二: 通过浮动完成 */
      /* float: left; */
    }

    .album {
      width: 500px;
    }

    .keyword {
      font-size: 30px;
      color: white;
      background-color: orange;
    }
  </style>
</head>
<body>
  
  <h1>星球介绍</h1>

  <!-- 木星的 -->
  <div class="item">
    <h2>木星</h2>
    <!-- alt -> alternative -->
    <img class="album" src="../images/muxing.jpg" alt="木星">
    <p>
      <span class="keyword">木星(Jupiter)</span>是太阳系八大行星中体积最大、自转最快的行星，从内向外的第五颗行星。它的质量为太阳的千分之一，是太阳系中其它七大行星质量总和的2.5倍。由于木星与土星、天王星、海王星皆属气体行星，因此四者又合称类木行星（木星和土星合称气态巨行星）。木星是一个气态巨行星，占所有太阳系行星质量的70%，主要由氢组成，占其总质量的75%，其次为氦，占总质量的25%，岩核则含有其他较重的元素。人类所看到的通常是大气中云层的顶端，压强比1个大气压略高。
    </p>
  </div>

  <!-- 地球的 -->
  <div class="item">
    <h2>地球</h2>
    <img class="album" src="../images/diqiu.jpg" alt="">
    <p>
      <span class="keyword">地球(Earth)</span>是太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁， [1]  它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。
    </p>
  </div>

</body>
</html>

二、额外知识补充

1 link元素

link元素

<!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>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
  <link rel="stylesheet" href="./css/style.css">
  <link rel="icon" href="../../images/favicon.ico">
<body>
</body>
</html>

dns-prefetch(用于性能优化）

dns-prefetch 是一种 DNS 预解析技术，旨在减少 DNS 查询的延迟，从而提高网页的加载速度。当浏览器需要连接到某个域名下的服务器时，它首先需要进行 DNS 查询，将域名解析为 IP 地址。这个过程需要一定的时间，尤其是在网络状况不佳的情况下。dns-prefetch 允许浏览器在页面加载的早期就预先进行 DNS 查询，从而在真正需要连接到该域名时，可以立即使用已解析的 IP 地址，避免了等待 DNS 查询的时间。

工作原理：

当浏览器解析 HTML 页面时，如果遇到带有 dns-prefetch 的 <link> 标签，它会在后台异步地进行 DNS 查询，将域名解析为 IP 地址并缓存起来。当页面后续需要连接到该域名下的资源（例如图片、样式表、脚本等）时，浏览器可以直接从缓存中获取 IP 地址，而无需再次进行 DNS 查询，从而减少了连接延迟。

使用方法：

使用 <link> 标签，并将 rel 属性设置为 dns-prefetch，href 属性设置为需要预解析的域名。

<link rel="dns-prefetch" href="//example.com">
<link rel="dns-prefetch" href="//cdn.example.net">
  • rel="dns-prefetch"：指定进行 DNS 预解析。
  • href="//example.com"：指定需要预解析的域名。注意使用双斜杠 //，这表示使用与当前页面相同的协议（HTTP 或 HTTPS）。这样做可以避免混合内容警告。

2 计算机进制（了解）

认识进制

人类的十进制

计算机中的进制

进制之间的转换（课下了解）

3 CSS表示颜色

CSS颜色的表示方法

RGB的表示方法

<!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>
  <style>
    /* 值: 单词 red/white/black......... */
    .box {
      /* color: red;
      background-color: black; */

      /* 黑色是最纯洁的颜色 */
      background-color: rgb(100, 100, 100);
      background-color: #646464;

      /* 表示一个纯黑色 */
      background-color: rgb(0, 0, 0);
      background-color: #000000;
      background-color: #000;

      /* 表示一个纯白色 */
      background-color: rgb(255, 255, 255);
      background-color: #FFFFFF;

      background-color: #e1251b;
    }
  </style>
</head>
<body>
  
  <div class="box">哈哈哈</div>

</body>
</html>

4 Chrome调试工具

Chrome浏览器开发者工具

Chrome浏览器开发者工具

5 浏览器渲染流程（理解）

浏览器渲染的流程

先加载HTML，然后解析HTML，在解析HTML的时候会遇到CSS，然后加载CSS，但不会影响其继续解析HTML【也就是说加载CSS和解析HTML可以同步进行】

解析完HTML后，会形成DOM Tree，等到CSS解析完后，把样式附加到DOM nodes上。

浏览器将 DOM 树和 CSSOM 树合并成 渲染树（Render Tree）

浏览器渲染是将 HTML、CSS 和 JavaScript 代码转换成用户在屏幕上看到的网页的过程。这是一个复杂的过程，涉及到多个步骤。

1. 解析 HTML（Parse HTML）：

  • 浏览器接收到服务器返回的 HTML 响应后，开始解析 HTML 代码。
  • 解析器将 HTML 代码解析成一个树状结构，称为 DOM 树（Document Object Model Tree）。DOM 树表示了 HTML 文档的结构，每个 HTML 标签都是 DOM 树上的一个节点。

2. 解析 CSS（Parse CSS）：

  • 浏览器解析 CSS 代码，包括内部样式、外部样式和行内样式。
  • 解析器将 CSS 代码解析成 CSSOM 树（CSS Object Model Tree）。CSSOM 树包含了所有 CSS 规则，以及它们如何应用于 DOM 树的节点。

3. 构建渲染树（Render Tree）：

  • 浏览器将 DOM 树和 CSSOM 树合并成 渲染树（Render Tree）。
  • 渲染树只包含需要渲染的节点，例如 <html>、<body>、<div>、<p> 等，以及它们的样式信息。display: none; 的节点不会出现在渲染树中。
  • 渲染树的每个节点称为 渲染对象（Render Object） 或 渲染器（Renderer）。

4. 布局（Layout 或 Reflow）：

  • 浏览器根据渲染树计算每个节点在屏幕上的确切位置和大小，这个过程称为 布局（Layout） 或 重排（Reflow）。
  • 布局是一个递归的过程，从根节点开始，遍历渲染树的每个节点，计算其几何属性，例如宽度、高度、位置等。

5. 绘制（Paint）：

  • 浏览器根据渲染树和布局信息，将每个节点绘制到屏幕上，这个过程称为 绘制（Paint）。
  • 绘制是将每个节点转换成屏幕上的像素的过程。

6. 合成（Composite）：

  • 浏览器将多个图层合并成一个最终的图像，并显示在屏幕上，这个过程称为 合成（Composite）。
  • 为了提高性能，浏览器会将一些元素放到单独的图层中，例如使用 transform、opacity 等属性的元素。
  • 合成器负责将这些图层按照正确的顺序合并成一个图像。

关键概念：

  • DOM 树： 表示 HTML 文档结构的树状结构。
  • CSSOM 树： 表示 CSS 规则的树状结构。
  • 渲染树： 包含需要渲染的节点及其样式信息的树状结构。
  • 布局（重排）： 计算节点在屏幕上的位置和大小。
  • 绘制： 将节点绘制到屏幕上。
  • 合成： 将多个图层合并成一个图像。

三、最后的总结

二. 邂逅CSS

2.1. 认识CSS

  • CSS的概念

  • 作用: 美化网页

    • 方式一: 添加各种样式;

    • 方式二: 布局;

  • 历史:

    • CSS3 -> Modules

2.2. CSS规则

属性名: 属性值

2.3. 三种编写规则

  • 内联样式

  • 内部样式

  • 外部样式

    • link

    • @import

2.4. CSS中的注释

/* 注释 */

2.5. 常见的CSS

  • Xmind

  • 最常见的CSS

    • font-size

    • color

    • background-color

    • width

    • height

2.6. 案例练习

星球介绍

  • 有水平排布(了解)

三. 知识点补充

3.1. link元素

  • link链接 站点图标

  • dns-prefetch(了解)

3.2. 进制

  • 人类 十进制

  • 计算机: 二进制/八进制/十六进制

3.3. 颜色表示方法

  • color keywords(颜色关键字)

  • RGB

    • 十六进制: #aabbcc;

    • 缩写: #abc

    • 函数: rgb(0~255, 0~255, 0~255)

3.4. Chrome调试工具

3.5. 浏览器的渲染流程

四、练习

Day3 练习

一. 说说你对元素语义化的理解

元素语义化是指使用恰当的 HTML 标签来描述内容的含义和结构，而不是仅仅使用 <div> 和 <span> 等无语义标签。简单来说，就是让 HTML 代码本身就具有一定的可读性和含义，方便浏览器、搜索引擎和开发者理解。

优点：

  • 提高可访问性： 屏幕阅读器等辅助工具可以更好地理解页面内容，方便残障人士使用。
  • 利于 SEO（搜索引擎优化）： 搜索引擎可以更好地理解页面主题和内容，提高网站排名。
  • 提高代码可读性和可维护性： 代码结构更清晰，方便开发者理解和修改。
  • 减少代码体积： 有时使用语义化标签可以替代一些 CSS 样式，减少代码量。

例子：

  • 使用 <article> 标签表示一篇文章。
  • 使用 <nav> 标签表示导航栏。
  • 使用 <aside> 标签表示侧边栏。
  • 使用 <footer> 标签表示页脚。
  • 使用 <table> 标签表示表格数据，而不是用 <div> 模拟表格。

二. 说说你对 SEO 的理解

SEO（Search Engine Optimization），即搜索引擎优化，是指通过优化网站的结构、内容和外部链接等方式，提高网站在搜索引擎自然搜索结果中的排名，从而获得更多的流量。

主要方面：

  • 关键词优化： 选择合适的关键词，并在网页的标题、描述、内容等地方合理使用。
  • 网站结构优化： 建立清晰的网站结构，方便搜索引擎爬虫抓取和索引页面。
  • 内容优化： 提供高质量、原创的内容，满足用户需求。
  • 外部链接优化： 获取高质量的外部链接，提高网站的权威性和可信度。
  • 移动端优化： 确保网站在移动设备上也能良好显示和访问。
  • 技术 SEO： 包括网站速度优化、URL 优化、robots.txt 文件设置等。

三. 什么是字符编码？

字符编码是一种将字符（例如字母、数字、符号）转换为计算机可以存储和处理的二进制数据的规则。不同的字符编码使用不同的方式来表示字符。

常见字符编码：

  • ASCII： 最早的字符编码，使用 7 位二进制数表示 128 个字符，包括英文字母、数字和一些常用符号。
  • ISO-8859-1： 扩展了 ASCII 编码，使用 8 位二进制数表示 256 个字符，包括西欧常用字符。
  • GBK： 中国国家标准汉字编码，兼容 ASCII 编码。
  • UTF-8： 一种变长编码，可以使用 1 到 4 个字节表示一个字符，兼容 ASCII 编码，支持世界上几乎所有的字符。是目前互联网上最常用的字符编码。

重要性：

如果使用错误的字符编码，会导致乱码问题。因此，在网页开发中，需要正确设置字符编码，通常使用 UTF-8。在 HTML 中，可以使用 <meta charset="UTF-8"> 标签来指定字符编码。

四. CSS 编写样式的方式以及应用场景

CSS 编写样式的方式有三种：

  • 行内样式： 直接在 HTML 标签中使用 style 属性定义样式。

    • 应用场景： 只适用于少量、简单的样式，不推荐大量使用，不利于维护和复用。
    <p style="color: red;">这是一段红色的文本。</p>

  • 内部样式： 在 HTML 文档的 <head> 标签中使用 <style> 标签定义样式。

    • 应用场景： 适用于样式较少、只在当前页面使用的场景。
      
    <head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

  • 外部样式： 将 CSS 样式保存在单独的 .css 文件中，然后在 HTML 文档中使用 <link> 标签链接到该文件。

    • 应用场景： 适用于样式较多、需要在多个页面复用的场景，是推荐的使用方式。
    <head>
    <link rel="stylesheet" href="style.css">
</head>

五. 最常见的 CSS 样式以及作用

  • color： 设置文本颜色。
  • font-size： 设置字体大小。
  • font-family： 设置字体类型。
  • background-color： 设置背景颜色。
  • width 和 height： 设置元素的宽度和高度。
  • padding： 设置元素的内边距。
  • margin： 设置元素的外边距。
  • border： 设置元素的边框。
  • text-align： 设置文本对齐方式。
  • display： 设置元素的显示方式，例如 block、inline、inline-block、flex、grid 等。
  • position： 设置元素的定位方式，例如 static、relative、absolute、fixed 等。

六. 自行查找 2 个案例练习

根据之前学习的 HTML 元素和 CSS 样式找 2 个案例练习。

案例 1：简单的个人信息卡片

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>个人信息卡片</title>
    <link rel="stylesheet" href="card.css">
</head>
<body>
    <div class="card">
        <img src="avatar.jpg" alt="头像">
        <h2>张三</h2>
        <p>职业：前端工程师</p>
        <p>邮箱：zhangsan@example.com</p>
    </div>
</body>
</html>

CSS (card.css):

.card {
    width: 300px;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 10px;
}

案例 2：简单的导航栏

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>导航栏</title>
    <link rel="stylesheet" href="nav.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </nav>
</body>
</html>

CSS (nav.css):

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    overflow: hidden; /* 防止子元素浮动导致父元素高度塌陷 */
}

nav li {
    float: left;
}

nav a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
}

nav a:hover {
    background-color: #ddd;
}

七. 颜色的表示方式

  • 颜色名称： 例如 red、blue、green 等。
  • 十六进制颜色码： 例如 #FF0000（红色）、#0000FF（蓝色）、#00FF00（绿色）。
  • RGB 颜色： 使用 rgb(red, green, blue) 函数表示颜色，其中 red、green、blue 的取值范围是 0 到 255。例如 rgb(255, 0, 0)（红色）。
  • RGBA 颜色： 在 RGB 颜色的基础上增加了 alpha 通道，用于表示透明度。使用 rgba(red, green, blue, alpha) 函数表示颜色，其中 alpha 的取值范围是 0 到 1，0 表示完全透明，1 表示完全不透明。例如 rgba(255, 0, 0, 0.5)（半透明红色）。
  • HSL 颜色： 使用 hsl(hue, saturation, lightness) 函数表示颜色，其中 hue 表示色相（0 到 36

day01 练习回顾

一. 说出软件和应用程序的区别？（自己整理）

软件包括操作系统及虚拟机、编程（语言）、算法、应用程序等，软件是应用程序的超集。应用程序是一种直接面向用户的软件。

二. 说出一个完善的应用系统包含哪些环节？

包括服务器端、IOS端、Android端、IPad端、网页端、PC端（主要是win端和IOS端）等。

三. 整理出网页从编写到浏览器显示的整个过程（重要）。

前端工程师编写HTML/CSS/JS代码 -> 打包发布到服务器作为静态资源 -> 用户在浏览器输入域名 -> 浏览器发出静态资源请求 -> DNS将域名转换为IP地址 -> 浏览器找到服务器的IP地址，服务器返回静态资源给浏览器 -> 浏览器解析和渲染静态资源，显示网页

四. 服务器是什么？说出你的理解

服务器本质上是一台主机，存储着巨量信息。其具有以下特点：

  • 24h不关机（稳定运行）

  • 没有显示器

  • 一般装载Linux系统（如centos）

五. 网页的三大组成部分是哪些？分别说出他们的作用。

html：网页的骨骼，负责网页的内容结构

css：网页的外表，负责网页的视觉体验和网页的美化

JavaScript：网页的灵魂，负责网页的交互处理

六. 浏览器内核是什么？有哪些常见的浏览器内核？

浏览器内核又称浏览器渲染引擎，是浏览器的最核心部分。负责解析网页语法并渲染网页。

常见的浏览器内核有：

  • trident（三叉戟）---- IE浏览器、360安全浏览器、UC浏览器、搜狗高速浏览器、百度浏览器

  • gecko（壁虎） ---- Mozilla、Firefox

  • pestro -> Blink ---- Opera

  • Webkit ---- Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器

  • Webkit -> Blink ----Chrome、Edge

七. 手动编写出HTML页面的结构（不利用开发工具提示）

<html>
  <head>
    <title>
    </title>
  </head>
  <body>
    <div>
    </div>
  </body>
</html>

八. 元素的结构是什么？有哪些单标签元素、双标签元素？

元素的结构包括开始标签、结束标签、属性、内容。

单标签元素： <br> <img> <input> <meta> <hr>
双标签元素： <html> <head> <body> <title> <p> <i> <div> <a> <h1>

九. 元素之间有哪些关系？写出一个例子，并且说明他们的关系。

父子关系和兄弟关系

如 
  <ul>
    <li></li>
    <li></li>  
  </ul>
两个<li>标签为兄弟关系，任意一个<li>与<ul>为父子关系

十. 注释的作用，HTML的注释如何编写。

作用：

  • 帮助自己记忆代码思路

  • 便于和他人协同开发

  • 临时注释代码，方便调试

  • 自己开发框架时，便于他人理解和学习

快捷键： ctrl + /

day02 练习回顾

一. 完成所有的代码练习（必须全部自己实现）

01.文档类型声明

<!DOCTYPE html>     01.文档类型声明

02.HTML元素的属性

<html lang="en">
    <head></head>
    <body>内容</body>
</html>   

<html lang="zh-CN">
    <head></head>
    <body>内容</body>
</html>             02.HTML元素的属性,lang：1.帮助语言合成工具确定要使用的发音2.帮助翻译工具确定使用翻译规则

03.head元素的属性

<html>
    <head>
        <meta charest="utf-8">
        <title>我是标题</title>
    </head>
    <body></body>
</html>             03.head元素的属性，两个元素一个title设置网页的标题，一个meta设置网页的编码形式

04.h元素的用法

<html>
    <head></head>
    <body>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>
    </body>
</html>             04.h元素的用法,通常用作标题,h1最大,h6最小

05.p元素的用法

<html>
    <head></head>
    <body>
        <p>
            昨天一个朋友问我，怎么才能让房价迅速降下来？
        </p>
        <p>
            有人说，这还用问，当然是调控。
        </p>
        <p>
            的确，2021年，二手房指导价出台，成为众多城市楼市的梦魇，就连不可一世的炒房第一城深圳，也被立斩于马下，学区房一夜掉价几百万，至今缓不过来。
        </p>
    </body>
</html>             05.p元素的用法,作用是段落,分段

06.h元素和p元素的案例

<html>
    <head>
        <h1>这些城市，房子真的太多了</h1>
    </head>
    <body>
        <p>
            昨天一个朋友问我，怎么才能让房价迅速降下来？
        </p>
        <p>
            有人说，这还用问，当然是调控。
        </p>
        <p>
            的确，2021年，二手房指导价出台，成为众多城市楼市的梦魇，就连不可一世的炒房第一城深圳，也被立斩于马下，学区房一夜掉价几百万，至今缓不过来。
        </p>
    </body>
</html>             06.h元素和p元素的案例

07.img元素的基本使用

<html>
    <head>
    </head>
    <body>
       <img src="https://p6.toutiagin/tos-cn-i-qvj2lq49k0/ec7d03634695464cab47abfe2a00efb0?from=pc" alt="小王子">
    </body>
</html>             07.img元素的基本使用,src填写目标图片的文件路径,有相对路径跟绝对路径,alt图片加载不成功显示文本,屏幕阅读器可将图片信息传达给需要的人听

08.相对路径跟绝对路径

<html>
    <head>
    </head>
    <body>
        <img src="../images/gouwujie01.jpg" alt=""><!--相对路径-->
        <img src="C:\Users\Administrator\Desktop\新建文件夹\Day02\Learn_HTML_CSS\images\gouwujie01.jpg" alt="图片"><!--绝对路径-->
    </body>
</html>             08.相对路径跟绝对路径

09.a元素的使用

<html>
    <head>
    </head>
    <body>
        <a  href="https://www.toutiao.com/?wid=1648208779618" target="_blank">今日头条</a>
        <a  href="./08.相对路径跟绝对路径.html" target="_self">本地</a>
        <a  href="https://www.toutiao.com/?wid=1648208779618" target="_self">头条</a>
    </body>
</html>             09.a元素的使用

10.a元素的在本页面的锚点链接

<html>
    <head>
    </head>
    <body>
        <a  href="#table1" >跳转到第一个</a>
        <a  href="#table2" >跳转到第二个</a>
        <a  href="#table3" >跳转到第三个</a>
        <h3 id="table1">
            第一个标题
        </h3>
        <p>
            66666
        </p>
        <h3 id="table2">
            第二个标题
        </h3>
        <p>
            66666
        </p>
        <h3 id="table3">
            第三个标题
        </h3>
        <p>
            66666
        </p>
    </body>
</html>             10.a元素的在本页面的锚点链接

11.a元素跟img元素的结合使用

<html>
    <head>
    </head>
    <body>
        <a href="https://www.toutiao.com/article/7078655559993508352/?log_from=fd63341789015_1648211460637">
            <img src="https://p6.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/b84a189a99204c269221fdfccf9d6998?from=pc">
        </a>
    </body>
</html>             11.a元素跟img元素的结合使用

12.a元素跟其他元素的链接

<html>
    <head>
    </head>
    <body>
        <a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip">下载</a>
        <a href="mailto:12345@qq.com">发送邮件到12345qq邮箱</a>
    </body>
</html>             12.a元素跟其他元素的链接

13.iframe元素的使用

<html>
    <head>
    </head>
    <body>
        <iframe src="https://www.toutiao.com/?wid=1648208779618" frameborder="1"></iframe>
    </body>
</html>             13.iframe元素的使用

14.iframe元素和a元素的结合使用

<html>
    <head>
    </head>
    <body>
        <iframe src="./others/a元素的网页.html" frameborder="1"></iframe>
    </body>
</html>             14.iframe元素和a元素的结合使用

15.div元素和span元素的调用

<html>
    <head>
    </head>
    <body>
        <h1>学习前端</h1>
        <div>
            <h2>学习前端</h2>
            <p>学习html</p>
        </div>
        <div>
            <h2>学习前端</h2>
            <p>学习<span>css</span></p>
        </div>
        <div>
            <h2>学习前端</h2>
            <p>学习js</p>
        </div>
    </body>
</html>             15.div元素和span元素的调用

16.不太常用的元素演练

<html>
    <head>
    </head>
    <body>
        <p>
           hello<strong>你好</strong>,真的<i>好的</i> 
        </p>
    </body>
</html>             16.不太常用的元素演练

17.全局属性-title属性

<html>
    <head>
    </head>
    <body>
        <p title="你好,世界">helloworld</p>
    </body>
</html>             17.全局属性-title属性

18.字符实体-额外补充

<html>
    <head>
    </head>
    <body>
        <span>&nbsp;你好你好&nbsp;</span>
        <span>&lt;你好你好&lt;</span>
        <span>&gt;你好你好&gt;</span>
    </body>
</html>             18.字符实体-额外补充

二. 寻找h元素和p元素的案例，并且实现

<html>
    <head>
        <h1>这些城市，房子真的太多了</h1>
    </head>
    <body>
        <p>
            昨天一个朋友问我，怎么才能让房价迅速降下来？
        </p>
        <p>
            有人说，这还用问，当然是调控。
        </p>
        <p>
            的确，2021年，二手房指导价出台，成为众多城市楼市的梦魇，就连不可一世的炒房第一城深圳，也被立斩于马下，学区房一夜掉价几百万，至今缓不过来。
        </p>
    </body>
</html>

三. 寻找a元素结合img元素的案例（3个）

<html>
    <head> </head>
    <body>
        <a href="https://shouji.jd.com/?skuId=100025047302_100004325476&groupId=03312682&productId=09173749"><img src="https://img20.360buyimg.com/img/s100x100_jfs/t1/193030/20/17827/75476/6110f9eeE3b3eec9f/6e32be8839b5a110.jpg!cc_100x100.webp"></a>
    </body>
</html>

<html>
    <head> </head>
    <body>
        <a href="https://www.vivo.com.cn/brand/news/detail?id=956&type=0"><img src="https://wwwstatic.vivo.com.cn/vivoportal/files/image/brand/20210719/1e632d569ea1da9b277254fc8e6d0356.jpg"></a>
    </body>
</html>

<html>
    <head> </head>
    <body>
        <a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></a>
    </body>
</html>

四. 说出div元素和span元素的作用和区别

div元素跟span元素都是纯粹的容器,也可以称作"盒子",都是用来包裹内容的

div元素包裹的内容会显示在不同的行,可以把网页分成多个独立的部分,一般作为其他的元素的父容器

span元素包裹的内容会显示在同一行,默认情况下是跟普通的文本没有区别,可以用来凸显一些关键字

五. HTML全局属性有哪些？分别是什么作用。

  • id:唯一的标识符,在文档内必须要是唯一的

  • class:一个以空格分割的元素的类名列表,它允许css,js通过类选择器(或者dom方法)选择和访问特定的元素

  • title:包含表示与其所属元素相关信息的文本,可以呈现给用户看,不是必须

  • style:是给元素添加样式

六.预习CSS（按照MDN文档）

CSS 构建 - 学习 Web 开发 | MDN

    m0_zj
    关注
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

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

    抵扣说明：

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

    余额充值