一、html简介

1.1概念

HTML即HyperText Mark-up Language ，意思是超文本标记语言。HTML不是一种编程语言，而是一种标记语言。超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，这种语言制作的文件保存的是一个文本文件，文件的扩展名为 .html 或者 .htm。html文档也叫Web页面 ，其实就是一个网页。如果用浏览器打开 ，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

1.2 开发工具

电脑中自带的记事本可以用于编写html，但是为了编写代码的效率和代码的可读性，我们通常要借助一些开发工具。我们常用的代码编辑工具很多，如SublimeText,WebStorm和VSCode等。本文以VSCode作为示范。

二、html的基础语法

2.1基本结构

HTML文本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容 ，它的标记语法是以“<”和">"，主要有两种形式的标签，分别是双标签（<标签名字>标签内容<标签名字>）和单标签（<标签名字/>）。

标签中可以添加属性，格式为：<标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>…

html文本的基本结构如下，在编辑器中可以通过"！"+回车键直接导出。

   

   

   

 

   

   

   

    

2.2注释

html文档代码中可以插入注释，注释是对代码的说明和解释。

格式为：

2.2head头部设置

head标签作用于网页的头部，它的内容不会在正文中显示出来，主要完成对当前网页的各种设置

head中主要包含以下几种标签

 

三、文本标签

常用的文本标签主要有如下几种

接下来我们通过一个案例来观察以上几种文本标签的使用方法和实际效果如何

html文本如下

 

 

 

文本标签使用案例

 

标题一

 

标题二

 

标题三

 

标题四

 

标题五

 

标题六

 斜体

 强调斜体

 加粗

 强调加粗

 删除线

 下划线

 

 

 

 

文本标签使用案例

 

标题一

 

标题二

 

标题三

 

标题四

 

标题五

 

标题六

 斜体

 强调斜体

 加粗

 强调加粗

 删除线

 下划线

实际网页效果为：

 

（我们可以将这段html文本写在记事本中，并通过修改.txt文件的后缀，改为.html，即可通过网页来观察以上功能）

四、格式化标签

常用的格式化标签主要包括以下几种

接下来针对以上功能进行演示

 

 

 

HTML介绍

 

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式

 统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

 

“超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互

 关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。

 

---

 

日程表

 

 

• 看书

 

• 看书

 

• 看书

 

• 玩游戏

 

 

 

1. 看书

 

2. 看书

 

3. 看书

 

4. 玩游戏

 

 

 

问：一加一等于几

 

答：不知道

 

问：HTML?

 

答：超文本标记语言

 

问：树上有些什么

 

答：金苹果

 

 

 

 aaaabbbb

 

 

 

 

HTML介绍

 

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式

 统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

 

“超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互

 关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。

 

---

 

日程表

 

 

• 看书

 

• 看书

 

• 看书

 

• 玩游戏

 

 

 

1. 看书

 

2. 看书

 

3. 看书

 

4. 玩游戏

 

 

 

问：一加一等于几

 

答：不知道

 

问：HTML?

 

答：超文本标记语言

 

问：树上有些什么

 

答：金苹果

 

 

 

 aaaabbbb

它的实际显示效果如下：

 

五、图像标签

在HTML网页中插入一张图片，使用img标签，他是一个单标签： img

主要包含以下几种常用属性

src： 图片名及url地址

alt: 图片加载失败时的提示信息

title：文字提示属性

width：图片宽度

height：图片高度

border：边框线粗细

演示实例：

 

 

 

图像标签实例

 

 

 

 

 

 

图像标签实例

 

 

实际效果：

 

六、超链接标签a

href="链接目标url地址"显示文字

a标签的属性：

href: 必须，指的是链接跳转地址

target: 表示链接的打开方式：

_blank 新窗口

_parent 父窗口

_self 本窗口（默认）

_top 顶级窗口

framename 窗口名

title：文字提示属性（详情）

使用锚点链接时跳转地址为#加上标签的id

七、表格标签

 

实例演示：

 

 

 

HTML标签实例--表格标签

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

学生信息表

学号	姓名	年龄	班级
1001	张三	22	python04
1002	李四	22	python04
1003	王五

 

 

 

 

HTML标签实例--表格标签

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

学生信息表

学号	姓名	年龄	班级
1001	张三	22	python04
1002	李四	22	python04
1003	王五

实际显示效果如下