一、HTML5简介

news2024/11/19 9:28:57

一、简介

  • 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
  • 可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单示例</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

 运行结果:

二、HTML文档的后缀名

  • .html
  • .htm

三、实例解析 

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。 

三、什么是HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签文本内容
  • HTML文档也叫做 web 页面

四、HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

         <标签>内容</标签>

五、HTML 元素

  • "HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思。
  • 但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:

        HTML 元素:

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

六、Web 浏览器

  • Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。
  • 浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:

七、HTML 网页结构

  • 下面是一个可视化的HTML页面结构:

  •  只有 <body> 区域 (白色部分)才会在浏览器中显示。

八、<!DOCTYPE> 声明

  • <!DOCTYPE>声明有助于浏览器中正确显示网页。
  • 网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。
  • doctype 声明是不区分大小写的,以下方式均可:
<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

九、通用声明

HTML5

<!DOCTYPE html>

 十、中文编码

  • 目前在大部分浏览器中,直接白色区域输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

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

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

相关文章

swift-碰到的问题

如何让工程不使用storyboard和scene 删除info.plist里面的Application Scene mainifest 删除SceneDelegate.swift 删除AppDelegate.swift里面的这两个方法 func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession…

javascript 常见工具函数(四)

31.RGB值和十六进制值之间的转换&#xff1a; &#xff08;1&#xff09;十六进制的颜色转为 RGB格式&#xff1a; /*16进制颜色转为RGB格式*/String.prototype.colorRgb function () {var sColor this.toLowerCase();if (sColor && reg.test(sColor)) {if (sColor.l…

【通讯录案例-登录功能-Segue Objective-C语言】

一、我们接下来呢,来说这个登录按钮的实现, 1.我们来实现一下这个登录按钮的一个功能啊, 比如说,当我点击“登录”了以后,我要跳到后边儿的那个TableView, 首先呢,我们来看一下示例程序,参考一下, 当我们上边这两个文本框都有值的时候, 当这两个文本框都有值了以后…

Nginx - 使用error_page实现带有图片的自定义错误页面

文章目录 概述官网文档需求实现 概述 在Nginx中&#xff0c;您可以使用error_page指令来指定当请求遇到特定错误时应当显示的自定义错误页面。为了实现带有图片的自定义错误页面&#xff0c;可以按照以下步骤操作&#xff1a; 创建错误页面&#xff1a; 首先&#xff0c;需要…

three.js 多通道组合

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div><div style"border: 1px so…

计算机毕业论文内容参考|基于区块链技术的电子健康记录系统的设计与实现

文章目录 摘要前言绪论课题背景国内外相关研究课题内容区块链技术介绍系统分析用户需求分析系统设计系统实现系统测试总结与展望摘要 本文介绍了基于区块链技术的电子健康记录系统的设计与实现。该系统旨在解决传统电子健康记录系统存在的数据安全性、数据隐私性和数据互操作性…

HTML5和JS实现明媚月色效果

HTML5和JS实现明媚月色效果 先给出效果图&#xff1a; 源码如下&#xff1a; <!DOCTYPE html> <html> <head><title>明媚月光效果</title><style>body {margin: 0;overflow: hidden;background-color: #000; /* 添加一个深色背景以便看到…

新全国产迅为龙芯 3A6000 处理器板卡

11月28日&#xff0c;“2023龙芯产品发布暨用户大会”在北京举行&#xff0c;迅为作为龙芯重要合作伙伴受邀参加&#xff0c;在整机产品发布仪式上&#xff0c;展示了基于龙芯 3A6000 处理器的全国产安全型工控计算机。 龙芯 3A6000 处理器完全自主设计、性能优异&#xff0c;代…

《MySQL系列-InnoDB引擎02》InnoDB存储引擎介绍

文章目录 第二章 InnoDB存储引擎1 InnoDB存储引擎概述2 InnoDB存储引擎的版本3 InnoDB体系架构3.1 后台线程3.2 内存 4 Checkpoint技术5 Master Thread 工作方式5.1 InnoDB 1.0.x版本之前的Master Thread5.2 InnoDB 1.2.x版本之前的Master Thread5.3 InnoDB 1.2.x版本的Master …

Vue实现JSON字符串格式化编辑器组件

