Jonvy

导航

Coursera Web HTML

1.在 HTML5 中，所有的标签名称都必须使用小写字母。例如，正确的写法是：

<p>这是一个段落。</p>

2.不是所有HTML5标记必须有收尾标签，如自闭合标签

<img src="image.jpg" alt="图片描述">

 

 

 

<input type="text">

<meta charset="utf-8">

 

 3.浏览器CSS查看

按F12键，按照下面<1>，<2>，<3>，即可查看CSS来源。

image

4.DOM Tree

image

5.CSS优先级 左边>右边

image

 

 

 6.box model

image

 7.Javascript Object Type

image

 

 

image

 8. Passed by reference,即传的是地址

image

 9.prototype,多次创建函数，创建的prototype函数占用同一个内存地址，避免重复占用多个内存地址

image

 10.HTML种的<span>是什么意思？

<span> 是 HTML 中一个非常重要的行内元素，它本身没有任何特殊的语义或样式，常被称为“通用行内容器”。

 

<span> 的核心作用

 

<span> 主要用于对一小段文本或页面上的行内元素进行分组，以便：

  1. 应用 CSS 样式：这是 <span> 最常见的用途。你可以给 <span> 添加 class 或 id，然后用 CSS 精准地控制这部分内容的样式，比如改变颜色、字体大小或背景。

  2. 通过 JavaScript 操作：你可以使用 <span> 来标记需要通过 JavaScript 动态修改或操作的内容。例如，在前面的倒计时例子中，我们用 id="countdown-timer" 的 <span> 来存放倒计时的数字，JavaScript 就能精确地找到它并更新里面的内容，而不会影响到页面上的其他部分。

 

<span> 和 <div> 的区别

 

初学者常常会混淆 <span> 和 <div>，但它们的本质区别在于：

  • <span> 是行内元素（Inline Element）：

    • 它只占据它所包含内容的宽度。

    • 它不会强制换行。

    • 你可以把多个 <span> 放在同一行上。

    • 通常用于包裹一小段文本，或作为其他文本中的一部分。

  • <div> 是块级元素（Block-level Element）：

    • 它会占据其父容器的整个宽度。

    • 它会强制换行，因此每个 <div> 都会另起一行。

    • 通常用于构建页面的主要布局结构，比如页眉、侧边栏、主体内容等。

 

示例：如何使用 <span>

 

假设你想在一段话中突出显示某个词语，但又不想使用 <strong>（表示重要）或 <em>（表示强调）这样的语义标签。这时 <span> 就派上用场了：

HTML 代码：

HTML
 
<p>我喜欢看电影，尤其喜欢看 <span class="highlight">科幻片</span>，它们总是充满了想象力。</p>

CSS 代码：

CSS
 
.highlight {
  color: red;
  font-weight: bold;
  background-color: yellow;
}

通过这种方式，你就可以只让“科幻片”这三个字变成红色粗体并带有黄色背景，而不会影响到段落中的其他文本。

11.Flexbox是什么？

Flexbox，全称 CSS Flexible Box Layout（弹性盒布局），是 CSS3 中一个非常强大的布局模块，它提供了一种更有效的方式来排列、对齐和分配容器中项目（子元素）的空间。

你可以把 Flexbox 理解为一个神奇的盒子，你可以轻松地告诉它里面的东西应该如何排列。它主要解决的问题是：

  1. 垂直居中：在 Flexbox 出现之前，让一个元素在容器中垂直居中是件很麻烦的事，需要各种技巧。但使用 Flexbox，只需一行 CSS 就能轻松搞定。

  2. 动态分配空间：当容器尺寸变化时，让项目自动调整大小，或者让它们在剩余空间中等分、按比例分配。

  3. 灵活对齐：控制项目在主轴和交叉轴上的对齐方式，比如靠左、靠右、居中、分散对齐等。

  4. 方向控制：轻松改变项目的排列方向，可以是从左到右，从右到左，从上到下，从下到上。

 

Flexbox 的核心概念

 

Flexbox 的世界里只有两个基本角色：

  • 弹性容器（Flex Container）：这是父元素，你通过 display: flex; 或 display: inline-flex; 将它设置为一个 Flex 容器。所有的 Flexbox 属性都写在它上面，来控制其子元素的行为。

  • 弹性项目（Flex Item）：这是 Flex 容器的子元素。这些子元素会自动成为弹性项目，你可以为它们设置一些属性，比如它们是否可以伸长或收缩。

　　<ul class="navbar-nav justify-content-between w-100">
			<!-- 左侧导航项 -->
			<div class="d-flex">
				<li class="nav-item">
					<a class="nav-link text-secondary" href="{{url_for('cont')}}">包装箱号查询</a>
				</li>
				<li class="nav-item active">
					<a class="nav-link text-primary" href="{{url_for('about')}}">关于查询系统</a>
				</li>
				<li class="nav-item active">
					<a class="nav-link text-success" href="{{url_for('article')}}">文章</a>
				</li>
			</div>
			<!-- 右侧倒计时 -->			
			<li class="nav-item">
                        <span class="countdown" id="countdown">加载中...</span>
            </li>
    </ul>

　　

让我们来逐一解析这些 CSS 类：

 

1. justify-content-between

 

  • 这是 Bootstrap 的一个 Flexbox 工具类，它定义了 Flex 容器内项目在 主轴 上的对齐方式。

  • 它的效果是：将容器内的项目分散对齐。第一个项目紧贴起点，最后一个项目紧贴终点，中间的项目则均匀分布在它们之间，从而占据所有可用空间。

  • 在你的代码中，它应用在 <ul> 元素上，这意味着导航栏左侧的导航项（d-flex 容器）和右侧的倒计时（<li>）会分别被推到导航栏的两端。

 

2. w-100

 

  • w-100 是 Bootstrap 的一个尺寸工具类，表示 宽度为 100%。

  • 当你将它应用在 <ul> 标签上时，它确保这个无序列表会占据其父容器（在这里是 navbar）的全部宽度。

  • 这为 justify-content-between 提供了足够的空间来分散对齐子元素。

 

3. d-flex

 

  • 这是 Bootstrap 中最核心的 Flexbox 工具类，它将一个元素设置为 弹性容器（Flex Container）。

  • d-flex 的意思是 display: flex;。

  • 当你将它应用在 <div> 标签上时，它使这个 <div> 及其内部的 <li> 元素都成为了弹性项目。在你的代码中，它将“首页”等左侧导航项包裹起来，形成一个独立的 Flex 项目。

 

总结

 

综合来看，这段代码通过 Flexbox 实现了导航栏的左右对齐布局：

  1. <ul class="navbar-nav justify-content-between w-100">：这个 <ul> 元素被设置为一个 宽度为 100% 的 Flex 容器。

  2. justify-content-between 让这个 Flex 容器中的第一个子元素（左侧的 <div>）和最后一个子元素（右侧的 <li>）分别被推到最左边和最右边。

  3. d-flex 将所有左侧的导航项包裹成一个单独的 Flex 项目，这样它们会作为一个整体来与右侧的倒计时进行对齐

 mock up for website:

https://balsamiq.com/

 

 

posted on 2025-07-19 10:52  不亮  阅读(11)  评论(0)    收藏  举报