第3天 - 16天搞定前端，html基础标签，一点都不基础？

HTML文件中，有些标签会被经常用到，可能有人觉得太基础，就不认真对待，但是我可以负责任的告诉你，越基础的往往越重要。这次重点学一学标题、段落和链接等基础标签。

为了不重复粘贴HTML代码，咱们来个约定，除了第一次出现完整的HTML文件的页面结构之外，之后只现新增的标签内容，你自己将新的内容，添加到HTML文件中，进行效果验证。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第3个HTML文件</title>
</head>
<body>
<!--这是一个完整的HTML页面结构,常用标签放在这个注释后面即可-->
</body>
</html>

3.1 标题<h1>~

在HTML中，标题从一级到六级，对应标签为<h1>到<h6>，字体逐步变小。属性为align(对齐方式)，属性值为left(左对齐，默认）、right(右对齐)和center(居中对齐)。

<h1 align="center">一级标题</h1>
<h2 align="center">二级标题</h2>
<h3>三级标题</h3>
<h4 align="left">四级标题</h4>
<h5 align="right">五级标题</h5>
<h6 align="right">六级标题</h6>

输出结果

3.2 段落<p>

<p> 标签定义段落。浏览器解析到<p>标签时，会自动在其前后创建一些空白。<p>标签的属性也是align。其实为了HTML文件统一布局，很少会用align来指定位置，大多数是用CSS统一指定。

<p>老陈说编程，除了说编程，</p>
<p>还有程序员的爱情与友情，</p>
<p>那是不可能的。</p>

输出结果

3.3 水平线和换行

在网页发的文字多时，好多人习惯性会使用分割线。在HTML，用<hr/>单标签就可以实现分割线。而换行，则用<br/>标签。<hr>标签属性有表示位置的align、高度的的size和宽度width三个属性，其中size和width的单位是像素，但如果用到这些属性的话，推荐用CSS。

<hr size="1"/>
小舅子要结婚了，丈母娘跟我借了10万块钱做彩礼，结果婚事谈崩了。<br/>
今天公司急用钱，我向丈母娘要那10万块钱。<br/>
丈母娘说：借你这10万块钱是干啥用的？<br/>
我说：给小舅子结婚用啊！<br/>
丈母娘说：那婚结成了吗？<br/>
我说：没结成。<br/>
丈母娘大声骂道：婚都没结成你还有脸来要钱！<br/>
突然感觉丈母娘这话说的没什么毛病啊！
<hr size="1"/>

输出结果

3.4 列表<ul>和<ol>

无序列表<ul>标签，可用粗体圆点标记一个项目的列表；有序列表<ol>标签使用数字进行标记，而列表项用<li>标签实现。有关列表的属性，不是被H5抛弃，就是不被推荐，所以......。

<p>
    程序员最喜欢做的三件事
<ul>
    <li>编程</li>
    <li>开发</li>
    <li>敲代码</li>
</ul>
程序员最喜欢的三个美女
<ol>
    <li>潘金莲</li>
    <li>杨贵妃</li>
    <li>杨八妹</li>
</ol>
</p>

输出结果

3.5 超链接<a>

<a>标签定义超链接，用于从一个页面链接到另一个页面。最重要的属性是 href和target， href指定链接的目标(网页地址)，target指定打开窗口的模式，_blank：打开新窗口，_parent：在父窗口中打开，_self：默认，当前页面跳转，_top：在当前窗体打开链接，并替换当前的整个窗体。

在没点击链接之前，你先看一下链接内容的字体颜色，点击链接之后，你再看一下，你就会发现，链接内容的颜色会有所变化。

(1) 未被访问的链接带有下划线而且是蓝色的;

(2) 已被访问的链接带有下划线而且是紫色的;

(3) 活动链接带有下划线而且是红色的。

<a href="demo1.html">去到老陈说HTML的第1个Demo中</a>

输出结果

好了，有关html基础标签的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML##程序员##编程##CSS#

言

本文我们将深入探讨JavaScript的各种数据类型，包括基本数据类型、引用数据类型、特殊数据类型以及数据类型转换，我们将会从概念解释、重难点分析以及案例说明三个层面来全面剖析这些数据类型。

概述

在JavaScript中，数据类型用于表示不同种类的数据值。了解JavaScript数据类型是编写高质量代码的基础。本章将深入介绍JavaScript的主要数据类型及其特性。

基本数据类型

1. 数字类型（Number）

数字类型用于表示数字值，包括整数和浮点数。JavaScript使用64位浮点数来表示所有数字，无论是整数还是小数。这意味着JavaScript可以处理非常大和非常小的数字。通俗来说，数字类型就是我们数学中学到的数字，正数、负数、整数、小数等等。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据类型</title>
</head>
<body>
  
  <script> 
    let age = 20 // 正整数
    let pi = 3.14 // 小数
    let fushu = -40 // 负数
    
    //typeof是用于检测数据类型
    document.write(typeof age) // 结果为 number
    document.write(typeof pi) // 结果为 number
    document.write(typeof fushu) // 结果为 number
  </script>
</body>
</html>

2. 字符串类型（String）

字符串类型用于表示文本数据，用引号（单引号或双引号）括起来。JavaScript中的字符串是不可变的，也就是说一旦被创建，就无法修改。单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已
必要时可以使用转义符 \，输出单引号或双引号

案例：

let name = "谧夜星球";
let str = '你好,JavaScript!';

3. 布尔类型（Boolean）

布尔类型用于表示逻辑值，即真（true）或假（false）。布尔类型非常有用，我们可以使用它们来进行条件判断和控制程序流程。

案例：

let isActive = true;
let isFinished = false;

4. 空值（Null）

Null用于表示空值或不存在的对象。当我们想要明确地表达一个变量没有值时，可以使用Null。

案例：

let person = null;

5. 未定义（Undefined）

Undefined表示未赋值的变量或不存在的属性。当我们声明变量但尚未给它赋值时，它的默认值为Undefined。

案例：

let age;
console.log(age); // 输出undefined

引用数据类型

引用数据类型是基于对象的，用于存储和操作复杂的数据结构。

1. 对象（Object）

对象是JavaScript中最常见的数据类型之一，它是一组键值对的集合。每个键都是一个字符串（或符号），而值可以是任何数据类型，包括其他对象。

案例：

let person = {
  name: "谧夜",
  age: 25,
  gender: "male"
};

2. 数组（Array）

数组是一种有序集合，可以存储多个值。JavaScript中的数组可以包含不同数据类型的元素，并且可以根据需要动态调整大小。

案例：

let fruits = ["apple", "banana", "orange"];

3. 函数（Function）

函数是一种可重复使用的代码块，可以接收参数并返回结果。JavaScript中的函数是一等公民，可以将它们存储在变量中、作为参数传递给其他函数，并从函数中返回它们。

案例：

function add(a, b) {
  return a + b;
}

4. 日期（Date）

日期用于表示时间和日期。JavaScript提供了内置的Date对象，用于处理日期和时间相关的操作。

案例：

let today = new Date();

注：JavaScript 中变量的值决定了变量的数据类型。

类型转换

在JavaScript编程中，数据类型转换是非常常见的操作。JavaScript会根据需要自动进行类型转换，但有时我们需要显式地控制类型转换以确保程序的正确性。

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。JavaScript在这些操作中会自动进行隐式类型转换，以满足操作的要求，但可能会导致一些意想不到的结果，因此在运算时需要格外小心

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据类型-隐式转换</title>
</head>
<body>
  <script> 
    let num1 = 20 // 数值
    let num2 = '23' // 字符串

    // 结果为 2023
    // 原因是将数值 num1 转换成了字符串，相当于 '20'
    // 然后 + 将两个字符串拼接到了一起
    console.log(num + num2)

    // 结果为 -3
    // 原因是将字符串 num2 转换成了数值，相当于 23，即20-23=-3
    console.log(num - num2)
  </script>
</body>
</html>

//布尔值的隐式转换
let num = 10;

if (num) {

  // num被转换为布尔值，条件为true

}

显式转换

在一些情况下，我们需要明确地将一个数据类型转换为另一个。JavaScript提供了一些函数和操作符来进行显式类型转换。

转换为字符串

使用String()函数或toString()方法将值转换为字符串。

let num = 42;
let str = String(num); // "42"

转换为数值

使用Number()函数将值转换为数值。

let str = "3.14";
let num = Number(str); // 3.14

转换为布尔值

使用Boolean()函数将值转换为布尔值。

let num = 0;
let bool = Boolean(num); // false

parseInt和parseFloat函数

这两个函数用于将字符串转换为整数和浮点数。

let strInt = "42";
let intNum = parseInt(strInt); // 42
let strFloat = "3.14";
let floatNum = parseFloat(strFloat); // 3.14

操作符的类型转换

一些操作符在执行时会触发类型转换，例如加号操作符 +。

let num = 42;
let str = "10";
let result = num + str; 
// 结果为 "4210"编写程序时过度依靠系统内部的隐式转换是不严谨的，
//因为隐式转换规律并不清晰，大多是靠经验总结的规律。
//为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

类型转换的陷阱

在进行类型转换时，我们需要注意一些常见的陷阱。以下是一些常见的陷阱及其解决方法：

空字符串转换为数字：当把空字符串转换为数字时，其结果为0。如果你希望得到NaN或其他非数字的结果，可以使用isNaN()函数进行检查。

非数字字符串转换为数字：当把非数字字符串转换为数字时，其结果可能是一个NaN。可以使用isNaN()函数进行检查，或者使用强制类型转换（如parseFloat()）来避免这种情况。

0与空字符串的比较：在JavaScript中，0和空字符串""并不相同。0是一个数字，而""是一个字符串。因此，在进行比较操作时需要格外小心。

var num = 0;   // num 的类型为 Number
var str = "";  // str 的类型为 String

console.log(num == "");  // 输出 false，因为 0 和 "" 的类型不同
console.log(num === ""); // 输出 false，因为 0 和 "" 的类型和值都不同
console.log(num != "");  // 输出 true，因为 0 和 "" 的类型不同
console.log(num !== ""); // 输出 true，因为 0 和 "" 的类型和值都不同

比较操作中的陷阱：在进行比较操作时，不同的比较运算符可能会产生不同的结果。例如，"=="运算符会进行类型比较，"==="运算符会进行值和类型比较。因此，在使用比较运算符时需要确保比较的类型和期望的结果一致。

在进行比较操作时，我们需要根据实际的需求选择合适的比较运算符。如果只关心值的大小，那么使用"=="运算符即可；如果关心值和类型的匹配性，那么可以使用"==="运算符。

经验总结

为了编写出稳定、高效的JavaScript代码，以下是一些关于数据类型转换的最佳实践：

尽量避免不必要的类型转换，以减少潜在的错误和性能问题。
在进行比较操作时，确保比较的类型和期望的结果一致。
在进行手动类型转换时，选择合适的方法并根据实际情况进行调整。
在使用自动类型转换

021年你需要知道的HTML标签和属性

Web开发人员都在广泛的使用HTML。无论你使用什么框架或者选择哪个后端语言，框架在变，但是HTML始终如一。尽管被广泛使用，但还是有一些标签或者属性是大部分开发者不熟知的。虽然现在有很多的模版引擎供我们使用，但是乐字节教育的老师和我们说还是需要尽可能的熟练掌握HTML内容，就像CSS一样。

在我看来，最好尽可能使用HTML特性来实现我们的功能，而不是使用JavaScript实现相同的功能，尽管我承认编写HTML可能会是重复的和无聊的。

尽管许多开发人员每天都在使用HTML，但他们并没有尝试改进自己的项目，也没有真正利用HTML的一些鲜为人知的特性。

下面这5个通过HTML标签/属性实现的功能我觉得需要了解一下：

图片懒加载

图片懒加载可以帮助提升网站的性能和响应能力。图片懒加载可以避免立即加载那些不在屏幕中立即显示的图片素材，当用户滚动临近图片时再去开始加载。

换言之，当用户滚动到图片出现时再进行加载，否则不加载。这就降低了屏幕内容展示过程中的图片素材的请求数量，提升了站点性能。

往往我们都是通过javascript来实现的，通过监听页面滚动事件来确定加载对应的资源。但是，在不完全考虑兼容性的场景下，我们其实可以直接通过HTML来直接实现。

注：本篇的提到的标签和属性的兼容性需要大家根据实际场景来选取是否使用

可以通过为图片文件添加loading="lazy"的属性来实现:

输入提示

当用户在进行输入搜索功能时，如果能够给出有效的提示，这会大大提升用户体验。输入建议和自动完成功能现在到处可见，我们可以使用Javascript添加输入建议，方法是在输入框上设置事件侦听器，然后将搜索到的关键词与预定义的建议相匹配。

其实，HTML也是能够让我们来实现预定义输入建议功能的，通过<datalist>标签来实现。需要注意的是，使用时这个标签的id属性需要和input元素的list属性一致。

Picture标签

你是否遇到过在不同场景或者不同尺寸的设备上面的时候，图片展示适配问题呢？我想大家都遇到过。

针对只有一个尺寸的图片素材的时候，我们往往可以通过CSS的object-fit属性来进行裁切适配。但是有些时候需要针对不同的分辨率来显示不同尺寸的图片的场景的时候，我们是否可以直接通过HTML来实现呢？

HTML提供了<picture>标签，允许我们来添加多张图片资源，并且根据不同的分辨率需求来展示不同的图片。

我们可以定义不同区间的最小分辨率来确定图片素材，这个标签的使用有些类似<audio>和<video>标签。

Base URL

当我们的页面有大量的锚点跳转或者静态资源加载时，并且这些跳转或者资源都在统一的域名的场景时，我们可以通过<base>标签来简化这个处理。

例如，我们有一个列表需要跳转到微博的不同大V的主页，我们就可以通过设置来简化跳转路径

<base>标记必须具有href和target属性。

页面重定向（刷新）

当我们希望实现一段时间后或者是立即重定向到另一个页面的功能时，我们可以直接通过HTML来实现。

我们经常会遇到有些站点会有这样一个功能，“5s后页面将跳转”。这个交互可以嵌入到HTML中，直接通过<meta>标签，设置http-equiv="refresh"来实现

这里content属性指定了重定向发生的秒数。值得一提的是，尽管谷歌声称这种形式的重定向和其他的重定向方式一样可用，但是使用这种类型的重定向其实并不是那么的优雅，往往会显得很突兀。

因此，最好在某些特殊的情况下使用它，比如在长时间用户不活动之后再重定向到目标页面。

后记

HTML和CSS是非常强大的，哪怕我们仅仅使用这两种技术也能创建出一些奇妙的网站。虽然它们的使用量很大很普遍，还是有很多的开发者并没有真正的深入了解他们，还有很多的内容需要我们深入的去学习和理解，实践，有很多的技巧等待着我们去发现。

文章转载至乐字节

最后给大家推荐几个b站超详细的Java自学课：

Servlet入门教程BV1D5411373E

Vue、Vuejs教程，BV19V41177od

SpringBoot+Vue项目实战BV1o64y117qQ

在线咨询

上一篇：HTML <html> 标签
下一篇：vscode HTML Boilerplate 插件用法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

第3天 - 16天搞定前端，html基础标签，一点都不基础？

3.1 标题<h1>~

3.2 段落<p>

3.3 水平线和换行

3.4 列表<ul>和<ol>

3.5 超链接<a>

言

概述

基本数据类型

1. 数字类型（Number）

2. 字符串类型（String）

3. 布尔类型（Boolean）

4. 空值（Null）

5. 未定义（Undefined）

引用数据类型

1. 对象（Object）

2. 数组（Array）

3. 函数（Function）

4. 日期（Date）

类型转换

隐式转换

显式转换

转换为字符串

转换为数值

转换为布尔值

parseInt和parseFloat函数

操作符的类型转换

类型转换的陷阱

经验总结

您的项目需求