HTML 基础：标记、元素、属性等

代码猴儿

已于 2023-03-03 11:13:18 修改

阅读量1k

点赞数

文章标签： html css 前端

于 2023-03-03 10:56:17 首次发布

本文链接：https://blog.csdn.net/qq_33302253/article/details/129303635

版权

本文介绍了HTML的基础，包括标记、元素和属性的概念，基本语法如DOCTYPE、html、head和body标签，以及元素和属性的使用。此外，还讨论了HTML的语义化和模块化，强调了它们在提高文档可访问性和维护性中的重要性。常见元素如标题、段落、链接、表格和表单等也得到了阐述。

摘要由CSDN通过智能技术生成

在现代互联网中，HTML（Hypertext Markup Language）是一门不可或缺的基础技术。通过HTML，我们可以将内容、结构和样式分离，并实现网页的语义化和可访问性。本文将从标记、元素和属性等基础概念入手，逐步深入，带领读者了解HTML的基础知识和应用场景。

标记和语法

什么是标记

标记（Markup）是HTML的基本单位，用来定义和描述文档的结构和内容。HTML标记是由一对尖括号（< >）包含的名称和值组成的。标记通常包含在一对标签（Tag）中，例如：

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

其中，

是一个起始标签（Opening Tag），

是一个结束标签（Closing Tag），而This is a paragraph.则是标记的内容。

HTML的基本语法

HTML有一套简单的语法规则，用于定义和描述文档的结构和内容。下面是HTML的基本语法：

<!DOCTYPE html>
<html>
  <head>
    <title>Document Title</title>
  </head>
  <body>
    Document Content
  </body>
</html>

其中，是文档类型声明，用于告诉浏览器当前文档使用的HTML版本；是HTML文档的根元素，包含了文档的头部和身体；是文档的头部，包含了文档的元数据和样式表；用于定义文档的标题；是文档的身体，包含了文档的主要内容。

元素和属性

元素

元素（Element）是由起始标签、结束标签和内容组成的。例如：

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

其中，

是起始标签，

是结束标签，This is a paragraph.则是元素的内容。

属性

属性（Attribute）用于给元素提供更多的信息和控制。例如：

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

其中，src是属性名，"image.jpg"则是属性值。

常见HTML元素

文本元素
<h1>-<h6>：标题元素
<p>：段落元素
<a>：链接元素
<em>和<strong>：强调元素
<span>：文本容器

列表元素
<ul>：无序列表
<ol>：有序列表
<li>：列表项

表格元素
<table>：表格容器
<tr>：表格行
<th>和<td>：表格单元格

表单元素
<form>：表单容器
<input>：输入框
<label>：表单标签
<button>：按钮
<select>：下拉框
<textarea>：多行文本框

常用HTML属性

class和id

class和id属性用于为元素添加样式，方便CSS选择器选择和修改。例如：

<p class="intro">This is a paragraph.</p>

其中，class属性用于指定元素的类名，可以同时指定多个类名，多个类名之间使用空格分隔。

<div id="header">This is the header.</div>

id属性用于指定元素的唯一标识符，可以用于JavaScript操作DOM。

src和href

src和href属性分别用于指定图片和链接的URL地址。

<img src="image.jpg" alt="Image Description">
<a href="https://www.example.com/">Example Website</a>

alt和title

alt和title属性用于给图片和链接添加描述信息和提示信息。

<img src="image.jpg" alt="Image Description">
<a href="https://www.example.com/" title="Example Website">Example Website</a>

HTML语义化

HTML语义化是指使用正确的标记和元素来表示文档的结构和内容。这有助于提高文档的可访问性、可维护性和可理解性。例如，使用<h1>-<h6>元素表示文档的标题级别、使用<nav>元素表示导航条、使用<footer>元素表示页脚等。

HTML模块化

HTML模块化是指将页面分解为多个模块，每个模块具有独立的结构和功能，便于复用和维护。HTML模块化可以使用<header>、<main>、<aside>、<section>等元素进行划分，同时使用CSS和JavaScript进行样式和交互的控制。

附：不常用标签

<canvas>：用于在页面上绘制图形和动画，通常需要使用JavaScript进行控制
<audio>：用于在页面上嵌入音频文件，支持多种格式
<video>：用于在页面上嵌入视频文件，支持多种格式
<source>：用于指定<audio>和<video>标签的媒体源
<embed>：用于嵌入外部应用程序，如Flash等
<iframe>：用于嵌入另外一个HTML页面或者其他类型的文档

不常用属性

dir：用于指定文本的方向，支持ltr（从左到右）和rtl（从右到左）
accesskey：用于指定元素的快捷键
tabindex：用于指定元素的tab键顺序
align：用于指定元素的对齐方式
border：用于指定表格边框的宽度
bgcolor：用于指定元素的背景颜色

总结

本文介绍了HTML的基础知识和应用场景，包括标记、元素、属性、语法、常用元素和属性、HTML语义化和HTML模块化等方面。HTML是现代互联网不可或缺的基础技术之一，掌握HTML的基本知识和技能，对于Web前端开发者而言至关重要。

代码猴儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML 基础：标记、元素、属性等

HTML是现代互联网不可或缺的基础技术之一，掌握HTML的基本知识和技能，对于Web前端开发者而言至关重要
复制链接

扫一扫