【11.0】前端基础之阶段性复习

最新推荐文章于 2024-04-10 00:27:17 发布

Chimengmeng

最新推荐文章于 2024-04-10 00:27:17 发布

阅读量871

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/Chimengmeng/article/details/131567188

版权

【11.0】前端基础之阶段性复习

【一】HTML

【1】什么是HTML

超文本标记语言，就是一堆标签，每个标签具有特定的意义，是浏览器展示页面所公用的一套标准
- HTML是一种用于构建网页的标记语言，全称为"Hypertext Markup Language"(超文本标记语言)。
- 它由一系列标签(tag)组成，这些标签描述了网页中的内容和结构。
- HTML不是一种编程语言，而是一种描述性的标记语言。

【2】web服务器的本质

服务端 + 客户端 + HTML
展现在页面上的花里胡哨的页面其本质都是由HTML组成的

【3】HTML文档结构

HTML文档的结构由以下几个主要部分组成：

<!DOCTYPE>声明：
- 这是HTML文档的第一行，用于指定文档类型。
- 它告诉浏览器使用哪个HTML版本来解析该文档。
<html>元素：
- 该元素是HTML文档的根元素
- 它包含了整个HTML文档的内容。
<head>元素：
- 该元素包含了用于描述文档的元数据，如标题、引用的样式表、脚本等。
- 在<head>元素中定义的内容对用户是不可见的，主要是提供给浏览器和搜索引擎使用。
<title>元素：
- 该元素定义了网页的标题
- 通常会显示在浏览器的标题栏或标签页上。
<body>元素：
- 该元素包含了实际显示给用户的网页内容，如文本、图像、链接等。
- 大部分网页的可见内容都应放在<body>元素中。
一个简单的HTML文档结构示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="图片描述">
    <a href="https://example.com">这是一个链接</a>
</body>
</html>

上述示例中，
- <!DOCTYPE>声明指定了HTML5类型的文档，
- <html>元素作为根元素包含了整个HTML文档的内容。
- <head>元素包含了页面的标题，
- 而<body>元素中则包含了一个标题、一个段落、一张图片和一个链接。

【4】标签

段落是在HTML中用于组织和显示文本内容的标签。常用的段落标签是<p>。

例如，以下是一个示例，展示如何使用段落标签创建一个包含文本内容的段落：

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

上述示例中，<p>是段落标签的开始标签，</p>是段落标签的结束标签。在这对标签之间的内容就是一个段落，其中的文本内容将被浏览器解析并按照默认样式进行显示。

除了段落标签 <p> 之外，HTML还提供了其他一些标签用于文本的装饰效果，如下所示：

除了上述标签之外，HTML还提供了<hr>和标签用于插入水平线和换行符：

(1)标题

(2)u/i/s/b

<u>：
- 定义下划线，用于为文本添加下划线效果。
<i>：
- 定义斜体，用于为文本添加斜体效果。
<s>：
- 定义删除线，用于为文本添加删除线效果。
<b>：
- 定义粗体，用于为文本添加粗体效果。
以下是几个示例，展示如何使用这些标签：

<u>下划线文本</u>
<i>斜体文本</i>
<s>删除线文本</s>
<b>粗体文本</b>

需要注意的是，这些标签通常会根据浏览器和网页的样式设置来显示文本的效果。
因此，在不同的浏览器和网页中，这些效果可能会有所差异。

(3)hr/br

<hr>和br 是HTML标签，用于插入水平线和换行符。

<hr>标签用于在页面中插入一条水平线。
- 它没有任何内容，只是作为一个单独的标签存在。
br标签用于在文本中插入一个换行符，使得紧接着的文本从下一行开始显示。

以下是示例代码和展示效果：

<p>这是一段文字。</p>
<hr>
<p>这是另一段文字。</p>

<p>这是一段文字。

这是换行后的文字。</p>

