目录

前言

一、HTML编辑器推荐

二、HTML基础语法

1.基本元素

2.文本

3.链接

4.图像

有关更多

前言

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

一、HTML编辑器推荐

博主使用的是VS Code工具(Visual Studio Code)来编辑HTML，也可以使用其他更专业的编辑器。

VS Code安装教程参考：VScode 教程

安装完成并在软件中安装"open in browser" 扩展，创建html文件即可运行。

二、HTML基础语法

1.基本元素

声明文档		<!DOCTYPE html>
根元素		<html>
头部元素<head>	标题	<title>
头部元素<head>	网页编码格式	<meta...>
可见内容<body>	标题	<h1>
可见内容<body>	段落	<p>

HTML 标签通常是成对出现的，比如 <p> 和 </p>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML教程(runoob.com)</title>
</head>
<body><h1>这是标题 1</h1>     <!-- 注释: h1,h2,h3表示标题字体大小逐渐变小 --><p>这是一个段落。</p><h2>这是标题 2</h2><p>这是另外一个段落。</p></body>
</html>

在线编辑器尝试一下！

2.文本

格式化标签：

粗体	<b>,<strong>
斜体	<i>,<em>
下划线	<ins>
删除线	<del>

<br>标签：用于不产生一个新段落的情况下进行换行（新行）

<p>这个<br>段落<br>演示了分行的效果</p>

注:对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

3.链接

HTML使用标签 <a>来设置超文本链接。

链接语法：

<a href="url">链接文本</a>

实例：

<a href="https://www.bilibili.com">进入B站</a>

上面这行代码显示为：进入B站

4.图像

在 HTML 中，图像由<img> 标签定义。

实例：

<img src="cat.gif" width="300" height="120" />

注意图像文件和html文件在不同目录下的写法：

1、html 文件跟图像文件(f盘)在不同目录下：

<img src="file:///f:/*.jpg" width="300" height="120"/>

2、html 文件跟图像在相同目录下：

<img src="*.jpg" width="300" height="120"/>

3、html 文件跟图像在不同目录下：

1）图像在 image 文件夹中，html 跟 image 在同一目录下：

<img src="data:image/*.jpg/"width="300" height="120"/>

2）图像在 image 文件夹中，html 在 connage 文件夹中，image 跟 connage 在同一目录下：

<img src="../image/*.jpg/"width="300" height="120"/>

4、如果图像来源于网络，那么写绝对路径：

<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>

有关更多

本文选取了一些比较入门的HTML语法，可以大致做一个简陋的网站，如果想了解完善更多HTML知识，可以点击下面的网站：

HTML 教程

HTML基础入门教程相关推荐

python怎么输出浮点数_python 零基础入门教程第 2 章：基本数据类型 (一)
一.什么是数据类型编程语言通过一些复杂的计算机物理底层机制,创造不同类型的数据,用来表示现实世界中的不同信息,以便于计算机更好的存储和计算. 每种编程语言都会有一些基本的数据类型用来表示现实世界中的 ...
python免费入门手册-Python 基础入门教程
Python是一种解释型.面向对象.动态数据类型的高级程序设计语言. Python由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年. <Python 基础入 ...
Python基础入门教程：使用 Python 3 协程快速获得一个代理池
Python基础入门教程:使用 Python 3 协程快速获得一个代理池前言在执行 IO 密集型任务的时候,程序会因为等待 IO 而阻塞.比如我们使用 requests 库来进行网络爬虫请求的话, ...
超全面Python基础入门教程【十天课程】博客笔记汇总表
目录 1.学习地址 2.下载地址[视频.源码.课件.软件] 3.详细博客笔记 Day 01 Day 02 Day 03 Day 04 Day 05 Day 06 Day 07 Day 08 Day 0 ...
android 编辑9图片,Android基础入门教程——1.6 .9(九妹)图片怎么玩
Android基础入门教程--1.6 .9(九妹)图片怎么玩 Android基础入门教程 1.本节引言: 可能有的一些疑问: 1.什么是.9图片? 答:图片后缀名前有.9的图片,如pic1.9.png ...
Mongodb最基础入门教程
Mongodb最基础入门教程如果想了解一下redis的入门教程,可以去看一下我的上一篇博客 Mongodb的安装大家可以参考一下其他博主的博客,这里我就不做介绍了.不过值得注意的是,在Linux版本 ...
QR code 二维码基础入门教程（二）
QR code 二维码基础入门教程(二) 承接上文,让我们继续下面的步骤纠错码编码先说说纠错容量纠错码可以纠正两种错误: 拒读错误(错误码位置已知),是一个没有扫到或者无法译码的符号字符,需要一 ...
QR code 二维码基础入门教程
QR code 二维码基础入门教程本文为 QR Code Tutorial: Introduction 的总结,详细内容请查看原文 Introduction History and Informat ...
android设置webview缓存目录,Android基础入门教程——7.5.5 WebView缓存问题
Android基础入门教程--7.5.5 WebView缓存问题 Android基础入门教程本节引言:现在很多门户类信息网站,比如虎嗅,ifanr,钛媒体等等的APP,简单点说是信息阅读类的APP, ...
Python新手基础入门教程：如何像面试官展示你的coding能力
Python新手基础入门教程:如何像面试官展示你的coding能力作为程序员,我们通常在面试的时候面试官会出一些题来让你解决,作为优秀的程秀员,除了需要具备解决问题的思路以外,代码的质量也很关键.因 ...

HTML基础入门教程

前言