HTML基础
HTML基础
HTML简单介绍
W3C :World Wide Web Consortium（万维网联盟）
W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
<!-- DOCTYPE：告诉浏览器，我们需要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--body标签代表网页头部 -->
<head>
<!--meta描述性标签：它用来描述我们网站的一些信息-->
<!--meta一般用来做SEO-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- body代表网页主体 -->
</body>
</html>
网页基本标签
标题标签：h1（一级标签）、h2（二级标签）......
段落标签：p
换行标签:
水平线标签:
字体样式标签:
斜体标签：
注释和特殊符号：注释
特殊符号:空格
大于>
小于<
版权©
图像标签
alt是图片加载未完成时显示的文字，title是鼠标悬停的文字
src和alt必填
链接标签
target常用值为:_self(默认在自己的网页打开)、_blank(在新的界面打开)
行内元素和块元素
块元素：无论内容多少，该元素独占一行
行内元素：内容撑开宽度，不会另起一行
列表
无序列表、有序列表、自定义列表
<!--有序列表
应用范围：试卷/应答-->
<ol>
<li></li>
</ol>
<!--无序列表
应用范围：导航/侧边栏
-->
<Ul>
<li></li>
</Ul>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
应用范围：公司网站底部
-->
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
</dl>
表格标签
<!-- 表格table
行 tr
列 td
-->
<table>
<tr>
<td></td>
</tr>
<tr>
<!-- colspanl跨列-->
<td colspan="4"></td>
<!--rowspan 跨行-->
<td rowspan = "2"></td>
</tr>
</table>
视频和音频
视频
video
<video src = "path" controls autoplay></video>
controls表示添加控制条
autoplay表示控制自动播放
音频
audio
<audio src = "path" controls autoplay></audio>
页面结构分析
iframe内联框架
<iframe src = "path" name = "mainFrame"></iframe>
内联跳转
<iframe src = "" name = "mainFrame"></iframe>
<a href = "path" target = "mainFrame">点击跳转</a>
表单语法
所有的表单元素都需要name属性，使其在上传的时候可以找到
<form method = "post" action = "result.html">
<p>
名字：<input type = "text" name = "username">
</p>
</form>
<!--
action 表示表单提交到的位置，可以是网站也可以是请求处理地址
method:post,get 提交方式
get方式提交：我们可以在URL中看到我们提交的信息，不安全但是高效，无法传输大文件
post方式提交：看不到信息，比较安全，可以传输大文件
-->
使用radio/checkbox时，可以设置name使得多个单选框为同一个组，这样就可以实现单选,添加checked字段表示默认选中
列表框文本域和文件域
<!--下拉框-->
<p>下拉框
<select name="列表名称">
<option value="china" selected>中国</option>
<option value="us">美国</option>
<option value="han">韩国</option>
<option value="tai">泰国</option>
</select>
</p>
selected字段表示设置其option为默认值
<!--
文本域
-->
<p>反馈
<textarea name = "textarea" cols = "50" rows = "10">文本内容</textarea>
</p>
<!--
文件域
-->
<p>
<input type = "file" name = "files">
<input type ="button" name = "upload">上传
</p>
搜索框滑块和简单验证
<!--邮件验证-->
<p>邮箱
<input type = "email" name = "email">
</p>
<!--URL-->
<p>URL
<input type = "url" name = "url">
</p>
<!--数字-->
<p>数字
<input type = "number" name = "num" max="100" min = "10" step="10">
</p>
<!--滑块-->
<p>音量滑块
<input type = "range" name = "voice" min = "0" max = "100" step = "2">
</p>
<!--搜索框-->
<p>搜索：
<input type = "search" name = "search">
</p>
表单的应用
- 隐藏域:hidden
- 只读:readonly
- 禁用:disable
<!--增强鼠标可用性-->
<label for="mark">锁定输入框</label>
<input type = "text" id = "mark">
表单初级验证
为什么要进行表单验证？
- 减轻服务器的压力
- 保证数据安全性
常用方式：
- placeholder 提示信息
<input type = "text" name = "username" placeholder = "请输入用户名">
- required 判断非空
- pattern 正则表达式
<P>
<input type "text" name = "diymail" pattern="正则表达式">
</P>
<!--通过正则表达式判断-->
总结
HTML的基本结构
网页的基本标签
图像标签
超链接
- 锚链接
- 功能性链接
- 邮箱
行内元素和块元素
列表
- 有序列表
- 无序列表
- 自定义列表
表格
- 跨行跨列
媒体元素
- 音频
- 视频
网页的简单布局
内联框架
表单
- POST/GET
- 文本框
- 密码框
- 单选框
- 多选框
- 按钮
- ..........
表单应用
- 隐藏域
- 只读
- 禁用
表单的初级验证
- 用户提示placeholder
- 非空判断required
- 正则表达式parrent
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！