html基础

最新推荐文章于 2024-06-01 08:26:08 发布

翁老师的教学团队

最新推荐文章于 2024-06-01 08:26:08 发布

阅读量886

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/u013621398/article/details/118497435

版权

HTML基础知识

课程目标

web开发简介

sublime基本使用

HTML语法特性

HTML常见标签

web开发简介

什么是web开发？

答：web开发指的是网站开发，那么什么是网站开发？常见的网站有哪些呢？

什么是网站？

答：我们对网站的基本的定义，由一门叫做HTML的编程语言（是一种使用标记的标明文字的语言），使得我们看到的文字不在是普通的文本，具有一定的“语义化”。或者说是具有一定的格式。意味这种文档可以存在图片、视频、有序列表。去开发一个文档。由多个文档组成的整体我们叫做一个网站。网站是由一个一个的网页组成，网页又是由HTML标记语言来编写的。

一个网站里面最先看到的是首页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1tNefznb-1625486511518)(assets/wps1.jpg)]

点击导航的时候，可以跳转到 列表页。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GEJnQC90-1625486511521)(assets/wps2.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rBz293yi-1625486511521)(assets/wps3.jpg)]

当我们进入到列表页后，然后点击列表页的某一项之后，打开页面叫做详情页。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-81RAaypx-1625486511523)(assets/wps4.jpg)]

注意：对于网站开发里面的做前端页面开发的一般要做三个页面（1. 首页 2. 列表页 3. 详情页）

什么是静态网站？

什么是动态网站？

网页组成

在我们的课程体系里面，我们先学习静态网站的开发，需要掌握那些技术呢？主要是如下技术：

² html超文本标记语言：主要是用来实现页面的结构。

² css层叠样式表：主要是设置页面的样式，例如页面字体的大小，颜色等。

² javascript脚本语言（俗称：js）：主要是制作页面的一些动态效果，负责和用户的交互。例如点击页面上的某处，弹出一个对话框。栏目切换、选项卡、轮播图等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ATnS4nSq-1625486511524)(assets/wps5.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SmLGGuut-1625486511525)(assets/wps6.jpg)]

HTML之hello world

特点

每个网页都是一个普通的文本文件组成，只是这个文件里面的的文字是由标记语言包裹
网页文件的后缀是 .html 结尾，有的网页也可以是 .htm 结尾，甚至有的是 .shtml
一般一个网站是由很多网页组成的。但是目前有很多的新理念引入，认为一个网站不要写太多页面，只要写一个页面即可，页面里面的内容，是通过一些技术进行动态的刷新加载，一般这种一个页面开发出来的网站我们叫做 SPA应用（单页应用）。

定义

HTML是英语HyperText Markup Language的缩写，超文本标记语言。是负责描述文档语义的语言。

.html就是HTML文件的后缀。

注意

以后大家记住，我们保存代码的目录里面不要出现中文路径。
网页文件的名称也不要使用中文
我们的网页里面可以只写纯文本，不写任何的标记是允许的。

html到底做了什么？

在百度百科上复制一下乔布斯的个人简介信息，然后粘贴到HTML文件里面，然后使用浏览器打开，查看现象。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YJFkepqF-1625486511526)(assets/wps7.jpg)]

当我们使用浏览器打开HTML文件后，发现是所有的文字都是混做一团的。那是为什么呢？

答：纯文本txt文件是不能描述文档的语义的，文档中不知道谁是主标题，谁是副标题，谁是段落。所以html应运而生。html是负责语义，可以通过标签使得文本里面的文字具有意义，例如我们可以通过标记标明某些文字是标题，某些文字是段落。

下面就是一个html文件的演示，就是通过html标签对儿，来给文本增加语义：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iPHcDUw8-1625486511526)(assets/wps8.jpg)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3YgvQVjs-1625486511527)(assets/wps9.jpg)]

html提供了很多标签对儿，可以给文本增加不同的语义。比如：

标签对儿，**主标题**

标签对儿，**三级标题**

标签对儿，**普通段落**

现在的业界的标准，网页技术严格的三层分离：html就是负责描述页面的语义，css负责描述页面的样式，js负责描述页面的动态效果的。

所以，html不能让文字居中，不能更改文字字号、字体、颜色。因为这些都是属于样式范畴，都是css干的事儿；html不能让盒子运动起来，因为这些属性行为范畴，都是js干的事儿。

html只能干一件事儿，就是通过标签对儿，给文本增加语义。这是html唯一能做的。

