HTML——1.简介、基础、元素

一、简介

HTML(HyperText Markup Language)是一种用于创建网页的标记语言。它使用标记(tag)来描述网页的结构和内容。HTML被用于定义网页中的文本、图像、链接、多媒体以及其他元素的排列和呈现方式。

HTML文档是由一系列的HTML元素(elements)组成的。每个元素通过标记(tag)来定义,标记通常是成对出现的,分为开标签和闭标签,中间包裹着元素的内容。HTML文档的基本结构如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这是一个HTML注释,可以用于注释代码 -->
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="图片描述">
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

简要解释上面的HTML代码结构:

  • <!DOCTYPE html>:声明文档类型,指示当前文档使用HTML5规范。
  • <html>:HTML文档的根元素,包含了整个HTML文档的内容。
  • <head>:头部元素,通常包含了文档的元数据,如字符编码、页面标题、引入的样式表和脚本等。
  • <meta>:元数据元素,用于设置文档的元数据,如字符编码、视口设置等。
  • <title>:标题元素,用于定义网页的标题,显示在浏览器的标题栏或标签页上。
  • <body>:主体元素,包含了网页的主要内容,如文本、图像、链接等。
  • <h1><p><img><a>:分别是标题、段落、图片和链接等常用的HTML元素,用于构建网页的结构和内容。

二、基础

常用元素

  • 标题元素 <h1><h6>:用于定义标题,级别从1到6逐渐减小。
  • 段落元素 <p>:用于定义段落。
  • 图像元素 <img>:用于插入图片。
  • 超链接元素 <a>:用于创建链接。
  • 列表元素 <ul><ol><li>:分别用于创建无序列表和有序列表。
  • 表格元素 <table><tr><th><td>:用于创建表格。
  • 表单元素 <form><input><textarea><button>:用于创建表单。

HTML注释

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

 注释用于在HTML代码中添加注解或说明,浏览器会忽略注释内容。

属性

HTML元素可以具有属性,属性提供了关于元素的额外信息。常见的属性有:

  • id:用于给元素指定唯一的标识符。
  • class:用于给元素指定一个或多个类名,用于样式和脚本操作。
  • src:用于指定图像、音频、视频等资源的路径。
  • href:用于指定超链接的目标地址。
  • alt:用于指定图像元素的替代文本,当图像无法显示时显示该文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML基础</title>
</head>
<body>
    <h1>欢迎学习HTML基础</h1>
    <p>这是一个段落。</p>
    <img src="example.jpg" alt="示例图片">
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

三、元素

HTML由一系列的元素(elements)组成,每个元素都可以包含文本内容、其他元素或者是空的。HTML元素通常由开始标签(opening tag)、结束标签(closing tag)、内容和属性组成。

元素的基本结构:

<element attribute="value">content</element>
 

  • <element>:元素名称,表示该元素的类型或者标签名称,比如 <p> 表示段落元素,<img> 表示图像元素。
  • attribute="value":元素的属性,用于提供额外的信息,比如 src 属性用于指定图像的路径,href 属性用于指定链接的目标地址等。
  • content:元素的内容,即元素包裹的文本或者其他元素。
  • 开始标签:由元素名称和属性组成,以尖括号 <> 包围,用于表示元素的开始。
  • 结束标签:与开始标签类似,但在元素名称前加上了斜杠 /,表示元素的结束。

常见的HTML元素示例:

