前端标记语言HTML

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它是构建和设计网页及应用的基础，通过定义各种元素和属性，HTML使得开发者能够组织和格式化文本、图像、链接等内容。

HTML的基本结构

  1. 文档类型声明（Doctype）: 这是HTML文档的第一行，用于告诉浏览器这是一个HTML5文档。例如：<!DOCTYPE html>。

  2. HTML元素（Html Element）: 它是所有HTML文档的根元素，包含了所有的内容。<html>标签通常包含两个子元素：<head>和<body>。

  3. 头部（Head）: <head>元素包含了文档的元数据，这些数据不会在浏览器的可视区域显示。它通常包含了文档的标题（<title>）、字符集声明（<meta charset="UTF-8">）、视口设置（<meta name="viewport" content="width=device-width, initial-scale=1.0">）以及链接到外部CSS文件和JavaScript文件的引用。

  4. 主体（Body）: <body>元素包含了可见的页面内容，如标题、段落、图片、链接、列表、表格

HTML基础表签讲解及用法展示

标题标签：h

从<h1>到<h6>，定义了六级标题。<h1>是最高级别，通常用作页面的主标题

代码

    <h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6>

页面修改 

d0b3867c64d44d119b34a1f25192f9c6.png

段落标签:p

<p>标签定义了一个文本段落

用法

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

代码

    普通文本普通文本普通文本<p>这是加了段落标签的普通文本</p><p>这是加了段落标签的第二个普通文本</p>

 页面效果

0acf9394f5a54583aca139f50898c84e.png

链接标签:a

<a>标签定义了一个超链接，可以用来链接到另一个页面或页面内的特定部分。

属性

href (Hypertext Reference): 用于指定链接的目标地址。这个地址可以是相对路径、绝对路径、或者完整的URL

target: target 属性用于指定链接被点击时打开的目标位置。常用的值有 _blank（在新窗口或标签页中打开链接）、_self（在当前窗口或标签页中打开链接，这是默认值）、_parent（在父窗口或标签页中打开链接）、_top（在整个窗口中打开链接，取消任何框架）

title: title 属性提供了关于链接的额外信息，当用户将鼠标悬停在链接上时，这些信息会显示为提示

用法

<a href="" target="" title=""></a>

代码

<a href="https://www.baidu.com/" target="_blank" title="baidu">跳转到百度 -->

页面效果

f3ce598a48424709b1fda3d2d58bd574.png

3c1b29ba2b2840e78b039d189eba93ee.png

图像标签:img

<img>标签用于在网页上显示图像。它通常包含src属性，指定图像的路径，以及alt属性，提供图像的替代文本

属性

src (source): 这是 <img> 标签的必需属性，用于指定图像文件的路径。这个路径可以是相对路径、绝对路径或外部UR

alt (alternative text): alt 属性提供图像的替代文本，当图像因为某些原因（如路径错误、文件丢失、网络问题等）无法显示时，这段文本将会显示出来

title: title 属性提供了当鼠标悬停在图像上时显示的额外信息。这是一个可选属性，可以为用户提供更多关于图像的上下文信息

width 和 height: 这两个属性用于指定图像的宽度和高度。可以指定像素值或百分比值。如果指定了尺寸，图像将会被缩放到指定的大小。建议始终包含这两个属性，以确保页面布局的一致性和避免页面重排（reflow）

用法

<img src="" alt="" title="" width="" height="">

代码

<img src="鸽鸽.png" title="蔡徐坤" alt="加载失败" width="100px" height="200px">

页面效果

31bc240ad79f477686f28077b0a0b15f.png

a标签联动img标签

代码

    <a href="https://www.baidu.com/" target="_blank" title="baidu">跳转到百度 --><img src="鸽鸽.png" title="蔡徐坤" alt="加载失败" width="100px" height="200px"> </a>

页面效果

ac682e32eb02406ea08b7bfcc1b3cc0b.png

列表标签:ul;ol

<ul>定义了一个无序列表，<ol>定义了一个有序列表。列表项由<li>标签定义

