HTML学习（二）：HTML基础

最新推荐文章于 2024-06-15 12:27:04 发布

蔚蓝色的风暴

最新推荐文章于 2024-06-15 12:27:04 发布

阅读量124

点赞数

分类专栏： web前端 HTML 文章标签： html html5

本文链接：https://blog.csdn.net/qq_37831759/article/details/119765439

版权

web前端同时被 2 个专栏收录

15 篇文章 1 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

                            ## HTML基本概念

HTML 全称为 HyperText Markup Language，译为超文本标记语言。

HTML 不是一种编程语言，是一种描述性的标记语言。

作用：HTML是负责描述文档语义的语言。

所谓的超文本，有两层含义：

（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。

（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。

HTML 不是一种编程语言，是一种描述性的标记语言。这主要有两层含义：

（1）标记语言是一套标记标签。比如：标签<a>表示超链接、标签<img>表示图片、标签<h1>表示一级标题等等，它们都是属于 HTML 标签。

（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。

HTML 格式的文件是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。

比如，面试的时候问你，<h1> 标签有什么作用？

正确答案：给文本增加主标题的语义。

错误答案：给文字加粗、加黑、变大。

HTML专有名词

网页：由各种标记组成的一个页面就叫网页。
主页(首页) : 一个网站的起始页面或者导航页面。
标记：比如<p>称为开始标记，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：比如<p>内容</p>称为元素.
属性：给每一个标签所做的辅助信息。
XHTML：符合XML语法标准的HTML。
DHTML：dynamic，动态的。javascript + css + html合起来的页面就是一个 DHTML。
HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，FTP：文件传输协议。

最简单的网页

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>我是三级标题</h3>
    <img scr="" alt="">
    <a href="http://www.jd.com">我是超链接</a>
</body>
</html>

效果
在这里插入图片描述
确实很有成就感（啊这你是没写过代码吗）

HTML结构

一般标签为双边标记例如<div>和</div>

属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。

标签名	定义	说明
`<html></html>`	HTML标签	页面中最大的标签根标签
`<head></head>`	文档的头部	设置title
`<title></title>`	文档的标题	页面标题
`<body></body>`	主体	页面基本内容

文档声明头

第一行以<!DOCTYPE ……>开头，即DTD，声明使用哪种HTML规范，大规范包括普通和XHTML两种，每种大规范里有Strict、Transitional、Frameset三种

在HTML5中，统一为<!DOCTYPE html>

下面的<html lang="en">表示页面标准语言

头标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="Author" content="">
    <meta name="Keywords" content="厉害很厉害" />
    <meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
    <title>Document</title>
</head>
<body>

</body>
</html>

head标签里包含页面配置即字符集关键词页面描述页面标题 IE适配视口 iphone小图标等等

常见标签有
<title> 网页标题
<base> 为页面上的所有连接规定默认地址或默认目标
<meta> 提供页面基本信息
<>

（1）字符集

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

用meta标签的charset定义，表明文档的编码方式

（2）视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这一行表明视口宽度等于屏幕宽度

（3）关键字

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

搜索引擎利用关键字进行搜索

（4）页面描述

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

还有一种meta标签比较重要：

<meta http-equiv="refresh" content="3;http://www.baidu.com">

指在3s之后跳转至某个网页

body标签

<body>标签的属性包括：

bgcolor 网页背景颜色
background 网页背景图片
text 文本颜色
leftmargin 网页左边距
topmargin 上边距
rightmargin 右边距
bottommargin 下边距
链接还有一些特殊属性

<body> link="red" alink="blue" vlink="green"
	<a href="#">超链接</a>
	<br>
	呵呵
</body>

其中,link指显示的颜色，alink指鼠标点击并还未松开时的颜色，vlink指点击完成后显示的颜色

蔚蓝色的风暴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习（二）：HTML基础

HTML基本概念HTML 全称为 HyperText Markup Language，译为超文本标记语言。HTML 不是一种编程语言，是一种描述性的标记语言。作用：HTML是负责描述文档语义的语言。所谓的超文本，有两层含义：（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。HTML 不是一种编程语言，是一种描述性的标记语言。这主要有两层含义：（1）标记语言是一套
复制链接

扫一扫