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>

相关推荐
燃先生._.1 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
Dream_Snowar1 小时前
速通Python 第三节
开发语言·python
南宫生2 小时前
力扣-图论-17【算法学习day.67】
java·学习·算法·leetcode·图论
高山我梦口香糖2 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
sanguine__2 小时前
Web APIs学习 (操作DOM BOM)
学习
m0_748235242 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
信号处理学渣2 小时前
matlab画图,选择性显示legend标签
开发语言·matlab
红龙创客2 小时前
某狐畅游24校招-C++开发岗笔试(单选题)
开发语言·c++
jasmine s2 小时前
Pandas
开发语言·python