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

news/2024/4/27 19:27:13/文章来源:https://blog.csdn.net/Godyanqi/article/details/128102829

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.luyixian.cn/news_show_228044.aspx

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

相关文章

使用自己的数据集测试Unbiased Mean Teacher for Cross-domain Object Detection

要复现Unbiased Mean Teacher for Cross-domain Object Detection&#xff08;UMT&#xff09;&#xff0c;首先要正确运行CycleGAN。 1. CycleGAN CycleGAN的github链接&#xff1a;https://github.com/junyanz/pytorch-CycleGAN-and-pix2pix 1.1 CycleGAN环境配置 git cl…

[附源码]SSM计算机毕业设计学生宿舍设备报修JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

板卡测评 | 基于TI AM5708开发板——ARM+DSP多核异构开发案例分享

本次测评板卡是创龙科技旗下的TL570x-EVM,它是一款基于TI Sitara系列AM5708ARM Cortex-A15+浮点DSPC66x处理器设计的异构多核SOC评估板,由核心板和评估底板组成。核心板经过专业的PCB Layout和高低温测试验证,稳定可靠,可满足各种工业应用环境。 评估板接口资源丰富,引出…

函数定义、this指向、闭包等

1、函数的定义和调用 1.1函数的定义方式 1、自定义函数&#xff08;命名函数&#xff09; 2、函数表达式&#xff08;匿名函数&#xff09; 3、利用 new Function (‘参数1’, ‘参数2’, ‘函数体’) 1、自定义函数&#xff08;命名函数&#xff09; function fn() {}2、函…

jsp196ssm毕业设计选题管理系统hsg4361B6

本系统选用Windows作为服务器端的操作系统&#xff0c;开发语言选用Java&#xff0c;数据库选用Mysql&#xff0c;使用mybatis数据库连接技术&#xff0c;使用Myeclipse作为系统应用程序的开发工具&#xff0c;Web服务器选用Tomcat版本。 下面分别简单阐述一下这几个功能模块需…

外汇天眼:经济衰退无阻加息,欧美货币政策齐收紧

美联储和欧洲央行官员在近两日发表讲话&#xff0c;先后释放进一步加息信号&#xff0c;美股、欧股事后均收跌&#xff0c;市场预计美元、欧元近期将下跌。 通胀仍高于目标&#xff0c;两大央行将进一步加息 除了非农报告等关键通胀数据&#xff0c;本周央行动态同样备受市场关…

[附源码]Python计算机毕业设计SSM流浪动物管理系统(程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

(4E)-TCO-PEG4-DBCO,1801863-88-6,反式环辛烯-四聚乙二醇-二苯并环辛炔

(4E)-TCO-PEG4-DBCO物理数据&#xff1a; CAS&#xff1a;1801863-88-6 | 中文名&#xff1a;(4E)-反式环辛烯-四聚乙二醇-二苯并环辛炔 | 英文名&#xff1a;(4E)-TCO-PEG4-DBCO 结构式&#xff08;Structural&#xff09;&#xff1a; (4E)-TCO-PEG4-DBCO物理数据补充&…

vue+videojs视频播放、视频切换、视频断点分段上传

“本次需求是做一个视频列表&#xff0c;点击视频列表播放对应视频&#xff1b;同时要求实现断点分段上传大文件&#xff08;视频&#xff09;的功能 。 videojs文档&#xff1a;Getting Started with Video.js - Video.js: The Player Framework | Video.js 断点续传组件地址…

linux安装elasticsearch-head (es可视化界面)

系列-Linux centos7.6 安装elasticsearch8.x (es8) 教程 Linux centos7.6 安装elasticsearch8.x (es8) 教程_言之有李LAX的博客-CSDN博客 系列-linux安装elasticsearch-head &#xff08;es可视化界面&#xff09; linux安装elasticsearch-head &#xff08;es可视化界面&am…

浅析linux内核网络协议栈--linux bridge

1 . 前言 本文是参考附录上的资料整理而成&#xff0c;以帮助读者更好的理解kernel中brdige 模块代码。 2. 网桥的原理 2.1 桥接的概念 简单来说&#xff0c;桥接就是把一台机器上的若干个网络接口“连接”起来。其结果是&#xff0c;其中一个网口收到的报文会被复制给其他…

httpclient

1.什么是httpclient HttpClient 是Apache Jakarta Common 下的子项目&#xff0c;可以用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包&#xff0c;并且它支持 HTTP 协议最新的版本和建议。 2.http请求&#xff08;结合spring的注解&#xff09; 2-1GET请…

TStor OneCOS 技术专栏——轻松单桶万亿

TStor OneCOS简介 TStor OneCOS海量对象存储&#xff08;后面简称OneCOS&#xff09;&#xff0c;是基于腾讯云公有云存储架构打造的完全自研的分布式软件定义存储&#xff0c;轻松支持单桶万亿对象和EB级容量&#xff0c;集群容量无限伸缩&#xff0c;同时支持高密大盘等多种…

STL的常用算法-查找 (20221130)

STL的常用算法 概述&#xff1a; 算法主要是由头文件<algorithm> <functional> <numeric> 组成。 <algorithm>是所有STL头文件中最大的一个&#xff0c;涉及比较、交换、查找、遍历等等&#xff1b; <functional>定义了一些模板类&#xff0…

如何设计可扩展架构

架构设计复杂度模型 业务复杂度和质量复杂度是正交的 业务复杂度 业务固有的复杂度&#xff0c;主要体现为难以理解、难以扩展&#xff0c;例如服务数量多、业务流程长、业务之间关系复杂 质量复杂度 高性能、高可用、成本、安全等质量属性的要求 架构复杂度应对之道 复杂…

野火FPGA进阶(2):基于I2C协议的EEPROM驱动控制

文章目录第49讲&#xff1a;基于I2C协议的EEPROM驱动控制理论部分设计与实现i2c_ctrli2c_rw_dataeeprom_byte_rd_wrtb_eeprom_byte_rd_wr第49讲&#xff1a;基于I2C协议的EEPROM驱动控制 理论部分 I2C通讯协议&#xff08;Inter-Integrated Circuit&#xff09;是由Philips公…

改革后IB数学该如何选?

IB数学&#xff0c;作为一个IB课程里必选科目&#xff0c;让无数IB学霸为之自豪&#xff0c;他们能解出外教都不会做的题。另一方面&#xff0c;也让很多同学&#xff08;自称“学渣”&#xff09;避之不及。 从2019年起&#xff0c;IB数学教学大纲发生重大改革。▲图源&#x…

C语言详细知识点(下)

⛄️上一篇⛄️C语言详细知识点&#xff08;上&#xff09; 文章目录五、数组1、一维数组的定义及使用2、二维数组的定义及使用3、字符数组的定义及使用六、函数1、函数的定义2、函数的调用3、函数的声明4、函数的嵌套调用5、函数的递归调用七、指针1、什么是指针2、指针变量3、…

链表之反转链表

文章目录链表之反转链表题目描述解题思路代码实现链表之反转链表 力扣链接 题目描述 定义一个函数&#xff0c;输入一个链表的头节点&#xff0c;反转该链表并输出反转后链表的头节点。 示例&#xff1a; ​ 输入: 1->2->3->4->5->NULL ​ 输出: 5->4-&…

基于vue项目的代码优化

前言 项目上线后其整体性能的优良是用户也是研发人员所关注的。项目优化非常重要&#xff0c;一丝一毫的提升都是对用户的负责。因此我们在开发中就应该注重细节&#xff0c;优化工作从日常开发做起。本篇文章就分享一些在日常开发中代码层面的优化手段。 开发常用优化手段 …