当前位置: 首页 > news >正文

HTML基本讲解与使用

目录

html的由来:

什么是HTML:

HTML的主要特点:

HTML文档结构:

HTML元素:

 HTML元素属性:

文本和格式化:

链接和图像:

列表:

表格:

表单: 

嵌套和结构: 

HTML注释: 

样式和样式表: 

脚本:


html的由来:

HTML(超文本标记语言)的发展可以追溯到20世纪80年代末和90年代初,这一时期是Web的早期发展阶段。以下是HTML的由来和发展历程。

  1. 1989年: HTML的创始人是英国物理学家蒂姆·伯纳斯-李(Tim Berners-Lee),他是CERN(欧洲核子研究组织)的一名工程师。伯纳斯-李的目标是创建一种能够共享科研文档的系统,以促进科学研究合作。他提出了一种称为“超文本”的概念,用于链接文档和信息。

  2. 1990年: 伯纳斯-李发布了第一个HTML规范,该规范描述了HTML的基本结构和标签。这是HTML的雏形,定义了标题、段落、列表和链接等基本元素。

  3. 1993年: 伯纳斯-李发布了HTML的第一个正式规范,HTML+(HTML增强版),其中引入了图像和表格等新元素。

  4. 1994年: 麻省理工学院(MIT)的马克·安德森(Marc Andreessen)发布了Mosaic,这是Web浏览器的早期版本,首次引入了图形用户界面(GUI),使Web变得更加用户友好。Mosaic的成功推动了Web的发展。

  5. 1995年: Netscape通信公司发布了Netscape Navigator,这是首个流行的商业Web浏览器。Netscape Navigator引入了新的HTML标签和JavaScript脚本语言,推动了Web内容的丰富化。

  6. 1996年: World Wide Web联盟(W3C)成立,由蒂姆·伯纳斯-李领导,旨在制定Web标准。W3C发布了HTML 3.2规范,它在标准化HTML方面起到了关键作用。

  7. 1997年: W3C发布了HTML 4.0规范,引入了更多的样式控制和脚本支持。

  8. 2000年: W3C发布了XHTML 1.0规范,它是HTML与XML(可扩展标记语言)的结合,强调更严格的标记规则。

  9. 2014年: W3C发布了HTML5规范,它引入了许多新特性,如多媒体元素、表单控件、Canvas绘图等,以支持更富有交互性和多媒体的Web应用程序。

  10. 至今: HTML5成为主流Web标准,支持现代Web开发的需求,并在不断发展和演进。W3C和其他组织继续努力改进HTML标准。

HTML的演进一直是Web发展的关键驱动力,它使Web从最初的文本文档演变成了一个多媒体、互动和复杂应用程序的平台。 HTML标准的不断更新和发展,以适应新技术和应用程序的需求,确保了Web继续成为全球信息共享和互动的主要平台。 

什么是HTML:

HTML(Hypertext Markup Language)是一种标记语言,用于创建和呈现在Web浏览器中查看的网页。它是Web开发的基础,用于定义网页的结构和内容。HTML使用标签(也称为元素)来标识和格式化文本、图像、链接、表格和其他元素,以使其在浏览器中呈现为可视化的网页。

HTML的主要特点:

  1. 超文本: HTML支持超文本,意味着您可以在文档中创建链接,使用户能够轻松导航到其他相关页面或资源。这些链接通常通过<a>标签实现。

  2. 结构化: HTML文档由嵌套的HTML元素构成,这些元素按照层次结构组织,以定义页面的布局和内容。通常,HTML文档包括头部部分(<head>)和主体部分(<body>)。

  3. 标签和属性: HTML元素由标签和属性组成。标签通常包括开始标签和结束标签,如<p>用于表示段落,</p>用于结束段落。属性为元素提供附加信息,如<img src="image.jpg">,其中src是图像的来源属性。

  4. 文本和多媒体: HTML支持文本内容,如标题、段落和列表,以及多媒体元素,如图像、音频和视频。这些元素可以通过合适的标签来插入和呈现。

  5. 表单: HTML允许创建交互式表单,用户可以在其中输入信息。表单元素包括文本框、单选按钮、复选框、下拉列表等,通常包装在<form>标签中。

  6. 样式和布局: 虽然HTML定义了文档的结构,但它不直接处理页面的外观。样式和布局通常通过CSS(层叠样式表)来实现,通过CSS可以定义字体、颜色、间距等样式属性。

  7. 互动和脚本: HTML支持JavaScript等脚本语言,使开发者能够为网页添加互动性和动态功能。脚本通常通过<script>标签嵌入到HTML文档中。

HTML是Web内容的骨架,它与CSS和JavaScript一起构建了现代Web应用程序和网站。开发者使用HTML来创建页面的结构和内容,使用CSS来定义样式和布局,使用JavaScript来增加互动性。这三种技术的组合使Web成为一个功能丰富和多样化的平台.

HTML文档结构:

