HTML学习进程个人笔记分享01

本文介绍了HTML的基础知识和常用标签。作为Web开发的基础，HTML通过标签定义网页内容结构。重点讲解了input标签的各种类型：文本(text)、密码(password)、复选框(checkbox)、单选框(radio)、颜色选择器(color)、日期选择(date/datetime-local)、文件上传(file)、进度条(range)、邮箱验证(email)和按钮(button)等。同时

2301_80365197

217人浏览 · 2025-11-26 20:44:36

2301_80365197 · 2025-11-26 20:44:36 发布

HTML01学习

一个软件系统的基本结构

前端（面向用户）：发送请求和显示数据。（HTML整个web的基础，开发者必须掌握）

（可以与数据库直接对接但是不专业，所以需要Java来当中间商。）

数据库：检索方便，以计算机的方式存储数据，数据是有规律的，如果以文件的形式存储检索性能差。

Java：引入Java承上启下擅长与数据库对接和前端对接。（进行统一：不同的前端用相同的后端，前后端分离技术）

学完前三者进行基于前三者的各种优化操作的学习(框架）

什么是HTML：超文本标记语言

普通文本：txt 通过记事本打开

HTML（超文本）：涉及很多种类，不像普通文本后缀是txt只能记录文字

解析工具：浏览器

HTML中写的内容需要符合一定规律————标签（本质是计算机浏览器能识别的符号）

常用的标签知识点汇总

一.换行符<br>

二.<input>标签：

<input> 的工作方式相当程度上取决于 type 属性的值，不同的 type 值效果不同。如果未指定此属性，则采用的默认类型为 text。

1. Input的text类型：（单行文本字段）

运行结果截图：

placeholder属性（输入框内的提示信息）属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。

该提示会在用户输入值之前显示在输入字段中。

注意：placeholder 属性是HTML5中的新属性适用于以下的 input 类型：text、search、url、tel、email 和 password。

语法

2. input的password类型：（密码）

运行结果截图：

3. input的checkbox类型：（复选框）

<input type="checkbox" />看小说

运行结果截图：

4. input的radio类型：（单选框）男女选项框这种

<input type="radio" />男

<input type="radio" />女

运行结果截图：

但是发现，男女单选框都可以同时选跟需求不相符合，固要加属性name

name =(自定义只要那几行为相同的符号字母）就产生互斥关系

代码由：

<input type="radio" />男

<input type="radio" />女

变为：

<input type="radio" name="a">男

<input type="radio" name="a">女

那如果要默认网页刷新互斥单选框有个默认选项就name前加checked

<input type="radio" name="a">男

<input type="radio" checked name="a">女

此时网页刷新默认选女

默认单选框下选项有三种写法：

<input type="radio" checked name="a">女

<input type="radio" checked=true name="a">女

<input type="radio" checked="checked" name="a">女

此时代码整体：

5. input的color类型：（颜色的选择器）

运行结果截图：

6. input的date类型和datetime-local：（时间的选择器date是年月日，datetime-local是年月日+时分）

注：datetime类型好多浏览器不兼容故未展示

运行结果截图：

7. input的file类型：(文件的选择器）

运行结果截图：

8. input的range类型：(进度条控件，比如音乐进度条）

运行结果截图：

9. input的email类型：(邮件）但是需要使用form表单这个工具进行前后端数据的转发

<form action="#"> （action是写你想提交到的后端的名称#是表示当前目录）

<input type="submit" /> (submit触发action提交，出现一个提交框）

</form>

运行结果截图：

未加submit前

加了submit后

只看格式有没有@，不看写的邮箱是否真正存在，后续在Java高级里学邮箱验证

相关form表单资料

10. input的button类型：(功能按钮）

运行结果截图：

11. <a></a>超链接标签

注：href这是超链接最重要的属性，用来指定链接的目的地，可以是另一个网页、文件、邮件、电话号码或 JavaScript。

运行结果截图：

12. <img>标签图像标签和src源属性

<img src="images/611.jpg" > (创建的目录images下的611.jpg)

运行结果截图：

13. pre标签（所见即所得）

运行结果截图：

14. <textarea></textarea>文本域多行文本

运行结果截图：

此时代码整体：

<!DOCTYPE html>
<html>
	<head>
		<!-- ctrl+/:生成注释符号 
		中文编码集：utf-8  英文编码集：ISO-8859-1
		-->
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" placeholder="请输入用户姓名"/> <br>
		<input type="password" /> <br>
		<input type="checkbox" />看小说 <br>
		<input type="checkbox" />下象棋 <br>
		<input type="checkbox" />打乒乓球 <br>
		
		
		<input type="radio" name="a">男
		<input type="radio" checked=true name="a">女 <br>
		<input type="color"> <br>
		<input type="date"> <br>..........
		<input type="datetime-local"> <br>
		
		<input type="file"><br>
		<input type="file" accept="video/*"><br>
		
		<input type="range"><br>
		
		<form action="#">
			<input type="email">
			<input type="submit">
		</form>
		
		<input type="button" value="登录" /><br>
		
		<form action="submit.php"  method="post"> 
		  <input type="email" name="email"> 
		  <input type="submit"> 
		</form> 
		<!-- 有错误提交显示无法访问你的文件-->
		
		<a href="https://www.baidu.com">百度一下</a> <br>
		
		<img src="images/611.jpg" >
		
		
		<pre>
			84656
			544564
			               54996521
			45242
			424
		</pre>
		
		<textarea>
			多行多列文本
			123
			
			
		</textarea><br>
		
	</body>
</html>