从零开始学HTML，掌握网页开发的基础html
本文目录导读：
- HTML的基本结构
- HTML的基本标签
-
段落标签（：用于定义段落。段落是网页中文字或文本的组织方式。
链接标签（：用于定义超链接。
<a href="#">表示一个超链接，href属性用于指定超链接的目标地址。图片标签（：用于插入图片。
src属性用于指定图片的来源地址。列表标签（
- 、
- 、
- 、
- 等）
<ul>表示无序列表，<li>表示列表项，<ol>表示有序列表。其他常用标签：如
<br>（换行）、<br>（换行）、<center>（居中显示内容）、<form>（表单）、<input>（输入字段）等。
以下是一个使用HTML标签创建一个简单的网页示例：
<!DOCTYPE html>
<html>
<head>我的个人博客</title>
</head>
<body>
<h1>欢迎光临我的个人博客！</h1>
<p>这是我博客的第一篇文章，关于HTML的基础知识。</p>
<a href="#">点击这里访问我的个人页面</a>
<img src="my-image.jpg" alt="我的图片">
<br>
<center>
<h2>这是我创建的一个有序列表</h2>
<ol>
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
</center>
<form>
<input type="text" placeholder="请输入您的姓名">
</form>
</body>
</html>
三、HTML的属性">等）**：用于定义网页标题的大小。h1表示最大的标题，h2表示次大的标题，依此类推。
-
段落标签（：用于定义段落。段落是网页中文字或文本的组织方式。
-
链接标签（：用于定义超链接。<a href="#">表示一个超链接，href属性用于指定超链接的目标地址。
-
图片标签（：用于插入图片。src属性用于指定图片的来源地址。
-
列表标签（、- 、
、- 等）
：用于创建列表。<ul>表示无序列表，<li>表示列表项，<ol>表示有序列表。
-
其他常用标签：如<br>（换行）、<br>（换行）、<center>（居中显示内容）、<form>（表单）、<input>（输入字段）等。
段落标签（：用于定义段落。段落是网页中文字或文本的组织方式。
链接标签（：用于定义超链接。<a href="#">表示一个超链接，href属性用于指定超链接的目标地址。
图片标签（：用于插入图片。src属性用于指定图片的来源地址。
列表标签（、
：用于创建列表。、
<ul>表示无序列表，<li>表示列表项，<ol>表示有序列表。
其他常用标签：如<br>（换行）、<br>（换行）、<center>（居中显示内容）、<form>（表单）、<input>（输入字段）等。
以下是一个使用HTML标签创建一个简单的网页示例：
<!DOCTYPE html>
<html>
<head>我的个人博客</title>
</head>
<body>
<h1>欢迎光临我的个人博客！</h1>
<p>这是我博客的第一篇文章，关于HTML的基础知识。</p>
<a href="#">点击这里访问我的个人页面</a>
<img src="my-image.jpg" alt="我的图片">
<br>
<center>
<h2>这是我创建的一个有序列表</h2>
<ol>
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
</center>
<form>
<input type="text" placeholder="请输入您的姓名">
</form>
</body>
</html>
三、HTML的属性
HTML,即HyperText Markup Language，是HyperText Communications公司于1987年开发的，用于在网页上显示文本、图片、链接和其他元素的标记语言，它是所有网页的基础，也是前端开发中最重要的工具之一，无论你是想学习网页设计、开发个人博客，还是创建在线应用，掌握HTML的基础知识都是非常重要的。
HTML的基本结构
HTML的结构非常简单,但却是网页的核心，一个标准的HTML页面通常包括以下几个部分：
-
<!DOCTYPE html>：这是HTML的开头标签，表示你将要使用的HTML版本以及网页的类型。
html表示使用HTML5，html5表示完全遵循HTML5标准，如果你使用html标签，后面可以跟一个空格或换行。 -
**`：这是HTML页面的根标签，表示你正在使用的文档是以HTML语言编写的。
-
**
`：这是HTML页面的头部，通常用于包含元数据（如标题、字符集编码）、CSS样式表等。 -
**
<code>：这是HTML页面的标题标签，用于指定网页的标题。</code><title>我的个人博客 `，表示这个网页的标题是“我的个人博客”。 -
**
`：这是HTML页面的主体，用于包含网页的内容，如文字、图片、链接等。 - `：这是HTML页面主体的结束标签。
- `：这是HTML页面根标签的结束标签。
一个简单的HTML页面如下所示：
<!DOCTYPE html>
<html>
<head>我的个人博客</title>
</head>
<body>
<h1>欢迎光临我的个人博客！</h1>
<p>这是我博客的第一篇文章，关于HTML的基础知识。</p>
<a href="#">点击这里访问我的个人页面</a>
</body>
</html>
HTML的基本标签
HTML中有很多常用的标签,每个标签都有特定的用途，以下是一些常用的HTML标签： 标签（
、等）**：用于定义网页标题的大小。h1表示最大的标题，h2表示次大的标题，依此类推。
-
段落标签（：用于定义段落，段落是网页中文字或文本的组织方式。
-
链接标签（：用于定义超链接。<a href="#">表示一个超链接，href属性用于指定超链接的目标地址。
-
图片标签（：用于插入图片。src属性用于指定图片的来源地址。
-
列表标签（、- 、
、- 等）
：用于创建列表。<ul>表示无序列表，<li>表示列表项，<ol>表示有序列表。
-
其他常用标签：如<br>（换行）、<br>（换行）、<center>（居中显示内容）、<form>（表单）、<input>（输入字段）等。
h1表示最大的标题，h2表示次大的标题，依此类推。
-
段落标签（：用于定义段落，段落是网页中文字或文本的组织方式。
-
链接标签（：用于定义超链接。
<a href="#">表示一个超链接，href属性用于指定超链接的目标地址。 -
图片标签（：用于插入图片。
src属性用于指定图片的来源地址。 -
列表标签（
- 、
- 、
- 、
- 等）
<ul>表示无序列表，<li>表示列表项，<ol>表示有序列表。 - 、
-
其他常用标签：如
<br>（换行）、<br>（换行）、<center>（居中显示内容）、<form>（表单）、<input>（输入字段）等。
以下是一个使用HTML标签创建一个简单的网页示例：
<!DOCTYPE html>
<html>
<head>我的个人博客</title>
</head>
<body>
<h1>欢迎光临我的个人博客！</h1>
<p>这是我博客的第一篇文章，关于HTML的基础知识。</p>
<a href="#">点击这里访问我的个人页面</a>
<img src="my-image.jpg" alt="我的图片">
<br>
<center>
<h2>这是我创建的一个有序列表</h2>
<ol>
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
</center>
<form>
<input type="text" placeholder="请输入您的姓名">
</form>
</body>
</html>
HTML的属性
HTML标签可以使用属性来指定额外的信息,属性通常用于定义标签的样式、行为或内容，以下是一些常见的HTML属性：
-
src属性：用于指定图片的来源地址。 -
alt属性：用于描述图片的内容，通常是图片的 alt 文本，用于屏幕阅读器或图片描述。 -
href属性：用于指定超链接的目标地址。 -
hidden属性：用于隐藏标签，使其不可见。 -
visible属性：用于显示隐藏的标签。 -
class属性：用于为标签添加自定义的样式类名。 -
id属性：用于为标签指定一个唯一的标识符。 -
onclick属性：用于在单击标签时执行的JavaScript函数。 -
title属性：用于为标签指定一个友好的用户界面（UI）标题。
以下是一个使用属性创建一个带有样式和图片的HTML页面示例：
<!DOCTYPE html>
<html>
<head>我的个人博客</title>
</head>
<body>
<h1 style="color: red; font-size: 24px;">欢迎光临我的个人博客！</h1>
<img src="my-image.jpg" alt="我的图片" style="max-width: 200px;">
<a href="#">点击这里访问我的个人页面</a>
<br>
<center>
<h2 style="color: blue; font-weight: bold;">这是我的图片</h2>
</center>
<form>
<input type="text" placeholder="请输入您的姓名" style="width: 100px;">
</form>
</body>
</html>
HTML编辑器
HTML代码看起来可能有点复杂,但其实非常简单，为了方便编写和编辑HTML代码，你可以使用一些HTML编辑器，常用的HTML编辑器包括：
-
Notepad++：一个免费的文本编辑器，支持HTML语法高亮、自动完成等功能。
-
VS Code：一个功能强大的代码编辑器，支持HTML开发、语法高亮、自动完成等功能。
-
Sublime Text：一个轻量级的文本编辑器，支持HTML开发、语法高亮、自动完成等功能。
-
Online HTML Editor：一些在线HTML编辑器，如CodePen、JSFiddle等，可以方便地编写和测试HTML代码。
学习建议
-
从基础开始：先从HTML的基础知识开始学习，包括HTML的结构、标签、属性等。
-
实践是关键：通过编写和测试HTML代码来学习，你可以尝试创建一个简单的网页，添加标题、段落、链接、图片等元素。
-
使用在线资源：有很多在线教程和学习资源可以帮助你学习HTML，W3Schools、MDN Web Docs等。
-
参与项目：尝试参与一些HTML项目，如个人博客、在线测试系统等，通过实际操作来巩固所学知识。
-
学习CSS：CSS是HTML的重要组成部分，用于定义网页的样式，学习CSS可以让你的网页更加美观和专业。
-
学习JavaScript：JavaScript是网页脚本语言，可以让你的网页更加动态和交互式，学习JavaScript可以让你的网页功能更加丰富。
HTML是学习网页开发的基础,掌握HTML的基本知识和技能，可以为你的职业生涯打下坚实的基础，通过不断的实践和学习，你可以逐渐掌握HTML的高级功能和技巧，创作出更加复杂的网页。
从零开始学HTML，掌握网页开发的基础html，
发表评论