用法

<ul>
    <li></li>
</ul>
<ol>
    <li></li>
</ol>

代码

    <ol><li>第一行</li><li>第二行</li><li>第三行</li></ol><ul><li><a href="第一章链接">第一章</a></li><li><a href="第二章链接">第二章</a></li><li><a href="第三章链接">第三章</a></li><li>第四行</li></ul>

页面效果

36bab3faeb884b8488a2214bf3f972a4.png

表格标签:table

用法

 <table>标签用于创建表格，border定义边框宽度。<tr>定义表格行，<th>定义表头单元格，<td>定义表格数据单元格。

代码

<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td></tr><tr><td>李四</td><td>30</td></tr>
</table>

页面效果

36b697e7ef064a43947cd5b0a0a30929.png

 容器标签：div

 用来划分页面布局

 属性

  1. 高度（Height）: height: 200px; 表示这个 <div> 容器的高度被设置为 200 像素（px）。像素是屏幕上的一个点，是计算机显示的基本单位之一。

  2. 宽度（Width）: width: 400px; 表示这个 <div> 容器的宽度被设置为 400 像素。这意味着无论在何种设备上查看，这个 <div> 都将尝试占据 400 像素的宽度空间。

  3. 背景颜色（Background Color）: background-color: antiquewhite; 为这个 <div> 设置了一个背景颜色。antiquewhite 是一种浅黄色调，类似于古董白色。这个颜色将填充整个 <div> 容器的背景区域。

用法

<div style="height: ;width: ;background-color: ;"></div>

代码

    <div style="height: 200px;width: 800px;background-color: antiquewhite;">这是一个高度为200像素宽度为800像素背景颜色为浅黄色的容器标签</div><div style="height: 300px;width: 1000px;background-color: blue;">这是第二个高度为300像素宽度为1000像素背景颜色为蓝色的容器标枪<p>这是加了段落标签的普通文本</p><p>这是加了段落标签的第二个普通文本</p><p>这是一个段落</p><p>这是第二个段落使用换行标签开始<br>新的一行</p><p>这是一个使用了水平线标签的段落</p><hr></div>

页面效果

146b668b11ac42618ceb88e7b9315e84.png

测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6> 普通文本普通文本普通文本<p>这是加了段落标签的普通文本</p><p>这是加了段落标签的第二个普通文本</p><p>这是一个段落</p><p>这是第二个段落使用换行标签开始<br>新的一行</p><p>这是一个使用了水平线标签的段落</p><hr>这是一个水平线<br><br><hr><div style="height: 200px;width: 800px;background-color: antiquewhite;">这是一个高度为200像素宽度为800像素背景颜色为浅黄色的容器标签</div><div style="height: 300px;width: 1000px;background-color: blue;">这是第二个高度为300像素宽度为1000像素背景颜色为蓝色的容器标枪<p>这是加了段落标签的普通文本</p><p>这是加了段落标签的第二个普通文本</p><p>这是一个段落</p><p>这是第二个段落使用换行标签开始<br>新的一行</p><p>这是一个使用了水平线标签的段落</p><hr></div><a href="https://www.baidu.com/">跳转到百度</a> --><img src="鸽.png" alt="加载失败后显示的内容"><img src="鸽鸽.png" title="蔡徐坤" alt="加载失败" width="100px" height="200px"><a href="https://www.baidu.com/" target="_blank" title="baidu">跳转到百度 --><img src="鸽鸽.png" title="蔡徐坤" alt="加载失败" width="100px" height="200px"> </a><ol><li>第一行</li><li>第二行</li><li>第三行</li></ol><ul><li><a href="第一章链接">第一章</a></li><li><a href="第二章链接">第二章</a></li><li><a href="第三章链接">第三章</a></li><li>第四行</li></ul></table><table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td></tr><tr><td>李四</td><td>30</td></tr></table></body>
</html>

HTML专业术语

