HTML 简介

news2025/1/25 9:06:50

文章目录

  • HTML 简介
    • 实例解析
    • 什么是HTML?
    • HTML 标签
    • HTML 元素
    • Web 浏览器
    • HTML 网页结构
    • HTML版本
    • <!DOCTYPE> 声明
      • 通用声明
        • HTML5
        • HTML 4.01
        • XHTML 1.0
    • 中文编码


HTML 简介

在这里插入图片描述

HTML 实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>梁辰兴</title>
  </head>
  <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
  </body>
</html>

实例解析

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

什么是HTML?

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

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

HTML 标签

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

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

HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:

HTML 元素:

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

Web 浏览器

Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。

浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:
在这里插入图片描述

HTML 网页结构

下面是一个可视化的HTML页面结构:
在这里插入图片描述

注意:只有 区域 (白色部分) 才会在浏览器中显示。

HTML版本

从初期的网络诞生后,已经出现了许多HTML版本:

版本发布时间
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013

<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,以下方式均可:

<!DOCTYPE html>
 
<!DOCTYPE HTML>
 
<!doctype html>
 
<!Doctype Html>

通用声明

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">

中文编码

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8。

HTML 实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
  </body>
</html>

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

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

相关文章

Spring——数据源对象管理和Spring加载properties文件

前面一直都是在管理自己内部创建的对象&#xff0c;这个是管理外部的对象。 这里先使用阿里巴巴的druid来演示。需要在pom.xml中添加如下的依赖 <dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.1…

Leetcode.2416 字符串的前缀分数和

题目链接 Leetcode.2416 字符串的前缀分数和 Rating &#xff1a; 1725 题目描述 给你一个长度为 n的数组 words&#xff0c;该数组由 非空 字符串组成。 定义字符串 word的 分数 等于以 word作为 前缀 的 words[i]的数目。 例如&#xff0c;如果 words ["a", &q…

C++STL详解(五)——list的介绍与使用

文章目录list的介绍list的使用list的定义方法list迭代器失效问题list插入和删除inserteraselist迭代器的使用begin&#xff0c;end 和 rbegin&#xff0c;rendlist元素访问front 和 backlist容量控制与数据清理resizeclearlist操作函数spliceremove 和 remove_ifuniquemergerev…

安卓开发之动态设置网络访问地址

之前开发程序联测测接口的时候&#xff0c;因为要和不同的后台人员调接口&#xff0c;所以经常要先把程序里的ip地址改成后台人员给我的。每次都要先修改ip地址&#xff0c;之后编译运行一下&#xff0c;才能测试。但要是换了个后台人员&#xff0c;或者同时和2个后台人员测接口…

Android提词器实现富文本样式

前提前一段时间做了一个程序&#xff0c;提词器APP&#xff0c;结合greendao保存数据。最近新增了一个需求&#xff0c;实现部分文字富文本的展现。师傅找了一个网上的SDK&#xff0c;但是在集成的时候总是出问题&#xff0c;我又不想把项目挪进来&#xff0c;感觉很麻烦&#…

Oracle P6 Professional相比与Microsoft Project的8个优势

目录 引言 1. 自上而下的调度 2. 努力程度 (LOE) 活动 3. 最长路径 4. 多浮动路径分析功能 6.预算材料成本 7. 开始和完成里程碑 8. 工作公式类型 概括 引言 哪种日程安排工具更适合您的情况&#xff0c;Oracle Primavera P6 还是 Microsoft Project(MSP) 经常有一些…

MySQL8.0Linux安装及主从的搭建

MySQL8.0Linux安装教程 下载并安装 需要说明的一点是我使用的是SSH secure shell Client连接linux系统的&#xff0c;它的用法和命令窗口差不多。界面如图&#xff1a;一样的使用Linux命令操作。 话不多说 第一步&#xff1a; 1&#xff09;、切换到 /usr/local下 cd /usr/…

已解决hint : See above for output from the failure.

已解决&#xff08;pip install wxPython安装失败&#xff09;error: legacy-instal1-failure Encountered error while trying to install package.wxPython note: This is an issue with the package mentioned above&#xff0c;not pip. hint : See above for output from …

关于世界坐标系,相机坐标系,图像坐标系,像素坐标系的一些理解

关于世界坐标系&#xff0c;相机坐标系&#xff0c;图像坐标系&#xff0c;像素坐标系的一些理解前言一、各坐标系的含义二、坐标系转换1.世界坐标系与相机坐标系&#xff08;旋转与平移&#xff09;2.相机坐标系与图像坐标系&#xff08;透视&#xff09;3.图像坐标系与像素坐…