相信很多同学都用过网上的在线JSON格式化工具来将杂乱的JSON数据转换成易于我们阅读和编辑的格式。那么&#xff0c;你有没有想过自己动手实现一个这样的工具呢&#xff1f;今天&#xff0c;我将介绍如何使用Vue.js来构建一个简单的JSON格式化工具。 功能简述 支持格式化JSON字…

企业如何利用好数据,让数据真正成为数据资产?数据资产管理应该怎样建设?

数字化时代&#xff0c;数据已经成为了个人、机构、企业乃至国家的重要战略资产。 近日&#xff0c;财政部正式对外发布《企业数据资源相关会计处理暂行规定》&#xff0c;并自 2024 年 1 月 1 日开始施行。数据资产入表政策落地节奏超预期&#xff0c;标志着国家把数据作为生…

jstree高性能树型控件

一、直接上代码 这种基于服务器端生成Html结构&#xff0c;直接渲染为树&#xff0c;能很好的解决大树的问题。 {ViewData["Title"] "Home Page";Layout null; } <link href"~/jstree/themes/default/style.min.css" rel"stylesheet…

STM32CubeMX教程17 DAC - 输出三角波/噪声波

目录 1、准备材料 2、实验目标 3、实验流程 3.0、前提知识 3.1、CubeMX相关配置 3.1.1、时钟树配置 3.1.2、外设参数配置 3.1.3、外设中断配置 3.2、生成代码 3.2.1、外设初始化调用流程 3.2.2、外设中断调用流程 3.2.3、添加其他必要代码 4、常用函数 5、烧录验…

浪涌保护器的必要性和安装方案

浪涌保护器SPD是一种用于限制电力线路或信号线路上的瞬时过电压&#xff0c;并将其导入地线的装置&#xff0c;主要用于防止雷电或其他电源干扰对电气设备或电子设备造成损坏。浪涌保护器的类型和结构根据不同的用途和场合有所不同&#xff0c;但一般都包含一个或多个非线性电压…

后台管理系统 -- 点击导航栏菜单对应的面包屑和标签(Tag)的动态编辑功能

相信很多时候,面包屑和标签(Tag)的功能几乎是后台管理系统标配。 就是会随着路由的跳转来进行相应的动态更新。 我先展示一下效果: 1.面包屑 先说一下思路&#xff1a; 我们导航菜单点击之后,将当前显示路由对象存储到Vuex的storge里面,然后在面包屑组件里面,读取这个状态即可…

电子负载是如何实现这些功能的

电子负载模拟真实负载的电子设备&#xff0c;它可以吸收或释放电能&#xff0c;以实现对电源、电池、发电机等电源设备的测试和保护。电子负载的主要功能包括恒流、恒压、恒功率、恒电阻等模式&#xff0c;以及过压、过流、短路、过热等保护功能。那么&#xff0c;电子负载是如…

RAL论文:一种自感知扭转塔折纸软体机器人

折纸是一种以纸张折成各种不同形状的艺术活动。折纸与自然科学结合在一起&#xff0c;不仅成为建筑学院的教具&#xff0c;还发展出了折纸几何学成为现代几何学的一个分支。根据折痕的不同分布&#xff0c;可以将纸张折叠成不同的形状&#xff0c;例如有许多经典的折纸结构&…

东信免驱系列身份证阅读器串口通讯协议解析示例,适用于单片机、ARM等系统开发集成使用

完整的一次读卡流程包括&#xff1a; 身份证寻卡 > 身份证选卡 > 身份证读卡&#xff0c;三个步骤 缺一不可&#xff08;见通讯协议&#xff09;。 寻卡&#xff1a;EA EB EC ED 04 00 B0 B4 BB 返回&#xff1a;EA EB EC ED 05 00 00 B0 B5 BB 选卡&#xff1a;EA …

【EI会议征稿通知】2024年第四届数字信号与计算机通信国际学术会议(DSCC 2024)

2024年第四届数字信号与计算机通信国际学术会议&#xff08;DSCC 2024&#xff09; 2024 4th International Conference on Digital Signal and Computer Communications 第四届数字信号与计算机通信国际会议(DSCC 2024)将于2024年4月12日至14日在中国-香港举行。DSCC 2024旨…

Java8新特性 Stream流详解

目录 1、介绍 2、获取Stream流的两种方式 方式一&#xff1a;根据Collection获取流 方式二&#xff1a;Stream中的静态方法of获取流 区别 3、Stream流注意事项 4、Stream流的常用方法 forEach count filter limit skip map sorted distinct match find max和…