1. 文档类型声明（DOCTYPE）**: 用于告诉浏览器这是一个HTML文档，并指定HTML的版本。例如，`<!DOCTYPE html>` 用于HTML5。

2. 元素（Element: HTML文档的构建块，由标签（tag）包围的内容组成。例如，`<p>` 是一个段落元素。

3. 标签（Tag）: 定义元素开始和结束的标记。HTML标签通常成对出现，如 `<p>` 和 `</p>`，但有些标签是空元素，如 `<img>` 和 `<br>`。

4. 属性（Attribute）: 为HTML元素提供额外信息的值。属性总是出现在元素的开始标签中，例如 `href` 和 `src` 是 `<a>` 和 `<img>` 标签的属性。

5. 内容（Content）: 元素之间的文本、图片、视频等数据。

6. 嵌套（Nesting）: 将一个HTML元素放置在另一个元素内部的过程。

7. 块级元素（Block-level Element）: 占据整个行的元素，如 `<div>`、 `<p>` 和 `<h1>` 到 `<h6>`。

8. 行内元素（Inline Element）: 不会独占一行，而是与其他元素并排显示的元素，如 `<span>`、<a> 和 `<img>`。

9. CSS（Cascading Style Sheets）： 用于定义HTML元素样式的语言。

10. DOM（Document Object Model）: 表示HTML文档结构的编程接口，允许JavaScript操作和动态改变文档内容。

11. 选择器（Selector）: 在CSS中用于选择和样式化HTML元素的模式。

12. 类（Class）: 用于给HTML元素指定样式或行为的标识符，可以通过 `class` 属性添加到元素上。

13. ID（ID）: 用于给HTML元素指定一个唯一的标识符，可以通过 `id` 属性添加到元素上。

14. 伪类（Pseudo-class）: 在CSS中，用于定义元素在特定状态下的样式，如 `:hover` 或 `:focus`。

15. 伪元素（Pseudo-element）: 用于样式化文档树中某些部分的抽象对象，如 `::before` 和 `::after`。

16. 表单（Form）: 用于收集用户输入的HTML元素集合。

17. 控件（Control）: 表单中用于用户输入的元素，如 `<input>`、`<textarea>` 和 `<select>`。

18. 属性选择器（Attribute Selector）: 在CSS中，用于选择具有特定属性或属性值的元素。

19. 响应式设计（Responsive Design）: 一种设计方法，旨在使网站能够适应不同设备和屏幕尺寸。

20. 语义化标签（Semantic Tags）: 如 `<article>`、`<section>`、`<nav>` 和 `<aside>`，这些标签提供了更丰富的结构和意义。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/819117.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Tomcat 8.5.100 配置多证书多域名

Tomcat 8.5.100 配置多证书多域名

Tomcat多证书多域名必须是Tomcat 8.5以上版本 配置server.xml <?xml version1.0 encodingutf-8?><Server port"8005" shutdown"SHUTDOWN"><Listener className"org.apache.catalina.startup.VersionLoggerListener" /><…
阅读更多...
Docker搭建Fleet

Docker搭建Fleet

Fleet 是一个高度可伸缩的容器管理工具&#xff0c;它允许用户在一组机器上管理容器。它的设计目的是为了简化在多个Docker宿主之间部署和管理容器的过程。Fleet 可以在整个集群中自动分配资源&#xff0c;确保应用程序的高可用性&#xff0c;并提供服务发现的功能。 应用场景…
阅读更多...
Android USB TP方向修改

Android USB TP方向修改

搜集的一些关于Android USB TP的方向修改的代码&#xff0c;X to Y , X反转 &#xff0c; Y反转&#xff0c;双触屏配置&#xff0c;双屏异触等。 diff --git a/kernel/drivers/hid/hid-multitouch.c b/kernel/drivers/hid/hid-multitouch.c old mode 100644new mode 100755 i…
阅读更多...
EtherCAT主站SOEM -- 29 -- STM32F767-SOEM通过 CSP模式（周期同步位置模式）控制一个电机转圈圈