html中，除了语义，其他什么都没有。

html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。

所以，接下来，我们肯定要学习一堆html中的标签对儿，这些标签对儿能够给文本不同的语义。

标签对儿是由起始标签和结束标签组成的：

乔布斯个人简介

起始标签

结束标签

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

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

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

Sublime编辑器

简介

书写代码肯定需要一款的代码编辑工具的，任何的纯文本编辑器都能够编辑html代码，比如记事本、editplus、notepad++。但是所谓工欲善其事必先利其器，在我们作为程序猿的生涯中，不可避免的需要一款高大上的代码编辑器，那就是著名的sublime Text。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xSxhCH4V-1625486511528)(assets/wps10.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-096FINgS-1625486511528)(file:///C:\Users\goger\AppData\Local\Temp\ksohtml18992\wps11.png)]

比较有名的专门制作网页的工具有：

DreamWeaver (Adobe公司的产品，该工具属于一个老牌编辑器，对于现在的web开发来时，不是一个最好的选择)

Sublime （高效率的程序书写工具）

WebStorm （更高级的项目级别编程工具）

HBuilder（国人开发的一款编辑，相当的吃内存）

不管用什么编辑器，你都要知道，做网页和工具无关，任何的纯文本编辑器都能够做网页。我们学习的是代码，而不是所谓的工具。不过，不可否认，一个好的工具，确实能够提高工作效率，代码书写的速度，但是本质上讲，记事本也能书写网页。

sublime的中文意思是“华丽的”，是2011年开始流行的代码编辑器，可以编辑java、c、php等很多语言。

html、css、js在sublime中支持非常好。界面也非常漂亮，安装简单、小巧、插件多。

今后我们的文件，如何用sublime编辑呢？很简单，将HTML文件直接拖进来。

一定要记住，保存的时候，一定要文件的扩展名一定要书写为 .html，表示存为网页的格式。

入门使用-HTML基本骨架

html有基本骨架，这个骨架能够用sublime快速生成：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d2G33xeB-1625486511529)(assets/wps12.jpg)]

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TJ3A4Pet-1625486511530)(assets/wps13.jpg)]

网页的最外层的标签对儿是标签对儿，里面有两部分，分别是和。

head标签中，描述网页的配置；body中的内容，才是用户可以看见的内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hIGWVAic-1625486511530)(assets/wps14.jpg)]

常见快捷键使用

sublime中的常用快捷键：

ctrl + + 放大文字

ctrl + - 缩小文字

ctrl + shift + d 复制当前行

删除当前行（直接使用ctrl + l 选中当前行，使用ctrl + x 剪切）

ctrl + shift + ↑ 上移当前行

ctrl + shift + ↓ 下移当前行

先掌握上面的这些快捷键。

sublime之emmet插件

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ylZBYnKp-1625486511531)(assets/wps15.png)]

基本使用

在上面我们输入

html:xs

然后在按一下

tab键

即可自动填充html的基本骨架，这个功能是由sublime的emmet插件提供的，那么接下来我们就来简单的学习一下该插件。以后击打html标签的时候，仅仅需要输入标签的名字，然后按tab就可以自动生成标签对儿了。

比如，输入p然后按tab，软件自动生成：

项目搭建

什么是一个项目呢？

答：就是把网站开发的所有的文件统一放在一个目录进行管理。

如何操作呢？

在操作系统创建一个文件夹，然后把该文件夹拖到sublime编辑器即可。

把代码文件夹直接拖到sublime里面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rhhakOGt-1625486511531)(assets/wps16.jpg)]

把左侧的部分显示出来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LJsod4Ge-1625486511532)(assets/wps17.jpg)]

显示效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jVbC0YYK-1625486511532)(assets/wps18.jpg)]

HTML基本语法-骨架

基本骨架

为了了解网页页面的基本组成，我们可以查看一下成熟的网页是如何组成的，例如网易的网页。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ao5cBGLx-1625486511533)(assets/wps19.jpg)]

文档声明头

任何一个标准的HTML页面，第一行一定是一个以

字符集用meta标签定义是设置浏览器的行为的。

charset就是charactor set“字符集”的意思。

浏览器就是通过meta来看页面需要使用什么样的字符集的来解析，比如你保存的时候meta写的，和声明的不匹配，那么浏览器就是乱码。

中文能够使用的字符集两种：

第一种：UTF-8

第二种：gb2312

也可以写成gbk

关键字和页面描述

设置页面描述：

