一、HTML5简介

一、简介

  • 超文本标记语言(英语: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.hqwc.cn/news/316564.html

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

相关文章

SpringBoot: 通过MyBatis访问ClickHouse

一、ClickHouse中建表&#xff0c;添加数据 二、SpringBoot项目添加mybatis、clickhouse、druid相关依赖 <dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.2.6</version></dependency>…

天线的相关概念

天线&#xff1a;发射和接收电磁波的装置 1. 辐射强度 发射&#xff08;接收&#xff09;能量在空间中的角分布&#xff08;单位立体角中的功率&#xff09;。 2. 辐射功率 通过所有方向辐射出去的总功率。 3. 辐射电阻 对峰值电流&#xff0c;辐射电阻满足 4. 方向性 辐射…

Spark一:Spark介绍、技术栈与运行模式

一、Spark简介 Spark官网 https://spark.apache.org/ 1.1 Spark是什么 Spark是一种通用的大数据计算框架&#xff0c;是基于RDD(弹性分布式数据集)的一种计算模型。 是一种由 Scala 语言开发的快速、通用、可扩展的大数据分析引擎。 1.2 Spark作用 中间结果输出 Spark的Jo…

Android--Jetpack--WorkManager详解

2024已经到来&#xff0c;愿你安睡时&#xff0c;山河入梦。愿你醒来时&#xff0c;满目春风。愿你欢笑时&#xff0c;始终如一。愿你行进时&#xff0c;前程似锦&#xff0c;坦荡从容。 编程语言的未来&#xff1f; 目录 一&#xff0c;定义 二&#xff0c;特点 三&#xff0c…

Kubernetes 集群搭建(新人白嫖青云服务器) 一个master节点+两个工作节点

文章目录 1&#xff0c; 购买青云服务器&#xff08;白嫖&#xff09;2&#xff0c;创建 VPC3&#xff0c;连接测试4&#xff0c;安装 docker4.1&#xff0c;安装docker 20.10.74.2&#xff0c;配置加速镜像 5&#xff0c;安装 Kubernetes5.1&#xff0c;要求5.2&#xff0c;设…

【算法】一维、二维前缀和 解决算法题(C++)

文章目录 1. 前缀和算法 介绍2. 一维前缀和 模板引入DP34【模板】前缀和 3. 利用一维前缀和 解题724.寻找数组的中心下标238.除自身以外数组的乘积560.和为K的子数组974.和可被K整除的子数组525.连续数组 二维前缀和 模板1314.矩阵区域和 1. 前缀和算法 介绍 前缀和算法 用于高…

opencv期末练习题(2)附带解析

图像插值与缩放 %matplotlib inline import cv2 import matplotlib.pyplot as plt def imshow(img,grayFalse,bgr_modeFalse):if gray:img cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)plt.imshow(img,cmap"gray")else:if not bgr_mode:img cv2.cvtColor(img,cv2.COLOR_B…

图像识别快速实现

文本的跑通了&#xff0c;接下来玩玩图片场景 1. 引入模型 再另起类test_qdrant_img.py&#xff0c;转化图片用到的模型和文本不太一样&#xff0c;我们这里使用ResNet-50模型 import unittest from qdrant_client.http.models import Distance, VectorParams from qdrant_cl…

一起读《奔跑吧Linux内核(第2版)卷1:基础架构》- 大小端字节序

关注 点赞 不错过精彩内容 大家好&#xff0c;我是硬核王同学&#xff0c;最近在做免费的嵌入式知识分享&#xff0c;帮助对嵌入式感兴趣的同学学习嵌入式、做项目、找工作! Hello&#xff0c;大家好我是硬核王同学&#xff0c;是一名刚刚工作一年多的Linux工程师&#xff0…

【FPGA/verilog -入门学习15】vivado FPGA 数码管显示

1&#xff0c;需求&#xff1a;使用xc720 开发板的8个数码管显示12345678 2&#xff0c;需求分析&#xff1a; 75hc595 1&#xff0c;74hc595驱动&#xff0c;将串行数据转换成并行输出。对应研究手册 2&#xff0c;发送之前将要发的数据&#xff0c;合并成高8位:SEG,低8位&…

我在CSDN的2023年

一、引言 在2023年的这一年当中&#xff0c;在CSDN的生活让我得到许多知识与启发&#xff0c;也让我获得一些快乐和成就 二、自己的收获 在这一年当中&#xff0c;我从一个只会看别人写的文章解决问题到&#xff0c;可以自己写文章帮别人解决问题&#xff0c;这种成就感是极大…

内衣迷你洗衣机什么牌子好?四款最好用的迷你洗衣机品牌

最近这两年在洗衣机中火出圈的内衣洗衣机&#xff0c;它不仅可以清洁我们较难清洗的衣物&#xff0c;自带除菌功能&#xff0c;可以让衣物上的细菌&#xff0c;还能在清洗的过程中呵护我们衣物的面料&#xff0c;虽然说它是内衣洗衣机&#xff0c;它的功能不止可以清洗内衣&…