EtherCAT主站SOEM -- 29 -- STM32F767-SOEM通过 CSP模式（周期同步位置模式）控制一个电机转圈圈

EtherCAT主站SOEM -- 29 -- STM32F767-SOEM通过 CSP模式（周期同步位置模式）控制一个电机转圈圈 0 QT-SOEM视频预览及源代码下载：0.1 QT-SOEM视频预览0.2 QT-SOEM源代码下载1 程序文件修改替换1.1 allvalue.h1.2 allvalue.c1.3 motrorcontrol.h1.4 motrorcontrol.cpp1.5 main…
阅读更多...
QT drawPixmap和drawImage处理图片模糊问题

QT drawPixmap和drawImage处理图片模糊问题

drawPixmap和drawImage显示图片时&#xff0c;如果图片存在缩放时&#xff0c;会出现模糊现象&#xff0c;例如将一个100x100 的图片显示到30x30的区域&#xff0c;这个时候就会出现模糊。如下&#xff1a; 实际图片&#xff1a; 这个问题就是大图显示成小图造成的像素失真。 当…
阅读更多...
【笔试】02

【笔试】02

TCP TCP&#xff08;传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的传输层通信协议 它能够提供以下服务&#xff1a; 可靠传输 通过序列号、确认应答、重传机制等确保数据完整、准确地从发送端传输到接收端。 三次握手&#xff1a; 点对点全双工面向字节流…
阅读更多...
1260. 二维网格迁移

1260. 二维网格迁移

1260. 二维网格迁移 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;错误经验吸取 原题链接&#xff1a; 1260. 二维网格迁移 https://leetcode.cn/problems/shift-2d-grid/description/ 完成情况&#xff1a; 解题思路&#xff1a; 这…
阅读更多...
使用稳压管和三极管射极输出器电路驱动PMOS

使用稳压管和三极管射极输出器电路驱动PMOS

当电源电压大于PMOS 管的最大栅源电源时&#xff0c;不能直接把栅极拉到地&#xff0c;需要一点特殊的电路来限制栅极驱动电压。有的地方是用电阻分压器做的&#xff0c;比如这种&#xff1a; NPN 三极管导通时&#xff0c;MOS 管栅极电压是两个电阻中间的电压。这种设计最大的…
阅读更多...
106.从中序与后序遍历构造二叉树

106.从中序与后序遍历构造二叉树

给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 思路&#xff1a; 中序遍历数组中&#xff0c;找到一个根节点&#xff0c;那么其前为其左子树&a…
阅读更多...
(delphi11最新学习资料) Object Pascal 学习笔记---第9章第6节（嵌套异常和 InnerException机制）

(delphi11最新学习资料) Object Pascal 学习笔记---第9章第6节（嵌套异常和 InnerException机制）

9.6 异常的高级功能 ​ 除非你对这门语言已经有了很好的了解&#xff0c;否则第一次阅读这部分内容时最好跳过。在此之前&#xff0c;你可以先阅读下一章&#xff0c;将来再回到这一部分。 ​ 在本章的最后一部分&#xff0c;我将介绍一些与异常处理相关的高级主题。我将介绍…
阅读更多...
嵌入式学习——Linux基础——day1

嵌入式学习——Linux基础——day1

1. linux基础命令 1.1 ls 查看当前目录下的所有文件 ls -l 查看文件的详细信息 ls -a 查看当前目录下的所有文件&#xff08;包含隐藏文件&#xff09; 1.2 touch 创建一个空的普通文件 1.3 rm 删除一个普通文件 rm -rf 删除非…
阅读更多...
大模型用到的位置编码汇总（面试）

大模型用到的位置编码汇总（面试）

不同于RNN、CNN等模型&#xff0c;对于Transformer模型来说&#xff0c;位置编码的加入是必不可少的&#xff0c;因为纯粹的Attention模块是无法捕捉输入顺序的&#xff0c;即无法区分不同位置的Token。为此我们大体有两个选择&#xff1a;想办法将位置信息融入到输入中&#x…
阅读更多...
用odin实现的资源复制编辑器

