前端之标签第二天

已于 2024-02-04 20:32:43 修改
阅读量776 收藏 23
点赞数 27
分类专栏： 前端 HTML css js 文章标签： 前端 开发语言 笔记 学习 html5
于 2024-02-03 10:46:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74242675/article/details/136005065
版权

                HTML（HyperText Markup Language）是一种标记语言，用于创建和设计网页内容的结构。它由一系列标签（或称为元素、标记）组成，这些标签用于描述文档的结构化信息，包括文本、图像、链接、表格、列表以及其他媒体类型等。

                 HTML标签通常是成对出现的，例如 `<p>` 和 `</p>` 用来包裹一段段落文本，但也有自闭合标签，如 `<img>` 用于插入图片，其格式为 `<img src="image.jpg" alt="替代文本">`。 随着HTML5标准的发展，HTML还引入了许多新特性，如语义化标签 `<header>`、`<footer>`、`<nav>` 等，以及多媒体支持、图形绘制、本地存储等功能。通过与CSS（Cascading Style Sheets）和JavaScript等技术结合使用，开发者可以构建功能丰富且具有交互性的现代网页应用。

我们把剩下的HTML标签介绍一下：

HTML 区块元素

HTML中的区块（Block-level）元素是那些在网页布局中通常占据一整行，并且可以设置高度、宽度和内外边距的元素。这些元素会从新行开始，并且在其前后都会自动应用换行，使得它们能够形成文档结构中的分段或者块状内容区域。常见的HTML区块元素包括：

1. `<div>`：一个通用的区块容器，用于组织页面布局或分组其他元素。
2. `<p>`：表示段落，用来包裹文本内容。
3. `<h1>` 至 `<h6>`：标题元素，分别为一级至六级标题。
4. `<header>`：文档或节的头部部分。
5. `<footer>`：文档或节的底部部分。
6. `<section>`：定义文档的一个独立区块，具有自己的主题或逻辑上的意义。
7. `<article>`：定义独立的内容，如博客文章或新闻报道。
8. `<nav>`：定义导航链接的部分。
9. `<form>`：创建表单以收集用户输入数据。
10. `<ul>` 和 `<ol>`：无序列表和有序列表，各自内部包含多个 `<li>` 列表项。
11. `<blockquote>`：用于插入长引用。

区块元素的特点：
- 自动填充其父元素的整个宽度，除非设置了具体的宽度值。
- 可以通过CSS设置width、height、margin和padding属性。
- 内部的子元素默认也会按垂直方向堆叠排列。

与区块元素相对的是内联（Inline）元素，例如 `<span>`，它们不会独占一行，而是与其他内联元素在同一行内显示，并且不能直接设置宽高。此外还有一种混合模式 `display: inline-block;`，它允许内联元素表现得类似块级元素，既可以在一行内显示，又能设置宽高和边距。

HTML 内联元素

HTML中的内联（Inline）元素，也称为行内元素，是指那些在文档流中不会独占一行、与其前后内容在同一行上显示的元素。它们通常用于控制文本样式或插入小块的内容，并且不具有高度和宽度（默认情况下不能设置宽高），只能通过 `line-height` 和 `vertical-align` 属性影响其行内表现。

以下是一些常见的内联元素：

1. `<a>`：超链接标签，用于创建指向其他页面或资源的链接。
2. `<span>`：一个通用的内联容器，常用于为文本添加样式或JavaScript操作等，而不会像`<div>`那样中断文本流。
3. `<strong>` 或 `<b>`：两者都用于强调文本，但`<strong>`更具语义，表示重要性，而`<b>`仅是视觉上的加粗效果。
4. `<em>` 或 `<i>`：同样用于强调文本，`<em>`有强调语气的语义，`<i>`则更多用于展示斜体样式或其他特殊文本（如变量名、技术术语）。
5. `<img>`：图像标签，用于在文档中嵌入图片资源。
6. `<input>`：表单控件，可以用来收集用户输入的数据，如文本、密码、按钮等。
7. `<button>`：定义可点击的按钮，可用于提交表单数据或触发JavaScript事件。
8. `<abbr>`：定义缩写或首字母缩略词，并可以通过 `title` 属性提供完整解释。
9. `<code>`：标记代码片段，文本以等宽字体展示。
10. `<br>`：换行标签，强制在当前位置进行换行。

内联元素的特点：


