HTML简述
什么是HTML
- HTML
- Hyper Text Markup Language(超文本标记语言)
HTML5的优势
- 世界知名浏览器厂商对HTML5 的支持
- 微软
- 苹果
- Opera
- Mozilla
- 市场的需求
- 跨平台
W3C标准
- W3C
- World Wide Web Consortium（万维网联盟）
- 成立于1994年，web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
- W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
HTML基本结构
<html>
<head>
<title>我的第一个网页</title> ---->网页头部
</head>
<body>
我的一个网页 ---->主题部分
</body>
</html>
<body>、</body>等成对的标签，分别叫开放标签和闭合标签。单独呈现的标签（空元素），如<hr/>意为用/来关闭空元素
<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
<!--meta描述性标签，它用来描述我们网站的一些信息-->
<!--meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="remusgod">
<meta name="description" content="Java笔记">
<!--title网页标题-->
<title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello World!
</body>
</html>
网页基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有耳朵，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有耳朵，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>
<!--粗体、斜体-->
<h1>字体样式标签</h1>
粗体：<strong>I love you</strong>
<br/>
斜体：<em>I love you</em>
<!--特殊符号-->
<br/>
空 格：
<br/>
空 格：
<br>
>
<br/>
<
<br/>
©版权所有remusgod
</body>
</html>
输出：
一级标签
二级标签
三级标签
四级标签
五级标签
六级标签
两只老虎，两只老虎，
跑得快，跑得快，
一只没有眼睛，
一只没有尾巴，
真奇怪！真奇怪！
两只老虎，两只老虎，
跑得快，跑得快，
一只没有耳朵，
一只没有尾巴，
真奇怪！真奇怪！
两只老虎，两只老虎，
跑得快，跑得快，
一只没有眼睛，
一只没有尾巴，
真奇怪！真奇怪！
两只老虎，两只老虎，
跑得快，跑得快，
一只没有耳朵，
一只没有尾巴，
真奇怪！真奇怪！
字体样式标签
粗体：I love you
斜体：I love you
空 格：
空 格：
>
<
©版权所有remusgod
图像标签
- 常见的图像格式
- JPG
- GIF
- PNG
- BMP
- ......
鼠标悬停提示文字 图像高度
| |
| |
<img src="path" alt="text" title="text" width="x" height="y"/>
| | |
| | |
图像地址 图像的替代文字 图像宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--img学习
src : 图片地址（必填）
相对地址(推荐使用) , 绝对地址
../ --上一级目录
alt : 图片名字（必填）
-->
<img src="../resources/image/1.jpeg" alt="remusgod头像" title="悬停文字" width="300" height="300">
</body>
</html>
链接标签
链接路径 链接哪个窗口打开
| | 常用值：_self、_blank
| | |
| | |
<a href="path" target="目标窗口位置">链接文本或图像</a>
- 文本超链接
- 图像超链接
超链接
- 页面间链接
- 从一个页面链接到另一个页面
- 锚链接
- 功能性链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--a标签
href : 必填，表示要跳转到哪个页面
target : 表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_self_">跳转到百度一</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resources/image/1.jpeg" alt="remusgod头像" title="悬停文字" width="300" height="300">
</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>
<!--功能性链接
邮件链接 ： mailto:
QQ链接
-->
<a href="mailto:2078119445@qq.com">点击联系我</a>
</body>
</html>
行内元素和块元素
- 块元素
- 无论内容多少，该元素独占一行
- （p、h1~h6）
- 行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （a、strong、em...）
列表
- 什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来。以便浏览者能更快捷地获得相应地信息
- 列表的分类
- 无序列表
- 有序列表
- 定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/c++</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/c++</li>
</ul>
<!--自定义列表
dl : 标签
dt : 列表名称
dd : 列表内容
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>Linux</dd>
<dd>C</dd>
<dt>位置</dt>
<dd>西安</dd>
<dd>重庆</dd>
<dd>新疆</dd>
</dl>
</body>
</html>
表格
- 为什么使用表格
- 简单通用
- 结构稳定
- 基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格table
行 tr rows
列 td
-->
<table border="1px">
<tr>
<!--colspan 跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--colspan 跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
视频和音频
- 视频元素
- video
- 音频元素
- audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src : 资源路径
controls : 控制条
autoplay : 自动播放
-->
<video src="../resources/video/1.mp4" controls autoplay></video>
<audio src="../resources/audio" controls autoplay></audio>
</body>
</html>
页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
iframe内联框架
引用页面地址 框架标识名
| |
| |
<iframe src="path" name="mainFrame"></iframe>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--iframe内联框架
src : 地址
w-h : 宽度高度
-->
<iframe src="2.基本标签.html" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
</body>
</html>
表单语法
规定如何发送表单数据
常用值：get|post 表示向何处发送表单数据
| |
| |
<form method="post" action="result.html">
<p> 名字：<input name="name" type="text"> </p>
<p> 密码：<input name="pass" type="password"> </p>
<p>
<input type="submit" name="BUtton" value="提交"/>
<input type="reset" name="Reset" value="重填"/>
</p>
</form>
表单元素格式
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text或password时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否被选中 |
表单的应用
- 隐藏域 hidden
- 只读 readonly
- 禁用 disabled
表单初级验证
- 常用方式
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
method : post,get 提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post:比较安全，传输大文件
-->
<form action="1.我的第一个网页.html" method="post">
<!--文本输入框 ： input type="text"
value="remusgod" 默认初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
-->
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
<!--密码框 ： input type="password"-->
<p>密码：<input type="password" name="pwd" hidden value="123456"></p>
<!--单选框标签
input type="radio"
value : 单选框的值
name : 表示组
-->
<p>性别：
<input type="radio" value="boy" name="sex" checked disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!-- 多选框
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置
-->
<p>按钮：
<input type="button" name="btn1" value="点击边长">
<input type="image" src="../resources/image/1.jpeg">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
<!--下拉框，列表框-->
<p>国家：
<select name="列表名称" >
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="Switzerland" selected>瑞士ETH</option>
<option value="India">印度</option>
</select>
</p>
<!--文本域
cols:列
rows:行
-->
<p>反馈：
<textarea name="textarea" id="" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域
input type="file" name="files"
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--邮件验证-->
<p>邮箱：
<input type="email" name="email" required>
</p>
<!--URL-->
<p>URL：
<input type="url" name="url" required>
</p>
<!--数字-->
<p>数字：
<input type="number" name="number" max="100" min="0" step="10">
</p>
<!--滑块
input type="range"
-->
<p>音量：
<input type="range" name="voice" min="10" max="100" step="2">
</p>
<!--搜素框-->
<p>搜索：
<input type="search" name="search" id="mark">
</p>
<p>
<!--增强鼠标可用性-->
<label for="mark">你点我试试</label>
<input type="text">
</p>
<p>自定义邮箱：
<input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
</form>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现