用odin实现的资源复制编辑器

用odin实现了一个资源复制编辑器&#xff0c;使用要安装odin&#xff0c;功能是把要复制的资源路径一个个添加设置&#xff0c;点copy能把列表里的资源全部复制&#xff0c;支持目录复制到目录&#xff0c;文件复制到目录&#xff0c;文件复制替换。提升效率&#xff0c;让自己…
阅读更多...
Office 365卡顿怎么办？SD-WAN可以解决

Office 365卡顿怎么办？SD-WAN可以解决

随着数字化浪潮的推进&#xff0c;Office 365等云办公应用已成为企业日常运营不可或缺的工具。然而&#xff0c;许多企业在使用Office 365时遭遇了网络卡顿的难题&#xff0c;给工作人员带来诸多不便。随着SD-WAN技术的成熟和普及&#xff0c;这一难题得到了有效的解决。 Offic…
阅读更多...
使用JWT、Redis + token实现用户登录的两种方式。

使用JWT、Redis + token实现用户登录的两种方式。

使用JWT实现登录功能 功能实现流程&#xff1a; 1.用户发起登录请求。 2.使用JwtBuilder生成令牌并返回。 3.写一个拦截器&#xff0c;拦截初登录之外的请求。拦截到请求后解析令牌&#xff0c;若正常放行&#xff0c;并将当前用户id存在当前线程。若出异常则返回登陆失败。…
阅读更多...
四足机器人应用篇之solidwork导出URDF

四足机器人应用篇之solidwork导出URDF

欢迎关注微信公众号 “四足机器人研习社”&#xff0c;本公众号的文章和资料和四足机器人相关&#xff0c;包括行业的经典教材、行业资料手册&#xff0c;同时会涉及到职业知识学习及思考、行业发展、学习方法等一些方面的文章。 |1.URDF介绍 一个URDF pakage示例 urdf是ROS用于…
阅读更多...
ABAP MESSAGE 常用的类型

ABAP MESSAGE 常用的类型

类型文本描述A终止处理终止&#xff0c;用户必须重启事务X退出与消息类型A 类似&#xff0c;但带有程序崩溃 MESSAGE_TYPE_XE错误处理受到干扰&#xff0c;用户必须修正输入条目,左下角提示!W警告处理受到干扰&#xff0c;用户可以修正输入条目,左下角提示!I信息处理受到干扰&a…
阅读更多...
数据库讲解---(数据更新、视图、数据控制)【MySQL版本】

数据库讲解---(数据更新、视图、数据控制)【MySQL版本】

目录 前言 一.数据更新 1.1插入数据 1.1.1插入单个元组 1.1.2将一个新学生记录(学号:091530,姓名:夏雨,性别:男,籍:海南,出生年份:1999,学院:计算机)插入到学生表中 1.1.3插入子查询结果 1.1.4有一个表“DEPT”(SDEPT CHAR(20),AVG_AGE SMALLINT)表示每个学院的学生的平…
阅读更多...
习题4-1 求奇数和

习题4-1 求奇数和

本题要求计算给定的一系列正整数中奇数的和。 输入格式: 输入在一行中给出一系列正整数&#xff0c;其间以空格分隔。当读到零或负整数时&#xff0c;表示输入结束&#xff0c;该数字不要处理。 输出格式: 在一行中输出正整数序列中奇数的和。 输入样例: 8 7 4 3 70 5 6 …
阅读更多...
R 格式（蓝桥杯）

R 格式（蓝桥杯）

文章目录 R 格式【问题描述】高精度乘法高精度加法 R 格式 【问题描述】 小蓝最近在研究一种浮点数的表示方法&#xff1a;R 格式。对于一个大于 0 的浮点数 d&#xff0c;可以用 R 格式的整数来表示。给定一个转换参数 n&#xff0c;将浮点数转换为 R格式整数的做法是&#…
阅读更多...
最新文章

Copyright @ 2022~2023