20230905 HTML

一、本章目标

HTML概述、作用和特点
HTML的发展历程和常用浏览器
常用的基本结构、基本标签、布局标签、文本、图片等
列表、表格和内联框架
表单相关标签

二、本章内容

2.1、HTML概述

HTML：超文本标记语言（Hyper Text Markup Language）
HTML文档是放置了标记（tags）的.html文件（.htm)
HTML是一种客户端浏览器解释的语言，不用经过编译
HTML语言是通过各种标记来标识文档的结构、链接、图片、文字、段落、表格、表单等
HTML的作用：把我们需要显示的内容显示在浏览器上，但是HTML语言本身并不显示

2.1.1、HTML的发展历程

1993年，HTML1.0标准发布
1995-1997年，HTML 2.0~4.0
2014年HTML 5.0标准发布，增加了媒体播放、画图、定位等功能
5.0版本作为分水岭，HTML指的是HTML4，HTML5.0为H5

2.1.2、开发中常用的浏览器（五大浏览器）

| 名称 | 内核 | 来源归属 | 性能 |

| ------------ | ------- | ----------------- | ---------------- |

| IE （Edge） | Trident | 微软 | 均衡 |

2.2、HTML基本结构

2.2.1、项目的创建（HBuilderX）

IDE：开发环境

前端的开发环境：hbuilder、vscode、idea、eclipse、webstorm

使用HBuilderX创建项目

2.2.2、创建文件夹及html文件

2.2.3、HTML结构分析


<!DOCTYPE html>

<!-- 声明文档类型：文本类型/html类型 -->

<html>

<!-- <head>头部部分：配置和设置 -->

<head>

<meta charset="utf-8">

<title>first</title>

</head>

<style type="text/css">

body{

background-color: aqua;

}

</style>

<script>

alert("这是个弹窗");

</script>

<!-- <body>主题部分：展示的内容

网页内容：可以是文本、图像、音乐、视频-->

<body>

<div>

hello, zhongruan

</div>

</body>

</html>

2.2.4、运行HTML文件

运行在内置浏览器：

运行在外部浏览器：

2.2.5、网页头信息（head标签）

网页头信息使用head标签声明，包含如下子标签：

meta：描述HTML页面文档的属性，比如作者，日期/时间，语言，关键字等，如 utf-8 简体中文编码集
title：声明网页的标题
style：用来引入css样式
link：用来引入css样式文件
script：用来引入javascript程序（js程序）

2.3、特殊字符

在网页中，如果想使用难以输入的符号，如数字符号，制表符或者HTML的关键字（单引号、双引号、括号）

| 源代码 | 显示结果 | 描述 |

| --------------------- | ------------------ | --------------- |

| &nbsp； | 空格（英文） | |

| &lt；（less than） | < | 小于号/左侧标签 |

| &gt；（greater than） | > | 大于号/右侧标签 |

| &quot； | " | 双引号 |

| &copy； | 圈C | 版权 |

| &reg； | 圈R | 已注册 |

| &ensp； | 空格（半个空白位） | |

2.4、注释

注释：当前程序的文字描述，用于提高程序代码的可读性

快捷键：ctrl + /

HTML注释的特点：

注释不会被执行
浏览器开发者工具可以看到注释

前端学习笔记——HTML(一)