HTML
网页基本信息
：注释DOCTYPE:告诉浏览器我们要使用什么规范
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签：他用来表述网站的一些信息-->
<!--meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords"content="小马学java">
<meta name="description"content="我们一起学java">
<!--title网页标题-->
<title>HelloWorld</title>
</head>
<!--body标签代表网页主体-->
<body>
我的第一个网站
</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>
<!--水平线标签-->
<hr/>
<!--段落标签-->
<p>小马是个大帅哥</p>
<p>小飞是个大帅哥</p>
<!--换行标签-->
小马是个大帅哥<br/>
小飞是个大帅哥<br/>
<!--字体样式标签，粗体，斜体-->
粗体:<strong>I Love You</strong>
<br/>斜体:<em>I Love You</em>
<br/>
<!--特殊符号 & ;-->
空 格:
空 格:
<br/>
>大于
<br/>
<小于
<br/>
©版权符号
</body>
</html>
图像标签
常见的图像格式：JPG GIF PNG BMP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--
src:图片地址(必填)
相对地址(推荐使用),绝对地址
../ 上一级目录
alt:图片名字(必填)
-->
<img src="../resources/image/1.jpg" alt="小狗图片" title="嘿嘿"width="300" height="300">
</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="First.html" target="_blank">点击跳转到First</a>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a>
<br/>
<a href="First.html">
<img src="../resources/image/1.jpg" alt="小狗图片" title="嘿嘿"width="300" height="300">
</a>
<br/>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<!--功能性链接
邮件链接:mailto
QQ链接
-->
<a href="mailto:1902268224@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>
行内元素和块元素
块元素
-
无论内容多少，该元素独占一行
-
(p,h1-h6)
行内元素
- 内容撑开宽度，左右都是行内元素的可以在排在一行
- (a strong em)
表格
<!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>
<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>
媒体元素
<!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/梦然%20-%20少年.mp3" controls autoplay></audio>
</body>
</html>
页面结构分析
header 标题头部区域的内容(用于页面或页面中的-块区域)
footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一 块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容
iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架学习</title>
</head>
<body>
<!--iframe内联框架
src:地址
w-h:宽高度
-->
<iframe src="" name="hello" frameborder="0" width="2000" height="800"></iframe>
<a href="3.图像标签.html" 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="First.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>
表单的格式
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时，指定按钮是否是被选中
<!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="First.html" method="get">
<!--文本输入框 input type="text"
value="嘿嘿" 默认初始值
maxlength="10" 最长能写几个字符
size="30" 文本框的长度
-->
<p>名字:<input type="text" name="username" ></p>
<!--密码输入框input type="password"-->
<p>密码:<input type="password" name="pwd"></p>
<!--单选框标签
input type="radio"
value:单选框的值
name:表示组
-->
<p>
性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>
爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="chat" name="hobby">游戏
<input type="checkbox" value="girl" name="hobby">女
</p>
<!-- 按钮
input type="button" 普通按钮
input type="image" 图片按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>
按钮:
<input type="button" name="btn" value="点击">
<!-- <input type="image" src="../resources/image/1.jpg">-->
</p>
<!-- 下拉框 列表框
-->
<p>
国家:
<select name="列表名称">
<option value="china" >中国</option>
<option value="fenlan" selected>芬兰</option>
<option value="eth">瑞士</option>
</select>
</p>
<!-- 文本域 -->
<p>
反馈:
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!-- 文件域
input type="file"
-->
<p>
<input type="file"name="files">
<input type="button" value="上传" name="upload">
</p>
<!-- 邮箱验证-->
<p>邮箱:
<input type="email" name="email">
</p>
<!--URL-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字-->
<p>商品数量:
<input type="number" name="number" max="100" min="0" step="1">
</p>
<!--滑块
input type="range"
-->
<p>音量:
<input type="range" name="voice" min="0" max="100">
</p>
<!--搜索-->
<p>搜索
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
表单的应用
隐藏域 hidden
只读 readonly
禁用 disabled
表单初级验证
常用方式
placeholder 提示信息
required 非空判断
pattern 正则表达式
浙公网安备 33010602011771号