HTML学习（上）前端入门很简单

最新推荐文章于 2024-08-04 14:27:56 发布

原创最新推荐文章于 2024-08-04 14:27:56 发布 · 433 阅读

0 ·

CC 4.0 BY-SA版权

Web前端开发知识体系专栏收录该内容

17 篇文章

订阅专栏

本文介绍了HTML的基础知识，包括文档结构、标记语言的使用，以及如何设置页面的背景、文字颜色、链接样式和边距等。同时，还讲解了如何在head部分添加元信息，如标题、关键词、描述和编辑工具等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一网页标记语言HTML入门基础

1.HTML文档主体标记

2.head部分的标记

一网页标记语言HTML入门基础

HTML文件就是一个文本文件。文本文件的后缀名是.txt，而HTML得后缀名是.html。
在HTML文档中，第一个标记是<html>，这个标记告诉浏览器这是HTML文档的开始。
HTML文档的最后一个标记是</html>，这个标记告诉浏览器这是HTML文档的终止。
在<head>和</head>标记之间的文本是头信息，在浏览器窗口中，头部信息是不被显示在页面上的。
在<title>和</title>标记之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
在<body>和</body>标记之间的文本是正文，它会被显示在浏览器中。
和标记代表段落。

HTML网页文档的结构

1.HTML文档主体标记

bgcolor属性

基本语法：

实例代码：

<!doctype html>

<html>

<head>

<title>网页背景色</title>

</head>

</body>

</html>

2.background属性

基本语法：

实例代码:

<!doctype html>

<html>

<head>

<title>设置背景图片</title>

</head>

</body>

</html>

3.text属性

通过text属性可以设置body（主体）内所有文本的颜色。

基本语法:

实例代码：

<!doctype html>

<html>

<head>

<title>设置文字颜色</title>

</head>

人人都喜欢花草的围绕，行走在花草间，心情飞扬，梦色彩而缤纷。可见美让人眷恋也让心温暖。走进自然尽情把心情释放，让生命不再有烦恼的围绕，让生命增添一些春光，每天欣然迎接着风雨，每天静静的如荷绽放。

</body>

</html>

4.设置链接文字属性

为了突出超链接，超链接文字通常采用与其他文字不同的颜色，而且超链接文字的下端还会加一条横线。网页的超链接文字有默认的颜色。在默认情况下，浏览器以蓝色作为超链接文字的颜色，而访问过的文字则变为暗红色。

基本语法：

代码实例：

<!doctype html>

<html>

<head>

<title>设置链接文字的颜色</title>

</head>

</center>

</body>

</html>

使用alink可以设置当鼠标单击超链接时的颜色，举例如下：

<!doctype html>

<html>

<head>

<title>设置链接文字的颜色</title>

</head>

</center>

</body>

</html>

使用vlink可以设置以访问过的超链接颜色，举例如下：

<!doctype html>

<html>

<head>

<title>设置链接文字的颜色</title>

</head>

</center>

</body>

</html>

5.设置页面边距

一般的制作软件或HTML语言默认的都是topmargin、leftmargin值等于12。一般网站的页面左边距和上边距都设置为0，这样看起来页面不会有太多的空白。

基本语法:

语法说明：

topmargin设置到顶端的距离
leftmatgin 设置到左边的距离
rightmargin 设置到右边的距离
bottommargin 设置到底边的距离

实例代码：

<!doctype html>

<html>

<head>

</head>

页面的上边距

页面的左边距

</body>

</html>

2.head部分的标记

title标记：HTML页面的标题一般使用来说明页面的用途，它显示在浏览器的标题栏中。在HTML文档中，标题信息设置在<head></head>之间。标题标记以<title>开始，以</title>结束。

基本语法：

<head>

...</head>

语法说明：页面的标题只有一个，它位于HTML文档的头部，即<head>和</head>之间。

实例代码：

<<!doctype html>

<html>

<head>

<title>标题标记title</title>

</head>

<body>

</body>

</html>

2.定义页面关键字

基本语法：

实例代码：

<!doctype html>

<html>

<head>

<title>插入关键字</title>

</head>

<body>

</body>

</html>

3.定义页面描述

描述的英文是description，网页的描述属性为搜索引擎提供了关于这个网页的总括性描述。网页的描述与标记是由一两个语句或段落组成的，内容一定要具有相关性，描述不能太短、太长或过分重复。

基本语法：

语法说明：

在该语法中，name为属性名称，这里设置为description，也就是将原信息属性设置为页面说明，在content中定义具体的描述语言。

实例代码：

<!doctype html>

<html>

<head>

<title>设置页面描述</title>

</head>

<body>

</body>

</html>

4.定义编辑工具

现在有很多编辑软件都可以只做网页，在源代码的头部可以设置网页边机供给的名称。与其它meta元素相同，这些编辑工具也只是在页面的源代码中可以看到，而不会显示到浏览器中。

基本语法：

语法说明:

在该语法中，name为属性名称，设置为generator,即设置编辑工具，在content中定义具体的编辑工具名称。

实例代码：

<!doctype html>

<html>

<head>

<title>设置编辑工具</title>

</head>

<body>

</body>

</html>

5.定义作者信息

在源代码中还可以设置网页制作者的姓名。

基本语法:

实例代码：

<!doctype html>

<html>

<head>

<title>设置作者信息</title>

</head>

<body>

</body>

</html>

6.定义网页文字即语言

在网页中还可以设置语言的编码方式，这样浏览器就可以正确的选择语言，而不需要人工选取。

基本语法：

语法说明：

在该语法中，http-equiv用于传送HTTP通信协议的标头，而在content中才是具体的属性值。charset用于设置网页的内码语系，也就是字符集的类型。国内常用的是GB码，charset往往设置为gb2312，即简体中文。英文是ISO-8859-1字符集，此外还有其它字符集。

实例代码：

<!doctype html>

<html>

<head>

<title>untitled Document</title>

</head>

<body>

</body>

</html>

7.定义网页的定时跳转

在浏览网页时经常会看到一些欢迎信息的页面，在经过一段时间后，这些网页回自动跳转到其他页面，这就是网页的跳转。用http-equiv 属性中的refresh不仅能够完成页面自身的自动刷新，也可以实现页面之间的跳转过程。通过设置meta对象的http-equiv属性来实现跳转页面。

基本语法：

语法说明：

在该语法中，refresh表示网页的刷新，而在content中设置刷新的时间和刷新后的链接地址，时间和链接地址之间用分号相隔。在默认情况下，跳转时间一秒为单位。

实例代码：

<!doctype html>

<html>

<head>

<title>定义网页的定时跳转</title>

</head>

<body>

</body>

</html>

@欢迎大家提问题哦，谢谢。

HTML学习（上）前端入门很简单

一 网页标记语言HTML入门基础

1.HTML文档主体标记

2.head部分的标记

一网页标记语言HTML入门基础