HTML基本元素

news2024/10/7 12:22:20

文章目录

    • 如何制作标题
    • 如何制作文字
    • 如何做粗体字
    • 检查我们程序码
    • 给输出文字添加属性

HTML
一个HTML标签包含着:

  • 起始标签:它包含了元素的名字,夹在一对 <、>(尖括号)之间。它指明元素从何处开始生效。
  • 结束标签:结束标签和起始标签长得差不多,只不过它在名字前面还多加了一条斜线(forward slash)。它表示元素结束的地方。忘记加上结束标签是初学者常犯的错误,这将导致奇怪的结果。
  • 内容:元素的内容。

元素:以上三者加起来就是元素。通常我们会说标签是HTML元素。

HTML标签是网页构建的基础。在HTML中,标签有着不同的作用和功能,它们决定了网页的结构和呈现方式。在编写HTML代码时,正确地使用标签以及注意起始标签和结束标签的配对是至关重要的。如果标签的使用不当或者忘记闭合标签,将会导致网页显示异常,甚至无法正常显示内容。因此,对于HTML标签的理解和掌握是学习网页开发的第一步。

在这里插入图片描述

某些HTML标签只有起始标签,这种标签被称为自闭合标签(self-closing tag)。

自闭合标签是一种特殊的HTML标签,它们在起始标签中即包含了所有必要的信息,而不需要额外的结束标签来表示元素的结束位置。这些标签通常用于插入一些不需要额外内容包裹的元素,比如图片、换行等。常见的自闭合标签包括 <img><br><input> 等。

例如,<img> 标签用于在网页中插入图片,它没有结束标签,而是通过属性来指定图片的路径和其他相关信息。另一个例子是 <br> 标签,用于在文本中插入换行。这些标签的存在简化了HTML代码的书写,提高了代码的可读性和可维护性。

如何制作标题

h1 按 tab

<h1>HTML</h1>

如何制作文字

p 按 tab

<p>
HTML 的历史可以追溯到 20 世纪 80 年代末,当时万维网的发明者蒂姆·伯纳斯-李 (Tim Berners-Lee) 在欧洲核子研究组织 (CERN) 工作。他的目标是创建一种方法,使研究人员能够共享文档和信息。

1989 年,伯纳斯-李提出了超文本标记语言 (HTML) 的概念。HTML 是一种标记语言,用于定义网页的内容和结构。它由一系列标记组成,这些标记可以用来控制文本格式、插入图像和链接等。

1991 年,伯纳斯-李发布了第一个 HTML 规范。此后,HTML 经历了多次修订,以适应不断发展的互联网需求
</p>

如何做粗体字

<strong>Peace is author</strong>

在这里插入图片描述

检查我们程序码

https://validator.w3.org/

1. 语法检查:

  • HTML 代码必须遵循特定的语法规则才能正确解析和显示。
  • 网站可以帮助我们检查代码中的语法错误,并提供修复建议。

2. 代码格式化:

  • 网站可以帮助我们格式化代码,使其更易读和理解。
  • 正确的格式化可以使代码更容易调试和维护。

3. 代码验证:

  • 网站可以帮助我们验证代码是否符合 W3C 标准。
  • 符合标准的代码可以确保在不同的浏览器和设备上正确显示。

4. 代码测试:

  • 网站可以帮助我们测试代码在不同浏览器和设备上的表现。
  • 这可以帮助我们确保代码在所有环境下都能正常工作。

5. 代码优化:

  • 网站可以帮助我们优化代码,使其加载速度更快。
  • 这可以提高用户体验并节省流量。

6. 学习和参考:

  • 网站可以提供 HTML 代码的学习和参考资源。
  • 这可以帮助我们提高 HTML 编码技能。

给输出文字添加属性

