初识HTML

2023-05-16

什么是HTML?

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

HTML 标签

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

HTML 元素

  • “HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思,但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器

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

HTML网页结构

<html>
	<head>
		<title></title>
	</head>
	<body>
		<h1>这是一个标题</h1>
		<p>这是第一个段落</p>
		<p>这是第二个段落</p>
	</body>
</html>

只有 < body >区域 才会在浏览器中显示,如下:
初识HTML

  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落

HTML版本

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

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

<!DOCTYPE> 声明

  • 声明有助于浏览器中正确显示网页, < !DOCTYPE>标签没有结束标签
  • 声明位于文档中的最前面的位置,处于 < html > 标签之前
  • 声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
  • 在 HTML 4.01 中,<!DOCTYPE> 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML (Standard Generalized Markup Language 标准通用标记语言)。DTD 指定了标记语言的规则,确保了浏览器能够正确的渲染内容
  • HTML5 不是基于 SGML,因此不要求引用 DTD
  • 提示:总是给您的 HTML 文档添加 <!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">

HTML 编辑器

   系统自带的文本编辑器

  • 每一种操作系统都带有简单的文本编辑器,只需要把文件后缀名改为.html即可
  • Windows 用户可以使用记事本
  • Linux 用户可以选择几种不同的文本编辑器,如 vi、vim 或者 emacs
  • Mac 用户可以使用 OS X 预装的 TextEdit

   专业的 HTML 编辑器

   可以使用专业的 HTML 编辑器来编辑 HTML,为大家推荐几款常用的编辑器

  • HBuilder:https://www.dcloud.io/
  • VS Code:https://code.visualstudio.com/
  • Sublime Text:http://www.sublimetext.com/

你可以从以上软件的官网中下载对应的软件,按步骤安装即可,以下我们介绍VS Code

VS Code

VS Code(全称 Visual Studio Code)是一个由微软开发,同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器,编辑器中内置了扩展程序管理的功能

**1.安装好并打开VS Code **
打开VS Code
2. 新建 HTML 文件
选择" 文件(F)->新建文件(N) ",在新建的文件中输入以下代码:

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

新建文件

3. 另存为 HTML 文件
然后选择" 文件(F)->另存为(A) ",文件名为 runoob.html:
另存为1
另存为2
在这里插入图片描述

4.在浏览器中运行这个 HTML 文件
鼠标右击编辑器上的文件名,选择在资源管理器中显示
在资源管理器中显示1
双击HTML文件在浏览器中打开
在资源管理器中显示1
在浏览器中的效果
在资源管理器中显示2

HTML基础

HTML 标题

  • HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

标题

HTML 段落

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

段落

HTML 链接

<a href="https://www.baidu.com">这是一个链接,单击我会跳转到百度</a>

超链接

HTML 图像

<img src="/img/w3clogo.jpg" width="258" height="39" />

w3clogo

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

