HTML世界之第一重天

news/2024/2/28 17:13:39

一、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.ppmy.cn/news/1350052.html

相关文章

iOS AlDente 1.0自动防过充, 拯救电池健康度

经常玩iOS的朋友可能遇到过长时间过充导致的电池鼓包及健康度下降问题。MacOS上同样会出现该问题&#xff0c;笔者用了4年的MBP上周刚拿去修了&#xff0c;就是因为长期不拔电源的充电&#xff0c;开始还是电量一半的时候不接电源会黑屏无法开机&#xff0c;最后连着电源都无法…

【Docker】Docker Container(容器)

文章目录 一、什么是容器&#xff1f;二、为什么需要容器&#xff1f;三、容器的生命周期容器OOM容器异常退出容器暂停 四、容器命令详解docker createdocker logsdocker attachdocker execdocker startdocker stopdocker restartdocker killdocker topdocker statsdocker cont…

unity学习案例总结

动态标签 GitHub - SarahMit/DynamicLabel3D: Simple dynamic labels for a 3D Unity scene

LeetCode1143. Longest Common Subsequence——动态规划

文章目录 一、题目二、题解 一、题目 Given two strings text1 and text2, return the length of their longest common subsequence. If there is no common subsequence, return 0. A subsequence of a string is a new string generated from the original string with so…

C++之多线程(multi-thread)

理论基础 多线程编程是C中一个重要而复杂的主题。下面是一些建议和步骤&#xff0c;帮助你入门多线程编程&#xff1a; 了解基础概念&#xff1a; 线程和进程&#xff1a; 理解线程和进程的基本概念。 并发和并行&#xff1a; 区分并发和并行的概念&#xff0c;了解它们在多线…

没更新的日子也在努力呀,布局2024!

文章目录 ⭐ 没更新的日子也在努力呀⭐ 近期的一个状态 - 已圆满⭐ 又到了2024的许愿时间了⭐ 开发者要如何去 "创富" ⭐ 没更新的日子也在努力呀 感觉很久没有更新视频了&#xff0c;好吧&#xff0c;其实真的很久没有更新短视频了。最近的一两个月真的太忙了&#…

第一章、APPium、android自动化

第一章、APPium、android自动化 第二章、android利用QPython环境调用APPium 环境搭建 1、android studio 配置SDK Manger 的sdk、ndk、adb 控制台输入 open -e /Users/shenjianbin/.bash_profile.save export ANDROID_SDK/Users/shenjianbin/Library/Android/sdk export PA…

OCP使用web console创建和构建应用

文章目录 环境登录创建project赋予查看权限部署第一个image检查pod扩展应用 部署一个Python应用连接数据库创建secret加载数据并显示国家公园地图 清理参考 环境 RHEL 9.3Red Hat OpenShift Local 2.32 登录 在 crc start 启动crc时&#xff0c;可以看到&#xff1a; .....…

ClickHouse--02--安装

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 安装官网 &#xff1b;[https://clickhouse.com/docs/zh/getting-started/install](https://clickhouse.com/docs/zh/getting-started/install)![在这里插入图片描述…

中国电子学会2020年9月份青少年软件编程Scratch图形化等级考试试卷三级真题(编程题)

编程题(共3题&#xff0c;共30分) 36.题目&#xff1a;魔术表演“开花” 1.准备工作 &#xff08;1&#xff09;将舞台设置为"Party"&#xff1b; &#xff08;2&#xff09;删除默认角色&#xff0c;自行绘制椭圆花瓣角色&#xff1b; &#xff08;3&#xf…

C++ | KMP算法模板

next数组初始化 char a[1000006];//原串 char p[1000006];//子串 int pmt[1000006];void getNext(int m){int j0;pmt[0]0;for(int i1;i<m;i){while(j>0 && p[i]!p[j])jpmt[j-1];if(p[i]p[j])j;pmt[i]j;} }以下实例基于上述getNext函数及数据结构执行&#xff1a…

Flink从入门到实践(三):数据实时采集 - Flink MySQL CDC

文章目录 系列文章索引一、概述1、版本匹配2、导包 二、编码实现1、基本使用2、更多配置3、自定义序列化器4、Flink SQL方式 三、踩坑1、The MySQL server has a timezone offset (0 seconds ahead of UTC) which does not match the configured timezone Asia/Shanghai. 参考资…

【JVM篇】ThreadLocal中为什么要使用弱引用

文章目录 &#x1f354;ThreadLocal中为什么要使用弱引用⭐总结 &#x1f354;ThreadLocal中为什么要使用弱引用 ThreadLocal可以在线程中存放线程的本地变量&#xff0c;保证数据的线程安全 ThreadLocal是这样子保存对象的&#xff1a; 在每个线程中&#xff0c;存放了一个…

notepad++成功安装后默认显示英文怎么设置中文界面?

前几天使用电脑华为管家清理电脑后&#xff0c;发现一直使用的notepad软件变回了英文界面&#xff0c;跟刚成功安装的时候一样&#xff0c;那么应该怎么设置为中文界面呢&#xff1f;具体操作如下&#xff1a; 1、打开notepad软件&#xff0c;点击菜单栏“Settings – Prefere…

嵌入式linux驱动开发之网络设备驱动

https://bbs.csdn.net/topics/612247295 简介 Linux网络设备驱动是Linux内核中的一个重要组成部分&#xff0c;它负责网络设备的底层数据传输和设备控制。与字符设备驱动和块设备驱动相比&#xff0c;网络设备驱动的特点和功能如下&#xff1a; 首先&#xff0c;网络设备驱动…

单片机与外设的交互

单片机与外设的交互是嵌入式系统中非常重要的一个基础知识点。单片机是一个集成在同一芯片上的中央处理器、存储器和输入/输出接口,它可以根据用户编写的程序与各种外部设备即外设进行交互。单片机与外设之间的交互主要通过单片机上的输入/输出口(I/O口)来实现。 I/O口的工作原…

类和对象——封装

师从黑马程序员 封装 封装的意义一 在设计类的时候&#xff0c;属性和行为写在一起&#xff0c;表现事物 语法&#xff1a; class 类名{ 访问权限&#xff1a;属性/行为 }&#xff1b; 设计一个圆类&#xff0c;求圆的周长 代码&#xff1a; 示例1&#xff1a; #inc…

【EAI 015】CLIPort: What and Where Pathways for Robotic Manipulation

论文标题&#xff1a;CLIPort: What and Where Pathways for Robotic Manipulation 论文作者&#xff1a;Mohit Shridhar1, Lucas Manuelli, Dieter Fox1 作者单位&#xff1a;University of Washington, NVIDIA 论文原文&#xff1a;https://arxiv.org/abs/2109.12098 论文出处…

安装opencart

一、安装模板 Install SO Emarket Opencart 4 Theme 一&#xff1a;so_emarket_quick2 二&#xff1a;theme package installation 1、installed opencart Default 2、Extensions->Installer->Upload->so_emarket_theme_oc4011_home21_to_home35_v2.0.3->so_theme…

奶茶点餐|奶茶店自助点餐系统|基于微信小程序的饮品点单系统的设计与实现(源码+数据库+文档)

奶茶店自助点餐系统目录 目录 基于微信小程序的饮品点单系统的设计与实现 一、前言 二、系统功能设计 三、系统实现 1、商品信息管理 2、商品评价管理 3、商品订单管理 4、用户管理 四、数据库设计 1、实体ER图 2、具体的表设计如下所示&#xff1a; 五、核心代码 …
最新文章