HTML5 Study
基本信息:
HTML :Hyper Text Markup Language 超文本标记语言
优势:
- 市场的需求
- 跨平台
html注释
<!-- 这是注释! -->
<!DOCTYPE html> 告诉浏览器用什么规范
网页头部
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
网页主题
<!--body标签代表网页的主体-->
<body>
Hello World!
</body>
第一个网页
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签,用来描述网站的一些信息-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--body标签代表网页的主体-->
<body>
Hello World!
</body>
</html>
基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<hr/>
<!--段落标签-->
<p>html5真好玩</p>
<p>Linux真好玩</p>
<hr/>
<!--换行标签-->
aaaaaaaaaaa<br>
bbbbbbbbbbb<br>
<!--水平线-->
<hr/>
<!--粗体-->
<strong>I love Java</strong>
<hr/>
<!--斜体-->
<em>I love Java</em>
<hr/>
<!--特殊符号-->
空 格:
<br/>
大于号:>
<hr/>
小于号:<
<hr/>
<!--版权符号-->
© 版权所有鹿晗
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!-- img学习
src:相对地址(使用),绝对地址
../ -- 上一级目录
alt: 图片名字
title:悬停文字
-->
<img src="../resource/image/a.JPG" alt="电音盛典" title="悬停文字">
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top"></a>
<!--href :必填跳转到哪个页面
target: 表示窗口在那里打开
_blank:在新标签中打开
_self:当前页面打开 默认
-->
<a href="https://www.baidu.com/" target="_blank">点击我跳到百度</a>
<a href="https://www.baidu.com/" target="_self">点击我跳到百度</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
</body>
</html>
锚链接:可以进行页面间跳转和页面内跳转
功能性链接:
<!--功能性链接-->
<!--
邮件链接 mailto
-->
<a href="mailto:927937414@qq.com">点击联系我</a>
行内元素和块元素
快元素:无论内容多少,该元素独占一行(p,h1,h1…)
行内元素:内容撑开宽度,左右都是行内元素的可以排在一行(strong,em,a…)
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>Java</li>
<li>Python</li>
<li>Linux</li>
<li>C/C++</li>
</ol>
<!--无序列表
应用:导航栏、侧边栏
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>Linux</li>
<li>C/C++</li>
</ul>
<!--自定义列表
dl: 标签
dt:列表名称
dd: 列表内容
应用:网站底部
-->
<dl>
<dt>学科</dt>
<dd>Python</dd>
<dd>Java</dd>
<dd>Linux</dd>
<dd>C/C++</dd>
</dl>
</body>
</html>
表格
<!--表格table
行: tr
列: td
border: 边框
-->
<table border="1px">
<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-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
视频和音频
<!--视频
src: 视频路径
controls 控制条
autoplay自动播放
-->
<video src="" controls autoplay></video>
<!--音频
src=: 资源路径
controls:控制条
autoplay:自动播放
-->
<audio src="" controls autoplay></audio>
页面结构分析
<header>网页头部</header>
<nav>导航栏</nav>
<section><h1>网页主体</h1></section>
<footer>网页脚部</footer>
iframe内联框架
<!--iframe内联框架
src:地址
w-h 宽高
-->
<iframe src="" name="hello" frameborder="0" height="400px" width="800px"></iframe>
<a href="第一个网页.html" target="hello">点击跳转</a>
表单post和get请求(重点)
<h1>注册</h1>
<!--
action:表单提交的位置,可以是网站,也可以是一个请求的地址
method: 提交方式get、post请求
get方式提交,可以在url看到提交的信息不安全,高效
post方式:比较安全,传输大文件,
-->
<form action="第一个网页.html" method="post">
<p>名字:<input type="text" name="username"></p>
<p>密码:<input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
文本框和单选框
<h1>注册</h1>
<!--
value:默认值
-->
<form action="第一个网页.html" method="post">
<p>名字:<input type="text" name="username" value="ngk"></p>
<p>密码:<input type="password" name="pwd" value="123456"></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="submit">
<input type="reset">
</p>
</form>
按钮和多选框
<!--多选框
input type="checkbox"
value:单选框的值
name:表示一个组
checked 默认选中
-->
<p>爱好
<input type="checkbox" value="sleep" name="bobby">睡觉
<input type="checkbox" value="code" name="bobby" checked>代码
<input type="checkbox" value="girl" name="bobby">女孩
<input type="checkbox" value="game" name="bobby">游戏
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置
-->
<p>按钮
<input type="button" name="btn" value="提交">
<input type="image" src="../resource/image/a.JPG">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
下拉框、列表框
<!--下拉框
selected默认选中
-->
<p>国家
<select name="列表名称">
<option value="china" selected>中国</option>
<option value="usa">美国</option>
<option value="ind">印度</option>
</select>
</p>
<!--文本域 cols="50" rows="10"-->
<p>反馈
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
搜索框滑块和简单验证
<!--文本域 cols="50" rows="10"-->
<p>反馈
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--邮件验证-->
<p>邮箱
<input type="url" name="email">
</p>
<!--URL验证-->
<p>URL
<input type="email" name="email">
</p>
<!--数字验证-->
<p>商品数量
<input type="number" name="num" max="100" min="0" step="1" value="1">
</p>
<!--滑块-->
<p>音量
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索
<input type="search" name="search">
</p>
表单的应用
disable 锁定
hidden 隐藏域
readonly 只读
表单的初级验证
提示信息:placeholder 输入框控件中使用
placeholder="username"
非空判断:required
正则表达式:patten