只要设置的Description的页面，那么百度就根据里面的描述来收录我们的网站。当用户在在百度搜索某些和我们description里面设置的关键字一样的时候，百度则会满足条件的页面进行返回，这个技术叫做SEO，search engine optimization，搜索引擎优化。

设置页面关键字：

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。

Keywords就是“关键词”的意思。

title标签

网页的标题

title也是有助于SEO搜索引擎优化的。表现形式为：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jCfo1SLr-1625486511533)(assets/wps20.jpg)]

HTML语法特性

HTML对换行不敏感，对tab不敏感

HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。

例如百度为了追求极致的显示速度，所以HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RSWS8k34-1625486511534)(assets/wps21.jpg)]

网页里面的换行或者tab缩进后文本的好看些，其主要的目的是为写代码方便日后查看。但是一般网页上线后，里面的空白行和换行都会被压缩在一起，完全不影响网页的显示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NsFQClPr-1625486511534)(assets/wps22.jpg)]

空白折叠现象

HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

例如如下的代码里面有空格、缩进、换行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ku6UNXdG-1625486511535)(assets/wps23.jpg)]

标签要严格封闭

标签不封闭是灾难的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GpFFfpFV-1625486511535)(assets/wps24.jpg)]

HTML常见标签

排版标签

h标题（head简写）

h标签是标题标签，有

到

都是标题标签。

p段落

段落，是英语paragraph“段落”缩写。

HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。

顾名思义，容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片元素。

p标签是一个文本级标签。从学习p的第一天开始，就要死死记住：p里面只能放文字、图片。其他的一律不能放。

审查元素

例如：编写一个个人简介

错误写法：

乔布斯简介

乔布斯是一个非常了不起的人物…

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fjLMbwHG-1625486511536)(assets/wps25.jpg)]

浏览器不允许你这么做，我们打开开发者平台，你会发现，浏览器自己把p封闭掉了，不让你去包裹h2。

正确写法

乔布斯简介

乔布斯是一个非常了不起的人物.....

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wx0AK1Sw-1625486511537)(assets/wps26.jpg)]

文本标签

里面只能存放文字。

下面的这些标签主要是用来修饰文本信息的。

标签名	功能
或者	对文本进行加粗
或	将文本设置为斜体
或者	给文本设置下划线
或者	删除线
	上标
	下标
常见的属性size：用来设置字体大小取值：1~7 1小7大****color：用来设置颜色	设置字体大小设置颜色

颜色表示法

网页中的颜色表示方式总共有三种：

l 使用英文单词 red green blue

l 使用十进制 rgb(255, 0, 0) rgb(0,255,0) rgb(0,0,255)

l 使用十六进制 #FF 00 00 #00 FF 00 #0000FF

在自然界中有三种基本色 red green blue 那么任何一种颜色都可以通过这三种颜色混合出现我们称这三种颜色为基本色（三原色）

每一种基本色它可以表示256种状态也就是256种颜色因为一个基本色它是使用一个字节来存储

这三个基本色共可以表示 256256256 = 1677万颜色

注意：由于我们在电脑里面看到的颜色是由电子元器件通电发光组成，在不同的电脑或者操作系统里面对颜色是存在一定的偏差的。为了使得网页所有的颜色在任何系统里面看起来都一样，互联网上定义了一组web安全色，在任何系统里面都是一样的显示效果。

http://www.bootcss.com/p/websafecolors/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RIivcjol-1625486511537)(assets/wps27.jpg)]

页面注释

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c2wlFLyh-1625486511538)(assets/wps28.jpg)]

注意：注释查看

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mnC83TEs-1625486511538)(assets/wps29.jpg)]

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uWgbkiWH-1625486511539)(assets/wps30.jpg)]

实体表示

场景：

页面要显示多个空格？

答：html里面对空格是不敏感，多个空格，只会当一个。

有的时候我们希望在页面上，就要显示标签本身

答：浏览器默认情况下只会渲染标签内部的文字，让文字具有语义化。不会显示标签本身。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zx3Ird6M-1625486511539)(assets/wps31.jpg)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JALdTwYJ-1625486511540)(assets/wps32.jpg)]

常见的实体符号有如下几个：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U9QPZsz2-1625486511540)(assets/wps33.jpg)]

图片

网页里面除了显示基本的文字，还可以显示图片、视频、超链接。

能用的图片类型

当我们去浏览某个网站的时候，一般都会在页面上出现绚丽的图片以增强用户的体验。那么在html页面可以使用哪些类型的图片呢？