在上述示例中
- 第一个<hr>标签会在两段文字之间插入一条水平线。
- 第二个标签会在第一段文字的末尾插入一个换行符，使得下一段文字从新的一行开始显示。
需要注意的是，
- <hr>和是自闭合标签，不需要结束标签</hr>或</br>。
- 并且，由于<hr>和是单纯的装饰性标签，没有实际的内容，所以它们不会影响网页的语义结构。

(4)段落：p

<p>标签是HTML中用于定义段落的标签。
- 它用于将一段文本包裹起来，表示这些文本是一个段落的内容。
- 浏览器会自动在段落之前和之后添加一些空白，以使其在页面上显示为不同的段落。
以下是示例代码和展示效果：

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

在上述示例中，两个<p>标签分别包裹了两个不同的段落。
- 浏览器会根据这些标记自动为每个段落添加适当的间距，并在页面上显示为不同的段落。
需要注意的是，<p>标签只能包含文本内容，不能嵌套其他块级元素(如<div>、<ul>等)。
- 如果需要在段落中包含其他元素，请考虑使用合适的标签结构，如使用<div>标签来包含多个元素。

【5】标签的分类

(1)单标签/双标签

单标签：

单标签也称为自闭合标签，是指在一个标签中同时定义了开始和结束，没有包含其他内容的标签。
它们通常用于表示页面上的独立元素或空元素，不需要内部内容或子元素。

单标签的结构为<tagname>，例如：

<!-- 换行符 -->
<hr> <!-- 水平线 -->
<img src="image.jpg" alt="图片"> <!-- 图片 -->
<input type="text" name="username"> <!-- 输入框 -->

双标签：

双标签也称为成对标签，是指一个标签包含了开始标签和结束标签，并且可以拥有内部内容或子元素。

双标签的结构为<tagname>content</tagname>，例如：

<p>这是一个段落。</p> <!-- 段落 -->
<a href="https://www.example.com">点击这里</a> <!-- 链接 -->
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul> <!-- 无序列表 -->
<div>
  <h1>标题</h1>
  <p>这是一个区块</p>
</div> <!-- 区块级元素 -->

双标签用于表示具有起始和结束的内容块或容器，并且可以嵌套其他元素。
- 结束标签通常使用斜杠/进行闭合，以与开始标签进行配对。
需要注意的是，每个双标签都必须有相应的开始标签和结束标签，并且它们必须正确地嵌套和闭合，以确保HTML代码的正确性。

(2)块级标签/行内标签

块级~标签(Block-level Tags)：

块级标签独占一行，默认情况下会在前后添加换行。
块级标签可以设置宽度、高度、边距和内边距等样式属性。
块级标签可以包含其他块级元素和行内元素。

常见的块级标签有：

<div>：用于组合其他元素，创建一个区块。
<p>：表示段落。
<h1> 到 <h6>：标题标签，按照重要性递减排列。
<ul>：无序列表。
<ol>：有序列表。
<li>：列表项。
<table>：表示表格。
<form>：表示表单。

行内标签(Inline Tags)：

行内标签与其他内容在同一行上显示，不会强制换行。
行内标签的宽度和高度取决于其中包含的内容。
行内标签通常不能设置宽度、高度和顶部/底部的边距。
行内标签只能包含其他行内元素或文本，不能嵌套块级元素。

常见的行内标签有：

<span>：用于选取文档的一部分或设置样式。
<a>：表示超链接。
<strong>：表示强调内容。
<em>：表示斜体强调内容。
<img>：表示图像。
<input>：表示输入字段。

【6】特殊符号

;
- 是HTML中的非换行空格，可以用于在页面上创建额外的空白间隔。
&
- 是HTML中的字符实体引用，用于表示字符 "&"。
>
- 是HTML中的字符实体引用，用于表示大于号 ">"。
<
- 是HTML中的字符实体引用，用于表示小于号 "<"。
©
- 是HTML中的字符实体引用，用于表示版权符号 "©"。
®
- 是HTML中的字符实体引用，用于表示注册商标符号 "®"。
¥
- 是HTML中的字符实体引用，用于表示日元符号 "¥"。

【7】常用标签

(1)`<div>` 标签是

<div> 标签是HTML中的一个块级元素