- 不会另起新行，而是与其他内联元素相邻显示。
- 无法直接设置width和height属性（除非配合CSS将其转换为`inline-block`显示模式）。
- 可以通过CSS设置颜色、字体、文字装饰、间距等内联样式属性。

内联元素主要用于保持文本连续性的同时，对文本样式和功能进行精细化调整。

HTML <div> 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 表单和输入

HTML表单（Form）是网页中用于收集用户输入信息的区域，它允许用户在浏览器端填写数据并提交到服务器进行处理。表单通常包含了各种类型的输入控件（Input Elements），例如文本字段、复选框、单选按钮、下拉列表、文件上传等。

一个基本的HTML表单结构如下：

<form action="/submit-url" method="POST">
  <!-- 输入元素示例 -->
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  
  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email" required>

  <!-- 复选框示例 -->
  <label>
    <input type="checkbox" id="terms" name="terms">
    我同意服务条款
  </label>

  <!-- 单选按钮示例 -->
  <label>
    <input type="radio" id="gender-male" name="gender" value="male">
    男
  </label>
  <label>
    <input type="radio" id="gender-female" name="gender" value="female">
    女
  </label>

  <!-- 下拉列表示例 -->
  <label for="country">国家/地区：</label>
  <select id="country" name="country">
    <option value="usa">美国</option>
    <option value="canada">加拿大</option>
    <!-- 更多选项... -->
  </select>

  <!-- 提交按钮 -->
  <button type="submit">提交</button>
</form>

在上述代码中：
- `<form>` 标签定义了整个表单，并通过 `action` 属性指定了数据提交的目的地URL，以及通过 `method` 属性指定提交方式（通常是GET或POST）。
- `<input>` 标签创建各种类型的输入字段，如文本输入、电子邮件输入、密码输入等。`type` 属性决定了输入类型，`name` 属性定义了提交表单时数据的键名，而 `id` 则用于与 `<label>` 元素关联，提高可访问性。
- `<label>` 标签为输入控件提供可视化的标签名称，使用户更容易理解每个输入框的作用。`for` 属性需要与相关输入控件的 `id` 相匹配。
- `<button type="submit">` 创建了一个提交按钮，点击后会将表单中的所有已填充数据发送至指定URL。
- 其他表单控件包括但不限于：复选框（`<input type="checkbox">`）、单选按钮（`<input type="radio">`）、选择列表（`<select>` 和其内部的 `<option>` 子标签）和文件上传（`<input type="file">`）等。

当用户完成表单内容填写并点击提交后，浏览器会根据表单的 `method` 属性采取相应的动作（GET 或 POST 请求），把用户的输入数据发送到指定的 `action` URL，以便服务器端进一步处理这些数据。

下面是一个文件上传的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传示例</title>
</head>
<body>

    <!-- 创建一个简单的表单 -->
    <form action="/upload-handler" method="POST" enctype="multipart/form-data">
        <!-- 文件选择输入框 -->
        <label for="file-upload">选择文件：</label>
        <input type="file" id="file-upload" name="userFile">
        
        <!-- 提交按钮 -->
        <button type="submit">上传文件</button>
    </form>

    <!-- 提示信息 -->
    <p id="status-message"></p>

    <!-- 这是JavaScript脚本标签，用于处理上传前后的事件（这里仅作为参考，实际代码需根据具体需求编写） -->
    <script>
        // 获取上传按钮和状态提示区域
        const fileInput = document.getElementById('file-upload');
        const statusMessage = document.getElementById('status-message');

        // 为文件选择变化事件添加监听器
        fileInput.addEventListener('change', function() {
            if (this.files.length > 0) {
                statusMessage.textContent = '已选择文件：' + this.files[0].name;
            } else {
                statusMessage.textContent = '';
            }
        });
    </script>

</body>
</html>

HTML 字符实体

HTML字符实体是用于在HTML文档中插入特殊字符的一种方式，特别是那些具有特定含义的预留字符（如 `<`、`>` 和 `&`）以及非ASCII字符（例如版权符号 © 或欧元符号 €）。这些字符实体以特殊的编码形式出现，确保浏览器正确解析它们而不是将其作为HTML标签或实体来处理。

基本格式有两种：

