本文详细介绍了HTML的基本结构和常用标签，包括标题、段落、链接、图片、表格、媒体元素、页面结构、内联框架、列表、表单等。特别强调了表单元素如文本框、单选框、多选框、按钮、下拉框、文本域和文件域的使用，以及简单的表单验证方法。通过实例展示了如何创建和控制网页元素，为网页设计初学者提供了全面的基础知识。
文章目录
网页基本信息与标签
<!-- DOCTYPE告诉浏览器使用什么规范，默认为html-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签，用来描述网站信息-->
<meta charset="UTF-8">
<meta name="keywords" content="韩">
<meta name="keywords" content="我的第一个网页">
<!--title网页标题-->
<title>第一个网页</title>
</head>
<!--head标签代表网页主体-->
<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>
<!--换行标签-->
两只老虎爱跳舞，小兔子乖乖拔萝卜 <br/>
我和小鸭子学走路，童年时最美的礼物<br/>
小螺号呀嘀嘀地吹，我学海鸥展翅飞<br/>
不怕风雨不怕累，快快把本领都学会<br/>
<!--水平线标签-->
<hr/>
<!--粗体 、斜体-->
粗体 : <strong>i love you</strong>
斜体 : <em>i love you</em>
<!--特殊符号-->
空 格:
<br/>
大于>
<br/>
小于<
©版权符号
</body>
</html>
图片标签学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签学习</title>
</head>
<body>
<!--
src:图片地址 必填
alt:图片名字 必填
title悬停文字
w-h
-->
<img src="../resouces/image/QQ图片20210202163338.jpg" alt="此图片没找到">
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<a name="top"></a>
<!-- a标签
href：必填，表示要跳转到那个页面
target:表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
<a href="1.第一个网页.html" target="_blank">点击跳转到页面</a>
<br>
<a href="https://www.bilibili.com/video/BV1x4411V75C?p=5&spm_id_from=pageDriver">点击跳转到狂神说java</a>
<br/>
<!--图片超链接效果-->
<p>
<a href="1.第一个网页.html"><img src="../resouces/image/QQ图片20210202163338.jpg" alt="此图片没找到" ></a>
</p>
<!--锚链接
1.需要一个锚标记
2.可以跳转到标记
#
-->
<br/>
<a href="#top">回到顶部</a>
<a href="2.基本标签.html#down">跳转</a>
<!--功能性连接
邮件连接：mailto：
qq连接
-->
<a href="mailto:754615430@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点此联系我" title="点此联系我"/>
</a>
</body>
</html>
行内元素和块元素
列表标签
列表分类：
- 无序列表
- 有序列表
- 定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表
使用范围：试卷，问答
-->
<ol>
<li>java</li>
<li>python</li>
<li>后端</li>
<li>c</li>
<li>前端</li>
</ol>
<hr>
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
<li>java</li>
<li>python</li>
<li>后端</li>
<li>c</li>
<li>前端</li>
</ul>
<!--自定义列表
dl;标签
dt：列表名称
dd：列表内容
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>后端</dd>
<dd>c</dd>
<dd>前端</dd>
<dt>位置</dt>
<dd>安徽</dd>
<dd>广东</dd>
</dl>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--
表格 用 table
行 tr row
列 td
border 宽度
-->
<table border="1px" width="800" height="400">
<tr>
<!--colspan跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--rowspan跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>
媒体元素
页面结构
<!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内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
iframe内联框架
src：地址
w-h：宽高
-->
<iframe src="" name="hello" frameborder="0" width="1000" height="800"></iframe>
<a href="https://www.baidu.com/" target="hello">点击跳转</a>
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"-->
<!--scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->
</body>
</html>
表单
<!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="get">
<!--文本输入框 :input type ="text"-->
<p>名字：<input type="text" name="username"></p>
<!--密码框 : input type ="password"-->
<p>密码：<input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
文本框和单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<form action="1.第一个网页.html" method="get">
<!--文本输入框 :input type ="text"
value="韩明枫" 默认初始值
maxlength=“20” 最长能写20个字符
size=“30” 文本框长度为30
-->
<p>名字：<input type="text" name="username" value="韩明枫" maxlength="20" size="30"></p>
<!--密码框 : input type ="password"-->
<p>密码：<input type="password" name="pwd"></p>
<!--单选框标签
input type="radio"
value:单选框的值
name : 所属的组，如果组一样，只能选择一个
-->
<p>性别：
<!--checked 默认选中-->
<input type="radio" value="boy" name="sex" checked />男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
多选框和按钮
<!--多选框
input type="checkbox"
-->
<p>爱好：
<input type="checkbox" value="eat" name="hobby">吃饭
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="game" name="hobby">打游戏
<input type="checkbox" value="code" name="hobby">敲代码
</p>
<!--按钮
-->
<p>按钮：
<input type="button" name="btn1" value="点击变长">
<!--图片按钮有自动提交功能-->
<input type="image" src="../resouces/image/QQ图片20210202163338.jpg">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
下拉框文本域和文件域
<!--下拉框，列表框
selected 默认选中
-->
<p>国家:
<select name="county" >
<option value="z">中国</option>
<option value="r">日本</option>
<option value="h">韩国</option>
<option value="m">美国</option>
</select>
</p>
<!--文本域
cols="30" rows="10" 行列
-->
<p>反馈：
<textarea name="textarea" cols="30" rows="10">
文本内容
</textarea>
</p>
<!--文件域
input type="file" name="files"
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
input 需要有name属性
搜索框滑块和简单验证
<!--邮箱验证-->
<p>
<input type="email" name="email">
</p>
<!--url验证-->
<p>
<input type="url" name="url">
</p>
<!--数字
max min 最大最小
step步长 一次+10
-->
<p>数字:
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑块
input type="range"
-->
<p>音量:
<input type="range" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search" >
</p>
表单的应用
只读 readonly
禁用 disable
隐藏 hidden
表单初级验证
placeholder 提示信息
required 非空判断
没有填写无法提交
pattern 正则表达式
脚本之家常用正则表达式工具：
https://www.jb51.net/tools/regexsc.htm
<p>自定义邮箱:
<input type="text" name="diymail"pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" >
</p>
最终表单网页界面
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