通常用于创建一个容器，用来组织和布局其他HTML元素。
它可以通过CSS来定义样式，并且可以嵌套其他的HTML元素。
<div> 标签本身没有特定的语义含义，而是作为一个通用容器使用。

(2)`<span>` 标签

<span> 标签是HTML中的一个内联元素
- 通常用于对文本或其他内联元素应用样式或添加标记。
- 与 <div> 不同，<span> 通常用于小段文字或指定样式，而不是组织页面结构。
- 它也可以嵌套其他的HTML元素。

(3)a链接标签

<a> 链接标签是HTML中的一个内联元素，用于创建超链接。

它可以通过 href 属性设置链接的目标地址，可以是一个 URL，也可以是页面中其他元素的 id 值。

下面是 href 属性的主要用法：
- 当 href 属性值为一个 URL 时，点击链接将会跳转到对应的 URL 地址。
  - 例如：<a href="https://www.example.com">点击跳转</a>
- 当 href 属性值为页面中其他元素的 id 值时，可以实现页面内的锚点功能，点击链接将会滚动到指定 id 元素所在的位置。
  - 例如：<a href="#section1">跳转到第一节</a>
另外，<a> 链接标签还有一个 target 属性，用于指定链接如何在浏览器中打开。
- 默认情况下，target 属性值为 "_self"，表示链接在当前页面打开。
  - 例如：<a href="https://www.example.com" target="_self">点击在当前页面跳转</a>
- 如果将 target 属性值设置为 "_blank"，则链接将在新的标签页或窗口中打开。
  - 例如：<a href="https://www.example.com" target="_blank">点击在新标签页中打开</a>

(4)img图片标签

<img> 图片标签是HTML中的一个自闭合元素，用于在网页中插入图像。
它通过 src 属性指定要显示的图片的地址，并可以使用其他属性来提供附加信息和设置图片的样式。
下面是 <img> 标签的常用属性：
- src：
  - 指定要显示的图片的 URL 地址。
  - 例如：<img src="image.jpg" alt="描述文本">。
  - 在 src 属性中可以使用相对路径或绝对路径来引用图片。
- alt：
  - 在图片无法加载时显示的替代文本。这个属性对于辅助技术(如屏幕阅读器)很重要，也可以作为图片的描述，增强网页的可访问性。
  - 例如：<img src="image.jpg" alt="这是一张图片">。
- title：
  - 鼠标悬停在图片上时显示的文本。它可以提供关于图片的额外信息或者作为提示信息。
  - 例如：<img src="image.jpg" alt="描述文本" title="更多信息">。
- height/width：
  - 用于调整图片的显示尺寸。
  - 通过设置 height 和 width 属性，可以按比例缩放图片的大小，保持图像不失真。
  - 注意，同时设置了 height 和 width 属性且两者比例不一致，可能会导致图像变形。
  - 例如：<img src="image.jpg" alt="描述文本" width="200" height="150">。

【8】标签比较重要的两个属性

`id`属性：

id属性用于为一个HTML元素指定唯一的标识符。
每个HTML文档中的元素都应该具有唯一的id值，这样可以方便地通过JavaScript或CSS选择并操作特定的元素。
在使用id属性时，应确保不同元素之间的id值不重复。
通过#符号加上id值，可以在CSS中选择特定的元素，例如：#myElement { color: red; }。
在JavaScript中，可以使用getElementById()方法来获取具有指定id值的元素。

`class`属性：

class属性用于为一个或多个HTML元素指定相同的类名。
多个元素可以共享相同的class名称，这样可以对这些元素应用相同的CSS样式或JavaScript行为。
class值可以由一个或多个空格分隔的字符组成，允许使用多个类名。例如：<div class="classA classB">。
在CSS中，可以使用.符号加上类名来选择具有特定类的元素，例如：.myClass { font-weight: bold; }。
在JavaScript中，可以使用getElementsByClassName()方法来获取具有指定类名的元素集合。

总结：

id属性用于唯一标识元素，而class属性用于为多个元素指定相同的类名。
通过id可以选择具体的元素进行操作，而通过class可以对一组元素应用共同的样式或行为。

