HTML世界之第一重天

一、HTML 元素

注:HTML 文档由 HTML 元素定义。

1.HTML 元素

开始标签 *

元素内容

结束标签 *

<p>

这是一个段落

</p>

<a href="default.htm">

这是一个链接

</a>

<br>

换行

开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。

2.HTML 元素语法

1.HTML 元素以开始标签起始,以结束标签终止;

2.元素的内容是开始标签与结束标签之间的内容;

3.某些 HTML 元素具有空内容(empty content);

4.空元素在开始标签中进行关闭(以开始标签的结束而结束);

5.大多数 HTML 元素可拥有属性

3.嵌套的 HTML 元素

大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。

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

4.HTML 文档实例

<!DOCTYPE html>

<html>

<body>

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

</body>

</html>

5.HTML 实例解析

①<p> 元素:

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

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

②<body> 元素:

<body>

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

</body>

<body> 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。元素内容是另一个 HTML 元素(p元素)。

③<html> 元素:

<html>

<body>

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

</body>

</html>

<html> 元素定义了整个 HTML 文档。这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>。元素内容是另一个 HTML 元素(body元素)。

6.HTML 空元素

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

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

注:千万不要忘记使用结束标签,要统一使用小写字母。虽然忘了使用结束标签,大多数浏览器也会正确地将 HTML 显示出来。但是为了避免不必要的麻烦,还是要写结束标签。

二、HTML 属性

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

1.HTML 属性

1.HTML 元素可以设置属性;

2.属性可以在元素中添加附加信息;

3.属性一般描述于开始标签;

4.属性总是以名称/值对的形式出现,比如:name="value"。

2.属性实例

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

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

3.HTML 属性常用引用属性值

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

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

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

name='John "ShotGun" Nelson'

HTML 元素的属性:

属性

描述

class

为html元素定义一个或多个类名(classname)(类名从样式文件引入)

id

定义元素的唯一id

style

规定元素的行内样式(inline style)

title

描述了元素的额外信息 (作为工具条使用)

三、HTML 标题

注:在 HTML 文档中,标题很重要。

1.HTML 标题

标题(Heading)是通过 <h1>-<h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

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

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

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

注释: 浏览器会自动地在标题的前后添加空行。

2.HTML 水平线

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

hr 元素可用于分隔内容。

在写的时候使用<hr />最为正确。

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

<hr />

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

<hr />

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

3.HTML 注释

将注释插入HTML代码中,可以提高可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

注释写法如下:

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

注:开始括号之后(左边的括号)需要紧跟一个叹号 ! (英文标点符号),结束括号之前(右边的括号)不需要。

标签

描述

<html>

定义 HTML 文档

<body>

定义文档的主体

<h1> - <h6>

定义HTML标题

<hr>

定义水平线

<!--...-->

定义注释

四、HTML 段落

1.HTML 段落

段落是通过 <p> 标签定义的。(</p> 是块级元素)

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

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

注意:浏览器会自动地在段落的前后添加空行。

2.HTML 折行

在不产生一个新段落的情况下进行换行(新行),使用 <br> 标签:

<p>这个<br>段落<br>演示了分行的效果</p>

注:<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

3.HTML 输出

无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。

对于 HTML,无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

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

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

相关文章

【OpenHarmony硬件操作】led灯和key的操作

文章目录 前言一、GPIO2.1 GPIO是什么?2.2 GPIO的工作模式2.3 点灯操作GPIO初始化设置引脚功能设置引脚的方向输出高低电平2.4 示例代码三、key的操作3.1 中断3.2 中断的触发方式3.3 相关函数设置上下拉电阻设置中断和触发模式

DataX源码分析 reader

系列文章目录 一、DataX详解和架构介绍 二、DataX源码分析 JobContainer 三、DataX源码分析 TaskGroupContainer 四、DataX源码分析 TaskExecutor 五、DataX源码分析 reader 六、DataX源码分析 writer 七、DataX源码分析 Channel 文章目录 系列文章目录前言Reader组件如何处理…

ARP欺骗攻击利用之抓取https协议的用户名与密码

1.首先安装sslstrip 命令执行&#xff1a;apt-get install sslstrip 2.启动arp欺骗 arpspoof -i ech0 -t 192.168.159.148 192.168.159.2 arpspoof -i ech0(网卡) -t 目标机ip 本地局域网关 3.命令行输入: vim /etc/ettercap/etter.conf进入配置文件 找到下红框的内容&a…

【Linux】学习-深入了解文件的读与写

深入了解语言级别(C语言)文件操作的"读"与"写" 在学习前&#xff0c;我们先要知道在Linux下的一个原则&#xff1a;一切皆是文件 如何理解呢&#xff1f;举个外设的例子&#xff0c;比如键盘和显示器&#xff0c;这两个外设也可以其实本质上也是文件&…

Qt Windows和Android使用MuPDF预览PDF文件

文章目录 1. Windows MuPDF编译2. Android MuPDF编译3. 引用 MuPDF 库4. 解析本地PDF文件 1. Windows MuPDF编译 使用如下命令将MuPDF的源码克隆到本地 git clone --recursive git://git.ghostscript.com/mupdf.git直接用VS&#xff0c;打开 mupdf/platform/win32/mupdf.sln …

pandas 按相同站号重新整合出一个dataframe

