html学习笔记

最新推荐文章于 2024-05-20 16:12:03 发布

Waldeinsamkeit46

最新推荐文章于 2024-05-20 16:12:03 发布

阅读量20

点赞数

文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/qq_56436093/article/details/134110835

版权

HTML 学习笔记

HTML（超文本标记语言）是用于创建网页的标记语言。它由各种标签组成，每个标签都有其特定的含义和用法。以下是一些常见的HTML标签：

1. `<html>`

含义：HTML文档的根元素，所有其他HTML元素都位于其中。
用法：用于定义整个HTML文档的开始和结束。

示例：

<!DOCTYPE html> <html> <!-- HTML 内容在这里 --> </html>

2. `<head>`

含义：包含了文档的元信息，如标题、字符集等。
用法：放在<html>标签内，用于定义文档的头部信息。

示例：

<head> <title>我的网页</title> <meta charset="UTF-8"> </head>

3. `<title>`

含义：定义文档的标题，显示在浏览器标签页上。
用法：放在<head>标签内，设置网页标题。
示例：
```
<title>我的网页</title>
```

4. `<body>`

含义：包含页面的主要内容，如文本、图像和链接。
用法：放在<html>标签内，定义可见的网页内容。

示例：

<body> <h1>欢迎访问我的网页</h1> <p>这是一个示例网页。</p> </body>

5. `<h1> - <h6>`

含义：定义标题的级别，<h1> 最高，<h6> 最低。
用法：用于创建标题。

示例：

<h1>这是一级标题</h1>
 <h2>这是二级标题</h2>

6. `<p>`

含义：定义段落。
用法：用于包围文本段落。
示例：
```
<p>这是一个段落。</p>
```

7. `<a>`

9. `<ul>` 和 `<li>`

10. `<ol>` 和 `<li>`

11. `<div>`

12. `<span>`

13. `<table>`, `<tr>`, `<th>`, 和 `<td>`

15. `<textarea>`

16. 注释 ``

17. `<select>` 和 `<option>`

含义：定义超链接。
用法：用于创建链接到其他页面或资源的链接。

示例：

<a href="https://www.example.com">访问示例网站</a>

8. `<img>`

含义：用于在页面中嵌入图像。
用法：通过src属性指定图像的路径。

示例：

<img src="image.jpg" alt="描述图像的文本">

含义：<ul>定义无序列表，<li>定义列表项。
用法：用于创建项目符号或编号的列表。
示例：
<ul> <li>项目1</li> <li>项目2</li> </ul>
含义：<ol>定义有序列表，<li>定义列表项。
用法：用于创建有编号的列表。
含义：用于将文档分组，通常用于CSS样式和布局。
用法：可用于创建容器，将内容分隔开。
示例：
<div class="container"> <p>这是一个容器中的文本。</p> </div>
含义：用于行内元素的分组，通常用于CSS样式。
用法：可用于包围行内文本元素。
示例：
<p>这是一些 <span style="color: red;">红色文本</span>.</p>
含义：用于创建表格和其行、列、表头和数据单元格。
用法：用于显示数据以表格形式呈现。
示例：
<table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>John</td> <td>25</td> </tr> </table>
示例：
<ol> <li>第一步</li> <li>第二步</li> </ol>

当继续学习HTML时，还有一些重要的概念和标签，让我们继续探讨：

14. <form>, <input>, 和 <button>
含义：<form> 用于创建表单，<input> 用于接受用户输入，<button> 用于触发操作。
用法：用于创建交互式表单，如登录、注册、搜索等。
示例：
<form> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <button type="submit">提交</button> </form>
含义：用于多行文本输入。
用法：用于接受用户的长文本输入，如评论框。
示例：
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>
含义：<select> 用于创建下拉菜单，<option> 用于定义下拉选项。
用法：用于提供选择一个或多个选项的界面元素。
示例：
<select id="fruit" name="fruit"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="cherry">樱桃</option> </select>
含义：用于在HTML中添加注释，不会显示在页面上。
用法：用于解释代码或进行临时调试。
示例：
htmlCopy code


含义：<select> 用于创建下拉菜单，<option> 用于定义下拉选项。
用法：用于提供选择一个或多个选项的界面元素。

<select id="fruit" name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="cherry">樱桃</option>
</select>