前端学习笔记2 标签

最新推荐文章于 2023-12-08 11:18:50 发布

原创最新推荐文章于 2023-12-08 11:18:50 发布 · 584 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文详细介绍了HTML的基础语法，包括标签的使用、基本结构、网页开发工具如VSCode的运用，以及HTML的各种常见标签，如标题、段落、图像、超链接等。还涉及了表格、列表、注释、特殊字符的使用，以及HTML头部元素、响应式Web设计和URL的理解。文章适合初学者学习，帮助构建完整的HTML知识体系。

1. HTML语法规范

1.1 基本语法概述

HTML标签是由尖括号包围的关键词
所有的标签都包含在 <> 中，大部分情况下是成对出现的。
双标签：

<html></html>

前面的叫开始标签，后面的叫结束标签。（结束标签有 / )
单标签：

<br />

1.2 标签关系

双标签关系可分为：包含关系并列关系

包含关系:

<head>
	<title> </title>
</head>

并列关系

<head> </head>
<body> </body>

2. HTML基本结构标签

2.1 第一个HTML网页

每个网页都会有一个基本的结构标签（即骨骼标签）。
在这里插入图片描述

3.网页开发工具

VSCode的使用
VSCode工具生成骨架标签新增代码

3.1 文档类型声明标签

<!DOCTYPE html>

告诉浏览器使用哪种HTML版本来显示网页

3.2 lang语言种类

<html lang="en">

1.en定义语言为英语（英文网页）
2.zh-CN定义语言为中文（中文网页）

3.3 字符集

HTML charset 属性
为了正确显示 HTML 页面，Web 浏览器必须知道页面中使用的字符集。

<meta charset="UTF-8">

采用UTF-8来保存文字，如果不写就会乱码
如果未规定，UTF-8 则是 HTML 中的默认字符集。

4.HTML常用标签

4.1 标签语义

标签的语义，即标签的含义。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

4.2 标题标签

-

<h1>标题标签</h1>

标签语义：作为标题使用，并且依据重要性递减。
< h1 align=“center”>：标题居中。
< hr /> 标签在 HTML 页面中创建水平线。（可用于分割内容）

4.3 段落和换行标签

段落标签：

<p>段落</p>

标签语义：可以把HTML文档分割为若干段落

换行标签：

<br />

标签语义：强制换行。

在开始标签中添加斜杠，比如
，是关闭空元素的正确方法

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

4.4 文本格式化标签

在这里插入图片描述
标签语义：突出重要性，比普通文字更重要。

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

适合显示计算机代码时使用。

在这里插入图片描述

4.5
和标签

结构化标签：span和div标签包裹的内容并没有特殊的呈现效果，这两个标签起到的是规划的作用，和家里用作容器的衣柜、书架等的作用类似，通常用于规划html结构和为多个标签内容统一添加样式和行为。

可以通过 < div> 和 < span> 将 HTML 元素组合起来。
大多数HTML元素被定义为块级元素或内联元素。

HTML 块级元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：< h1>, < p>, < ul>, < table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子：< b>, < td>, < a>, < img>

没有语义，它们是一个盒子，用来装内容的，可以布局网页。

特点：
< div>标签用来布局，但是一行只能放一个< div>。（大盒子）
< div> 是一个块级元素。换行是 < div> 固有的唯一格式表现。可以通过 < div> 的 class 或 id 应用额外的样式。
class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
< span>标签用来布局，一行可以有多个。（小盒子）

< div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

4.6 图像标签和路径

图像标签

<img src="图像URL" />

< img>标签用来定义HTML页面中的图像
在这里插入图片描述
src是标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是这个图像标签的特性。

注：图像标签可以有多个属性，但必须写在标签的后面。
属性之间无顺序，用空格分开。
属性采用键值对的格式。

4.7超链接标签

< a>标签用于定义超链接，作用是从一个页面连接到另一个页面。

链接的语法格式
链接的分类

外部链接：

<a href="http://www.qq.com" target="_blank"> 腾讯</a>

内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可
空链接：如果当前没有确定链接目标时，< a href="#">首页< /a>
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等可以添加超链接。
锚点链接：点我们点击链接，可以快速定义到页面中的某个位置。

4.8图像标签和路径

路径（铺垫）：