1. **命名实体**：形如 `&entity_name;`，其中 `entity_name` 是预定义好的名称。例如：
   - 小于号（小于号在HTML中会被误认为标签开始符）：`<` 实体为 `&lt;`
   - 大于号（大于号在HTML中会被误认为标签结束符）：`>` 实体为 `&gt;`
   - 与号（& 符号在HTML中用来引入实体）：`&` 实体为 `&amp;`

2. **数字实体**：形如 `&#entity_number;`，其中 `entity_number` 是指定字符对应的十进制或十六进制 Unicode 编码。例如：
   - 空格（一个普通的空格字符）：` ` 实体为 `&nbsp;` 或 `&#160;`
   - 心形符号：`♥` 实体可以表示为 `♥`（实体名称 `&hearts;`）或 `♥`（Unicode编码 `&#9829;`）

使用字符实体的好处在于，它可以确保特殊字符在任何情况下都能被正确显示，并且不会影响HTML文档的结构。同时，对于一些不常见或者无法直接通过键盘输入的字符，也可以通过查找其对应的实体名称或Unicode编码进行插入。

HTML 速查列表

HTML 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

 基本标签（Basic Tags）

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

文本格式化（Formatting）

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

 链接（Links）

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

图片（Images）

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

无序列表

<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

定义列表

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

表格（Tables）

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

表单（Forms）

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

HTML 标签简写及全称

标签英文全称中文说明
aAnchor锚
abbrAbbreviation缩写词
acronymAcronym取首字母的缩写词
addressAddress地址
altalter替用(一般是图片显示不出的提示)
bBold粗体（文本）
bdoBi-Directional Override文本显示方向
bigBig变大（文本）
blockquoteBlock Quotation区块引用语
brBreak换行
cellcell巢
cellpaddingcellpadding巢补白
cellspacingcellspacing巢空间
centerCentered居中（文本）
citeCitation引用
codeCode源代码（文本）
ddDefinition Description定义描述
delDeleted删除（的文本）
dfnDefines a Definition Term定义定义条目
divDivision分隔
dlDefinition List定义列表
dtDefinition Term定义术语
emEmphasized加重（文本）
fontFont字体
h1~h6Header 1 to Header 6标题1到标题6
hrHorizontal Rule水平尺
hrefhypertext reference超文本引用
iItalic斜体（文本）
iframeInline frame定义内联框架
insInserted插入（的文本）
kbdKeyboard键盘（文本）
liList Item列表项目
nlnavigation lists导航列表
olOrdered List排序列表
optgroupOption group定义选项组
pParagraph段落
prePreformatted预定义格式（文本 ）
qQuotation引用语
relReload加载
s/ strikeStrikethrough删除线
sampSample示例（文本
smallSmall变小（文本）
spanSpan范围
srcSource源文件链接
strongStrong加重（文本）
subSubscripted下标（文本）
supSuperscripted上标（文本）
tdtable data cell表格中的一个单元格
thtable header cell表格中的表头
trtable row表格中的一行
ttTeletype打印机（文本）
uUnderlined下划线（文本）
ulUnordered List不排序列表
varVariable变量（文本）

我们的常用的HTML到这里就结束了，欢迎大家观看，后续会出css的文章

后续内容：请点击

感谢大家 