【UE4 RTS游戏】02-摄像机运动_完成摄像机在X轴上运动的相关步骤

效果通过控制键盘WS键使得“CameraPawn”进行前后移动步骤将landscape的Z轴位置更改为0删除“PostProcessVolume”将“LightmassImportanceVolume”移入Lighting文件夹内新建一个蓝图类&#xff0c;父类是Pawn&#xff0c;命名为“CameraPawn”将“MyController”重命名为“Cam…

详解JVM

详解JVM 最近学习了&#xff1a;周志明《深入理解高并发编程》&#xff1b;&#xff1b; 特此简要对学习做了部分总结&#xff0c;方便后续对JVM相关知识的完善和巩固&#xff1b; 若想深入了解学习&#xff0c;可阅读上述参考原著&#xff1b; Java内存区域与OOM 运行时数据…

大数据 | (三)centos7图形界面无法执行yum命令

大家好&#xff0c;今天是三八女神节了&#xff01; 你知道吗&#xff1f;世界上第一位电脑程序设计师是名女性&#xff0c;Ada Lovelace (1815-1852)。 她是一位英国数学家兼作家&#xff0c;第一位主张计算机不只可以用来算数的人&#xff0c;也发表了第一段分析机用的演算…

vector中迭代器失效的问题及解决办法

目录 vector常用接口 vector 迭代器失效问题 vector中深浅拷贝问题 vector的数据安排以及操作方式&#xff0c;与array非常相似。两者的唯一差别在于空间的运用的灵活性。array 是静态空间&#xff0c;一旦配置了就不能改变&#xff1b;要换个大(或小) 一点的房子&#x…

CorelDRAW Graphics Suite2023更新内容介绍

懂设计的职场人都知道这款软件&#xff0c;CorelDRAW是一款非常高效的矢量图形设计软件。CorelDRAW操作界面简洁易懂&#xff0c;能够为用户提供精确地创建物体的尺寸和位置的功能&#xff0c;减少点击步骤&#xff0c;提高设计效率&#xff0c;节省设计时间。功能比普通的美图…

简单理解TransFormer

背景:听了李宏毅老师关于transformer的讲解&#xff0c;觉得有必要记录一下&#xff0c;里面的PPT都是李宏毅老师的内容(不喜勿喷)1.self-attention在介绍transformer之前&#xff0c;必须先了解self-attention(1) 先将X输入Embedding(a Wx), 然后a乘相关的权重&#xff0c;生…

Day11-网页布局实战-CSS3动画

文章目录一 CSS3动画1 2D动画案例1-鼠标输入移入DIV 让图片旋转90度案例2-鼠标输入移入DIV 缩放图片案例3-贯穿项目-DIV移动2 animation动画播放器案例1-基础案例案例2-使用百分比关键帧定义动画案例3-旋转的图片案例4-贯穿案例-轮播图3 多余文本省略号...代替案例1-多余文本..…

一 Go环境搭建

1. 下载地址 https://golang.google.cn/dl/ 傻瓜式安装&#xff0c;自动会配置path的变量&#xff0c;安装完成后可以使用go version 查看当前安装的版本 本文使用目前最新的1.20.2版本 2. 配置go环境 cmd控制栏打开输入以下命令&#xff08;如果cmd有问题可以尝试powershe…

340秒语音芯片,轻松实现语音交互,畅享智能生活WTV380语音ic方案

随着智能家居、安防报警、宠物用品 等&#xff0c;智能设备的普及&#xff0c;语音交互技术正在逐渐成为人机交互的主要方式之一。而如何实现稳定高效的语音交互&#xff0c;就需要借助先进的语音芯片技术。今天&#xff0c;我们介绍的是一款高性能的语音芯片——WTV380&#x…

Gamma矫正

Gamma 曲线Gamma校正被使用在8位RGB图中。用来解决在有限的存储空间中保存尽可能多的人类感受敏感的色彩内容。Gamma 矫正Gamma校正的方式就是采样时,和输出到显示器给人类看时,对亮度进行的调整.如采样时 Gamma1/2.2 调亮Gamma&#xff0c;如显示时 Gamma2.2 调暗Gamma实际亮度…

【Redis】Redis慢查询

文章目录慢查询记录慢查询两个配置参数修改配置参数慢查询日志慢查询记录 我们都知道像mysql等持久化数据库会有慢查询日志&#xff0c;其实Redis中也有慢查询日志的功能。慢查询就是系统在执行命令的前后计算每条命令的执行时间&#xff0c;如果超过我们预设的时间&#xff0c…