概述.runoob.html

news2024/10/7 6:46:20

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

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

<标签>内容</标签>

 

Web 浏览器

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

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

中文编码

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

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

 

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

实例

<h1>这是一个标题</h1>

<h2>这是一个标题</h2>

<h3>这是一个标题</h3>

HTML 段落

HTML 段落是通过标签 <p> 来定义的。

实例

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

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

HTML 链接

HTML 链接是通过标签 <a> 来定义的。

实例

<a href="https://www.runoob.com">这是一个链接</a>

HTML 图像

HTML 图像是通过标签 <img> 来定义的.图像的名称和尺寸是以属性的形式提供的。

实例

<img decoding="async" src="/images/logo.png" width="258" height="39" />

HTML 元素

开始标签 *元素内容结束标签 *
<p>这是一个段落</p>
<a href="default.htm">这是一个链接</a>
<br>换行

*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

 

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。

HTML 文档由相互嵌套的 HTML 元素构成。

<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>这个 <p> 
//元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.元素内容是: 这是第一个段落。//
</body>
//<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。//
</html>

 

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 提示：使用小写标签;未来趋势 

HTML 属性

属性是 HTML 元素提供的附加信息。

HTML 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name="value"。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

实例

<a href="http://www.runoob.com">这是一个链接</a>

HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='John "ShotGun" Nelson'

 新版本的 (X)HTML 要求使用小写属性。

  1. 属性和属性值，尽量小写，本来这样做也方便些。
  2. class 属性可以多用 class=" " （引号里面可以填入多个class属性）
  3. id 属性只能单独设置 id=" "（只能填写一个，多个无效）

HTML 标题

在 HTML 文档中，标题很重要。

HTML 标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的. 浏览器会自动地在标题的前后添加空行。

<h1> 定义最大的标题。 <h6> 定义最小的标题。1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。

<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>
<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>

实例

<h1>这是一个标题。</h1>

<h2>这是一个标题。</h2>

<h3>这是一个标题。</h3>

 

 

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

实例

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

<hr>

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

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。注释: 开始括号之后（左边的括号）需要紧跟一个叹号 ! (英文标点符号)，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

注释写法如下:

实例

<!-- 这是一个注释 -->

HTML 段落

段落是通过 <p> 标签定义的。浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）;在未来的 HTML 版本中，不允许省略结束标签。如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：

HTML 样式- CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

HTML样式实例 - 背景颜色

背景色属性（background-color）定义一个元素的背景颜色：

实例

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

HTML 样式实例 - 字体, 字体颜色 ，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

实例

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 图像- 图像标签（ <img>）和源属性（Src）

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" alt="some_text">

URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

基本的注意事项 - 有用的提示：

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

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

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

相关文章

【Linux线程安全】

【Linux线程安全】

Linux线程安全Linux线程互斥进程线程间的互斥相关背景概念互斥量mutex互斥量的接口互斥量实现原理探究可重入VS线程安全概念常见的线程不安全的情况常见的线程安全的情况常见的不可重入的情况常见的可重入的情况可重入与线程安全联系可重入与线程安全区别常见锁概念死锁死锁的四…
阅读更多...
套接字编程基础

套接字编程基础

文章目录IPV4套接字地址结构IPv6套接字地址结构字节排序函数地址转换函数IPV4套接字地址结构 IPv4套接字定义在<netinet/in.h> 投文件中&#xff0c;定义如下&#xff1a; struct in_addr {in_addr_t s_addr; } struct sockaddr_in {uint8_t sin_len; // 长度字段sa_fa…
阅读更多...
【青训营】性能优化和自动内存管理

【青训营】性能优化和自动内存管理

本文整理自&#xff1a;第五届字节跳动青年训练营 后端组 什么是性能优化 提高软件系统处理能力&#xff0c;减少不必要消耗&#xff0c;充分利用计算机算力 业务层优化 针对特定场景和具体问题容易获得较大收益 语言运行时优化 面向全公司的优化&#xff0c;非特定场景解决更…
阅读更多...
力扣55.跳跃游戏（比较简单）