初识HTML 的相关文章

  • Gmail 无法在电子邮件上正确呈现字体

    我已经建立了一个 html 电子邮件并使用了 Google 字体 我已使用以下方法将字体包含在 head 标签中 if mso endif 并使用字体 即我这样做了
  • 如何在没有 JavaScript 的情况下预加载图像?

    在我的 HTML 页面之一上 当我将鼠标悬停在某些链接上时 会显示一些大图像 并且加载这些图像需要一些时间 我不想使用 JavaScript 来预加载图像 有什么好的解决办法吗 HTML5 有一种新方法可以做到这一点 即link prefe
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都
  • 如何使用 JavaScript 获取元素的填充值?

    我有一个textarea在我的 HTML 中 我需要获取整数或浮点形式的填充数值 以像素为单位 我如何使用 JavaScript 获取它 我没有使用 jQuery 所以我正在寻找纯 JavaScript 解决方案 这将返回padding l
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码
  • 如何:带有 onclick 的 div 位于另一个带有 onclick 的 div 中

    只是一个简单的问题 我遇到了 div 与 onclick javascript 之间的问题 当我点击内部 div 时 它应该只触发它的 onclick javascript 但外部 div 的 javascript 也会被触发 用户如何点击
  • 应用旋转时,HTML5 canvas Clip() 在 Chrome 中不起作用

    我试图在画布上使用剪辑区域 一旦坐标系旋转任何非零值 它就会停止工作 window onload function var canvas document getElementById mainCanvas var ctx canvas g
  • Javascript 播放声音性能重吗?

    我正在用 Javascript 制作一个简单的游戏 当一个物体与墙壁碰撞时 它会发出 砰 的声音 声音的响度取决于物体的速度 速度越高 gt 声音越大 播放功能 playSound function id vol ID of the sou
  • 对一组复选框使用 HTML5“必需”属性?

    使用支持 HTML5 的较新浏览器 例如 FireFox 4 时 并且表单字段具有属性required required 并且表单字段为空 空白 然后点击提交按钮 浏览器检测到 必填 字段为空 并且不提交表单 相反 浏览器会显示一条提示 要
  • 使用 jQuery 清除 IMG

    我正在尝试从 a 中删除加载的图像 img 元素 但清除或删除 src 不会执行此操作 该怎么办 HTML img src https www google com images srpr logo3w png JQUERY img att
  • 如何在HTML中的PHP中注释掉HTML和PHP?

    这是我想注释掉的一行代码 h1 class post title a href title a h1 一种流行的注释方法是分别注释 html 和 php 有一个更好的方法吗
  • 调整文本区域大小

    我需要使用文本区域来显示一些文本 问题是 如果我放置 4 5 行文本 就会出现滚动条 如何使用 CSS HTML 使文本区域与其内容一样大 没有滚动条 文本区域不需要动态更改其大小 我仅使用它来显示文本 我也可以使用禁用的文本区域 我希望文
  • HTML5 历史 API

    我如何使用 HTML5 历史 api 我确实经历过https developer mozilla org en DOM Manipulated the browser history https developer mozilla org
  • 用隐藏单元格补充 colspanned 表格有什么不好吗?

    我一直在表格上开发一些排序和选择功能 我发现在具有跨单元格的表格中定位非常困难 我只是添加了跨区单元格并将其隐藏 它看起来不错 它与我的 js 一起工作 非常适合索引 但我想知道这是否是合法的方法 stuffing display none
  • W3C 验证器:“握手警报:unrecognized_name”

    我正在尝试验证我的网站W3C Nu Html 检查器 https validator w3 org nu doc https 3A 2F 2Fwww healthdrop in 2F但我遇到了以下错误 不知道为什么 IO 错误 握手警报 u
  • 如何延迟加载嵌入在 iframe 上的 YouTube 视频?

    如何将延迟加载应用于iframe嵌入视频 我尝试添加loading eager loading auto and loading lazyload 您可以使用srcdoc你里面的属性iframe标签来加载图像 请参阅以下示例作为参考
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas

