前端标记语言HTML

news2024/9/17 7:15:44

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.coloradmin.cn/o/1597684.html

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

相关文章

Adobe Premiere 2020 下载地址及安装教程

Adobe Premiere 2020 下载地址及安装教程

Premiere是一款专业的视频编辑软件&#xff0c;由Adobe Systems开发。它为用户提供了丰富的视频编辑工具和创意效果&#xff0c;可用于电影、电视节目、广告和其他多媒体项目的制作。 Premiere具有直观的用户界面和强大的功能&#xff0c;使得编辑和处理视频变得简单而高效。它…
阅读更多...
【AngularJs】前端使用iframe预览pdf文件报错

【AngularJs】前端使用iframe预览pdf文件报错

<iframe style"width: 100%; height: 100%;" src"{{vm.previewUrl}}"></iframe> 出现报错信息&#xff1a;Cant interpolate: {{vm.previewUrl}} 在ctrl文件中信任该文件就可以了 vm.trustUrl $sce.trustAsResourceUrl(vm.previewUrl);//信任…
阅读更多...
Python基于卷积神经网络的车牌识别系统

Python基于卷积神经网络的车牌识别系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
qt5-按字节读取并解析含属性的xml文件

qt5-按字节读取并解析含属性的xml文件

参考&#xff1a; 对XML文件读取和编辑2-QXmlStreamReader读取 - 知乎 https://zhuanlan.zhihu.com/p/358862429 本地环境&#xff1a; win10专业版&#xff0c;64位&#xff0c;Qt 5.12 代码已测试通过。 问题描述 需要按字节读取一个文档&#xff0c;解析其中具有xml格式的…
阅读更多...
【C语言回顾】数组

【C语言回顾】数组

前言1. 数组2. 一维数组2.1 一维数组的创建2.2 一维数组的初始化2.3 一维数组的使用2.3.1 一维数组的下标2.3.2 一维数组的输入和输出 2.4 一维数组在内存中的存储 3. 二维数组3.1 二维数组的创建3.2 二维数组的初始化3.3 二维数组的使用3.3.1 二维数组的下标3.3.2 二维数组的输…
阅读更多...
ELK日志收集和备份填坑实战 （滞后8个小时等时区问题）

ELK日志收集和备份填坑实战 （滞后8个小时等时区问题）

ES的备份&#xff1a;ES快照备份 根据时间&#xff0c;每天零点在Linux机器crontab来调用api接口实现快照备份&#xff0c;通过快照备份&#xff0c;可以定准恢复到某一天的日志。 现象&#xff1a;&#xff08;坑&#xff1a;但是恢复某一天日志&#xff0c;发现会少8小时的日…
阅读更多...
暴力破解密码自动阻断

暴力破解密码自动阻断

1 re模块 re 模块是 Python 中用于正则表达式操作的模块。正则表达式&#xff08;Regular Expression&#xff09;是一种强大的文本处理工具&#xff0c;它使用一种特殊的字符序列来表示字符串中的模式&#xff0c;并可以通过模式匹配、查找、替换等操作对文本进行高效处理。 …
阅读更多...
【Qt】：对话框（二）

【Qt】：对话框（二）

对话框 一.消息对话框&#xff08;QMessageBox&#xff09;1.自己构建2.使用静态函数构建 二.颜色对话框&#xff08;QDialog&#xff09;三.文件对话框&#xff08;QFileDialog&#xff09;四.字体对话框&#xff08;QFontDialog&#xff09;五.输入对话框&#xff08;QInputD…
阅读更多...
光场相机建模与畸变校正改进方法

光场相机建模与畸变校正改进方法

摘要&#xff1a;光场相机作为一种新型的成像系统&#xff0c;可以直接从一次曝光的图像中得到三维信息。为了能够更充分有效地利用光场数据包含的角度和位置信息&#xff0c;完成更加精准的场景深度计算&#xff0c;从而提升光场相机的三维重建的精度&#xff0c;需要实现精确…
阅读更多...
PgSQL之WITH Queries/Statement

PgSQL之WITH Queries/Statement

PostgreSQL WITH 子句 在 PostgreSQL 中&#xff0c;WITH 子句提供了一种编写辅助语句的方法&#xff0c;以便在更大的查询中使用。 WITH 子句有助于将复杂的大型查询分解为更简单的表单&#xff0c;便于阅读。这些语句通常称为通用表表达式&#xff08;Common Table Express…
阅读更多...
《Kubernets证书篇：基于Kylin V10+ARM架构CPU修改K8S 1.26.15版本证书时间限制》

