Skr-Eric的HTML课堂（一）——HTML的介绍、基础语法、文档组成

最新推荐文章于 2024-08-31 10:29:18 发布

原创最新推荐文章于 2024-08-31 10:29:18 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

HTML--Skr-Eric的编程课堂专栏收录该内容

8 篇文章

订阅专栏

1. Web

1. 什么是WEB

Web就是网页，网页其实是基于B/S模式的应用程序

B/S : Browser / Server

C/S : Client / Server

2. Web 的组成

浏览器：代替用户向服务器发送请求

服务器：接收用户请求并响应

通信协议：规范数据传输及打包方式

3. 服务器

1. 作用：

接收用户请求并响应

存储数据

具有安全性功能

2. 产品：

1. Tomcat

2. Apache

3. Nginx

4. IIS - Internet Information Service

...

3. 技术：

1. Python-Web （Django , Flask...）

2. PHP

3. JAVA

4. ASP.net

5. JSP... JAVA Serverlet Page

4. 浏览器：

1. 作用：

代替用户向服务器发送请求

作为响应数据的解释引擎，呈现图形化界面

2. 主流的浏览器产品：

1. Chrome - Google公司

2. IE - Microsoft

3. Safari - Apple

4. Firefox - Mozilla

5. Opera - Opera

3. 浏览器引擎（内核）

1. 渲染引擎 - 解析HTML、CSS，控制页面渲染效果

2. JS引擎 - 解析JS脚本

4. 前端技术

1. HTML 书写页面结构和内容

2. CSS 设置网页中元素的样式

3. JS 实现网页的交互

-----------

4. 工具库，框架

2. HTML 概述

1. HTML介绍

1. HyperText Markup Language

超文本标记语言

作用：书写页面结构

2. 超文本：

具有特殊功能的文本

et :

普通文本 a

超文本 a 表示超链接

普通文本 b

超文本 b 表示加粗

3. 标记

也叫标签、元素

主要用来标记网页中的内容

可以实现网页布局及JS交互

2. HTML在计算机中的表现形式

网页文件在计算机中都是以.html / .htm 后缀表示

开发工具：

1. 记事本

2. EditPlus Sublime WebStorm VSCode

运行工具：浏览器以Chrome浏览器为准

调试工具：浏览器开发者工具 F12

3. HTML基础语法

1. 标签 / 标记

1. HTML中的标签都以<>为标志

2. 标签分类：

1. 双标签：成对出现，有开始标签，有结束标签

et :

2. 单标签 : 只有开始标签，没有结束标签，

可以手动添加/表示闭合

et :

<hr> 水平线

<hr/>

3. 标签嵌套

1. 在成对的标签中出现其他的标签

<html>

标签内容

</html>

--------------

<html>

<head>

网页的头部信息

</head>

<body>

网页的主体信息

</body>

</html>

2. 在嵌套结构中，外层标签称为 “父元素”，内层

元素称为“子元素”，多层嵌套时，

内部元素称为后代元素

4. 文档结构

<html> 文档开始

<head>

网页头部信息：编码方式，网页名称

网页选项卡的小图标，网页信息介绍

引入外部资源文件

</head>

<body>

网页的主体信息：所有需要呈现给用户的

，需要显示在窗口中的内容，都应在body

中书写

</body>

</html> 文档结束

5. 标签属性

标签属性主要是用来修饰当前标签的显示效果，

对当前标签或者网页的补充设置

语法：

1. 书写位置：

标签属性都书写在开始标签中，与标签名之间

使用空格隔开

2. 属性是由属性名和属性值组成的

属性名="属性值"

属性值必须使用引号引起来，单双引号都可以

3. 多个属性时，属性之间使用空格隔开

6. HTML 语法规范

1. HTML 不区分大小写，html HTML htML

推荐使用小写字母

2. 保持适当缩进，保证代码可读性

3. 保持适当注释，保证代码可读性

7. HTML注释

<!--

注释内容

-->

注意：

1. HTML 注释不能嵌套

2. 不能书写在标签内部的

<body > 错误

</body>

8. HTML中的换行与空格

HTML 会忽略多余的空格，只显示为一个空格

代码中的换行，在浏览器中也表现为一个空格

4. HTML文档组成

1. 文档类型声明

<!DOCTYPE html> 声明当前为HTML文档

这种是 H5 的声明方式

作用：

1. 告诉浏览器文档为HTML文档

2. 按照H5的渲染方式解析网页

书写位置：

文档开头，<html>标签之前

2. 文档内容

<!doctype html>

<html>

<head>

</head>

<body>

网页主体

</body>

</html>

说明：

设置网页的字符编码方式

------------------------

设置网页标题

想要看更多的课程请微信关注SkrEric的编程课堂

Skr-Eric的HTML课堂（一）——HTML的介绍、基础语法、文档组成

1. Web

1. 什么是WEB

2. Web 的组成

3. 服务器

4. 浏览器 ：

2. HTML 概述

1. HTML介绍

2. 超文本 ：

3. 标记

3. HTML基础语法

1. 标签 / 标记

2. 标签分类 ：

3. 标签嵌套

4. 文档结构

5. 标签属性

6. HTML 语法规范

7. HTML注释

8. HTML中的换行与空格

4. HTML文档组成

1. 文档类型声明

2. 文档内容

4. 浏览器：

2. 超文本：

2. 标签分类：