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.mfbz.cn/a/499135.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【微服务】Sentinel(流量控制)

文章目录 1.基本介绍1.Sentinel是什么2.Sentinel主要特性3.Sentinel核心功能1.流量控制2.熔断降级3.消息削峰填谷 4.Sentinel两个组成部分 2.Sentinel控制台显示1.需求分析2.下载3.运行1.进入cmd2.输入java -jar sentinel-dashboard-1.8.0.jar3.查看默认端口8080 4.访问1.账号和…

数据结构课设-基于Python的校园导航系统(附源码)

一月份的数据结构课设完成后&#xff0c;我对Python的了解也更加深刻。现将课设报告及源码开源&#xff0c;不足之处希望大家指正。源码我放在博客主页的资源中&#xff0c;需要的话大家自行下载&#xff08;用户信息保存在 users.json 文件中&#xff0c;地图信息保存在 campu…

GooglePlay无法下载应用问题

问题如下 解决方法 1、实际上是因为google尚未添加apk downloader扩展程序 2、添加该扩展程序后&#xff0c;在应用中搜索应用名即可 欧克&#xff01;下载完成

IDEA设置内存大小不生效

IDEA设置内存大小不生效 100%可行的方法 -Xms512m -Xmx4096m1.首先要找对idea加载的是哪个配置文件。 2.找到idea启动文件夹&#xff0c;编辑idea.bat 添加打印修改文件路径的代码&#xff0c;运行idea.bat打印一下你的配置文件路径&#xff0c;找到路径 修改 然后运行idea.…

机器学习作业二之KNN算法

KNN&#xff08;K- Nearest Neighbor&#xff09;法即K最邻近法&#xff0c;最初由 Cover和Hart于1968年提出&#xff0c;是一个理论上比较成熟的方法&#xff0c;也是最简单的机器学习算法之一。该方法的思路非常简单直观&#xff1a;如果一个样本在特征空间中的K个最相似&…

vs2022 关于Python项目无法识别中文的解决方法

这是针对于vs2022安装和使用教程&#xff08;详细&#xff09;-CSDN博客 Python项目无法识别中文的解决方法的文章 一、问题 1.输入代码 print("你好Hello world&#xff01;") 2.启动&#xff0c;发现代码里有中文报错 二、解决方法 1.选择菜单栏里的工具->…

超实用的Maven指南

文章目录 实战记录&#x1f4dd;Maven 指令大全 &#x1f31f;找到没有被使用的jar&#xff08;analyze&#xff09;分析jar是被哪个maven引入&#xff08;tree&#xff09;&#x1f31f; dependencies&#xff08;Maven依赖&#xff09;build-resources&#xff08;资源导入&a…

如何提高知识库系统管理水平?

我们都有过这样的经历--遇到问题或紧急请求时&#xff0c;第一时间就是向知识库系统寻求帮助。很多时候&#xff0c;当你翻遍了无穷无尽的文档&#xff0c;却发现没有任何东西能够摆脱此时的困境&#xff0c;这时&#xff0c;向服务台提交工单成了不可避免的解决方式&#xff0…

基于Java的新生入学报到管理系统的设计与实现(论文+源码+PPT)_kaic

摘 要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#xff0c;科学化的管理&#xff0c;使信息…

2024年2月游戏手柄线上电商(京东天猫淘宝)综合热销排行榜

鲸参谋监测的线上电商&#xff08;京东天猫淘宝&#xff09;游戏手柄品牌销售数据已出炉&#xff01;2月游戏手柄销售数据呈现出强劲的增长势头。 根据鲸参谋数据显示&#xff0c;今年2月游戏手柄月销售量累计约43万件&#xff0c;同比去年上涨了78%&#xff1b;销售额累计达1…

Stable Diffusion 模型分享:SDXL Unstable Diffusers ☛ YamerMIX(混合风格)

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里,订阅后可阅读专栏内所有文章。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八下载地址模型介绍

每日一题 --- 快乐数[力扣][Go]

快乐数 题目&#xff1a;202. 快乐数 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到…

Spring用到了哪些设计模式?

目录 Spring 框架中⽤到了哪些设计模式&#xff1f;工厂模式单例模式1.饿汉式&#xff0c;线程安全2.懒汉式&#xff0c;线程不安全3.懒汉式&#xff0c;线程安全4.双重检查锁&#xff08;DCL&#xff0c; 即 double-checked locking&#xff09;5.静态内部类6.枚举单例 代理模…

AI 文字转语音工具以及它们的官网收集(值得收藏)

目前比较成熟的 AI 文字转语音工具以及它们的官网&#xff1a; 百度语音合成 (https://ai.baidu.com/tech/speech/tts)&#xff1a; 百度语音合成是百度 AI 推出的语音合成服务&#xff0c;支持多种语言和音色&#xff0c;可以用于语音播报、智能客服、有声阅读等场景。 阿里云…

使用Kaggle API快速下载Kaggle数据集

前言 在使用Kaggle网站下载数据集时&#xff0c;直接在网页上点击下载可能会很慢&#xff0c;甚至会出现下载失败的情况。本文将介绍如何使用Kaggle API快速下载数据集。 具体步骤 安装Kaggle API包 在终端中输入以下命令来安装Kaggle API相关的包&#xff1a; pip install…

对 CSS 工程化的理解

CSS 工程化是为了解决以下问题&#xff1a; 宏观设计&#xff1a;CSS 代码如何组织、如何拆分、模块结构怎样设计&#xff1f;编码优化&#xff1a;怎样写出更好的 CSS&#xff1f;构建&#xff1a;如何处理我的 CSS&#xff0c;才能让它的打包结果最优&#xff1f;可维护性&a…

【计算机网络】第 11、12 问:流量控制和可靠传输机制有哪些?

目录 正文流量控制的基本方法停止-等待流量控制基本原理滑动窗口流量控制基本原理 可靠传输机制1. 停止-等待协议2. 后退 N 帧协议&#xff08;GBN&#xff09;3. 选择重传协议&#xff08;SR&#xff09; 正文 流量控制涉及对链路上的帧的发送速率的控制&#xff0c;以使接收…

哪些开放式耳机平价又好用的?五款超平价品牌推荐深度测评分享!

在当今快节奏的生活中&#xff0c;高品质的音频设备已成为放松身心的重要途径之一。开放式耳机&#xff0c;凭借其出色的音频表现和舒适的佩戴体验&#xff0c;正逐渐成为音乐爱好者的新选择。它们特有的开放设计不仅减轻了耳罩带来的压迫感&#xff0c;还使得用户仿佛置身于音…

四种常用限流算法、固定窗口限流算法、滑动窗口限流算法、漏桶限流算法和令牌桶限流算法

什么是限流&#xff1f; 限流可以被视为服务降级的一种形式&#xff0c;其核心目标是通过控制输入和输出流量来保护系统。通常&#xff0c;一个系统的处理能力是可以预估的&#xff0c;为了确保系统的稳定运行&#xff0c;当流量达到预定的阈值时&#xff0c;必须采取措施限制进…

vue中使用jsmind生成脑图

项目部分参数&#xff1a; vue&#xff1a;2.6.10 node:16.20.0 1、使用命令行安装jsmind&#xff1a; npm i jsmind -S 2、在文件中引入jsmind&#xff0c;并编写渲染jsmind的代码&#xff1a;&#xff1a; <template><!-- jsmind容器 --><divid"jsmi…