情况1&#xff1a; 如果两个DataFrame都有一个共同的列&#xff08;不是索引&#xff09;&#xff0c;你可以使用merge或join来整合它们。 import pandas as pd # 创建两个示例DataFrame df1 pd.DataFrame({ ID: [001, 002, 003], A: [foo, bar, baz] }) df2 pd.Dat…

docker 部署 mongodb 集群【建议收藏】

一、简洁搭建mognodb副本集 环境说明 我都是在云服务器上搭建的&#xff0c;CentOS7&#xff0c;Docker环境&#xff0c;版本忘记了。我就直接在同一台服务器上搭建三个mongodb即可。 1、基本信息如下 服务器地址 www.it307.top 副本集名称 rs 容器节点及端口映射 ​ m0…

数据结构——6.1 图的基本概念

第六章 图 6.1 图的基本概念 概念 图的概念&#xff1a;G由点集V和边集E构成&#xff0c;记为G(V,E)&#xff0c;边集可以为空&#xff0c;但是点集不能为空 注意&#xff1a;线性表可以是空表&#xff0c;树可以是空树&#xff0c;但图不可以是空&#xff0c;即V一定是非空集…

leetcode:63.不同路径二

dp数组含义&#xff1a;由初始位置到最终位置路径个数 递推公式&#xff1a;如果没有障碍再进行递推公式 初始化&#xff1a;1.若起始位置和终止位置有障碍路径个数为0 2.dp[i][0] 1和dp[0][j] 1的for循环条件都需要加上一个and dp[i][0] 0和and dp[0][j] 0. 3.遍历顺序…

三维形体投影面积(c++题解)

题目描述 在 n x n 的网格 grid 中&#xff0c;我们放置了一些与 x&#xff0c;y&#xff0c;z 三轴对齐的 1 x 1 x 1 立方体。 每个值 v grid[i][j] 表示 v 个正方体叠放在单元格 (i, j) 上。 现在&#xff0c;我们查看这些立方体在 xy 、yz 和 zx 平面上的投影。 投影 就…

案例:三台主机实现 级联复制

介绍&#xff1a;级联复制架构 级联复制架构 是一种特殊的主从结构&#xff0c;之前聊到的几种主从结构都只有两层&#xff0c;但级联复制架构中会有三层&#xff0c;关系如下&#xff1a; 也就是在级联复制架构中&#xff0c;存在两层从库&#xff0c;这实际上属于一主多从架…

Deepin基本环境查看(九)【被封印的创世神】

文章目录 - 相关文章目录1、概述2、Deepin中的创世神和管理员1&#xff09;创世神root2&#xff09;root被封印原因3&#xff09;其他的神灵【管理员】 3、神殿管理【su与sudo】1&#xff09;su&#xff08;Switch User&#xff09;2&#xff09;sudo&#xff08;Superuser Do&…

Open CASCADE学习|环形弹簧建模

目录 Draw Test Harness&#xff1a; C&#xff1a; 环形弹簧&#xff0c;也称为弓簧&#xff0c;是由拉伸弹簧和连接弹簧构成的。在结构上&#xff0c;环形弹簧通常包括端环、外环和内环&#xff0c;其主要参数包括弹簧的内径、外径和自由高度。环形弹簧的一个显著特点是&am…

计算机毕业设计SSM基于的冷链食品物流信息管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; vue mybatis Maven mysql5.7或8.0等等组成&#xff0c;B…

prometheus之redis_exporter部署

下载解压压缩包 mkdir /opt/redis_exporter/ cd /opt/redis_exporter/ wget http://soft.download/soft/linux/prometheus/redis_exporter/redis_exporter-v1.50.0.linux-amd64.tar.gz tar -zxvf redis_exporter-v1.50.0.linux-amd64.tar.gz ln -s /opt/redis_exporter/redis_…

网络原理(一)

&#x1f495;"Echo"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;网络原理(一) 一. 应用层 应用层是和程序员联系最密切的一层,对于应用层来说,程序员可以自定义应用层协议,应用层的协议一般要约定好以下两部分内容: 根据需求,明确要传输哪些信…

[算法学习]

矩阵乘法 只有当左矩阵列数等于右矩阵行数&#xff0c;才能相乘N*M的矩阵和M*K的矩阵做乘法后矩阵大小为N*k矩阵乘法规则&#xff1a;第一个矩阵A的第 i 行与第二个矩阵的第 j 列的各M个元素对应相乘再相加得到新矩阵C[i][j]的值 整除 同余 同余的性质 线性运算&#xff0c;…

服务器渲染(SSR)-前端框架

Next.js、Nuxt.js和Remix都是基于Node.js比较流行三个前端框架&#xff0c;它们都基于JavaScript和React/Vue构建&#xff0c;并提供了一些额外的功能和工具来简化开发过程。 1. Next.js是一个基于React的前端框架&#xff0c;它提供了服务器渲染&#xff08;SSR&#xff09;和…

Android:Cordova,JavaScript操作设备功能

Cordova学习 Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。 Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。 Cordova是PhoneGap贡献给Apache后的开源项目,是从…

最适合新手的SpringBoot+SSM项目《苍穹外卖》实战—(一)项目概述

黑马程序员最新Java项目实战《苍穹外卖》&#xff0c;最适合新手的SpringBootSSM的企业级Java项目实战。 项目简介 《苍穹外卖》项目的定位是一款为餐饮企业&#xff08;餐厅、饭店&#xff09;定制的软件产品。该项目是一个在线外卖订购系统&#xff0c;顾客可以通过网站或者…