HTML篇_二、HTML简介_HTML入门必修第一课

news2024/11/27 9:38:57

HTML篇_二、HTML简介

一、HTML的基本结构

1.1 HTML的基本结构及解析

基本结构

这里我们先放一段代码块来进行展示,感受一下来自HTML的魅力。然后下文再对这段代码块进行解析。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文档标题</title>
	</head>
	<body>
		<h1>学习HTML的第一个标题</h1>
		
		<p>学习HTML的第一个段落</p>
	</body>
</html>

解析:
结构解析图

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

小提示: 打开浏览器页面状态下,按键盘上的F12键开启调试模式就可以看到该网页的组成标签。

1.2HTML标签

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

  • HTML标签是尖括号包围的关键词,例如:<html>
  • HTML标签通常是成对出现的,例如标题标签:<h1></h1>
  • 标签成对出现时,第一个标签时开始标签,第二个标签则是结束标签。也被称为开放标签和闭合标签。
    使用方法如下:
<开放标签>内容<闭合标签>

1.3HTML元素

“HTML标签”和“HTML元素”通常代表的是同一个意思,但是严格来讲,一个HTML元素包括了开放标签和闭合标签。

1.4Web浏览器

Web浏览器是用于读取HTML文件,并将该文件作为网页显示,但是浏览器并不是直接显示的HTML标签,但是浏览器可以使用HTML
标签来决定如何展现页面内容给用户。

现在的浏览器种类繁多,在这里举几个例子

  • Internet
  • Google Chrome
  • Firefox
  • Safari

ok,那我们以上述代码块为例来展示一下它在浏览器中的显示效果。这里我们使用Google Chrome浏览器。

请添加图片描述

二、声明

2.1<!DOCTYPE> 声明

< !DOCTYPE>声明有助于浏览器中正确显示网页。网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显
示网页内容。它不需要区分大小写,以下些法均可,但通常使用第一种方式来进行书写。

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html> 

2.2通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

除此之外还有多中网页声明类型,更多网页声明类型有兴趣可以去搜索了解一下,再次不做赘述。


希望有所帮助!
关注我,持续更新。

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

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

相关文章

计算机组成原理习题课第三章-3(唐朔飞)

计算机组成原理习题课第三章-3&#xff08;唐朔飞&#xff09; ✨欢迎关注&#x1f5b1;点赞&#x1f380;收藏⭐留言✒ &#x1f52e;本文由京与旧铺原创&#xff0c;csdn首发&#xff01; &#x1f618;系列专栏&#xff1a;java学习 &#x1f4bb;首发时间&#xff1a;&…

JavaWeb

1、基础概念 静态web&#xff1a;html、css。给人看的数据始终不会发生改变。&#xff08;数据无法持久化&#xff0c;用户无法交互&#xff09; 动态web&#xff1a;①、淘宝、几乎所有网站&#xff1b; ②、给人看的数据始终会发生改变&#xff1b; ③、技术栈Servlet/JSP、…

可观测数据采集端的管控方案的简单对比

概述 当前&#xff0c;主流的日志采集产品除了SLS的ilogtail&#xff0c;还有Elastic Agent、Fluentd、Telegraf、Sysdig、Logkit、Loggie、Flume等。详细的对比结果见下表&#xff1a; 备注&#xff1a; 集群监控&#xff1a;表示工具可以查看管理采集端的运行状态、采集速…

iClient for MapboxGL对接WMS服务

作者&#xff1a;yx 文章目录前言一、获取WMS服务二、请求参数说明三、获取参数四、关键代码五、完整代码总结前言 咱们iClient官网Leaflet、OpenLayers、Classic均有对接WMS服务的示例&#xff0c;详情可以参考iClient官网示例https://iclient.supermap.io/。 但是许多小伙伴…

基础知识java

1.浅克隆和深克隆&#xff1f;深克隆的方法 浅克隆&#xff1a;对象的引用变量只会拷贝地址&#xff0c;不会新建一个对象 深克隆&#xff1a;对象的引用变量也会新建一个对象 实现方式&#xff1a; 浅克隆&#xff1a;实现cloneable接口的clone方法 深克隆&#xff1a;实现Ser…

《树莓派项目实战》第八节 使用光敏电阻传感器检测环境中是否有光照

目录 8.1 引脚介绍 8.2 工作原理 8.3 连接到树莓派 8.4 编写代码检测有无光照 在本节&#xff0c;我们将学习如何使用光敏电阻度传感器检测是否有光照&#xff0c;该项目设计到的材料有&#xff1a; 树莓派 * 1面包板 * 1杜邦线若干光敏电阻传感器 * 18.1 引脚介绍 从右到…

tictoc例子理解6-9

tictoc 6-9tictoc 6 自消息实现计时tictoc 7 节点等待时延随机&#xff0c;丢失包概率tictoc 8 两个节点分别定义两个类tictoc 9 保留原始包副本&#xff0c;从而不需要重新构建包tictoc 6 自消息实现计时 在前面的模型中&#xff0c;’ tic’和’ toc’立即将收到的消息发送回…

高防CDN和融合CDN的区别

