HTML 教程1

news2024/11/29 4:33:49

HTML文档的后缀名

  • .html
  • .htm

以上两种后缀名没有区别,都可以使用。

HTML 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

HTML 简介

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

 

  • <!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 元素包含了开始标签与结束标签

Web 浏览器

<!DOCTYPE> 声明

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

ps

1. doctype 声明是不区分大小写的,用来告知 Web 浏览器页面使用了哪种 HTML 版本。

在HTML 4.01 中,<!DOCTYPE> 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML(Standard Generalized Markup Language 标准通用标记语言)。

HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明,分别是:Strict、Transitional 和 Frameset。

HTML5 不是基于 SGML,因此不要求引用 DTD。

2. 对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。

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

3.对于设置 <meta charset="utf-8" /> 后出现网页乱码问题,其实归根到底就是:你通过 meta 标签设置的编码网页文件在保存时所使用的文档编码不相同造成的!

至于有的人说什么 360 浏览器默认 GBK 会造成乱码,我只想说的是,

只要你在 html 文件里写了 <!doctype hmtl>和 <meta charset="utf-8" />,浏览器就绝对会按照 utf-8 编码解析网页,没有第二种可能!再次重点说明:保存 html 文件时,文档编码和 meta 设置的编码,一定要相同,只要不相同,就一定会出现乱码!

之所以一定要写上 <!doctype html>,就是为了防止浏览器的怪异模式,强制浏览器按照标准模式渲染网页!

 

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

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

相关文章

QTableWidget加载大文件数据

由于最近在项目中需要加载几GB的文件&#xff0c;并且需要在QTableWidget中进行显示&#xff1b;粗略估计可能得有几千万行&#xff0c;如果使用常规的方法&#xff0c;直接在QTableWidget中进行全部显示&#xff0c;会比较卡。所以查找相关资料&#xff0c;最终想到了一个比较…

算法基础学习笔记——⑧堆\哈希表

✨博主&#xff1a;命运之光 ✨专栏&#xff1a;算法基础学习 目录 ✨堆 &#x1f353;堆模板&#xff1a; ✨哈希表 &#x1f353;一般哈希模板&#xff1a; &#x1f353;字符串哈希模板&#xff1a; 前言&#xff1a;算法学习笔记记录日常分享&#xff0c;需要的看哈O(…

【是C++,不是C艹】 类与对象 | 认识面向对象 | 访问限定符 | 封装 | this指针

&#x1f49e;&#x1f49e;欢迎来到 Claffic 的博客&#x1f49e;&#x1f49e; &#x1f449; 专栏&#xff1a;《是C&#xff0c;不是C艹》&#x1f448; 前言&#xff1a; 在C入门之后&#xff0c;就要进入C的第一个核心&#xff1a;类与对象&#xff0c;这期带大家认识认识…

Multichain跨链无法到账,DApp真去中心化or伪去中心化?

团队出问题&#xff0c;DApp就用不了&#xff0c;multichain被不少人质疑伪去中心化&#xff0c;甚至更有人开始质疑web3&#xff0c;那么这到底是怎么回事呢&#xff1f; 跨链桥问题让DApp的去中心化引发质疑 事情是这样的&#xff0c;5月24下午0xscope发推称与multichain有关…

leetcode 11.盛最多水的容器

题目描述 跳转到leetocde题目 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff…

RabbitMQ手动ACK与死信队列

为了保证消息从队列可靠的达到消费者&#xff0c;RabbitMQ 提供了消息确认机制&#xff08;Message Acknowledgement&#xff09;。 默认情况下RabbitMQ在消息发出后就立即将这条消息删除,而不管消费端是否接收到,是否处理完,导致消费端消息丢失时RabbitMQ自己又没有这条消息了…

spring-Bean管理-springboot原理-Maven高级

spring-Bean管理-springboot原理-Maven高级 配置优先级Bean管理1.获取bean2.bean作用域3.第三方bean SpringBoot原理Maven高级1.分模块设计与开发2.继承与聚合3.私服1.介绍2.资源上传与下载 配置优先级 优先级(低→高) application.yaml&#xff08;忽略) application.yml appl…

利用Servlet编写第一个“hello world“(续)

利用Servlet编写第一个“hello world“ &#x1f50e;通过插件 Smart Tomcat 简化 打包代码 与 部署 操作下载Smart Tomcat配置Smart Tomcat &#x1f50e;Servlet 中的常见错误404(Not Found)&#x1f36d;请求路径出错&#x1f36d;war 包未被正确加载 405(Method Not Allowe…

【Android-JetpackCompose】13、实战在线课程 App

文章目录 一、BottomNavigation 底部导航1.1 底部导航栏的布局、点击1.2 设置 bottomBar 的颜色1.3 设置顶部 actionBar 的颜色 二、主页 StudyScreen2.1 顶部状态栏2.2 一、BottomNavigation 底部导航 1.1 底部导航栏的布局、点击 首先&#xff0c;构造 NavigationItem 的 d…

