HTML(超文本标记语言)

HTML(超文本标记语言 - HyperText Markup Language)是一种用于创建网页的标准标记语言。

HTML 最初是由蒂姆・伯纳斯 - 李(Tim Berners - Lee)在 1990 年左右开发的。当时的目的是为了让世界各地的科学家能够方便地共享和交流信息。随着互联网的飞速发展,HTML 也经历了多个版本的更新,从 HTML 1.0 到 HTML 4.01,再到现在广泛使用的 HTML5。每一次版本更新都带来了新的功能和特性,以适应日益复杂的网页设计需求。

一、HTML基本结构概述

HTML网页由个标准的结构,主要由以下几个关键部分组成:

  • 文档类型声明
  • HTML
  • 根元素
  • 头部(head)
  • 主体(body)

这些结构为浏览器解析和显示提供了清晰的框架。

二、文档类型声明(DOCTYPE)

  • 这是 HTML 文档的第一行,用于告诉浏览器文档的类型。例如,在 HTML5 中,文档类型声明是<!DOCTYPE html>。它的作用是让浏览器按照正确的 HTML 标准来解析页面内容。

三、HTML根元素<html>

<html>作为HTML文档的根标签,所有其他的HTML元素都被包括里面。根元素只有开始标签<html>和结束标签</html>。这个标签界定了整个html文档的范围,浏览器只会识别其中的内容为有效的HTML代码

四、头部部分 <head>

<head>部分包含了网页的元数据,这些信息对浏览器的渲染和网页的展示特性有重要作用,但不会直接在网页的可见区域显示。

<title>用于界定网页的标题,标题内容会显示浏览器的标题栏或标签页上。

<meta>用于提供多种类型的元数据,常见的有编码设置,例如<meta charset="UTF-8">。它确保浏览器能够正确的解析和显示网页中的各种字符,支持多种语言字符,也可也设置页面描述,关键词等信息。如<meta name="keywords" content="网页,趣味"> 可设置关键词帮助搜索引擎索引网页。

 <link> 主要连接外部资源,最常见的是连接CSS样式表。例如<link rel=“stylesheet” href=“styles.css”> 其中rel=“stylesheet”表明这是一个样式表链接,href属性指明了CSS文件路径。这样链接可以将网页内容和样式进行分离,方便网页设计和维护。

<script> 用于在HTML文档中嵌入JavaScript代码或引用外部的脚本文件。如果是嵌入代码,可以直接写入代码,如<script>alert("欢迎来到网页")</script> 若是引用外部脚本,则是<script src="script.js"></script> 这里面src属性指定了JavaScript文件的路径。脚本可以为网页添加交互功能。

五、<body>主体部分

<body>标签是 HTML 文档的核心部分,它位于<html>标签内,紧跟在<head>标签之后

  • 内容呈现
    • 所有用户在浏览器中直接看到和交互的内容都放置在<body>标签中。这包括文本、图像、链接、列表、表格、按钮等多种元素。例如,你可以使用<p>标签在<body>中添加段落文本,如<p>这是一段展示在网页主体部分的文字。</p>。用户打开网页时,就可以看到这段文字内容。
  • 页面布局基础
    • 它为网页的布局提供了基础框架。虽然 CSS(层叠样式表)主要负责精确的页面布局和样式控制,但<body>标签内元素的排列顺序和结构对整体布局有重要影响。例如,你可以通过在<body>中放置多个<div>标签(一种通用的容器标签)来划分页面的不同区域,如头部区域、内容区域、侧边栏区域和底部区域等,然后通过 CSS 来进一步定义这些区域的大小、位置和外观。
  • 支持交互元素
    • 包含各种可以与用户进行交互的元素。例如,<form>标签用于创建表单,如登录表单、注册表单、调查问卷等,都放置在<body>。
  • 多媒体内容展示
  •         可以展示多媒体内容,如通过<img>标签展示图像,像<img src="image.jpg" alt="一幅美丽的画">可以在网页主体部分显示一张名为image.jpg的图片。如果图片无法加载,浏览器会显示alt属性中的替代文本 “一幅美丽的画”。
  •         还可以通过<video><audio>标签分别展示视频和音频内容。

     <table>表格,<tr>表示行,<td>表示单元格。

     表单元素。<form>标签包含表单内容,<input>标签用于创建各种输入框,如<input type="text" placeholder="请输入用户名"> 用于创建一个文本输入框,type指定输入类型,placeholder属性提示文本。

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

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

