4 HTML小白教程

4 HTML小白教程

什么是HTML

HTML(超文本标记语言)是构建网页的基础语言。它用来结构化网页内容。

HTML基本结构

一个HTML文档的基本结构如下:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>欢迎使用HTML!</h1>
</body>
</html>

在这个结构中,<html> 标签是整个文档的根元素,<head> 部分包含元数据,而 <body> 部分包含所有可见内容。

常用HTML标签

标题标签

HTML中有六种标题标签,从<h1><h6>

1
2
3
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

标题标签用于定义页面的层次结构。

段落标签

<p>标签来定义段落:

1
<p>这是一个段落。</p>

链接标签

使用<a>标签来创建链接:

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

href属性指定链接的目标URL。

图像标签

使用<img>标签插入图像:

1
<img src="image.jpg" alt="示例图像">

src属性指定图像路径,alt属性提供图像的替代文本。

列表标签

有序列表

使用<ol>标签创建有序列表:

1
2
3
4
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>

无序列表

使用<ul>标签创建无序列表:

1
2
3
4
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>

表格标签

创建表格的基本结构如下:

1
2
3
4
5
6
7
8
9
10
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>

<tr>表示表格行,<th>表示表头,<td>表示单元格内容。

表单标签

创建表单的基本结构如下:

1
2
3
4
5
<form action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<input type="submit" value="提交">
</form>

<form>标签用于创建表单,<input>标签用于输入数据。

HTML注释

使用<!-- 注释内容 -->添加注释:

1
<!-- 这是一个注释 -->

注释在浏览器中不会显示,但对开发者有用。

常见的HTML错误

  • 忘记关闭标签
  • 使用无效的标记
  • 不正确的文档结构
    确保每个标签都正确配对并嵌套。

参考与实践

你可以使用在线编辑器例如 CodePenJSFiddle 来实践和测试你的HTML代码。

4 HTML小白教程

https://zglg.work/html/4/

作者

AI教程网

发布于

2024-08-08

更新于

2024-08-10

许可协议