HTML入门——学习笔记

180 阅读2分钟

1. 什么是HTML??

HTML(HyperText Markup Language,超文本标记语言)是构建网页和网上应用的标准标记语言。它不是一种编程语言,而是一种用于定义网页内容结构的标记语言。

2. HTML的基本结构

一个基本的HTML文档由以下部分组成:

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>
  • <!DOCTYPE html>:文档类型声明,告诉浏览器这是一个HTML5文档。
  • <html>:根元素,包含所有的HTML元素。
  • <head>:包含了文档的元数据,如<title>(页面标题)。
  • <body>:包含了可见的页面内容。

3. HTML元素和标签

HTML元素由标签包围。大多数HTML元素都有一个开始标签和一个结束标签:

<tagname>内容</tagname>

一些元素是空的,意味着它们不包含内容,例如<img><br>

4. HTML常用标签和属性

HTML标签可以拥有属性,属性提供了有关HTML元素的额外信息。属性总是以名称/值对的形式出现,并且总是在标签的开始部分。示例中img是标签,src和alt是标签的属性。

<img src="image.jpg" alt="描述">

4.1 文本格式化标签

  • <h1><h6>:标题标签,定义标题。字体大小从h1到h6依次减小。
  • <p>:段落标签,定义段落。
  • <strong><b>:定义粗体文本。
  • <em><i>:定义斜体文本。

4.2 链接和图片

  • 链接:使用<a>标签创建链接,href设置跳转地址,target设置跳转方式。
<a href="https://www.example.com",target="_blank">访问示例网站</a>
  • 图片:使用<img>标签在HTML页面中嵌入图片,src设置图片地址,alt如果图片不能正常显示则显示提示语。
<img src="image.jpg" alt="图片描述">

4.3 列表

  • 无序列表:使用<ul><li>
<ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>
  • 有序列表:使用<ol><li>
<ol>
    <li>项目1</li>
    <li>项目2</li>
</ol>

4.4 表格

  • 创建表格使用<table>,行用<tr>,单元格用<td>
<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

4.5 表单

  • <form>:定义表单,用于收集用户输入。
<form action="/submit-form" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">  #文本输入框
    <input type="submit" value="提交">
    </form>

4.6 HTML5新特性

HTML5引入了许多新的元素和API,例如:

  • <audio><video>:嵌入音频和视频。
  • <canvas>:用于绘图。
  • <details><summary>:创建可折叠的内容区块。

5. 结语

HTML是构建网页的基础,掌握HTML对于任何希望从事网页设计和开发的人来说都是至关重要的。本文介绍了HTML的常用标签,如有不当之处,欢迎留言指正!