<!DOCTYPE html>
<html><head><title>页面标题</title></head><body><!-- 页面内容在这里 --></body>
</html>
  • <!DOCTYPE html>:声明文档类型,表示使用HTML5。
  • <html>:HTML文档的根元素,包含整个文档。
  • <head>:包含文档的元信息,如标题、字符集、外部样式表和脚本。
  • <title>:定义网页的标题,显示在浏览器标签页上。
  • <body>:包含网页的实际内容,如文本、图像和链接。

HTML元素:

HTML使用标签来定义元素,如<p>表示段落、<h1>表示标题等。每个标签通常有开始标签和结束标签,例如<p>内容</p>。还有一些自闭合标签,如<img>用于插入图像。

 HTML元素属性:

HTML元素可以具有属性,这些属性提供有关元素的额外信息。例如,<a>元素通常具有href属性,用于定义链接的目标URL。

文本和格式化:

HTML可用于创建文本内容,如段落、标题、列表、表格和链接。还可以使用标签和属性来控制文本格式化,如加粗、斜体、换行等。

链接和图像:

使用<a>标签创建超链接,用于链接到其他页面。使用<img>标签插入图像,需要指定图像的源URL。

列表:

HTML支持有序列表(<ol>)、无序列表(<ul>)和定义列表(<dl>),用于组织和展示信息。

表格:

使用<table>标签创建表格,包括表头(<th>)、表行(<tr>)和表数据(<td>)等元素,以显示数据。 

表单: 

使用<form>标签创建表单,允许用户输入数据。表单元素如文本框、单选按钮、复选框和提交按钮等。 

嵌套和结构: 

HTML元素可以嵌套,形成文档的层次结构。正确的嵌套和缩进可以提高代码的可读性。 

HTML注释: 

使用<!-- 注释内容 -->来添加注释,注释不会在浏览器中显示,但对开发者有帮助。 

样式和样式表: 

可以使用CSS(层叠样式表)来为HTML元素添加样式和布局。 

脚本:

可以使用JavaScript来添加交互性和动态功能,通常通过<script>标签嵌入到HTML文档中。 

HTML是一个强大的工具,用于构建各种类型的网页,从简单的静态页面到复杂的Web应用程序。学习HTML是Web开发的基础,它可以与CSS和JavaScript一起使用,以创建交互性和吸引人的用户体验。通过编写和调试HTML代码,您可以创建自定义的Web内容并将其发布在互联网上。 

相关文章:

HTML基本讲解与使用

目录 html的由来: 什么是HTML: HTML的主要特点: HTML文档结构: HTML元素: HTML元素属性&#xff1a; 文本和格式化&#xff1a; 链接和图像&#xff1a; 列表&#xff1a; 表格&#xff1a; 表单&#xff1a; 嵌套和结构&#xff1a; HTML注释&#xff1a; 样式…...

linux uname详解 -s -r -a 查看内核版本

简介 uname命令用于显示操作系统信息&#xff0c;例如内核版本、主机名、处理器类型等 uname常用的有-a&#xff0c;-r&#xff0c;-rs 参数 --help  显示帮助。-a 或--all 显示全部信息&#xff0c;包括内核名、主机名、内核版本、处理器类型和硬件架构等…...

Linux常用命令——cmp命令

在线Linux命令查询工具 cmp 比较两个文件是否有差异 补充说明 cmp命令用来比较两个文件是否有差异。当相互比较的两个文件完全一样时&#xff0c;则该指令不会显示任何信息。若发现有差异&#xff0c;预设会标示出第一个不通之处的字符和列数编号。若不指定任何文件名称或是…...

C语言之排序

1.冒泡排序 冒泡排序就不多说了&#xff0c;只需要两层循环嵌套&#xff0c;两两比较确定相对正确的顺序即可。 2.插入排序 插入排序的思想就是每一次向后寻找一个再将其与前面有序的部分进行对比&#xff0c;寻找合适位置插入。 这里关键要避免让前移超出目前读取的数字&…...

GitHub-使用 Git工具 创建密钥id_rsa.pub

快速导航 步骤1 打开Git Bash步骤2 输入指令【ssh-keygen】步骤3 打开创建的公钥文件步骤4 复制其中所有内容步骤5 打开GitHub中的Setting界面步骤6 添加SSH keys 步骤1 打开Git Bash 打开Git Bash 工具 步骤2 输入指令【ssh-keygen】 输入指令【ssh-keygen】&#xff0c;并…...

C++多重、多层、分层继承

在本文中&#xff0c;您将学习C 编程中的不同继承模型&#xff1a;带有示例的多继承&#xff0c;多层和分层继承。 继承是面向对象编程语言的核心功能之一。它允许软件开发人员从现有的类派生一个新的类。派生类继承基类&#xff08;现有类&#xff09;的功能。C 编程中有多种…...

ThingsBoard的数据分析-自定义节点来订阅kafka stream的消息

1、概述 在ThingsBoard官方文档中有说明:ThingsBoard 规则引擎支持对传入遥测数据的基本分析,例如阈值交叉。规则引擎背后的想法是提供基于设备属性或数据本身将数据从物联网设备路由到不同插件的功能。 然而,大多数现实生活中的用例也需要高级分析的支持:机器学习、预测分…...

