【HTML①】常用标签、表格、表单
文章目录
一、HTML的概述
1什么是HTML？
HTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用)
目前我们使用的都是HTML5,支持传统的PC端开发，还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术。
2.HTML概念
HTML:Hyper Text Markup Language，超文本标记语言。是用来帮助我们构建网页的。
【超文本】：网页本身是一个文本文件，而超文本指的是这种文件中既可以包含文本信息，又可以包含图片，音频，视频和链接等非文字的信息。
【标记语言】：标记，也叫做标签。也就是说HTML这门语言是由标签组成的。
HTML的标签包含以下两种:
(1)带有标签体的标签,如 <a>标签体</a>
(2)不带标签体的标签(自结束标签),如<br/>,<hr/>
HTML通过提前约定好的标签来构建我们的网页内容，通过浏览器来进行解释执行
浏览器是一个HTML的解释器，在浏览器中内置了一个解释器，该解释器中包含了所有HTML标签的展示风格
二、HTML常用基础标签
1.HTML文件的骨架:
1.1 基本骨架
<html>
<head>
<title>我的网页</title>
</head>
<body>
这是我的个人网站，欢迎您的光临！
</body>
</html>
head标签：其中可以对网页进行整体设置
body标签：是HTML的正文标签,我们在网页上能看到的内容都写在该标签中
1.2 HTML的IDE工具:
(1)DW(Dreamweaver)
(2)HBuilder
(3)Subline
(4)VSCode
(5)WebStorm
(6)记事本
(7)其他编程语言的IDE工具
2.HTML的基本标签
2.1标签的分类:
1.带有标签体的标签，这种标签成对出现;有开始标签也有单独的结束标签,如:<html></html>,<head></head>,<body></body>
2.没有标签体的标签（空标签，自结束标签）,开始在结束在同一个标签中;如，<br />,<hr />
2.2 常用基本标签
1.标题标签hn(h1——h6）
格式：
<h1>......</h1>
<h2>......</h2>
<h3>......</h3>
<h4>......</h4>
<h5>......</h5>
<h6>......</h6>
例：
2.字体标签(font)
格式：
<font size="10" color="coral" face="微软雅黑">
你好，吃了吗？
</font>
注：size：设置字体大小
color：设置颜色
face：设置字型
例：
3.段落标签§
主要用于将一段内容包裹起来，便于后期的统一设置，p标签本身没有效果,标签内的内容与标签外的内容空一行（自动换行）
格式：
<p style="color:blue;">......</p>
例：
4.换行标签(br)
<br/>换行标签，中间不空行
5.水平线标签(hr)<hr/>
例：
<hr size="10" color="red" width="50%" align="left"/>
6.图片标签(img)
格式：
<img src=”图片地址” width=”宽度” height=”高度” />
注：src：图片地址
width：图片宽度
height：图片高度
title：图片的提示文本和图片未显示时的提示文本
例：
7.背景音乐(audio)
格式：
<audio src=”音乐” autoplay=“autoplay” loop=”loop”/>
例：
<audio src="aa.mp3" autoplay="aytoplay" loop="loop"></audio>
8.视频(video)
在H5之前大多数视频使用flash插件实现的，但flash插件加载速度较慢，在H5之后专门提供了一个视频的标签;
9.超链接标签(a)
用法1：超链接:主要用于将多个页面关联到一起，使用超链接可以直接访问另一个页面;
通过base标签统一设置页面超链接的显示目标<base target="_blank" />
用法2：用于锚记页面中的某个位置或其他页面中的某个位置
10.列表标签
(1)有序列表
格式：
<ol>
<li>列表项</li>
</ol>
例：
(2)无序列表
(3)自定义列表
dl:外围标签
dt：列表的标题标签
dd:设置列表的具体列表项
11.marquee标签
12.文本设置标签
<b></b>字体加粗
<i></i>设置斜体
<u></u>设置文本下划线
<s></s>在文本上设置一个删除线
13.其他基本标签
2<sup>n</sup>：设置上标
log<sub>10</sub>10:设置下标
三、表格标签(重点)
1.表格的用途：
1.数据表格
2.页面布局(局部布局)
表格中的数据都在单元格中填写（在单元格中可以填写任何HTML元素及数据）,除了单元格表格的其他位置无法填写数据;
2.表格标签:
1.Table（表格的外框）
2.Caption(设置表格标签)
3.Thead(表格头部)
4.Tbody(表格身体)
5.Tr(行)
6.Td(单元格)
7.Th(表头)
3.表格的常用属性:
Border:表格边框
Width：设置表格的宽度
Height:设置表格的高度
Align:设置表格的对齐方式(left/center/right)
Cellspacing:设置单元格之间的间距
Cellpadding:设置单元格的填充距离
4.表格的跨行及跨列应用
跨行指纵向合并单元格
rowspan:属性用于跨行
跨列指横向合并单元格
colspan:属性用于跨列
表格布局(不建议整体布局)
四、表单(重重点)
在我们页面上唯一用于接收用于输入并与服务器交互的元素——表单
我们做在网站或软件系统时会**尽量避免用户输入**,在任何软件系统都会存在需要用户输入的要素，用来收集用户的信息;
在网页上能够接收输入的只有表单;
表单是一个统称，它指的一系列表单元素的集合;
1.HTML的表单元素:
1.文本框(text)
2.密码框(password)
3.日期框(date)
4.数字框(number)
5.复选框(checkbox)
6.单选按钮(radio)
7.文本域（textarea）
8.文件域(file)
9.下拉列表（select）
10.隐藏域(hidden)
11.提交按钮(submit)
12.重置按钮(reset)
13.普通按钮(button)
14.图片按钮(image)<不推荐使用>
在网页中如果只写表单元素时无效的,表单元素必须归到一个表单中才起作用,在HTML中使用一对标签来表示一个表单;需要的表单元素必须在这对标签中才能起作用(form表单)；
常见的表单元素都在一个标签中
在form标签中有一个action的属性，该属性的值指定当前表单的提交位置
当用户单击submit按钮时，会自动将表单的数据提交到action属性指定的位置
表单有两种提交方式(form标签的method属性中设置):
1.GET提交方式(默认)
1.1 不安全，在地址栏中会显示提交的数据信息
1.2 GET提交方式提交的数据量大小不能超过255个字节
2.POST提交方式
1.1 安全,在地址栏中不显示提交的数据
1.2 POST提交方式理论上提交的数据量可以无限制
页面与服务器交互都有提交方式，超链接的提交方式为get
2.自定义注册表单:
好啦！今天就和大家分享这些了，关注我，我们下期再见！！！!
✨ 改 变 能 改 变 的 ， 接 受 不 能 改 变 的 ！
👍 点 赞 ， 你 的 认 可 是 我 创 作 的 动 力 ！
⭐️ 收 藏 ， 你 的 青 睐 是 我 努 力 的 方 向 ！
✏️ 评 论 ， 你 的 意 见 是 我 进 步 的 财 富 ！
