首页 > 其他分享 >二、HTML元素

二、HTML元素

时间:2024-12-15 22:53:17浏览次数:12  
标签:段落 结束 第一个 标签 元素 HTML

1、HTML 元素

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

<tagname>`内容在这里...`</tagname>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
开始标签 元素内容 结束标签
<h1> 我的第一个标题 </h1>
<p> 我的第一个段落。 </p>
<br> none none

注释: 某些HTML元素没有内容 (如 <br> )。这些元素称为空元素。空元素没有结束标记!

2、HTML 元素语法

(1)HTML 元素以开始标签起始
(2)HTML 元素以结束标签终止
(3)元素的内容是开始标签与结束标签之间的内容
(4)某些 HTML 元素具有空内容(empty content)
(5)空元素在开始标签中进行关闭(以开始标签的结束而结束)
(6)大多数 HTML 元素可拥有属性

3、嵌套的 HTML 元素

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

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

下面的示例包含四个HTML元素 (<html>, <body>, <h1> , <p>):

实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>

</body>
</html>

实例解析:
<html> 元素定义了整个 HTML 文档。

它有一个开始标签 <html> ,以及一个结束标签 </html>

<html> 元素内部还有其他元素: <body>:

<body>

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>

</body>

<body> 元素定义了 HTML 文档的主体。

它有一个开始标签 <body> ,以及一个结束标签 </body>

<body> 元素内部还有两个其他元素:<h1><p>:

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>

<h1> 元素定义标题。

它有一个开始标签 <h1> ,以及一个结束标签 </h1>:

<h1>我的第一个标题</h1>
<p> 元素定义段落。

它有一个开始标签 <p> ,以及一个结束标签 </p>:

<p>我的第一个段落。</p>

4、不要忘记结束标签

即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

实例

<html>
<body>

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

</body>
</html>

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

5、HTML 空元素

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

<br> 就是没有关闭标签的空元素:

实例
<p>这是一个带有换行符 <br> 的段落。</p>

6、HTML 标签对大小写不敏感

HTML 标签不区分大小写: <P> 等同 <p>

在HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写

标签:段落,结束,第一个,标签,元素,HTML
From: https://www.cnblogs.com/forlinfeng/p/18608859

相关文章

  • web前端期末大作业:基于HTML+CSS+JavaScript制作我的音乐网站(带设计报告)
    ......
  • 鸿蒙动画开发04——共享元素转场动画
    1概  述在不同页面间,有使用相同的元素(例如有同一幅图)的场景,可以使用共享元素转场动画衔接。为了突出不同页面间相同元素的关联性,可为它们添加共享元素转场动画。如果相同元素在不同页面间的大小有明显差异,即可达到放大缩小视图的效果。例如:有两个页面,A页面只展示一张图片,......
  • 08一些元素的使用
    一、今日学习内容1、HTML常见的元素HTML结构分析,H1到6,p元素,img,a元素,div,span元素不常用元素,HTML全局属性2、额外知识点补充字符实体,URL地址,元素语义化,SEO优化,字符编码tip:这样在编写代码的时候就不用频繁的切换到英文状态下了这样会提高编写代码的效率。二、文档声明和H......
  • jQuery鼠标拖动旋转DOM元素插件
    Propeller.js是一款jQuery鼠标拖动旋转DOM元素插件。通过该插件,可以使用鼠标拖动旋转页面中的任意DOM元素。 使用方法通过npm安装插件。npminstallPropeller HTML结构例如要拖动旋转一张图片。<imgsrc="demo.jpg"id="img"> 初始化插件......
  • delphi TFixedQueue 静态固定元素数队列,手工实现;
    unitzx.core.FixedQueue;interfaceusesSystem.SysUtils,System.Generics.Collections;typeTFixedQueue<T>=classprivate///<summary>///一个动态数组,用于存储队列元素,动态数组会自动管理内存///</summary>FItems:TArray<T>;......
  • 请说说html、body、document、window四者的区别是什么?
    在前端开发中,HTML、body、document和window都是非常重要的概念,但它们各自扮演的角色和代表的含义有所不同。以下是它们之间的主要区别:HTML:HTML是“HyperTextMarkupLanguage”的缩写,它是一种用于创建网页的标准标记语言。HTML文档由一系列的标签(tags)组成,这些标签用于定义......
  • 写一个方法将一个数组中的元素,从前到后依次两两组合,最后一个与第一个组合
    在前端开发中,你可以使用JavaScript来实现一个方法,将数组中的元素从前到后依次两两组合,并将最后一个元素与第一个元素组合。以下是一个示例代码:functionpairElements(arr){//创建一个空数组来存储结果letpairs=[];//获取数组的长度letlen=arr.......
  • HTML5如何播放ts视频流?
    在HTML5中播放.ts(TransportStream)视频流,通常需要一些额外的工具或库,因为HTML5原生的<video>标签直接支持的视频格式包括MP4、WebM和OggTheora等,但并不直接支持.ts格式。不过,你可以通过以下几种方法来实现.ts视频流的播放:方法一:使用JavaScript库(如video.js和hls.js)如果你正在处......
  • 写一个算法找到数组中两个元素相加等于指定数的所有组合
    在前端开发中,我们可以使用JavaScript来实现一个算法,该算法能够找到数组中两个元素相加等于指定数的所有组合。下面是一个示例代码:/***找到数组中两个元素相加等于指定数的所有组合*@param{number[]}nums-输入数组*@param{number}target-目标和*@returns{A......
  • 你认为写出什么样的html代码才是好代码呢?
    写出高质量的HTML代码是前端开发的重要一环。以下是一些关于编写优秀HTML代码的建议和最佳实践:1.语义化标签使用语义化标签:如<header>,<nav>,<main>,<section>,<article>,<footer>等,这些标签不仅使代码更具可读性,还有助于SEO和屏幕阅读器的使用。2.结构清晰保持结......