NEWS

新闻资讯

当前位置首页 > 新闻资讯 > 正文

HTML概述_前端学习之HTML基础

作者:菁瑞优智_小菁 时间:2021-06-29

1、HTML语言是什么

HTML:超文本标记语言(HyperText MarkUp Language)

超文本:除了文本之外,还有图像、音视频、超链接、表格、表单等非文本的内容。

网页上所有的内容都是需要传输的内容,不只是文本信息。

标记:有一个一个的标记构成

在HTML语言早期,标记个数不多,后来为了应对用户对网页样式的需求,临时添加了一些样式标签,出现混乱和臃肿的代码后,才开始考虑使用CSS专门的样式语言来解决这个问题。

2000年稳定的XHTML1.0版本一直使用了十多年,已经不能满足技术的发展,W3C在2014年推出最新的HTML5版本,增加了更多具有语义化的标签,还有很多组件,使得HTML语言不仅仅是一门解释性语言,还具有了开发的功能,越来越强大。

2、HTML语言的发展

1991年刚出现的HTML语言只有不到20个标记。

1997年,推出HTML4.0规范,扩充到了89个标记。

更新到2000年的XHTML1.0版本,这个版本在HTML4.0上并没有增加标记,而是严格规定了html语言的语法,比如标签,属性都要小写,不能大写或者任意大小写组合。

XHTML1.0进入稳定期,使用了十来年。

2014年推出的HTML5增加了28个标记,删除了15个纯样式或者产生负面影响的标记,并且增加了很多开发用的组件,已经不仅仅是单纯的解释性语言了。

3、HTML文档的基本结构(毛坯房)

[html不同版本的申明类型](https://www.w3school.com.cn/tags/tag_doctype.asp)

3.1 XHTML1.0版本的基本结构

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>第一个html页面</title>
    </head>
    <body>
    </body>
</html>

3.2 HTML5版本的基本结构

- 文档声明

- html文档开始

- head头部

  - meta

    - utf-8

    - 移动端响应式的设置

    - keywords

    - description

  - 外部文件

    - link

    - script

    - style

  - title

    - SEO优化的关键标题

- body主体

  - 呈现给用户看的网页信息

- html文档结束

html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    
    </body>
</html>

4、HTML标记的语法

4.1 标记的分类

- 包容标签

html:

<div>    
    <h1>
        标题
    </h1>
    <p>
        段落
    </p>
</div>

- 单标签

html:

<img src="url" alt="图片的替换文本">

4.2 属性和属性值

html:

<a href="http://www.jenreal.cn" target="_blank" title="菁瑞优智官网">菁瑞优智</a>

4.3 注释

<!--注释内容-->