页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等

语法

HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

插入方法：

img是英语image“图片”的简写

src 是英语source“资源”的简写，千万不要写成scr。

src是img标签的属性，baby.jpg是这个属性的值，就是图片的名称。

单标签的简介

这个标签和我们之前学的，都不一样，因为这个标签不是“对儿”。自封闭标签，也称为单标签。

为什么？原因很简单，如果是对儿，里面就要有内容，表示给这个内容增加语义。比如

哈哈哈哈，我是主标题啦！！！

图片就是一个图片，不需要给什么文字增加语义：

常见的meta也是自封闭标签：

注意：我们现在学习的img标签，是image单词的简写，这个标签在有一个，不是成对出现，但是需要注意，尽管只有一个，但是在最尾巴上还是要加上 / 代表结束，一般我们叫做自标签或者单标签。

alt属性

alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持，可以使用title来兼容）。

图片路径

图片的路径的表示方式有如下两种：

相对路径
绝对路径

相对路径

绝对路径

超链接

前言

一个网站，是由很多html网页组成的，html网页之间能够通过超级链接互相跳转，从而形成了“网”。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nEcOZzVi-1625486511541)(assets/wps34.jpg)]

基本语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QBsDNZYA-1625486511541)(assets/wps35.jpg)]

a标签的两个属性

src属性
title属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7WhXmoQo-1625486511542)(assets/wps36.jpg)]

页面内的锚点

所谓的锚点，就是在页面做一个小标记，然后通过点击a链接跳转到这里。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O5tZVktc-1625486511542)(assets/wps37.jpg)]

a是一个文本级的标签

注意：a链接里面一般存放文本或者图片。例如我们可以制作一张可以点击跳转的图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NcWLHYvd-1625486511543)(assets/wps38.jpg)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rFQ9zrtt-1625486511544)(assets/wps39.jpg)]

列表

列表含义：就是一条一条的列出来。

常见：随处可见。

排行榜

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-miGosiQn-1625486511545)(assets/wps40.jpg)]

列表页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ruj2xj5z-1625486511545)(assets/wps41.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aAU0gode-1625486511546)(assets/wps42.jpg)]

列表有三种

无序列表（常见）

ul是英语unordered list，无序列表。表达的是没有顺序关系的列表。

li是英语list item列表项的意思。

这是我们学习的第一个组合的标签：

ul的儿子标签，只能是li，不能是别的东西：

错误：

正确的：

错误的：

li的数量没有限制，可以有无限多个。

li是一个非常经典的容器级标签，里面可以防止任何东西，甚至，再放置一个ul（二级列表），甚至三级列表。

注意下面的正确写法：

有序列表

ol就是ordered list

所有的注意事项和ul一样一样的。

定义列表（比较少）

定义列表表示定义某事的一个列表。

dl是英语definition list定义列表的意思；

dt是英语definition title定义标题的意思；

dd是英语definition description定义描述的意思；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fVV0lXTe-1625486511547)(assets/wps43.jpg)]

表格

简介

什么是表格呢？

答：日常生活中我们所指的表格是由行和列组成的一个用于展示数据的结构。日常生活中随处可见，例如Word里面做的表格、课表，以及工资报表等等。

word里面的表格：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fi6LvDYJ-1625486511547)(assets/wps44.jpg)]

姓名	年龄	住址	邮箱	手机号码	性别
曹阳	12	广州市	geo@173.com	18999999	男
mark	23	深圳市	mark@g.com	177777	男

生活中其他表格：

常见课表：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wOfeATSO-1625486511548)(assets/wps45.jpg)]

工资报表：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4JY3bXTa-1625486511549)(assets/wps46.jpg)]

通过行和列形成的这种结构，主要是为了做数据的展示。那么日常生活中的表格和我们今天学习的HTML里面的表格有什么联系呢？

在HTML开发网页过程中，我们不可以避免要做一些数据的展示，那么这个时候我们就可以使用表格这种结构来展示我们网页里面的数据。

在网页开发里面可以很好的帮我们展示数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IzCcN0z6-1625486511549)(assets/wps47.jpg)]

https://www.landiannews.com/archives/26031.html

网页里面采购信息用表格展示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vgAk6bo0-1625486511550)(assets/wps48.jpg)]

http://www.hbuas.edu.cn/jgweb/cgzb/bencandy.php?fid=67&id=503

总结：通过日常生活中的表格，和网页里面的表格都可以展示数据，那么我们在制作网页的过程中，不可避免要列表很多的数据信息，则我们又必要使用HTML里面的表格标签来展示数据。