相关文章

35.3K+ Star!PhotoPrism:一款基于AI的开源照片管理工具

PhotoPrism 简介 PhotoPrism[1] 是一个为去中心化网络设计的AI照片应用,它利用最新技术自动标记和查找图片,实现自动图像分类与本地化部署,你可以在家中、私有服务器或云端运行它。 项目特点 主要特点 浏览所有照片和视频,无需担心RAW转换、重复项或视频格式。 使用强大的…

HTML之列表

练习题&#xff1a; 图所示为一个问卷调查网页&#xff0c;请制作出来。要求&#xff1a;大标题用h1标签&#xff1b;小题目用h3标签&#xff1b;前两个问题使用有序列表&#xff1b;最后一个问题使用无序列表。 代码&#xff1a; <!DOCTYPE html> <html> <he…

redis实现消息队列的几种方式

一、了解 众所周知&#xff0c;redis是我们日常开发过程中使用最多的非关系型数据库&#xff0c;也是消息中间件。实际上除了常用的rabbitmq、rocketmq、kafka消息队列&#xff08;大家自己下去研究吧~模式都是通用的&#xff09;&#xff0c;我们也能使用redis实现消息队列。…

Linux下MySQL的简单使用

Linux下MySQL的简单使用 导语MySQL安装与配置MySQL安装密码设置 MySQL管理命令myisamchkmysql其他 常见操作 C语言访问MYSQL连接例程错误处理使用SQL 总结参考文献 导语 这一章是MySQL的使用&#xff0c;一些常用的MySQL语句属于本科阶段内容&#xff0c;然后是C语言和MySQl之…

即插即用篇 | YOLOv8 引入 代理注意力 AgentAttention

