杏仁海棠花饼的学习日记第十三天-海口c网

一，前言

今天是学习前端三件套的第一天，今天来学HTML。我看的是b站罗大富Bigrich的视频。

二，安装VSCode开发环境

安装直接从官网上安装适配自己电脑版本的即可。

这边着重说一下一些有用的插件

Chinese (Simplified)汉化包，下载完重启一下就可以了。

Live Server

可以在浏览器中实时预览页面的一个变化。

Auto Rename Tag

可以在修改HTML标签的时候同步修改与之匹配的另一个标签

HTML CSS Support

写CSS代码的快捷神器

这些插件的具体作用以后会知道的先下载上就可以了。

三，HTML

1，HTML简介及环境搭建

HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它是构成现代互联网的基础技术之一。以下是关于 HTML 的简要介绍：

基本概念

超文本标记语言：HTML 通过 "标记" 来描述网页的结构和内容
非编程语言：HTML 是一种标记语言，不是编程语言，不具备逻辑处理能力
网页骨架：提供网页的基本结构，与 CSS（样式）和 JavaScript（交互）共同构建完整网站

核心特点

简单易学：基本语法直观，标签结构清晰
跨平台兼容：所有浏览器都支持 HTML
持续发展：从 HTML 4 到 HTML5，功能不断增强
语义化：HTML5 引入了语义化标签，如<header>、<nav>、<main>等

应用场景

网页制作：创建各种类型的网站
Web 应用：作为前端基础，与后端技术结合
电子邮件模板：创建格式化的 HTML 邮件
移动应用：通过 WebView 技术嵌入 HTML 内容

HTML 是构建网页的基石，无论您是开发简单的静态页面还是复杂的 Web 应用，掌握 HTML 都是必不可少的第一步。

在桌面或者什么地方新建一个文件夹后，在vscode中打开，然后再新建一个文件之后就可以编写HTML了

创建好之后使用Ctrl+K M选择HTML语言。

2.HTML语法

在这之前先了解一个概念

HTML 文件的基本结构

一个标准的 HTML 文件包含以下核心部分：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页标题</title><!-- 外部资源引用 --><link rel="stylesheet" href="styles.css"><script src="script.js"></script>
</head>
<body><!-- 网页内容 --><header>头部区域</header><main>主要内容</main><footer>页脚区域</footer>
</body>
</html>

可以直接输入一个！然后选择第一个选项就可以直接生成。

常用文本标签

标题标签（Heading Tags）

用于定义页面的标题层级，从<h1>到<h6>，数字越小字体越大、重要性越高。

<h1>一级标题（最大）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最小）</h6>

表格和列表

<!-- 有序列表元素 -->
<ol><li>苹果</li><li>香蕉</li><li>樱桃</li>
</ol>
<!-- 无序列表元素 -->
<ul><li>苹果</li><li>香蕉</li><li>樱桃</li>
</ul><!-- 表格 -->
<table> <tr><th>表头1</th><th>表头2</th><th>表头3</th></tr><tr><td>单元格 1</td><td>单元格 2</td> <td>单元格 3</td></tr><tr><td>单元格 21</td><td>单元格 22</td> <td>单元格 23</td></tr><tr><td>单元格 31</td><td>单元格 32</td> <td>单元格 33</td></tr>

段落标签（`<p>`）

用于定义文本段落。

<p>这是一个段落。浏览器会自动在段落前后添加换行。</p>
<p>这是另一个段落。</p>
<p>段落元素会自动在其内容的前后添加额外的空白。</p>

文本格式化标签

强调文本

<!-- 斜体，通常表示强调 -->
<em>这是强调的文本</em>

<!-- 加粗，通常表示重要性 -->
<strong>这是重要的文本</strong>

斜体和粗体

<!-- 斜体（无语义） -->
<i>斜体文本</i>

<!-- 加粗（无语义） -->
<b>加粗文本</b>

<!-- 小字体 -->
<small>小字体文本</small>

删除线和下划线

<!-- 删除线 -->
<del>已删除的文本</del>
<s>已过时的文本</s> <!-- 语义：不再准确/相关 -->

<!-- 下划线 -->
<u>下划线文本</u> <!-- 语义：专有名词或拼写错误 -->
<ins>插入的文本</ins> <!-- 语义：文档中新增的内容 -->