所有网站比较关心的一个问题就是如何解决南北用户能够稳定的加速访问&#xff0c;为此网站运营商通常用的CDN来解决这个问题。那么CDN是什么呢&#xff1f;CDN是属于一种内容分发网络。通过在现有的网络中增加一层新的网络架构的模式&#xff0c;使用户能够就近获取数据&#x…

利用综合微生物指数评估富营养化危险沿海湿地生态状况

河海大学环境学院李轶课题组近期在《Science of the Total Environment》期刊上(IF10.753)发表的“Eutrophication dangers the ecological status of coastal wetlands: A quantitative assessment by composite microbial index of biotic integrity.”研究论文中&#xff0c…

IP-Guard批量部署客户端的方法有哪些?

常用的批量部署客户端方式有以下几种&#xff1a; 1、通过IP-guard域脚本安装工具推送安装 概括步骤如下&#xff1a; 1&#xff09;打包好客户端安装包&#xff08;勾选静默安装&#xff09;&#xff0c;将安装包命名为OAgentInst.exe 2&#xff09;将客户端安装包OAgentInst.…

React路由

文章目录单页面应用spa路由路由是什么React路由原理点击页面选项路径改变路径改变页面变化React路由的使用实现点击页面选项路径改变——编写路由链接根据路径显示组件 ——注册路由组件的分类——普通组件和路由组件案例实现选中高亮效果——NavLinkNavLink的封装Switch的使用…

tda4vm mcu1_0应用程序开发系列之ADC采样

文章目录 1. 前言2. 开发过程1. 前言 上一篇我们介绍了如何在tda4vm上拉起MCU域的mcu1_0,感兴趣的小伙伴可以看一下tda4vm如何SPL方式加载MCU域的核?,从本篇开始介绍如何在mcu1_0上开发应用程序,本篇主要介绍mcu1_0上ADC采样应用程序的开发。 2. 开发过程 如果工作中接到…

职业资格证书查询与验证

一、接口介绍 可查询多种类型的职业资格证书&#xff0c;包含&#xff1a;证券从业资格证查询、计算机信息高新技术考试证书查询、计算机技术与软件专业技术资格、全国教师资格证书查询、普通话证书查询合格证明、中小学教师资格考试合格证明&#xff08;NTCE&#xff09;、全国…

隐藏文件夹怎么显示,只需1分钟,快速学会

很多人在工作的过程中&#xff0c;将一些文件给隐藏了起来&#xff0c;后来需要使用的时候&#xff0c;却找不到隐藏的文件夹了。win10如何调出隐藏文件夹&#xff1f;隐藏文件夹怎么显示&#xff1f;只需1分钟&#xff0c;快速学会显示隐藏文件夹&#xff01; 隐藏文件夹怎么显…

【Mysql】复合查询

文章目录**1.基本查询回顾****2.多表查询** (重要)多表查询步骤**3.自连接**4.子查询在from子句中使用子查询5.合并查询1.基本查询回顾 准备工作,创建一个雇员信息表:&#xff08;来自oracle 9i的经典测试表&#xff09; EMP员工表 DEPT部门表 SALGRADE工资等级表 案例1:查询…

SVN+Gitee配置版本控制库

软件 TortoiseSVN&#xff1a;Downloads TortoiseSVN Gitee&#xff1a;https://gitee.com/ 操作步骤 在Gitee中新建仓库&#xff0c;设置仓库名以及模板&#xff08;Readme文件&#xff09;&#xff1b; 启用SVN访问 在仓库的管理页面&#xff0c;选择“功能设置”中的“…

为自己量身打造一个 Rust 项目模板/脚手架

摘要 quick-start-rs(quick start a rust project)是用于快速创建一个 rust 项目的脚手架/模板。 标题&#xff1a;为自己量身打造一个 Rust 项目模板/脚手架深度参考 Rust Code Quick Start文章来自 suhanyujieTags: Rust, utils, quick start, project template&#xff0c;脚…

视频编解码 — 带宽预测

目录 一、带宽预测作用 二、基于延时的带宽预测算法&#xff1a; 1、算法流程 2、计算延时 3、Trendline Filter 4、网络状态判断 5、带宽调整更新 三、基于丢包的带宽预测算法 1、带宽调整 四、最大带宽探测算法 五、最终的预测选择 一、带宽预测作用 控制音视频发…

荧光AF染料477876-64-5,Alexa Fluor 532,AF532 NHS ester

●中文名&#xff1a;AF532 活性酯&#xff0c;AF5 532酯 ●英文名&#xff1a;AF532-NHS &#xff0c;AF532 NHS ester&#xff0c;Alexa Fluor 532 ●外观以及性质&#xff1a; 荧光AF染料是具有磺化基团的荧光物质。AF染料带负电荷&#xff0c;具有亲水性高、亮度高、光稳定…

软件和硬件中的调用

文章目录**1 概述****2.1 程序进程内的调用&#xff1a;函数调用****2.2 程序进程间的调用&#xff1a;IPC****2.3 远程程序调用&#xff1a;RPC****2.4 远程调用REST****3 硬件“调用”****3.1 综述****总线模型****3.2 片内的总线****3.3 Chiplet多DIE封装互联总线****3.4 板…