Transformer模型中的注意力模块是其核心组成部分。虽然全局注意力机制具有很强的表达能力,但其高昂的计算成本限制了在各种场景中的应用。本文提出了一种新的注意力范式,称为“代理注意力”(Agent Attention),以在计算效率和表示能力之间取得平衡。代理注意力使用四元组(Q…

从0开始学PHP面向对象内容之(常用魔术方法续一)

常用魔术方法&#xff08;续&#xff09; 上期我们讲到几个常用的魔术方法&#xff0c;但是由于篇幅过程且全是文字性质地东西&#xff0c;就没写完&#xff0c;篇幅太长也会丧失阅读兴趣&#xff0c;我尽量控制一篇文章在5000字左右 一、__isset()&&__unset() 1、在…

【MySQL】数据库知识突破:数据类型全解析与详解

前言&#xff1a;本节内容讲述MySQL的数据类型&#xff0c; 我们在学习之前的建表的时候已经用过各种各样的数据类型。 比如int、varchar、char类型等等。其中它们是对表的结构的操作&#xff0c; 并没有对数据的内容进行操作&#xff0c;所以它叫做DDL。另外&#xff0c;还有…

windows 11编译安装ffmpeg(包含ffplay)

一、源码及安装包下载 1.1&#xff0c;ffmpeg源码包下载 下载地址&#xff1a;Download FFmpeg 1.2&#xff0c;mysys下载 下载地址&#xff1a;MSYS2 1.3&#xff0c;libx264源码包下载 下载地址&#xff1a;x264, the best H.264/AVC encoder - VideoLAN 二、软件安装 2.1&…

从0开始深度学习(28)——序列模型

序列模型是指一类特别设计来处理序列数据的神经网络模型。序列数据指的是数据中的每个元素都有先后顺序&#xff0c;比如时间序列数据&#xff08;股票价格、天气变化等&#xff09;、自然语言文本&#xff08;句子中的单词顺序&#xff09;、语音信号等。 1 统计工具 前面介绍…

【考研数学:高数2】数列极限

目录 前言 一、数列极限的概念 1.常见前n项和 2.等差、等比数列 3.数列的性质 &#xff08;1&#xff09;单调性 &#xff08;2&#xff09;有界性 二、数列极限的定义 三、收敛数列的性质 1.概念 2.例题 四、极限的四则运算 五、海涅定理&#xff08;归结原则&…

计算机网络分析题

网络的布置 根据具体需求布置网络 第二小题、网络的划分 根据路由表作出路由器拓扑图 ARP跨网络寻址 TCP报文段格式概念 网桥的转发表与动作 网络嗅探报文 十六进制化作十进制 嗅探以太网帧首部 除MAC帧以外&#xff0c;其他各层协议数据单元都是源地址在前&#xff0c;目…

PHP爬虫快速获取京东商品详情(代码示例)

在当今互联网时代&#xff0c;数据的重要性不言而喻。对于电商领域来说&#xff0c;获取商品信息是数据分析、市场研究和价格监控的基础。本文将介绍如何使用PHP编写一个简单的爬虫&#xff0c;以快速获取京东商品的详情信息。 1. 概述 京东是中国领先的电商平台之一&#xff…

快速学习Serde包实现rust对象序列化

在处理HTTP请求时&#xff0c;我们总是需要在数据结构对象&#xff08;可以是enum、struct等&#xff09;和序列化数据格式&#xff08;例如JSON&#xff0c;用与存储或传输&#xff0c;并可以反序列化的格式&#xff09;之间来回转换。 Serde是一个库&#xff08;crate&#x…

OLED 显示画面的变换操作——上下、左右翻转

OLED 画面旋转 OLED 写入函数定义 OLED_WR_Byte(0xA1,OLED_CMD);//--Set SEG/Column Mapping 0xa0左右反置 0xa1正常 OLED_WR_Byte(0xC8,OLED_CMD);//Set COM/Row Scan Direction 0xc0上下反置 0xc8正常OLED 显示界面转换函数如下 void OLED_DisplayTurn(u8 i) {if(i0…

由播客转向个人定制的音频频道(1)平台搭建

项目的背景 最近开始听喜马拉雅播客的内容&#xff0c;但是发现许多不方便的地方。 休息的时候收听喜马拉雅&#xff0c;但是还需要不断地选择喜马拉雅的内容&#xff0c;比较麻烦&#xff0c;而且黑灯操作反而伤眼睛。 喜马拉雅为代表的播客平台都是VOD 形式的&#xff0…

luckfox-pico-max学习记录

0.文件编译及烧录 SDK包在文件夹/home/tao/linux/luckfox/luckfox-pico-spi应用程序样例在文件夹/home/tao/linux/luckfox-pico-spi/demo编译&#xff1a;sudo ./build.sh生成的镜像文件在./luckfox-pico-spi/output/image中&#xff0c;将所有文件复制到windows电脑文件夹I:\…

一文了解珈和科技在农业遥感领域的服务内容和能力

2020年&#xff0c;农业农村部、中央网信办联合印发了《数字农业农村发展规划&#xff08;2019-2025年&#xff09;》&#xff0c;对数字农业农村建设作出了具体部署。其中&#xff0c;农业遥感作为推进数字农业农村的重要力量贯穿《规划》始终。 今年10月&#xff0c;农业农村…

羊城杯2020Easyphp

审题 看到url&#xff0c;可以想到伪协议读取 尝试过后可以发现&#xff0c;题目绕过了read后面的编码 我们可以尝试双重urlencode进行绕过 ?filephp://filter/read%25%36%33%25%36%66%25%36%65%25%37%36%25%36%35%25%37%32%25%37%34%25%32%65%25%36%32%25%36%31%25%37%33%…

【时间之外】IT人求职和创业应知【34】-人和机器人,机器人更可靠

目录 新闻一&#xff1a;人形机器人产业持续高速增长&#xff0c;2026年中国市场规模将突破200亿元 新闻二&#xff1a;AI技术驱动设备厂商格局变化&#xff0c;部分厂商市占率快速提升 新闻三&#xff1a;华为与江淮汽车携手打造超高端品牌“尊界”&#xff0c;计划于明年春…

Linux——基础指令2 + 权限

目录 1.zip/unzip 2.tar 3.bc 4.uname –r 5.重要的几个热键 6.扩展命令 7.shell命令以及运行原理 8.Linux权限的理解 关于权限的三个问题&#xff1a; 1.目录权限 2.缺省权限 3.粘滞位 1.zip/unzip 打包、压缩&#xff1a;使用特定的算法&#xff0c;文件进行合…