HTML5
1.介绍
-
是一种超文本标记语言(Hyper Text Markup Language)
-
W3C(万维网联盟)标准
- 结构化标准语言(HTML,XML)
- 表现标准语言(css)
- 行为标准(DOM,ECMAScript)
2.基本标签
3.图像标签
<!--src:路径-->
<!--alt:替代,当没有图片,就会显示-->
<!--title悬停文字-->
<img src="1.jpg" alt="你好" title="123" width="640" height="640">
4.链接标签
a标签:从一个页面链接到另一个页面
<!--a标签
href 必填,表示要跳转到哪个页面
target 表示窗口在哪里打开
--_self 当前窗口打开
--_blank 新窗口打开
-->
<a href="top"></a><!--设置一个标记,然后使用#+名字进行跳转-->
<a href="http://www.baidu.com" target="_self"> <img src="1.jpg" alt="你好" title="123" width="640" height="640"></a>
<p>nihao</p>我好
<!--粗体,斜体-->
<strong>你好</strong> ©
<em>我好</em>
</body>
</html>
<!--
锚链接
-->
<a href="project1.html#down">回到顶部</a>
<!--功能性链接
邮件链接:mailto
-->
<a href="mailto:573905257@qq.com">点击联系我</a>
5.行内元素和块元素
- 块元素
无论内容多少,该元素独占一行
如(h1-h6 p)
- 行内元素
内容撑开宽度,左右都是行内元素的都可以排在一行
(strong ,em)
5 列表
<!--ol:order list
ls:list
ul:无序 unordered
-->
<ol>
<li>java</li>
<li> C</li>
</ol>
<ul>
<li>java</li>
<li>c</li>
</ul>
<!--自定义列表-->
<!--dl:标签-->
<!--dt:列表名称-->
<!--dd:列表内容-->
<dl>
<dt>123</dt>
<dd>java</dd>
<dd>C</dd>
</dl>
6.表格
<!--表格
tr 行
td 列
-->
<table border="1px">
7.视频和音频
<!-- -
autoplay高版本视频可能无法自动播放,在src前面加muted
controls 视频控制
-->
<video src ="video/1.mp4" controls autoplay></video>
8. 页面结构分析
9.iframe内联框架
<!--<iframe src="//player.bilibili.com/player.html?aid=768208334&bvid=BV1Ar4y1H7bk&cid=574525358&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->
<iframe src="" name="hello" frameborder="0" width="64" height="64"></iframe>
<a href="project1.html"target="hello">点击</a>
内联框架可以与标签混合使用,如上的点击按钮在内联框架的右下角(根据宽高来定)
10.表单
例如点击登录弹出的登录框
<!--表单
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post ,get 提交方式
get方式 可以在url里面看到我们提交的信息,不安全,高效
post 比较安全 输入大文件-->
<form action="project1.html" method="post">
<!--text 文本输入框-->
<p>名字<input type="text" name="username"></p>
<!--password密码输入框 用*来代替-->
<p>密码<input type="password" name="userpassword"></p>
<p><input type="radio" value="boy" name="sex">男</p>
<p><input type="radio" value="boy" name="sex">女</p>
<!-- radio 里面 name应该设为一个组,才能多选单个-->单选框
<p><input type="submit"></p>///提交按钮
<p><input type="reset"></p>///重置按钮
</form>
可以在网页检查里面的网络的all里面看到数据
多选框
<p><input type="checkbox" name="男"> 男
<input type="checkbox" name="男"> 1
<input type="checkbox" name="男"> 2
<input type="checkbox" name="男"> 3</p>多选框
自定义按钮
<p>按钮:
<input type="button" name="按钮1" value="点击变成">
<input type="image" src="1.jpg" ></p>
<p><input type="submit"></p>
<p><input type="reset" value="清空表单" name="123"></p>
10.1.下拉框,文件域,文本域
<p><select name="列表名称" id=" ">
<option value="选择的值">中国</option>
<option value="选择的值">美国</option>
<option value="选择的值" selected>日本</option>
</select></p>
<!-- 文本域-->
<p><textarea name="textarea" cols="10 " row="20"></textarea></p>
<!-- 文件域-->
<p><input type="file"name="fils"></p>
<p><input type="button"value="上传" name="upload"></input></p>
10.2.验证,搜索框滑块
<!-- 邮箱网站验证-->
<p> 邮箱<input type="email" name="email"></p>
<p> 网站<input type="url" name="url"></p>
<p><input type="number" name="num" max="10" min="2" step="2"></p>
<!-- 滑块-->
<p><input type="range" min="0" max="100"></p>
<!-- 搜素框-->
<p><input type="search" name=" search"></p>
10.3应用
只读 readonly
警用 disabled
隐藏 hidden
<!-- 增强鼠标可用性-->
<p>
<label> 邮箱 <input type="email" name="email" id="mark"></label>
</p>
<p>
<label for="mark">
邮箱
</label>
<input type="email" name="email" id="mark">
</p>
点击邮箱就可以跳转到输入框
10.4表单初级验证
<!--text 文本输入框-->
<!-- placeholder 提示信息-->
<!-- required 非空判断-->
<!-- pattern 正则表达式-->
<p>名字<input type="text" name="username" placeholder="请输入用户名" required></p>