随机推荐

  • 不清楚SBUS,这份SBUS协议详解请收藏

    1 简介 SBUS xff0c 全称Serial Bus xff0c 即串行通信总线 本质上是一种串口通信协议 xff0c 采用100K的波特率 xff0c 8位数据位 xff0c 2位停止位 xff0c 偶效验 xff0c 即8E2的串口
  • IDEA 创建Servlet,HelloWorldServlet(图文并茂,超级详细)

    第一步 xff1a 创建一个空的新项目 xff0c File gt New gt Project Empty Project 第二步 xff1a 生成一个module xff0c 项目上点右键 xff0c New gt Moudle 或 F
  • 教你彻底卸载Ubuntu双系统,去污不残留

    我们卸载Ubuntu双系统 xff0c 可能出于以下原因 xff1a span class token number 1 span span class token class name Ubuntu span 系统内核损坏无法正常进入 s
  • Python安装Pytorch教程(图文详解)

    最近人工智能等多门课需要复现论文 xff0c 近两年的论文很多都是基于Pytorch环境做的实验 xff0c 所以 xff0c 这里总结一下Pytorch的安装教程 xff0c 做好最快 最简单 最好地完成安装 本机环境Win10 43 1
  • Win10安装Ubuntu18.04双系统,图文详解,全网最详细教程

    博主经历过多次双系统的安装与卸载 xff0c 所以这次安装就记录下全过程 xff0c 能让后面的同学少走弯路 本教程对笔记本电脑单硬盘和双硬盘通用 安装目录 一 查看电脑信息1 BIOS模式2 查看硬盘数 二 制作系统盘1 下载镜像源2 制
  • Ubuntu18.04安装Ceres,图文详解

    视觉SLAM14讲 的第6章里面 xff0c 用到了Ceres库 xff0c 按照本书3rdparty提供的资源编译时 xff0c 会报错 xff0c 原因是和eigen3版本发生冲突 网上很多解决方法是重装eigen xff0c 尝试后也
  • Ubuntu20.04部署yolov5目标检测算法,无人车/无人机应用

    在FireFly RK3588开发板上烧录了Ubuntu20 04系统 xff0c 在此基础上线部署下简单的Python版本yolov5代码 xff0c 目前博主已全部转为C 43 43 版本了 xff0c 并且转化了pt模型为rknn模型
  • ubuntu查看cpu使用率

    rk3588上安装的ubuntu系统 xff0c 规格书上是8核CPU xff0c 希望跑算法时使用4核来跑 xff0c 所以需要查看cpu的使用情况 输入gnome system monitor xff0c 开启进程界面 xff1a 点击
  • 【视觉SLAM】MonoRec: Semi-Supervised Dense Reconstruction in Dynamic Environments from a Single Moving C

    Citations xff1a F Wimbauer N Yang L von Stumberg et al MonoRec Semi Supervised Dense Reconstruction in Dynamic Environme
  • Win10蓝屏问题:SYSTEM_THREAD_EXCEPTION_NOT_HANDLED

    最近一段时间 xff0c 我一直出现蓝屏的情况 xff0c 以为是 span class token constant CPU span 散热不行导致的重启 xff0c 因为比较频繁所以在此记录解决这个问题 xff0c 还是一贯的风格 xf
  • Android Studio实现文件管理器

    项目目录 一 项目概述二 开发环境三 详细设计1 布局设计2 程序运行时申请权限3 查看文件4 删除文件5 搜索文件6 新建文件 四 运行演示 一 项目概述 本次带来的文件管理器 xff0c 能够对SD卡的目录进行管理 主要功能包括新建文件
  • Failed to install the following Android SDK packages as some licences have not been accepted. bu

    报错信息 Android 开发者工具 Android开发者构建工具28 0 3 Android开发者平台28的协议都没有被接受 Failed to install the following Android SDK packages as
  • Jetson TX1 介绍

    前因 Jetson TX1 核心模块目前已经停产 xff0c 但是我们发现市面上有很多二手模块可以很容易获取 xff0c 同时 xff0c 英伟达对于Jetson TX1 的所有软件支持依然集成在了SDK manager中 xff0c 在最
  • Received status code 400 from server: Bad Request

    一 报错信息 FAILURE span class token operator span span class token class name Build span failed span class token keyword wit
  • Oracle VirtualBox虚拟机安装

    1 到官网下载虚拟机安装包 xff08 https www virtualbox org wiki Downloads xff09 2 下载后的样子 3 选择安装路径 4 选择要安装的功能 5 安装 6 安装完成
  • VirtualBox虚拟机安装Red Hat Enterprise Linux7.2

    1 首先安装好VirtualBox 2 下载好rhel server 7 2 xff0c 下载好长这样 3 点击新建 xff0c 在弹出窗口中输入名称 xff0c 选择类型和版本 xff0c 之后点击下一步 4 选择内存大小 xff0c 根
  • HTML 页面中的 target 用法

    值含义 blank在新窗口中打开链接 parent在父窗体中打开链接 self在当前窗体打开链接 此为默认值 top在当前窗体打开链接 xff0c 并替换当前的整个窗体 框架页 一个对应的框架页的名称在对应框架页中打开
  • VirtualBox挂载RedHat光盘

    1 使用root用户登录RedHat系统 xff0c 点击设备 gt 安装增强功能 2 安装增强功能后桌面会出现一个光盘标志 xff0c 弹出框点取消 3 为防止后续步骤出错 xff0c 此处重新分配光盘 点击设备 gt 分配光驱 xff0
  • RedHat系统使用yum安装软件

    使用yum命令安装软件 xff0c 此处以system config users为例 1 配置yum源配置文件 xff08 存放在 etc yum repos d文件夹下 xff09 xff1b 切换到 etc yum repos d文件夹
  • 初识HTML

    什么是HTML xff1f HTML 指的是超文本标记语言 HyperText Markup LanguageHTML 不是一种编程语言 xff0c 而是一种标记语言标记语言是一套标记标签 markup tag HTML 使用标记标签来描述