Python WSGI HTTP Server - Gunicorn

基本概念 Gunicorn&#xff0c;也称为“Green Unicorn”&#xff0c;是一个Python WSGI HTTP Server&#xff0c;用于运行Python Web应用程序。WSGI&#xff08;Web Server Gateway Interface&#xff09;是Python应用程序和Web服务器之间的一个接口&#xff0c;允许应用程序和…...

[论文笔记]GPT-2

引言 今天继续GPT系列论文, 这次是Language Models are Unsupervised Multitask Learners,即GPT-2,中文题目的意思是 语言模型是无监督多任务学习器。 自然语言任务,比如问答、机器翻译、阅读理解和摘要,是在任务相关数据集上利用监督学习的典型方法。作者展示了语言模型…...

第十三届蓝桥杯模拟赛第三期

A.填空题 问题描述 请问十六进制数 2021ABCD 对应的十进制是多少&#xff1f; 参考答案 539077581 import java.math.*; public class Main {public static void main(String[] args) {String strnew BigInteger("2021ABCD",16).toString(10);System.out.printl…...

代碼隨想錄算法訓練營|第四十四天|01背包问题 二维、01背包问题 一维、416. 分割等和子集。刷题心得(c++)

目录 01背包問題 - DP二維數組 01 背包問題描述 暴力解 動態規劃 確認DP數組以及下標的含意 確定遞推公式 01背包问题 一维 一维DP 数組(滾動数組) 動態規劃五部曲 定義DP数組以及其下標含意 遞推公式 初始化 遍歷順序 讀題 416. 分割等和子集 自己看到题目的第…...

【算法训练-回溯算法 零】回溯算法解题框架

抽象地说&#xff0c;解决一个回溯问题&#xff0c;实际上就是遍历一棵决策树的过程&#xff0c;树的每个叶子节点存放着一个合法答案。你把整棵树遍历一遍&#xff0c;把叶子节点上的答案都收集起来&#xff0c;就能得到所有的合法答案。站在回溯树的一个节点上&#xff0c;你…...

GAN.py

原代码地址&#xff1a;github.com/zqhang/MTGFLOW 目录 def ConvEncoder() def ConvDecoder() class CNNAE(torch.nn.Module): class R_Net(torch.nn.Module): class D_Net(torch.nn.Module): def R_Loss&#xff08;&#xff09; def D_Loss&#xff08;&#xff09…...

C语言动态内存管理

1.为什么要动态内存分配&#xff1f; int val 20; int a[10]{0};上面我们声明并定义了一个大小为4字节的整型变量&#xff0c;一个容量为10*4字节的整型数组。 开辟方式:我们在栈上开辟。 开辟空间的方式有两个特点&#xff1a; 1. 空间开辟 大小是固定 的。 2. 数组在申明…...

小红书商品详情API接口(商品详情页面数据接口)

小红书商品详情API接口&#xff08;商品详情页面数据接口 小红书商品详情API接口&#xff08;商品详情页面数据接口&#xff09;代码对接如下&#xff1a; 1.公共参数 名称类型必须描述keystring是get请求方式拼接在url中,点击获取api_namestring是 api接口名称cachestrin…...

nginx配置文件的内容解释和简化方案

文章目录 配置文件内容理解配置文件精简nginx.confapp1.conf 配置文件内容理解 events {worker_connections 1024; }http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;client_max_body_size 50m;client…...

Java设计模式之访问者模式(Visitor Pattern)

访问者模式&#xff08;Visitor Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许在不修改现有对象结构的情况下定义新的操作。该模式将操作封装在一个访问者对象中&#xff0c;使得可以在不改变被访问对象的类的前提下&#xff0c;通过访问者对象对被访问对象进行新…...

others-AppLovin广告接入

title: others-AppLovin广告接入 categories: Others tags: [广告, AppLovin] date: 2023-10-20 10:07:01 comments: false mathjax: true toc: true others-AppLovin广告接入 前篇 官方 - https://www.applovin.com/ Android sdk - https://github.com/AppLovin/AppLovin-MAX…...

ESP32集成开发环境Espressif-IDE安装 – Windows

陈拓 2023/10/15-2023/10/16 1. 概述 Espressif IDE是一个基于Eclipse CDT的集成开发环境&#xff08;IDE&#xff09;&#xff0c;用于使用ESP-IDF框架开发物联网应用程序。这是一个专门为ESP-IDF构建的独立定制IDE。Espressif IDE附带了IDF Eclipse插件、重要的Eclipse CDT插…...

python之if else语句介绍

python之if else语句介绍 在Python中&#xff0c;if和else是两种重要的控制流语句&#xff0c;它们用于根据特定的条件来执行不同的代码块。以下是它们的用法和详细介绍&#xff1a; 1&#xff09;if语句 if语句用于在满足某种条件时执行特定的代码块。它的基本语法如下&#…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...