基本表格创建

基本语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vPzRRpPV-1625486511551)(assets/wps49.jpg)]

进行代码的实操，但是在实操之前，我们需要知道table标签可以产生表格，但是HTML表格一般分为有边框和没有边框的。

不带边框

代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sTPJ54H7-1625486511551)(assets/wps50.jpg)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XSDKZugF-1625486511552)(assets/wps51.jpg)]

表格标题

那么什么是表格的标题呢？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ptC0IsxI-1625486511570)(assets/wps84.jpg)]

学习一下HTML表格里面的标题

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FFFi6r8h-1625486511570)(assets/wps85.jpg)]

代码：上面的表格是一个10行5列的表格

代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dEZuxCEV-1625486511571)(assets/wps86.jpg)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9w1Dg4zC-1625486511571)(assets/wps87.jpg)]

不规则表格之单元格合并

什么情况下会进行单元格的合并呢？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jvXsnf39-1625486511572)(assets/wps88.jpg)]

不严的行和列构成的表格？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PxyRNTDS-1625486511572)(assets/wps89.jpg)]

就是某个单元格占据多个单元格，形成了一个合并的效果。

先做一个简单的合并，需要注意表格的单元格的合并是分为两个方向的

在水平方向合并（按列合并）

代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aT3fS9iC-1625486511573)(assets/wps90.jpg)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gbyPrzAX-1625486511573)(assets/wps91.jpg)]

在竖直方向合并（按行合并）

代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x5DlnABv-1625486511574)(assets/wps92.jpg)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GUZpNKd8-1625486511575)(assets/wps93.jpg)]

表格分组

什么是分组显示呢？需要注意的是，一般来说我们做的表格的首行基本都是有特殊的含义的，代表是这一列是什么样的信息，一般为了显示的更加的重要，我们取名为表头，具体展示表格内容部分，称为表的身体。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G8zucTA0-1625486511576)(assets/wps94.jpg)]

代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FbY2I8eU-1625486511576)(assets/wps95.jpg)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yfqeq4Hq-1625486511577)(assets/wps96.jpg)]

总结：通过上面的学习我们就将HTML里面的表格讲解完毕了，接下来需要自己多加练习。

表单

表单中的所有元素，都要放在一个form标签中：

form就是英语表格的意思。这个标签是一个功能型的标签，不是一个结构型的标签。form标签有两个属性method（代码提交的方式GET、POST）、action（代表提交的地址）。

单行文本框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2nHw1Pga-1625486511577)(assets/wps97.jpg)]

input是英语输入的意思，表示这是一个输入控件，所谓的控件就是用户能点的、能填的东西。

type是英语类型的意思，text是文本的意思。

value属性表示默认有的值：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L8WvVImy-1625486511578)(assets/wps98.jpg)]

单选按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nJurfzDm-1625486511579)(assets/wps99.jpg)]

你会发现，当行文本框和单选按钮，非常像

radio是收音机的意思，按其中的一个键，其他键就弹起来，所以我们的计算机就沿用了这个名字。

单选按钮，必须是互斥的，不能同时选中多个，所以它们必须有相同的name属性。至于是什么name无所谓，但是必须相同。

说道一个提升用户体验的东西，叫做label标签。点字的时候，小圆点就能被选择上。

label就是标签的意思，id就是id的意思。

现在，这个for属性和id的值是一样的，产生了绑定关系。

复选框

checkbox就是复选框的意思，name属性的值必须是相同的，代表是一个整体。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5mBATcGs-1625486511579)(assets/wps100.jpg)]

密码框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m1v0SIAD-1625486511580)(assets/wps101.jpg)]

三种按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1BkKl1fm-1625486511581)(assets/wps102.jpg)]

button普通按钮， submit提交按钮， reset重置按钮

HTML基础里面常见的表单标签就这些

文本域

能够换行的输入文本的控件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RqMPO4mY-1625486511581)(assets/wps103.jpg)]

text文本，area区域。cols多少列，rows多少行。

这是一个双标签，里面的内容是默认文字。

总结：以上就是html4里面的所有知识，后面我们将学习html5里面的新特性。

下拉列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hrshpl6z-1625486511582)(assets/wps104.jpg)]

select表示选择的意思，option是选项的意思，option里面的value代表后台接收到的值。

这是一个组合使用的标签组，和ul、li的关系是一样的。

解完毕了，接下来需要自己多加练习。

表单