<h1>HTML的来源</h1>
<h2>簡介:</h2>
<p style="color: aqua" onclick="alert('你按下p标签。')">
  HTML 的历史可以追溯到 20 世纪 80 年代末,当时万维网的发明者蒂姆·伯纳斯-李 (Tim
  Berners-Lee) 在欧洲核子研究组织 (CERN)
  工作。他的目标是创建一种方法,使研究人员能够共享文档和信息。 1989
  年,伯纳斯-李提出了<strong>超文本标记语言</strong> (HTML) 的概念。HTML
  是一种标记语言,用于定义网页的内容和结构。它由一系列标记组成,这些标记可以用来控制文本格式、插入图像和链接等。
  1991 年,伯纳斯-李发布了第一个 HTML 规范。此后,HTML
  经历了多次修订,以适应不断发展的互联网需求
</p>

<p><strong>Peace is author</strong></p>

在这里插入图片描述

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

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

相关文章

《Git版本控制管理》笔记

第三章 git --version查看版本号git --help查看帮助文档裸双破折号分离参数 git diff -w master origin – tools/Makefile将当前目录或任何目录转化为Git版本库 git init 初始化之后项目目录中&#xff0c;有名为.git的文件git status 查看git状态git commit 提供日志消息和作…

整型之韵,数之舞:大小端与浮点数的内存之旅

✨✨欢迎&#x1f44d;&#x1f44d;点赞☕️☕️收藏✍✍评论 个人主页&#xff1a;秋邱’博客 所属栏目&#xff1a;人工智能 &#xff08;感谢您的光临&#xff0c;您的光临蓬荜生辉&#xff09; 1.0 整形提升 我们先来看看代码。 int main() {char a 3;char b 127;char …

Java基础核心Map

在Java中&#xff0c;Map是一种用于存储键值对&#xff08;key-value pairs&#xff09;的集合类型。它提供了一种将键映射到值的方式&#xff0c;其中每个键在Map中都是唯一的。Map接口是java.util包中的一部分。 常用实现类&#xff1a; HashMap: 基于哈希表实现的Map&#…

java中split(“.“)失效问题

来源&#xff1a;比较版本号_牛客题霸_牛客网 在写到这道算法题的时候&#xff0c;发现一个问题&#xff0c; String[] leftversion1.split("."); 返回结果为空&#xff0c;经过查阅得知&#xff0c;是split中的正则表达式里的问题&#xff0c;这个 . 代表的意思是…

KIMI官方精选提示词,好牛的感觉啊啊啊!

晚上好&#xff0c;我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 云桃桃 1枚程序媛&#xff0c;大专生&#xff0c;2年时间从1800到月入过万&#xff0c;工作5年买房。 分享成长心得。 255篇原创内容-公众号 后台回复“前端工具”可获取开发工具&#xff0…

图论- 最小生成树

一、最小生成树-prim算法 1.1 最小生成树概念 一幅图可以有很多不同的生成树&#xff0c;比如下面这幅图&#xff0c;红色的边就组成了两棵不同的生成树&#xff1a; 对于加权图&#xff0c;每条边都有权重&#xff08;用最小生成树算法的现实场景中&#xff0c;图的边权重…

使用Vue实现CSS过渡和动画

01-初识动画和过渡 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>使用vue实现css过渡和动画&l…

Ethernet修改网卡名称