《Kubernets证书篇：基于Kylin V10+ARM架构CPU修改K8S 1.26.15版本证书时间限制》

一、背景 Kubernetes 默认的证书有效期只有1年&#xff0c;因此需要每年手动更新一次节点上面的证书&#xff0c;特别麻烦而且更新过程中可能会出现问题&#xff0c;因此我们要对 Kubernetes 的 SSL 证书有效期进行修改&#xff0c;这里将证书的时间限制修改为100年。 环境信息…
阅读更多...
视频国标学习

视频国标学习

总体介绍 GB/T28181协议&#xff0c;全名叫《安全防范视频监控联网系统信息传输、交换、控制技术要求》&#xff0c;是由中国国家标准委员会发布的一种国家级的标准。它主要对视频监控系统的各个方面做了明确的规定&#xff0c;使得不同厂商生产的视频监控设备能够相互连通&am…
阅读更多...
JavaScript之Proxy详解

JavaScript之Proxy详解

文章的更新路线&#xff1a;JavaScript基础知识-Vue2基础知识-Vue3基础知识-TypeScript基础知识-网络基础知识-浏览器基础知识-项目优化知识-项目实战经验-前端温习题&#xff08;HTML基础知识和CSS基础知识已经更新完毕&#xff09; 正文 Proxy是JavaScript中的一个强大而灵活…
阅读更多...
linux 自定义快捷指令(docker

linux 自定义快捷指令(docker

vi /root/.bashrc alias disdocker images alias dpsdocker ps --format "table {{.ID}}\t{{.Image}}\t{{.Ports}}\t{{.Status}}\t{{.Names}}" 保存退出后使用sourece /root/.bashrc 让其立即生效 sourece /root/.bashrc
阅读更多...
【C 数据结构】栈

【C 数据结构】栈

文章目录 【 1. 基本原理 】栈的分类 【 2. 动态链表栈 】2.1 双结构体实现2.1.0 栈的节点设计2.1.1 入栈2.1.2 出栈2.1.3 遍历2.1.4 实例 2.2 单结构体实现2.2.0 栈的节点设计2.2.1 入栈2.2.2 出栈2.2.3 实例 【 3. 顺序栈 】3.1 入栈3.2 出栈3.3 实例 【 1. 基本原理 】 栈&…
阅读更多...
牛客网刷题 ：BC50 你是天才吗

牛客网刷题 ：BC50 你是天才吗

描述 据说智商140以上者称为天才&#xff0c;KiKi想知道他自己是不是天才&#xff0c;请帮他编程判断。输入一个整数表示一个人的智商&#xff0c;如果大于等于140&#xff0c;则表明他是一个天才&#xff0c;输出“Genius”。 输入描述&#xff1a; 多组输入&#xff0c;每…
阅读更多...
【opencv】示例-videocapture_microphone.cpp 使用OpenCV库实现的音频捕获

【opencv】示例-videocapture_microphone.cpp 使用OpenCV库实现的音频捕获

#include <opencv2/core.hpp> // 包含OpenCV核心功能头文件 #include <opencv2/videoio.hpp> // 包含OpenCV视频输入输出头文件 #include <opencv2/highgui.hpp> // 包含OpenCV高层GUI头文件 #include <iostream> // 包含标准输入输出流头文件using na…
阅读更多...
SS3D翻译

SS3D翻译

SS3D AbstractIntroductionRelated WorkFully-Supervised 3D Object DetectionWeakly/Semi-Supervised 3D Object DetectionSparsely-Supervised 2D Object Detection MethodOverall FrameworkArchitecture of DetectorMissing-Annotated Instance Mining Module 缺失注释实例挖…
阅读更多...
leetcode-链表中间节点

leetcode-链表中间节点

876. 链表的中间结点 题目 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5] 解释&#xff1a;链表只有一个中间…
阅读更多...
基于STM32的RFID智能门锁系统

基于STM32的RFID智能门锁系统

本文针对RFID技术&#xff0c;着重研究了基于单片机的智能门锁系统设计。首先&#xff0c;通过链接4*4按键模块与主控STM32&#xff0c;实现了多种模式&#xff0c;包括刷卡开锁、卡号权限管理、密码开锁、修改密码、显示实时时间等功能。其次&#xff0c;采用RC522模块与主控S…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023