上标和下标

<!-- 上标（如数学公式） -->
x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>

<!-- 下标（如化学公式） -->
H<sub>2</sub>O

文本分隔标签

换行（`<br>`）

<p>这是第一行。<br>这是第二行。</p>

水平线（`<hr>`）

<p>第一段内容</p>
<hr>
<p>第二段内容</p>

语义化文本标签

标记文本

<p>搜索关键词：<mark>HTML</mark> 和 CSS。</p>

时间和日期

<p>今天是 <time datetime="2023-06-15">2023年6月15日</time>。</p>

联系信息

<address>作者：张三<br>邮箱：<a href="mailto:example@mail.com">example@mail.com</a>
</address>

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML练习</title></head>
<body>
<h1>一级标题（最大）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最小）</h6>


<!-- 有序列表元素 -->
<ol><li>苹果</li><li>香蕉</li><li>樱桃</li>
</ol>
<!-- 无序列表元素 -->
<ul><li>苹果</li><li>香蕉</li><li>樱桃</li>
</ul><!-- 表格 -->
<table> <tr><th>表头1</th><th>表头2</th><th>表头3</th></tr><tr><td>单元格 1</td><td>单元格 2</td> <td>单元格 3</td></tr><tr><td>单元格 21</td><td>单元格 22</td> <td>单元格 23</td></tr><tr><td>单元格 31</td><td>单元格 32</td> <td>单元格 33</td></tr>
<p>这是一个段落。浏览器会自动在段落前后添加换行。</p>
<p>这是另一个段落。</p>
<p>段落元素会自动在其内容的前后添加额外的空白。</p>
<!-- 斜体，通常表示强调 -->
<em>这是强调的文本</em>
<!-- 斜体（无语义） -->
<i>斜体（无语义）</i>

<!-- 加粗，通常表示重要性 -->
<strong>这是重要的文本</strong>
<!-- 加粗（无语义） -->
<b>加粗（无语义）</b>
<!-- 小字体 -->
<small>小字体文本</small>
<!-- 下标 -->
<sub>下标</sub>
<!-- 上标 -->
<sup>上标</sup>
<!-- 下划线 -->
<u>下划线</u>
<!-- 删除线 -->
<s>删除线</s>
<!-- 下划线（无语义） -->
<ins>下划线（无语义）</ins>
<!-- 删除线（无语义） -->
<del>删除线（无语义）</del>

<p>这是第一行。<br>这是第二行。</p>

<p>第一段内容</p>
<hr>
<p>第二段内容</p>

<!-- 标记文本 -->
<p>搜索关键词：<mark>HTML</mark> 和 CSS。</p>
<!-- 时间和日期 -->
<p>今天是 <time datetime="2023-06-15">2023年6月15日</time>。</p>

<!-- 联系信息 -->
<address>作者：张三<br>邮箱：<a href="mailto:example@mail.com">example@mail.com</a>
</address>
</body>
</html>

3.HTML属性

在 HTML 中，属性（Attributes）是提供关于 HTML 元素的附加信息的关键字，它们总是在 HTML 标签的开始标签中指定，以键值对的形式存在。定义元素的行为和外观，以及与其他元素的关系

基本语法

<开始标签 属性名=“属性值”>

每个HTML元素可以具有不同的属性

  <p id = "happy" class="red" title="这是一个段落标签">这是一个段落标签</p><a href="https://www.baidu.com">百度的超链接</a>

属性名称不区分大小写，属性值对大小写敏感

 <img src="example.jpg" alt=""><img SRC="example.jpg" alt=""><img src="EXAMPLE.jpg" alt=""><!-- 前两者相同，第三个不同 -->

1. 通用属性（Global Attributes）

所有 HTML 元素都可以使用的属性：

id：唯一标识元素（如 <div id="main-content">）。
class：为元素指定 CSS 类（如 <p class="highlight">）。
style：直接添加内联 CSS 样式（如 <span style="color:red">）。
title：鼠标悬停时显示的提示文本（如 <img title="点击查看大图">）。
lang：设置元素内容的语言（如 <html lang="zh-CN">）。
tabindex：控制元素的键盘焦点顺序（如 <button tabindex="1">）。
hidden：隐藏元素（如 <div hidden>）。

2. 特定元素属性

不同元素特有的属性：

