首页 > 其他分享 >HTML学习笔记——简单介绍

HTML学习笔记——简单介绍

时间:2023-10-04 15:12:30浏览次数:40  
标签:块级 标签 元素 笔记 学习 HTML 属性 页面

什么是HTML

HTML: HyperText Markup Language

HTML是一种用来告知浏览器如何组织页面的标记语言。其由一系列的元素组成,这些元素用来包围或者标记不同部分的内容,让它以某种方式呈现或者工作。

简单拆分一个 HTML 元素

观察下面一个HTML元素

<p> Hello World! </p>

<p> Hello World! </p> 是一个HTML元素
<p> 是其开始标签。
</p> 是其结束标签。没有结束标签可能会产生一些不可名状的效果。
Hello World! 是其内容。

嵌套元素

你可以把元素放到其他元素之中,也就是嵌套。
比如

<p> Hello <strong> World! </strong> </p>

你需要确保元素被正确嵌套,比如上面的例子中,我们先开始 p 元素,然后才开始 strong 元素,那么我们需要先让 strong 元素结束,再让 p 元素结束。

所有元素都要正确的打开和关闭,才能确保按照你所想的方式展现

空元素

有时候我们可以发现有些元素没有结束标签,而是在开始标签后面添加了一个 /

<img src="..." alt="..." />

这样的标签我们叫做空标签,因为我们不需要它有内容。

块级元素和内联元素

  • 块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新行上。块级元素通常是页面上的结构元素。例如,一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面,但是它可能嵌套在另一个块级元素里面。
  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组元素。内联元素通常不会导致文本换行。

属性

元素可以拥有属性,看起来就像给出的例子

<p class="MyText"> Hello World! </p>

其中 class="MyText" 就是一个属性。
属性必须包含如下三点:

  • 一个空格,它在属性和元素名称之间。如果一个元素具有多个属性,那么每个属性之间必须用空格分隔。
  • 属性名称,后面跟着一个等于号。
  • 一个属性值,由一对引号引起来。

布尔属性

有时候我们可能开到一个属性没有一个属性值,这些属性被称为布尔属性。布尔属性一般只能有一个值,这个值一般与属性名称相同。例如 disabled 属性,你可以将其分配给表单输入元素。用它来禁用表单输入元素,这样用户就不能输入了。

如下两种写法是等价的

<input type="text" disabled="disabled" />
<input type="text" disabled>

简单拆分一个 HTML文档

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>
  1. <!doctype html> 这是一个历史遗留问题,我们暂时不需要管它,只要记住需要包含这个才能使其他东西正常工作即可
  2. <html></html> 这个元素包裹了页面中所有的内容,有时我们称其为根元素。
  3. <head></head> 这个元素是一个容器,包含了所有你想包含在 HTML 页面中但是不在 HTML 页面中显示的内容。这些内容包含你想在搜索结果中出现的关键字和页面描述、CSS样式、字符集声明等等。
  4. <meta charser='utf-8'> 这个元素代表了不能由其他 HTML 元素表示的元数据。 charset 属性将你的文档字符集设定为 UTF-8。它可以帮助避免以后的一些问题。
  5. <title></title> 设置了页面的标题,也就是出现在该页面加载的浏览器标签的内容
  6. <body></body> 这个元素包含了你访问页面时所有显示在页面上的内容。

标签:块级,标签,元素,笔记,学习,HTML,属性,页面
From: https://www.cnblogs.com/Gensokyo-Alice/p/17742273.html

相关文章

  • Java 学习笔记一
    dos环境下(Windows即cmd)的Java命令先用javac文件名.java;命令,编译java文件,生成一个后缀为class、名与类名相同的文件。再用java类名命令,执行文件。注释当类名前的修饰符为public时,类名必须和源文件名一致。并且以上操作不能执行带package的java文件。和C......
  • 深度学习中对多个目标标签进行训练和预测代码实例
    #Tensofrlow#假设我们有一个任务是从图像中预测物体的位置(x坐标和y坐标)和物体的类别。这个任务有三个目标标签:x坐标、y坐标和类别。importnumpyasnpimporttensorflowastffromtensorflowimportkerasfromtensorflow.keras.layersimportInput,Dense#创建模拟数......
  • C/C++学习 -- 分组加密算法(DES算法)
    数据加密标准(DataEncryptionStandard,DES)是一种对称密钥加密算法,是信息安全领域的经典之作。本文将深入探讨DES算法的概述、特点、原理,以及提供C语言和C++语言实现DES算法的代码案例。一、DES算法概述DES算法是一种对称密钥加密算法,由IBM于1977年开发并于1977年被美国国家标准局(NI......
  • 2023-2024-1学年 学号20231317 《计算机基础与程序设计》第二周学习总结
    学期(如2023-2024-1)学号(如:20231317)《计算机基础与程序设计》第二周学习总结作业信息这个作业属于哪个课程<班级的链接>(如2023-2024-1-计算机基础与程序设计)这个作业要求在哪里<作业要求的链接>(如2023-2024-1计算机基础与程序设计第二周作业)这个作业的目标<分别......
  • 安装Linux操作系统,学习Linux基础
    安装Linux操作系统安装Linux操作系统实践学习“别出心裁的Linux命令学习法”1、ls命令2、man命令3、cheat命令实践学习“Linux基础入门(新版)”......
  • CVE-2010-2883 学习记录(漏洞战争,启动!)
    格式分析Header:文件头,用来注明pdf文件版本号Body:主要由组成文件的对象组成,例如图片,文字Cross-regerencetable:交叉引用表,用于存放所有对象的引用、位置偏移、字节长度,用于随机访问pdf中的任意对象Trailer:文件尾,给出交叉引用表的位置(指针)和一些关键对象的信息(指针),......
  • Qemu源码分析(11)—Apple的学习笔记
    一,前言昨天了解了qemu中虚拟开发板的内存创建,接着再了解下中断创建和使用。二,分析昨天看了flash初始化,后面的我理解应该一样,接着发现sram初始化后,本来以为和flash是一样的,结果多了如下一句,通过注释也很好理解就是把1个bit展开为了1个byte,这样1M的sram变成了32M空间。//Bitbandthe......
  • 10.4 国庆 环形dp与基环树笔记
    1.知识点环形dp环形dp的概念•环形dp与基环树在许多环形结构的问题中,我们可以在环中从某个位置把环断开,把这个环变成线性的,然后进行\(dp\)等操作。•把能通过上述操作解决的环形问题称作"可拆解的环形问题"。环形dp的两种策略•第一次在任意位置把环断开成链,按照......
  • 跟着思兼学习Klipper(25)提高 Klipper 进程优先级减少报错
    前言原创文章,转载引用请务必注明链接,水平有限,如有疏漏,欢迎指正交流。文章如有更新请访问DFRobot社区或者cnblogs博客园。欢迎对Klipper固件,以及对改版CNC加工的Voron三叉戟、v0、v2.4感兴趣的朋友加群交流(QQGroup:490111638)由于Klipper主要采用滚动更新机制(小......
  • python学习(自用)
    以下仅介绍与C语言习惯相背的内容:运算符/和//:在python中,直接用两个int类型去做/,会得到一个double类型。如果想做类似于C语言中的除(即结果依然是int,且无法整除时向下取整),需要用//。**:此符号意为指数,a**b得到的是a的b次方。字符串定义字符串时可以用单引号包裹也可以用双引......