m0_74242675
关注
  • 27
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端之标签第一天
m0_74242675的博客
02-03 1673
随着前端框架的发展，如今也有越来越多基于JavaScript的静态站点生成器（SSG, Static Site Generator），它们可以从Markdown或其他源文件生成静态HTML网页，这些网页同样可以具有复杂的布局和交互特性，但在部署时已经是预渲染好的静态文件。每种列表类型都有其特定的用途和结构。- 在HTML5规范中，``标签被赋予了新的语义，即表示一个不同于普通文本的语音或样式变异，可以用来表示外语短语、专业术语、变量名、想象内容、诗歌引用等内容，或者是具有特殊语境下的文字。
前端第二天(笔记）
2303_80137578的博客
05-29 1485
和
前端学习--第二天
zzusongjinlei2的博客
01-01 1267
前端学习第二天 HTML是什么，HTML5是什么？ html指的是超文本标记语言，用来描述网页，html5是html第五次的修订版，语言更加具有语义化，能更好的被机器阅读，提供更多的媒体接入。 HTML元素标签、属性都是什么概念？ html是一种描述网页内容的一门语言，html文档由标签、网页内容、标签属性构成，其中网页内容通过标签来进行标记；标签有两种， 1、成对出现的标签如： &lt;p&g...
【前端学习】前端学习第二天:图片标签、音频标签及视频标签的用法说明
qq_49916504的博客
03-13 4709
一、图片标签 在介绍图片标签之前，首先可以了解一下图片的格式。 1、jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图； 2、gif：支持的颜色比较少，支持简单透明，支持动图； 3、png：支持的颜色丰富，支持复杂透明，不支持动图； 4、webp：是谷歌新推出的专门用来表示网页中图片的一种格式，具备其他格式的所有优点，占用内存还小，但是兼容性不好。 图片标签通过使用<img>标签引入外部图片，img标签属于替换元素，也就是基于块元素和行内元素之间，具有两种元素的特点。
【前端web入门第二天】02 表单-input标签-单选框-多选框
weixin_62613321的博客
01-28 1338
html5实现表单,使用input标签
前端面试总结（第二天）
weixin_55903841的博客
12-01 1697
前端面试总结（第二天） 1.http常见的请求方法 get,post请求最常见，除此之外还有patch,put,delete,options. 拿常见的get和post来比较异同: ​ get post 从指定的资源请求数据 向指定的资源提交要被处理的数据 数据较小，一般在1K以内 没有限制 一般发送一个数据包 一般发送两个数据包 把header头和data一并发出去 先发送header头，待服务器响应之后在发送data 只支持URL编码 支持json以内的多种数据
前端基础第二天项目 大数据大屏可视化项目
fegus的博客
04-26 8311
大数据大屏可视化项目 01-项目介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。 ​ 该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 … 02-使用技术 完成该项目需要具备以下知识： div + css 布局 flex 布局 css3动画 cs
【前端学习】前端学习第三天：表单标签介绍，及HTML常用标签介绍
qq_49916504的博客
03-14 817
一、表单标签 <form>标签用来表示创建一个用户输入的HTML表单，相当于一个容器。 form标签常用属性： 1、action：定义一个URL，当点击提交按钮时，向这个URL发送输入的数据； 2、replace：定义表单提交时所做的事情； 3、method：用于向action的URL发送数据的HTTP方法，默认为get方法； 当值为get时，从服务器上获得资源，用户输入的数据会附加在URL之后，由用户端直接发送到服务器端，特点是数据的提交速度快，但数据长度不能够过长且安全性不高；
HTML世界之第二重天
m0_73514785的博客
02-13 2041
标签描述定义缩写定义地址定义文字方向定义长的引用定义短的引用语定义引用、引证定义一个定义项目。
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
weixin_62613321的博客
01-27 1150
html 实现列表和表格
斑码教育大前端笔记-HTML第二天
10-09
在“斑码教育大前端笔记-HTML第二天”的学习资源中，我们主要聚焦于HTML这一核心前端技术。HTML，全称为HyperText Markup Language，是构建网页的基础语言，它定义了网页的结构和内容。HTML5是其最新版本，带来了...
前端学习的第04天.zip
09-22
-- 这个表格用于展示销售数据，第一列是日期，第二列是产品，第三列是销售额 --> <!-- ... --> ``` 在编辑器中，你可以利用快捷键如`CTRL+/`（在许多IDE或文本编辑器中）快速插入或删除注释，这大大提高了编写和...
springmvc第二天课堂笔记.pdf
11-15
最后，`<mvc:annotation-driven>`标签用于启用注解驱动的配置，这会自动配置处理器映射器和适配器，从而简化XML配置。 总结一下，Spring MVC的核心组件包括DispatcherServlet、HandlerMapping、HandlerAdapter、...
第二天静态页面资源 第二天静态页面资源
07-11
`公共资源`中的JavaScript文件可能是独立的脚本或库，如jQuery、React或Vue，它们可以帮助开发者更高效地编写前端逻辑。 4. SQL脚本：在Java Web应用中，数据库操作通常是必不可少的。`SQL脚本`可能包含了创建表、...
icon字体-对应练习第二天的font资源
02-26
在“icon字体——对应练习第二天的font资源”这个主题中，可能涉及到的练习包括学习如何导入和使用icon字体库，理解Unicode码点，以及通过CSS自定义图标样式。提供的"font"文件可能包含了练习所需的各种字体资源，...
5.CSS学习（浮动）
最新发布
ShawLee0925的博客
07-23 177
css浮动——float特点
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 926
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 81
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 68
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值