【HTML语法】

HTML语法

  • [1. HTML语法](#1. HTML语法)
    • [1.1 HTML编辑器](#1.1 HTML编辑器)
    • [1.2 HTML模板](#1.2 HTML模板)
    • [1.3 标签示例](#1.3 标签示例)
    • [1.4 常见的HTML标签](#1.4 常见的HTML标签)
    • 1.5
    • 1.6
    • 1.7
    • 1.8
    • 1.9
    • 1.10
    • 1.11

学习网站:https://www.runoob.com/html/html-tutorial.html

1. HTML语法

HTML(全称 Hypertext Markup Language,超文本标记语言)是一种用于创建网页的标记语言

它包括一系列的标签和属性 ,用于定义和描述网页的内容和结构。
HTML语言是用来告知浏览器如何组织页面的标记语言。
HTML不是一门编程语言,而是一种定义内容结构的语言。
HTML元素可以使不同的元素内容呈现出不同的网页显示效果。
HTML 文件通常由一个头部(head)和一个主体(body)组成。
头部 包含一些元数据,例如页面标题、关键词、作者、字符集等等。
主体 则包含网页的实际内容,例如文字、图像、视频、链接等等。

HTML 是构建现代网页的基础,常常与 CSS 和 JavaScript 一起使用,以实现更丰富、更动态的网页效果。

CSS 是层叠样式表(Cascading Style Sheets)的缩写,是一种用于网页设计的样式表语言。

CSS 用于描述网页的样式和布局,例如文本颜色、字体、大小、行距、背景颜色、边框、位置等等。

CSS 将样式和结构分离开来,这意味着您可以在不更改 HTML 代码的情况下更改页面的样式和布局。

CSS 可以使网站更加易于维护和更改,同时还能提高页面的加载速度和性能。

CSS 有许多功能和特性,包括选择器、盒模型、布局、动画、转换、媒体查询等等。

学习 CSS 可以使您创建出漂亮、现代和响应式的网页设计。

JavaScript可以使用一个运行时环境 Node.js进行服务器端编程。

Node.js允许开发人员在服务器端运行JavaScript代码,并提供访问各种模块和库以构建Web应用程序,处理网络请求和与数据库交互等功能。

使用Node.js,您可以使用流行的Web框架(例如Express、Koa和Hapi)构建服务器端Web应用程序,并且还可以使用库(例如Mongoose、Sequelize和pg)与数据库(如MongoDB、MySQL和PostgreSQL)进行交互。

Node.js提供了事件驱动的、非阻塞的I/O模型,这使得它非常适合构建可扩展和高性能的Web应用程序。它也是跨平台的,这意味着您可以在Windows、Linux或macOS服务器上运行Node.js应用程序。

JavaScript是一种多用途的语言,可以用于客户端和服务器端编程,这得益于Node.js的普及。

1.1 HTML编辑器

  • W3Schools 在线HTML编辑器:这是一个免费的在线工具,允许您创建HTML模板并实时查看结果。
  • CodePen:这是一个供前端开发人员使用的社交开发环境。您可以创建HTML模板并与他人共享。
  • Bootstrap Studio:这是一个强大的桌面应用程序,允许您使用Bootstrap创建响应式网站。
  • Dreamweaver:这是Adobe的一个Web开发工具,允许您使用可视化界面创建HTML模板。
  • Sublime Text:这是一个流行的代码编辑器,支持HTML语法高亮和其他有用的Web开发功能。

1.2 HTML模板

c 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
	<h1>我的第一个HTML页面</h1>
	<p>我的第一个段落。</p>
</body>
</html>
c 复制代码
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Simple HTML Template</title>
	<!-- Add some style to the page -->
	<style>
		body {
			background-color: lightblue;
		}
		h1 {
			color: white;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>This is a simple HTML template</h1>
	<p>Here's some text to fill the page.</p>
	<!-- Add some functionality to the page with JavaScript -->
	<script>
		// Create a variable to store the button element
		var button = document.createElement("button");
		// Set the text of the button
		button.innerHTML = "Click me";
		// Add an event listener to the button
		button.addEventListener("click", function() {
			alert("You clicked the button!");
		});
		// Append the button to the body of the page
		document.body.appendChild(button);
	</script>
</body>
</html>

这只是一个简单的示例,但希望它能够让您了解 HTML、CSS 和 JavaScript 如何协同工作,创建动态和交互式的网页。

1.3 标签示例

c 复制代码
<p>床前明月光,疑是地上霜。</p>

1.4 常见的HTML标签


1.5

1.6

1.7

1.8

1.9

1.10

1.11

相关推荐
默默地离开2 小时前
Blob二进制处理的王者
前端·javascript·html
西西木科技丨Shopify开发机构4 小时前
如何在 Shopify 中建立重定向
前端·html
Liudef064 小时前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_881244404 小时前
javaweb———html
前端·javascript·html
AA-代码批发V哥13 小时前
HTML之语义化标签与多媒体标签
html
像风一样自由202013 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
Hilaku19 小时前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
ac.char21 小时前
Golang读取ZIP压缩包并显示Gin静态html网站
golang·html·gin
每天开心21 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
撰卢1 天前
如何提高网站加载速度速度
前端·javascript·css·html