目录文件夹和根目录
目录文件夹：存放做网页所需的相关素材，如HTML文件、图片等。
根目录：打开目录文件夹的第一层
VSCode打开目录文件夹
1）在链接文本的href属性中，设置属性值为 #名字的形式，如 < a href="#two">第二集</ a>
2)找到目标位置标签，里面添加一个id属性 = 刚才的名字，如：< h3 id=“two”>第二集介绍</ h3>

路径：

相对路径
绝对路径

HTML 文件路径
文件路径描述了网站文件夹结构中某个文件的位置。
文件路径会在链接外部文件时被用到：

网页
图像
样式表
JavaScript

5.HTML中的注释和特殊字符

5.1 注释

开头：<!- -

结束： - ->

(ctrl+/）

5.2 特殊字符

想展现空格的地方写代码（开头&符，结尾分号，中间写html编码名称）
在这里插入图片描述

6.表格标签

表格是实际开发中非常常用的标签：

6.1 表格的主要作用

主要用于显示、展示数据，可以让数据显示的非常规整，可读性非常好。

6.2 表格的基本语法

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
</table>

定义表格的标签
标签用于定义表格中的行
标签用于定义表格中的单元格
字母td指表格数据，即数据单元格的内容

6.3表头单元格标签

标签表示HTML表格的表头部分 ## 6.4表格属性（了解）

记住这些英语单词，后面CSS会使用
直观感受表格的外观形态

6.5表格结构标签

表格可能很长，让表格有更好的语义：

标签：表格的头部区域

内部必须用有标签

标签：表格的主体区域

以上标签都包含在

标签中。

6.6合并单元格

方式：

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

目标单元格：

跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三步曲：

先确定是跨行还是跨列合并
找到目标单元格，写上合并方式=合并的单元格数量。如：< td colspan=“2” >< /td>
删除多余的单元格

7.列表标签

无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 < dl> 标签开始。每个自定义列表项以 < dt> 开始。每个自定义列表项的定义以 < dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

8.类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

分类块级元素
HTML < div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

设置 < div> 元素的类，使我们能够为相同的 < div> 元素设置相同的类

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

分类行内元素
HTML < span> 元素是行内元素，能够用作文本的容器。

设置 < span> 元素的类，能够为相同的 < span> 元素设置相同的样式。

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

9.ID

HTML id 属性用于为HTML 元素指定唯一的 id。
id 属性的值在 HTML 文档中必须是唯一的。
一个 HTML文档中不能存在多个有相同 id 的元素。

使用 id 属性
id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。
ID名称区分大小写
至少含有一个字符

<style>
/* 设置 id 为 "myHeader" 的元素的样式 */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* 设置类名为 "city" 的所有元素的样式 */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- 拥有唯一 id 的元素 -->
<h1 id="myHeader">My Cities</h1>

<!-- 拥有相同类名的多个元素 -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

通过 ID 和链接实现 HTML 书签
HTML书签用于让读者跳转至网页的特定部分。
如果页面很长，那么书签可能很有用。

方法：
要使用书签，您必须首先创建它，然后为它添加链接。
然后，当单击链接时，页面将滚动到带有书签的位置。

<h1 id="c4">第四章</h1>
<a href="#c4">跳转至第四章</a>

在JavaScript中使用ID属性

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

10.内敛构架

iframe 用于在网页内显示网页。
语法：

<iframe src="URL"></iframe>

11.HTML头部元素

< head> 元素是所有头部元素的容器。< head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：< title>、< base>、< link>、< meta>、< script> 以及 < style>。

HTML < title> 元素
< title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够：
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

< base>元素
< base> 标签为页面上的所有链接规定默认地址或默认目标（target）
< link>元素
< link> 标签定义文档与外部资源之间的关系。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

< style>元素
< style> 标签用于为 HTML 文档定义样式信息。
< meta>元素
元数据（metadata）是关于数据的信息。
< meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
< meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

< script>元素
用于定义客户端脚本，比如JavaScript。

12. HTML响应式web设计

什么是响应式 Web 设计？
RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

13.URL

统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：

scheme://host.domain:port/path/filename

解释：
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

14.HTML框架

** 通过框架，可以在同一个浏览器窗口中显示不止一个页面**
每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

不能将 < body>< /body> 标签与 < frameset>< /frameset> 标签同时使用！不过，假如你添加包含一段文本的 < noframes> 标签，就必须将这段文字嵌套于 < body>< /body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>