当前位置：首页 > news >正文

Web前端开发——HTML快速入门

news 2025/6/27 20:16:47

HTML：控制网页的结构
CSS：控制网页的表现

一、什么是HTML、CSS

（1）HTML

（HyperText Markup Languaqe：超文本标记语言）

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频、超链接等内容（如基于Windows所操作的记事本所编写的一类文本称为普通文本）
标记语言：由标签构成的语言

HTML标签都是预定义好的。例如:使用<a>展示超链接，用<img>展示图片，<video>展示视频。
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

所以学习HTML，主要学习它里面常用的标签。

（2）CSS

CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）

所以学习CSS，主要学习它里面定义的常用的样式。

（3）前端学习(HTML、CSS、JS)的官方文档

w3school 在线教程https://www.w3school.com.cn/

二、HTML快速入门

（1）简单操作

新建一个文本文件，并把文件后缀名改成：".html" 。
编写HTML结构标签——>例如一旦见到<html> ... </html>标签，浏览器解析就知道要以HTML的格式来解析。
在<html>标签中写一个<head>标签和一个<body>标签。在<head>当中，定义一个<title>标签去定义一个HTML文件的标题，而在<body>当中编写HTML文件当中的页面内容。

（在我们的操作系统当中，如果是".html"后缀的文件，默认是会被浏览器识别的）

（2）简单入门代码（用记事本编写）

<img src=""/> (自闭合)也可以写出 <img src=""></img>

<html><head><title>HTML 快速入门</title></head><body><h1>Hello World!</h1><img src="666.jpg"/></body>
</html>

（3）注意事项

HTML当中的标签是不区分大小写的。（一般使用小写）<html> 写成 <HtmL> 一样的可以得到运行效果。
HTML标签的属性值单双引号都可以。在HTML标签的属性时，例如"src"属性，可以接单引号也可以接双引号。
HTML的语法比较松散。指的是HTML的语法并不严格。