段落元素(<p>:用于定义一个段落。

<p>This is a paragraph.</p>
 

标题元素(<h1><h6>:用于定义标题,级别从1到6逐渐减小。

<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
 

 图像元素(<img>:用于在网页中嵌入图像。

<img src="image.jpg" alt="Image description">
 

超链接元素(<a>:用于创建链接。

<a href="https://www.example.com">This is a link</a>
 

列表元素(<ul><ol><li>:用于创建无序列表和有序列表。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>
 

表格元素(<table><tr><th><td>:用于创建表格。

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
</table>
 

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

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

相关文章

新model开发记录

模型使用 -- 用blender导出为 fbx &#xff0c;修改渲染方式&#xff08;点击模型->Materials->Extract Materials(将材质从fbx中 单独提取出来了)->Materials 选择 Shader -> SimpleURPToonLitExample 点开脸的材质&#xff0c;勾选第一条&#xff09; 解决角色…

力扣-python-故障键盘

题解&#xff1a; from collections import dequeclass Solution:def finalString(self, s: str) -> str:# 创建一个双端队列用于存储字符q deque()# 定义一个标志位&#xff0c;用于标记当前字符应该添加到队列的哪一端head False# 遍历输入的字符串s的每一个字符for ch…

Linux word转pdf汉字没有乱码,但是dataMap.put(“userTrainedOper1“, “\u2611“);填充单选框时乱码

原来的&#xff0c;只支持汉字&#xff0c;不支持Unicode package com.gangwantech.web.utils;import com.aspose.words.*; import net.coobird.thumbnailator.Thumbnails;import javax.imageio.ImageIO; import java.awt.image.BufferedImage; import java.io.ByteArrayInput…

C++刷题篇——05静态扫描

一、题目 二、解题思路 注意&#xff1a;注意理解题目&#xff0c;缓存的前提是先扫描一次 1、使用两个map&#xff0c;两个map的key相同&#xff0c;map1&#xff1a;key为文件标识&#xff0c;value为文件出现的次数&#xff1b;map2&#xff1a;key为文件标识&#xff0c;va…

【代码随想录】【动态规划】day39:不同路径

不同路径1 # 机器人从(0,0)出发&#xff0c;到达(m-1,n-1)终点 一共有几种路径# 确定初始数组:dp二维数组 m行n列 表示到m行n列有几种路径dp[[0] * n for _ in range(m)]dp[0][0]1for i in range(m):dp[i][0]1for j in range(n):dp[0][j]1# dp[1][1]2for i in range(1,m):for…

CTF wed安全(攻防世界)练习题

一、Training-WWW-Robots 进入网站如图&#xff1a; 翻译&#xff1a;在这个小小的挑战训练中&#xff0c;你将学习Robots exclusion standard。网络爬虫使用robots.txt文件来检查它们是否被允许抓取和索引您的网站或只是其中的一部分。 有时这些文件会暴露目录结构&#xff0c…

【数据结构】优先级队列——堆

&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;个人主页&#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388; &#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;数据结构专栏&#x1f388;&#x1f388;&#x1f388;&…

C++11:右值引用

C11&#xff1a;右值引用 右值与左值右值引用语法右值引用底层移动语义引用折叠完美转发 传统的C语法中就有引用的语法&#xff0c;而C11中新增了的右值引用语法特性&#xff0c;所以从现在开始我们之前学习的引用就叫做左值引用。无论左值引用还是右值引用&#xff0c;都是给对…

VR全景赋能智慧农业,打造沉浸式种植体验平台

随着人口的增长&#xff0c;传统农业也正在面临着不一样的挑战&#xff0c;加上很多人对农业的固有印象&#xff0c;很少有年轻人愿意下到农田里&#xff0c;那么该如何提高产量、降低成本以及引导年轻人深刻感受现代农业成为了急需解决的问题。 随着城市化脚步的推进&#xff…

JavaScript作用域详解

作用域可分为词法作用域和动态作用域&#xff0c;JavaScript 使用词法作用域&#xff0c;也称为静态作用域。 词法作用域是指变量的作用域在代码写好的时候就确定了&#xff0c;而不是在运行时确定。函数在定义的时候就决定了其作用域&#xff0c;而不是在调用的时候。 JavaScr…

【华为OD机试C++】生成随机数

《最新华为OD机试题目带答案解析》&#xff1a;最新华为OD机试题目带答案解析&#xff0c;语言包括C、C、Python、Java、JavaScript等。订阅专栏&#xff0c;获取专栏内所有文章阅读权限&#xff0c;持续同步更新&#xff01; 文章目录 描述输入描述输出描述示例说明代码 描述 …

数码管时钟--LABVIEW编程

一、程序的前面板 1.获取系统时钟&#xff0c;年月日&#xff0c;时分秒&#xff0c;用14个数码管显示。 2.闹钟设定小时和分钟。 二、程序的后面板 三、程序运行图 四、程序源码 源程序可以在百度网盘自行下载&#xff0c;地址链接见下方。 链接&#xff1a;https://pan.b…

LeetCode-54. 螺旋矩阵【数组 矩阵 模拟】

LeetCode-54. 螺旋矩阵【数组 矩阵 模拟】 题目描述&#xff1a;解题思路一&#xff1a;定义上下左右四个边界&#xff0c;进行模拟。解题思路二&#xff1a;5行 Python zip函数图一乐解题思路三&#xff1a;0 题目描述&#xff1a; 给你一个 m 行 n 列的矩阵 matrix &#xf…

SketchUp Pro中文---3D建模与设计领域的专业选手

SketchUp Pro是一款功能强大的3D建模软件&#xff0c;广泛应用于建筑、城市规划、室内设计等领域。它拥有用户友好的界面和丰富的建模工具&#xff0c;支持实时查看、高 级扩展以及智能提示等功能&#xff0c;使得建模过程更加直观、灵活和高效。SketchUp Pro还支持自定义插件&…

java汇总区间

给定一个 无重复元素 的 有序 整数数组 nums 。 返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表 。也就是说&#xff0c;nums 的每个元素都恰好被某个区间范围所覆盖&#xff0c;并且不存在属于某个范围但不属于 nums 的数字 x 。 列表中的每个区间范围 [a,b] 应该按…

深入了解HTML:优化代码结构与兼容性考虑

介绍 1.html的定义 HTML&#xff08;Hypertext Markup Language&#xff09;是一种用于创建网页结构的标记语言。它由一系列的标签组成&#xff0c;每个标签都用于定义页面中的不同元素&#xff0c;如文本、图像、链接等。HTML文档由一个个HTML标签构成&#xff0c;这些标签通…

Jenkins插件下载错误时间问题

以下为错误原因&#xff0c;主要是虚拟机的时间和北京时间不一致造成的 java.security.cert.CertificateNotYetValidException: NotBefore: Tue Mar 26 10:14:30 UTC 2024 jenkins-jenkins-1 | 2024-03-25 19:36:03.9460000 [id72] INFO h.model.UpdateCenter$DownloadJob#run…

1033 To Fill or Not to Fill

是否有能到达的站点 无&#xff0c;输出当前距离&#xff08;最后一个到达站点距离满油箱状态下行走距离&#xff09;有 有价格更低的站点 如果油量不足以到达新站点&#xff0c;加刚好到达该站点的油量&#xff08;只加可到达范围内最便宜的油&#xff09;有价格更高的站点 在…

论文速览 | IEEE TCI, 2022 | 单光子级非视距成像:估计强度与优化重建

注1:本文系"计算成像最新论文速览"系列之一,致力于简洁清晰地介绍、解读非视距成像领域最新的顶会/顶刊论文(包括但不限于 Nature/Science及其子刊; CVPR, ICCV, ECCV, SIGGRAPH, TPAMI; Light‑Science & Applications, Optica 等)。 本次介绍的论文是:<2…

前端开发学习笔记2 (CSS简介、CSS基础选择器、CSS字体属性、CSS文本属性和CSS引入方式)

文章目录 CSS简介CSS基本介绍CSS基本语法规范CSS代码风格 CSS基础选择器选择器的作用和分类标签选择器类选择器id选择器通配符选择器 CSS字体属性font-family字体类型设置font-size字体大小设置font-weight字体粗细设置font-style字体样式设置font字体复合属性设置 CSS文本属性…