<a>：
- href：链接地址（如 <a href="https://example.com">）。
<img>：
- src：图片地址（如 <img src="image.jpg">）。
- alt：如果图片无法加载，就会显示alt后面的内容。（如 <img alt="产品图片">）。
- width/height：图片尺寸（如 <img width="200" height="100">）。

3.注意

引号：属性值必须用双引号（"）或单引号（'）包裹，如 <a href='link'>。
大小写：HTML5 中属性名不区分大小写，但建议使用小写（如 class 而非 CLASS）。

4.块元素与行内元素

在 HTML 中，元素根据其默认的显示方式（display 属性）分为块级元素（Block-level Elements）和行内元素（Inline Elements）。它们的主要区别在于如何占据页面空间以及如何与其他元素交互。

1. 块级元素

特点

独占一行：每个块级元素都会从新的一行开始，并占据整行宽度。
可设置宽高：可以通过 CSS 设置宽度（width）和高度（height）。
支持边距和内边距：可以设置上下左右的边距（margin）和内边距（padding）。
可包含其他块级元素和行内元素：例如，<div> 可以包含 <p>、<h1> 等。

常见块级元素

<div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<pre>、<form>、<table>、<header>、<footer>、<section>、<article> 等。

示例：

<div>这是一个 div 块级元素</div>
<p>这是一个段落（p 元素）</p>
<h1>这是一个标题（h1 元素）</h1>

2. 行内元素

特点

不换行：行内元素会在同一行内显示，不会强制换行。
宽度由内容决定：宽度和高度由内容自然撑开，无法直接设置宽高。
水平边距有效：水平方向的边距（margin-left、margin-right）和内边距有效，但垂直方向的边距和内边距可能不会影响布局。
只能包含其他行内元素：不能包含块级元素。

常见行内元素

<a>、<img>、<input>、<button>、<span>、<br>、<i>、<em>、<strong>、<u>、<s>、<sub>、<sup> 等。

示例：

<p>这是一个包含 <a href="#">链接</a> 和 <span>span</span> 的段落

特殊注意事项

<img> 和 <input>：虽然是行内元素，但它们是可替换元素（Replaced Elements），支持宽高和边距。
<br> 和 <hr>：<br> 是行内元素，但作用是强制换行；<hr> 是块级元素，用于创建水平线。

总结块级元素适合构建页面的主要结构（如容器、段落、标题）。行内元素适合处理文本内容中的小片段（如链接、强调文本）。通过 CSS 可以灵活转换元素的显示方式，实现更复杂的布局需求。

5.HTML表单

HTML 表单（Form）是网页中用于收集用户输入数据的重要组件，常用于登录、注册、搜索、反馈等交互场景。下面详细介绍 HTML 表单的结构、元素和功能。

表单的基本结构及属性

表单由 <form> 标签包裹，内部包含各种输入元素（如文本框、下拉框、按钮等）。

在 HTML 中，type="text" 是<input> 元素的一个属性设置。它表示该输入框为文本输入类型，用户可以在其中输入单行文本内容，比如用户名、搜索关键词等。例如<input type="text" name="username" placeholder="请输入用户名"> ，这里的type="text" 就指定了这个输入框用于接收用户输入的普通文本。

type="password"” 是 HTML（超文本标记语言）中用于表单元素的一个属性设置。它表明该表单元素为密码输入框类型。当在网页上呈现时，用户输入的字符会以黑点或星号等形式隐藏显示，以保护密码隐私。例如在登录页面，为了防止周围人窥视密码，就会使用这种设置，将输入框设为密码类型，用户输入密码时不会直接显示明文。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML表单</title>
</head>
<body><form action=""><span>用户名：</span><input type="text" name="username" placeholder="请输入用户名" required><span>密码：</span><input type="password" name="password" placeholder="请输入密码" required><input type="submit" value="登录"><br><br><span>性别：</span><!-- 将他们的name属性设置为相同的值，这样就可以实现单选框的效果 --><input type="radio"name="gender">男<input type="radio"name="gender">女   <input type="radio"name="gender">其他<br><br><span>爱好：</span><!-- 可以多选 --><input type = "checkbox" name = "hobby">篮球<input type = "checkbox" name = "hobby">足球<input type = "checkbox" name = "hobby">羽毛球</form>
</body>
</html>