力扣55.跳跃游戏（比较简单）

文章目录力扣55.跳跃游戏&#xff08;比较简单&#xff09;题目描述算法思路代码实现力扣55.跳跃游戏&#xff08;比较简单&#xff09; 题目描述 给定一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。 数组中的每个元素代表你在该位置可以跳跃的最大长度…
阅读更多...
Tailscale-搭建异地局域网开源版中文部署指南

Tailscale-搭建异地局域网开源版中文部署指南

目前国家工信部在大力推动三大运营商发展 IPv6&#xff0c;对家用宽带而言&#xff0c;可以使用的 IPv4 公网 IP 会越来越少。有部分地区即使拿到了公网 IPv4 地址&#xff0c;也是个大内网地址&#xff0c;根本不是真正的公网 IP&#xff0c;访问家庭内网的资源将会变得越来越…
阅读更多...
SQL注入之联合查询注入与报错注入

SQL注入之联合查询注入与报错注入

数据来源 本文仅用于信息安全的学习&#xff0c;请遵守相关法律法规&#xff0c;严禁用于非法途径。若观众因此作出任何危害网络安全的行为&#xff0c;后果自负&#xff0c;与本人无关。 SQL注入之联合查询 sql注入简单演示 1. 判断sq注入 2. 闭合然后爆列 3. 查看显示列 …
阅读更多...
vue中实现后台系统权限管理的功能

vue中实现后台系统权限管理的功能

一、前言 后台管理系统的权限控制对于前端来说是经常用到的知识点&#xff0c;也比较重要&#xff0c;最近梳理一下写成文章&#xff0c;方便以后查阅。 项目中实现菜单的动态权限控制使用到了两种技术&#xff0c;一种是Vue Router&#xff0c;另一种是vue3官方推荐使用的专属…
阅读更多...
蓝桥杯嵌入式第十届学习记录

蓝桥杯嵌入式第十届学习记录

1&#xff1a;拷贝LCD工程代码作为模板2&#xff1a;注意放置代码得顺序3&#xff1a;注意公共头函数键盘4&#xff1a;串口配置出来方便dubug模式正常接收数据5:记得打定时器中断&#xff08;去历程定时器里面寻找&#xff01;&#xff09;6&#xff1a;细节地方7;LCD每个位置…
阅读更多...
[hive]数仓分层|用户纬度拉链表|维度建模

[hive]数仓分层|用户纬度拉链表|维度建模

https://www.modb.pro/404?redirect%2Fdb%2F241289一、数仓分层1、ODS层&#xff1a;原始数据层ODS(Ooriginal Ddata Sstore)1)设计要点存储来自多个业务系统、前端埋点、爬虫获取的一系列数据源的数据。我们要做三件事&#xff1a;【1】保持数据原貌不做任何修改&#xff0c;…
阅读更多...
一阶高通滤波器学习

一阶高通滤波器学习

导读&#xff1a;本期文章主要介绍一阶高通滤波器。一阶高通滤波器与一阶低通滤波器很相似&#xff0c;都是利用电容阻低频信号通高频信号&#xff0c;电感阻高频信号通低频信号的特点。一、一阶高通滤波器介绍滤波器是作为一种选频装置&#xff0c;是信号处理中的一个重要的概…
阅读更多...
Linux（二）进程概念

Linux（二）进程概念

目录 一、冯诺依曼体系结构 二、操作系统 三、进程概念 1、程序与进程的区别&#xff1a; 2、cpu分时机制 3、pcb——进程控制块 4、进程是什么&#xff1f; 四、进程状态 1、linux状态 2、僵尸态 pid_t fork(void)&#xff1a; fork创建进程之后&#xff0c;父子进…
阅读更多...
vector以及list

vector以及list