安装stable-diffusion

安装流程&#xff1a; 下载stable-diffusion源码 <https://github.com/AUTOMATIC1111/stable-diffusion-webui/releases/tag/v1.2.1>安装python <https://www.python.org/ftp/python/3.10.6/python-3.10.6-amd64.exe>添加host 打开C:\Windows\System32\drivers\etc…

django基于scrapy的音乐歌曲分析及推荐系统

而在线音乐网站作为一个网络载体&#xff0c;在音乐的传播&#xff0c;创作&#xff0c;欣赏等方面对音乐的发展产生了前所未有的影响—。 &#xff08;1&#xff09;电脑网络技术的发展使人们通过音乐网站接触到了多的音乐模式。 &#xff08;2&#xff09;网民数量的激增使更…

两台群晖NAS之间使用FTP或SFTP进行数据高速拷贝问题

两台群晖NAS之间使用FTP或SFTP进行数据高速拷贝问题 为了更好的浏览体验&#xff0c;欢迎光顾勤奋的凯尔森同学个人博客http://www.huerpu.cc:7000 在有些时候&#xff0c;我们新买了一台全新群晖NAS需要把旧群晖NAS里的数据拷贝到新设备里&#xff0c;特别像电影、电视剧、小…

Python实战基础13-装饰器

1、先明白这段代码 第一波 def foo():print(foo)foo # 表示是函数 foo() # 表示执行foo函数第二波 def foo():print(foo)foo lambda x: x 1foo() # 执行lambda表达式&#xff0c;而不再是原来的foo函数&#xff0c;因为foo这个名字被重新指向了另外一个匿名函数函数名仅仅是…

攻不下dfs不参加比赛(九)

标题 为什么练dfs题目为什么练dfs 相信学过数据结构的朋友都知道dfs(深度优先搜索)是里面相当重要的一种搜索算法,可能直接说大家感受不到有条件的大家可以去看看一些算法比赛。这些比赛中每一届或多或少都会牵扯到dfs,可能提到dfs大家都知道但是我们为了避免眼高手低有的东…

Python入门(十三)函数(一)

函数&#xff08;一&#xff09; 1.函数概述2.函数定义2.1向函数传递信息2.2实参和形参 作者&#xff1a;xiou 1.函数概述 函数是带名字的代码块&#xff0c;用于完成具体的工作。要执行函数定义的特定任务&#xff0c;可调用该函数。需要在程序中多次执行同一项任务时&#…

win10微软Edge浏览器通过WeTab新标签页免费无限制使用ChatGPT的方法,操作简单,使用方便

目录 一、使用效果 二、注册使用教程 1.打开Edge浏览器扩展 2.选择Edge浏览器外接程序 3.搜索WeTab 4.进入管理扩展 5.启用扩展 ​编辑 6.进入WeTab新标签页 7.打开Chat AI 8.注册 9.使用 ChatGPT是OpenAI推出的人工智能语言模型&#xff0c;能够通过理解和学习人类…

opencv_c++学习(二十五)

一、Harris角点介绍 1、海瑞斯角点不可能出现在图像平滑的区域&#xff08;上图1&#xff09;&#xff1b; 2、图像边缘的支线出不可能出现海瑞斯角点&#xff08;上图2&#xff09;&#xff1b; 3、海瑞斯角点会出现在顶点处。&#xff08;上图3&#xff09;&#xff1b; 上图…

一文带你了解MySQL之redo日志

前言 本文以及接下来的几篇文章将会频繁的使用到我们前边唠叨的InnoDB记录行格式、页面格式、索引原理、表空间的组成等各种基础知识&#xff0c;如果大家对这些东西理解的不透彻&#xff0c;那么阅读下边的文字可能会特别的些费力&#xff0c;为保证您能正常的理解&#xff0…

Android 12系统源码_WindowInsets (一)WindowInsets相关类和功能介绍

一、什么是WindowInsets? WindowInsets源码解释为Window Content的一系列插值集合,可以理解为可以将其理解为不同的窗口装饰区域类型,比如一个Activity相对于手机屏幕需要空出的地方以腾给StatusBar、Ime、NavigationBar等系统窗口,具体表现为该区域需要的上下左右的宽高。…

Oracle Linux 8.8 发布 - Oracle 提供支持 RHEL 兼容发行版

Oracle Linux 8.8 发布 - Oracle 提供支持 RHEL 兼容发行版 Oracle Linux with Unbreakable Enterprise Kernel (UEK) & Red Hat compatible kernel (RHCK) 请访问原文链接&#xff1a;https://sysin.org/blog/oracle-linux-8/&#xff0c;查看最新版。原创作品&#xff…