前端入门学习
1.基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 段标签-->
<p></p>
<!-- 标题标签-->
<h>0</h>
<h1>1</h1>
<h2>2</h2>
<!--行内元素和块元素
块元素
无论内容多少，该元素独占一行(p、h1-h6...)
行内元素
内容撑开宽度﹐左右都是行内元素的可以在排在一行( a . strong . em ... )
-->
<!-- 换行标签与水平线标签都为自闭合标签-->
<!-- 换行标签-->
<br/>
<h2>2</h2>
<!-- 水平线标签-->
<hr/>
<!-- 粗体 斜体-->
<strong> 周洁</strong>
<br/>
<em> 周洁</em>
<!--快捷键的使用:-->
<!--1.Ctrl+/ 为注释-->
<!--2.p/h ... + Tab 直接生成开闭-->
<!--3.特殊标签 &...; -->
哈哈 哈
<br>
©
</body>
</html>
2.图像标签
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.链接标签</title>
</head>
<body>
<!-- 定义锚标记-->
<a name="周洁"> 周洁</a>
<!-- 链接标签
href : 必填 表示要跳转到哪个页面
target: 确定打开的位置
_blank :在新标签中打开
_self: 在自己的页面中打开
-->
<a href="3.链接标签.html" target="_blank"> hhhhh 文本链接</a>
<a href="3.链接标签.html" target="_self"> hhhhh 文本链接</a>
<a href="3.链接标签.html">
<img src="../resources/image/tx.jpg" alt="hhhh" title=" hhh">
</a><a href="3.链接标签.html">
<img src="../resources/image/tx.jpg" alt="hhhh" title=" hhh">
</a><a href="3.链接标签.html">
<img src="../resources/image/tx.jpg" alt="hhhh" title=" hhh">
</a><a href="3.链接标签.html">
<img src="../resources/image/tx.jpg" alt="hhhh" title=" hhh">
</a>
<!-- 锚标记
1.需要一个锚标记;
2.跳转到锚标记;
#
-->
<a href="#周洁"> 周洁</a>
<!-- 功能链接
1.邮件链接:mailto
2.QQ链接
-->
<a href="mailto:2076312724@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::52" alt="你好,加我 添加小电影" title="你好,加我 添加小电影"/></a>
</body>
</html>
3.链接标签
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.链接标签</title>
</head>
<body>
<!-- 定义锚标记-->
<a name="周洁"> 周洁</a>
<!-- 链接标签
href : 必填 表示要跳转到哪个页面
target: 确定打开的位置
_blank :在新标签中打开
_self: 在自己的页面中打开
-->
<a href="3.链接标签.html" target="_blank"> hhhhh 文本链接</a>
<a href="3.链接标签.html" target="_self"> hhhhh 文本链接</a>
<a href="3.链接标签.html">
<img src="resources/image/tx.jpg" alt="hhhh" title=" hhh">
</a><a href="3.链接标签.html">
<img src="resources/image/tx.jpg" alt="hhhh" title=" hhh">
</a><a href="3.链接标签.html">
<img src="resources/image/tx.jpg" alt="hhhh" title=" hhh">
</a><a href="3.链接标签.html">
<img src="resources/image/tx.jpg" alt="hhhh" title=" hhh">
</a>
<!-- 锚标记
1.需要一个锚标记;
2.跳转到锚标记;
#
-->
<a href="#周洁"> 周洁</a>
<!-- 功能链接
1.邮件链接:mailto
2.QQ链接
-->
<a href="mailto:2076312724@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::52" alt="你好,加我 添加小电影" title="你好,加我 添加小电影"/></a>
</body>
</html>
4.列表标签
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 1.有序标签
ol 自动生成有序的数排列
-->
<ol>
<li>java</li>
<li>java</li>
<li>java</li>
<li>java</li>
<li>java</li>
</ol>
<!-- 2.无序列表
ul 无序的黑点
-->
<ul>
<li>html</li>
<li>html</li>
<li>html</li>
<li>html</li>
<li>html</li>
</ul>
<!-- 3.自定义列表-->
<dl>
<dt>318</dt>
<dd>王海</dd>
<dd>王海</dd>
<dd>王海</dd>
<dd>王海</dd>
<dd>王海</dd>
</dl>
</body>
</html>
5.表格标签
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!-- 表格 table
tr 行
td 列
-->
<table border="1px" >
<tr>
<!-- colspan跨列-->
<td colspan="3"> 学生成绩</td>
</tr>
<tr>
<!-- rowspan跨行-->
<td rowspan="2">周洁</td>
<td>物理</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">周洁</td>
<td>物理</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
</body>
</html>
6.媒体标签
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体标签</title>
</head>
<body>
<!-- 视频与音频
str :资源路径
controls:控制条
autoplay:自动播放
-->
<!--视频-->
<video src="../HTML练习/resources/video" controls autoplay></video>
<!--音频-->
<audio src="../HTML练习/resources/audio" controls autoplay></audio>
</body>
</html>
7.页面结构分析
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h1> 我是头</h1>
</header>
<section>
<h1> 我是主体</h1>
</section>
<fooder>
<h1> 我是尾</h1>
</fooder>
</body>
</html>
8.iframe内联框架
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<!-- iframe 内联框架
src: 地址
w-h: 宽高
-->
<iframe src="" name="zj" frameborder="0" width="100%" height="100%"></iframe>
<a href="https://blog.csdn.net/Ghoul___/article/details/109787646" name="zj">zj</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>
9.初始表单post与get提交
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>post与get提交</title>
</head>
<body>
<!-- 表单 form
action:表单提交的位置,可以是一个网站,也可以是一个请求地址
method:提交方式
get:可以从url中看见我们所提交的消息,不安全 但高效
post:可以在url中将我们所提交的消息隐藏,比较安全,可以传输大文件
-->
<form action="1.html.html" method="post">
<p> 登录界面</p>
<p>用户: <input type="text" name="username"> </p>
<p>密码: <input type="password" name="password"> </p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
10.文本框与单选框
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<form action="1.html.html" method="get">
<!-- 文本框input type="text"
text为默认值;
maxlength="8" 最多能写多少个字符
size 文本框长度
-->
<p> 登录界面</p>
<p> 用户:<input type="text" name="username"> </p>
<p> 密码: <input type="password" name="password"> </p>
<!-- 单选框input type="radio"
value:设置单选框的值
name:组名
-->
性别:
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
<!-- 提交 撤回-->
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
11.按钮与多选框
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮与多选框</title>
</head>
<body>
<form action="1.html.html" method="get">
<!-- 文本框input type="text"
text为默认值;
maxlength="8" 最多能写多少个字符
size 文本框长度
-->
<p> 登录界面</p>
<p> 用户:<input type="text" name="username"> </p>
<p> 密码: <input type="password" name="password"> </p>
<!-- 单选框input type="radio"
value:设置单选框的值
name:组名
-->
性别:
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
<!-- 多选框
input type="checkbox" 多选按钮
input type="image" 图片按钮
input type="submit" 提交按钮
input type="reset" 清空按钮
-->
<p> 爱好:
<input type="checkbox" value="girl" name="hobby">女孩
<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">编程
</p>
<input type="image" src="1.html.html" value="zj" name="whl">
<!-- 提交 撤回-->
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
12.列表框文本域和文件域
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本域与文件域</title>
</head>
<body>
<form action="1.html.html" method="get">
<!-- 文本框input type="text"
text为默认值;
maxlength="8" 最多能写多少个字符
size 文本框长度
-->
<p> 登录界面</p>
<p> 用户:<input type="text" name="username"> </p>
<p> 密码: <input type="password" name="password"> </p>
<!-- 单选框input type="radio"
value:设置单选框的值
name:组名
-->
性别:
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
<!-- 多选框
input type="checkbox" 多选按钮
input type="image" 图片按钮
input type="submit" 提交按钮
input type="reset" 清空按钮
-->
<p> 爱好:
<input type="checkbox" value="girl" name="hobby">女孩
<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">编程
</p>
<input type="image" src="1.html.html" value="zj" name="whl">
<!-- 提交 撤回-->
<!-- 下拉框 列表框
-->
<p>国家:
<select name="select">
<option value="china"> 中国</option>
<option value="hongkong" >香港</option>
<option value="taiwan">台湾</option>
<option value="hangzhou">杭州</option>
</select>
</p>
<!-- 文本域-->
<p>
<textarea name="textarea" cols="30" rows="10"> 周洁今天早睡了吗?</textarea>
</p>
<!-- 文件域-->
<p>
<input type="file" value="files" name="files">
<input type="button" name="upload" value="上传">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
13.搜索框滑块与简单验证
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="1.html.html" method="get">
<!-- 文本框input type="text"
text为默认值;
maxlength="8" 最多能写多少个字符
size 文本框长度
-->
<p> 登录界面</p>
<p> 用户:<input type="text" name="username"> </p>
<p> 密码: <input type="password" name="password"> </p>
<!-- 单选框input type="radio"
value:设置单选框的值
name:组名
-->
性别:
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
<!-- 多选框
input type="checkbox" 多选按钮
input type="image" 图片按钮
input type="submit" 提交按钮
input type="reset" 清空按钮
-->
<p> 爱好:
<input type="checkbox" value="girl" name="hobby">女孩
<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">编程
</p>
<input type="image" src="1.html.html" value="zj" name="whl">
<!-- 提交 撤回-->
<!-- 下拉框 列表框
-->
<p>国家:
<select name="select">
<option value="china"> 中国</option>
<option value="hongkong" >香港</option>
<option value="taiwan">台湾</option>
<option value="hangzhou">杭州</option>
</select>
</p>
<!-- 文本域-->
<p>
<textarea name="textarea" cols="30" rows="10"> 周洁今天早睡了吗?</textarea>
</p>
<!-- 文件域-->
<p>
<input type="file" value="files" name="files">
<input type="button" name="upload" value="上传">
</p>
<!-- 邮箱验证input type="email"
-->
<p>邮箱:
<input type="email" name="email">
</p>
<!-- URL验证input type="url"
-->
<p>网址:
<input type="url" name="url">
</p>
<!-- 数字验证input type="number"
-->
<p>数字:
<input type="number" name="num" step="10">
</p>
<!-- 滑块input type="range"
-->
<p>
<input type="range" name="range" max="100" min="0">
</p>
<!-- 搜索框input type="search"
-->
<p>
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
14.表单的应用
-
隐藏域 hidden
-
只读 readonly
-
禁用disabled
``
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>应用</title> </head> <body> <form action="1.html.html" method="get"> <!-- 文本框input type="text" text为默认值; maxlength="8" 最多能写多少个字符 size 文本框长度 --> <p> 登录界面</p> <p> 用户:<input type="text" name="username"> </p> <p> 密码: <input type="password" name="password"> </p> <!-- 单选框input type="radio" value:设置单选框的值 name:组名 --> 性别: <input type="radio" value="boy" name="sex">男 <input type="radio" value="girl" name="sex">女 <!-- 多选框 input type="checkbox" 多选按钮 input type="image" 图片按钮 input type="submit" 提交按钮 input type="reset" 清空按钮 --> <p> 爱好: <input type="checkbox" value="girl" name="hobby">女孩 <input type="checkbox" value="game" name="hobby">游戏 <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby">编程 </p> <input type="image" src="1.html.html" value="zj" name="whl"> <!-- 提交 撤回--> <!-- 下拉框 列表框 --> <p>国家: <select name="select"> <option value="china"> 中国</option> <option value="hongkong" >香港</option> <option value="taiwan">台湾</option> <option value="hangzhou">杭州</option> </select> </p> <!-- 文本域--> <p> <textarea name="textarea" cols="30" rows="10"> 周洁今天早睡了吗?</textarea> </p> <!-- 文件域--> <p> <input type="file" value="files" name="files"> <input type="button" name="upload" value="上传" id="box"> </p> <!-- 邮箱验证input type="email" --> <p>邮箱: <input type="email" name="email"> </p> <!-- URL验证input type="url" --> <p>网址: <input type="url" name="url"> </p> <!-- 数字验证input type="number" --> <p>数字: <input type="number" name="num" step="10"> </p> <!-- 滑块input type="range" --> <p> <input type="range" name="range" max="100" min="0"> </p> <!-- 搜索框input type="search" --> <p> <input type="search" name="search"> </p> <!-- 增强鼠标的可用性 1.使用label 2.使用id 来进行标记 --> <p> <label for="box"> zj</label> <input type="text" > </p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html>
15.表单的初级验证
-
placeholder 提示信息
-
required 非空判断
-
pattem 正则表达式
-
https://www.jb51.net/article/76901.htm常用正则表达式
``
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单得初级验证</title> </head> <body> <form action="1.html.html" method="get"> <!-- 文本框input type="text" text为默认值; maxlength="8" 最多能写多少个字符 size 文本框长度 --> <p> 登录界面</p> <p> 用户:<input type="text" name="username" placeholder="请输入用户信息" required> </p> <p> 密码: <input type="password" name="password"> </p> <!-- 邮箱验证input type="email" --> <p>邮箱: <input type="email" name="email"> </p> <p>我的邮箱: <input type="email" name="myema" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> </p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html>
7998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