【9】列表标签

无序列表：

使用 <ul> 标签创建无序列表，列表项使用 <li> 标签表示。

<ul>：表示无序列表的容器标签。
<li>：表示列表项，用于包裹每个列表项的内容。
list-style-type: none;：CSS 样式属性，用于去除无序列表的默认样式(例如默认的圆点)。
padding-left: px;：CSS 样式属性，用于将无序列表项的左侧缩进设为像素。

示例代码：

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

有序列表：

使用 <ol> 标签创建有序列表，列表项同样使用 <li> 标签表示。

<ol>：表示有序列表的容器标签。
<li>：表示列表项，用于包裹每个列表项的内容。

示例代码：

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

定义列表：

使用 <dl> 标签创建定义列表，每个术语使用 <dt> 标签表示，对应的定义使用 <dd> 标签表示。

<dl>：表示定义列表的容器标签。
<dt>：表示术语(definition term)，用于包裹每个术语的内容。
<dd>：表示定义(definition)，用于包裹对应术语的定义内容。

示例代码：

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

【10】表格标签

表格标签不一定非要将thead和tbody都写出来，也可以只有thead或tbody

<table>：表示表格的容器标签，用于包裹整个表格结构。
<thead>：表示表格的表头部分，通常包含表头行(<tr>)，用于定义表格的列标题。
<tr>：表示表格的行，在表头中用于定义列标题。
<th>：表示表格的表头单元格，用于包裹表头列标题的内容。

示例代码：

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
</table>

<tbody>：表示表格的主体部分，通常包含数据行(<tr>)，用于填充表格的实际数据。
<tr>：表示表格的行，在 <tbody> 中用于表示每个数据行。
<td>：表示表格的数据单元格，用于包裹每个数据单元格的内容。

示例代码：

<table>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

colspan：表示单元格跨列，用于指定单元格横向占据的列数。

rowspan：表示单元格跨行，用于指定单元格纵向占据的行数。

示例代码：

<table>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td rowspan="2">Data 3</td>
    </tr>
    <tr>
      <td colspan="2">Data 4</td>
    </tr>
  </tbody>
</table>

【11】form表单

用来获取前端输入的数据

超后端发的数据，一定要写在form表单内

<form> 表单是用于获取前端用户输入数据并向后端提交数据的HTML元素。

`action`(动作)：控制数据提交的路径。

如果不写 action 属性，表单将自动拼接当前页面的URL作为提交路径。
如果完整地写出 action 属性，则指定了数据提交的具体URL。
如果只写后缀，例如 /submit，则补全的是与当前页面相同的主机和端口的完整URL。

示例代码：

<form action="/submit" method="post">
  <!-- 表单内容 -->
</form>

`method`(方法)：控制数据提交的方式。

如果使用 post 方法，表单数据将通过 HTTP POST 请求进行提交。
如果使用 get 方法࿰

最低0.47元/天解锁文章

Chimengmeng

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【11.0】前端基础之阶段性复习

【11.0】前端基础之阶段性复习

【一】HTML

【1】什么是HTML

【2】web服务器的本质

【3】HTML文档结构

【4】标签

(1)标题

(2)u/i/s/b

(3)hr/br

(4)段落：p

【5】标签的分类

(1)单标签/双标签

单标签：

双标签：

(2)块级标签/行内标签

块级~标签(Block-level Tags)：

行内标签(Inline Tags)：

【6】特殊符号

【7】常用标签

(1)<div> 标签是

(2)<span> 标签

(3)a链接标签

(4)img图片标签

【8】标签比较重要的两个属性

id属性：

class属性：

总结：

【9】列表标签

无序列表：

有序列表：

定义列表：

【10】表格标签

【11】form表单

action(动作)：控制数据提交的路径。

method(方法)：控制数据提交的方式。

(1)`<div>` 标签是

(2)`<span>` 标签

`id`属性：

`class`属性：

`action`(动作)：控制数据提交的路径。

`method`(方法)：控制数据提交的方式。