之前已经学习过了string类&#xff0c;接下来介绍c中的另外两个类—— vector和list&#xff1b; vector 之前介绍的string类是c所特定的字符数组&#xff1b; 而vector可以看做是string类的扩展&#xff0c;因为它是一个模板类&#xff1b; 它可以作为任何类型的数组&#x…
阅读更多...
小侃设计模式（廿二）-访问者模式

小侃设计模式（廿二）-访问者模式

1.概述 访问者模式&#xff08;Visitor Pattern&#xff09;指的是在类的内部结构不变的情况下&#xff0c;不同的访问者访问这个对象都会呈现出不同的处理方式。它的主要作用时将数据结构与数据操作分离&#xff0c;将不同的算法与其所作用的对象进行分离。本文将详述访问者模…
阅读更多...
DW动手学数据分析Task2：数据清洗及特征处理

DW动手学数据分析Task2：数据清洗及特征处理

文章目录一 数据清洗1 缺失值观察与处理1.1 缺失值观察1.2 缺失值处理2 重复值观察与处理二 特征处理1 分箱&#xff08;离散化&#xff09;处理2 对文本变量进行转换3 从纯文本Name特征里提取出Titles的特征3 参考文章一 数据清洗 数据清洗&#xff1a;我们拿到的数据通常是不…
阅读更多...
树的知识概括锦囊（一）

树的知识概括锦囊（一）

作者&#xff1a;爱塔居 专栏&#xff1a;数据结构 作者简介&#xff1a;大三学生&#xff0c;希望跟大家一起进步&#xff01; 文章目录 目录 文章目录 一、树形结构 二、树的基础知识 三、二叉树 3.1 概念 3.2 特殊的二叉树 ​编辑 3.3 二叉树的性质 四、习题挑战 一、树形结…
阅读更多...
手把手教你学51单片机-如何学习单片机

手把手教你学51单片机-如何学习单片机

大多数大学生之所以最后变的平庸，不是因为脑子多么笨，也不是全怪自己贪玩不上进，只是没有一个好的领路人，许多学校可能挂着导师的名头，但是多数是挂羊头卖狗肉或者是干脆不管。最后等大学生毕业之后，那些所谓的老师就会说学生很差或者学习很差，反正就是跟自己没啥关系。…
阅读更多...
OSPF综合实验（华为）

OSPF综合实验（华为）

题目&#xff1a; 思路&#xff1a; 首先配置每个区域的路由和环回地址&#xff0c;其次&#xff0c;根据题目要求打通每个网络的连接&#xff0c;区域0用MGRE打通网络&#xff0c;区域4需要重发布&#xff0c;其次再考虑优化的问题。ip地址的规划是为了更好的路由汇总&#x…
阅读更多...
《 Unity Shader 入门精要》第5章 开始 Unity Shader 学习之旅

《 Unity Shader 入门精要》第5章 开始 Unity Shader 学习之旅

第5章 开始 Unity Shader 学习之旅 5.2 一个最简单的顶点/片元着色器 顶点/片元着色器的基本结构 // Upgrade NOTE: replaced mul(UNITY_MATRIX_MVP,*) with UnityObjectToClipPos(*)// 定义 shader 的名字 Shader "Chapter 5/Simple Shader" {SubShader{Pass {//…
阅读更多...
自动驾驶控制算法之车辆横向控制（project）

自动驾驶控制算法之车辆横向控制（project）

本文为深蓝学院-自动驾驶控制与规划-第三章作业 目录 1 projection introduction 2 思路提示 2.1 ComputeControlCmd 2.2 ComputeLateralErrors 3 Corer Case 3.1 Low speed operation 3.2 Extra damping on heading 3.3 Steer into constant radius curve 4 ROSLGSV…
阅读更多...
FFmpeg-4.2.4的filter: drawbox源码分析

FFmpeg-4.2.4的filter: drawbox源码分析

1. vf_drawbox.c功能 有两个功能 ，添加方框，和添加网格； 1.1 添加方框效果 1.2 添加网格效果
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023