如何修改Ethernet网卡名称 kernel/common/net/core/dev.c ---------------------------------------------------------------------- 8849/** 8850 * register_netdev - register a network device 8851 * @dev: device to register 8852 * 8853 * Take a completed network d…

github本地仓库push到远程仓库

1.从远程仓库clone到本地 2.生成SSH秘钥&#xff0c;为push做准备 在Ubuntu命令行输入一下内容 [rootlocalhost ~]# ssh-keygen -t rsa < 建立密钥对&#xff0c;-t代表类型&#xff0c;有RSA和DSA两种 Generating public/private rsa key pair. Enter file in whi…

什么是数据库的下一站?

SU7 能突出重围&#xff1f; 3 月 28 日&#xff0c;小米发布 SU7。罗永浩在社交平台发文谈小米SU7&#xff0c;“各种补贴拿完了差不多20万吧&#xff0c;足以把这个价位段的大部分油车、杂牌电车、不够智能的电车都淘汰掉了。小米很可能继平价手机市场之后&#xff0c;在大众…

微信小程序开发学习笔记——4.6tabBar底部tab栏配置用法

>>跟着b站up主“咸虾米_”学习微信小程序开发中&#xff0c;把学习记录存到这方便后续查找。 一、tabBar https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar 二、icon下载 https://www.iconfont.cn/collections/index?spma…

js实现websocket断线重连功能

在项目开发中我们可能经常要使用websocket技术&#xff0c;当连接发生断线后&#xff0c;如果不进行页面刷新将不能正常接收来自服务端的推送消息。为了有效避免这种问题&#xff0c;我们需要在客户端做断线重连处理。当网络或服务出现问题后&#xff0c;客户端会不断检测网络状…

一个在线的NodeJS环境和终端运行界面

WebContainer 是一个基于浏览器的运行时&#xff0c;用于执行 Node.js 应用程序和操作系统命令&#xff0c;完全在浏览器选项卡内。以前需要云虚拟机来执行用户代码的应用程序&#xff0c;在 WebContainers 中可以完全在客户端运行与传统云虚拟机相比具有许多优势。 WebContai…

卡尔曼滤波笔记

资料&#xff1a;https://www.zhihu.com/question/47559783/answer/2988744371 https://www.zhihu.com/question/47559783 https://blog.csdn.net/seek97/article/details/120012667 一、基本思想 在对一个状态值进行估计的时候&#xff0c;如果想测量值更准&#xff0c;很自然…

数据结构进阶篇 之 【插入排序】详细讲解(直接插入排序,希尔排序)

千万不要因为一件事不会做而失去信心&#xff0c;你又不是只有这一件事不会&#xff0c;你还有很多呢 一、插入排序 1.直接插入排序 InsertSort 1.1 基本思想 1.2 实现原理 1.3 代码实现 1.4 直接插入排序的特性总结 2.希尔排序 ShellSort 2.1 基本思想 2.2 实现原理 …

6.7物联网RK3399项目开发实录-驱动开发之Camera摄像头的使用(wulianjishu666)

90款行业常用传感器单片机程序及资料【stm32,stc89c52,arduino适用】 链接&#xff1a;https://pan.baidu.com/s/1M3u8lcznKuXfN8NRoLYtTA?pwdc53f Camera 使用 简介 AIO-3399J 开发板分别带有两个 MIPI&#xff0c;MIPI 支持最高 4K 拍照&#xff0c;并支持 1080P 30fp…

282: 数字的秘密

收藏 难度&#xff1a;简单 标签&#xff1a;卓越班选拔 题目描述 在数字王国中&#xff0c;人人都有一个号码&#xff0c;人人都想知道这个号码对自己意味着什么。国王便做了很多个盒子&#xff0c;每个盒子拥有一个号码。人们需要通过一定的方法才能确定哪个盒子有自己的…

【Java 集合进阶】单练集合顶层接口collction迭代器

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …

jsp将一个文本输入框改成下拉单选框,选项为字典表配置,通过后端查询

一&#xff0c;业务场景&#xff1a; 一个人员信息管理页面&#xff0c;原来有个最高学历是文本输入框&#xff0c;可以随意填写&#xff0c;现在业务想改成下拉单选框进行规范化&#xff0c;在专科及以下、本科、研究生三个选项中选择&#xff1b; 二&#xff0c;需要解决问…

流程控制分支结构

一&#xff0c;流程控制 分为三种&#xff1a;顺序流程控制&#xff0c;分支流程控制&#xff0c;循环流程控制 二&#xff0c;顺序流程控制 先执行A&#xff0c;再执行B 三&#xff0c;分支流程控制if语句 从上到下执行代码的过程中&#xff0c;根据不同的条件&#xff0…