HTML超全笔记
HTML概述
概念:是最基础的网页开发语言
Hyper Text Markup Language 超文本标记语言
超文本:
- 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
标记语言:
- 由标签构成的语言。<标签名称> 如 html,xml
- 标记语言不是编程语言
HTML语法
基础语法:
- html文档后缀名 .html 或者 .htm
- 标签分为
- 围堵标签:有开始标签和结束标签。如 <html> </html>
- 自闭和标签:开始标签和结束标签在一起。如 <br>
- 标签可以嵌套:
需要正确嵌套,不能你中有我,我中有你
错误:<a><b></a></b>
正确:<a><b></b></a> - 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来 -- 要么都是单引,要么都是双引,我选单引
- html的标签不区分大小写,但是建议使用小写。
基本标签
文件标签:
1. 文件标签:构成html最基本的标签
操作:
自动生成:
UTF_8支持中文的字符编码
2. 文本标签:和文本有关的标签
还有一些格式标签:
<i> 定义斜体文本
<b>定义粗体文本
<font>HTML5不再支持。 HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色
关于<hr>标签
属性:
- color:颜色
- width:宽度
- size:高度
- align:对其方式
- center:居中
- left:左对齐
- right:右对齐
关于 <font>:字体标签
属性:
- color:颜色
- size:大小
- face:字体
属性定义:
- color:
- 英文单词:red,green,blue
- rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255)
- 值1值2值3:值的范围:00~FF之间。如: #FF00FF
- width:
- 数值:width='20' ,数值的单位,默认是 px(像素)
- 数值%:占比相对于父元素的比例
<center>标签 HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!-- 我是一个注释呀! -->
为什么我的眼睛常含泪水?<br>
因为我对这土地爱得深沉!<br>
<h1>我爱ZZU</h1>
<h2>我爱ZZU</h2>
<h3>我爱ZZU</h3>
<h4>我爱ZZU</h4>
<h5>我爱ZZU</h5>
<h6>我爱ZZU</h6>
没有加p标签的段落
没有加p标签的段落
没有加p标签的段落
<br>
<h1>下面是加P标签的段落</h1>
<p>加p标签的段落</p>
<p>加p标签的段落</p>
<p>加p标签的段落</p>
<hr color="red" width="200" size="10" align="left"/>
<b>我是加粗的文本</b>
<br>
<i>我是倾斜的文本</i>
<br>
<font color="red" size="5" face="楷体">明月沉江春雾晓</font>
<center><font color="red" size="5" face="楷体">明月沉江春雾晓</font></center>
</body>
</html>
结果:
个人笔记,这里就多展示一些内容叭
简单的Demo:
这里关键是想引入一下字符表格
还有很多特殊的字符,用到的时候,再进行查阅,这里展示的都是比较常见的.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>郑州大学网上新闻与公告</title>
</head>
<body>
<h3 align="center">意大利文化部电影司中国事务部专员亚历桑德罗·希尔维斯特里一行来校访问</h3>
<hr color="#ddd700">
<p>4月12日,<font color="#b22222">意大利文化部电影司中国事务部专员亚历桑德罗·希尔维斯特里(Alessandro Silvestri)一行</font>来校访问。<b>校党委常委、副校长韩国河</b>会见了来访客人,国际交流与合作处、对外联络办公室、国际学院负责同志参加会见。</p>
<p>韩国河介绍了学校的基本情况,与桑德罗·希尔维斯特里就在电影学科领域开展国际合作、河南省历史文化与文物保护现状等内容进行了深入交流,并希望双方在科学研究、师生交流、电影拍摄制作实践和文物保护等方面加强合作。</p>
<p>亚历桑德罗·希尔维斯特表示,他此次来访代表意大利文化部,旨在与河南高校在文物保护、博物馆交流以及合拍电影等方面开展合作。</p>
<p><i>亚历桑德罗·希尔维斯特里现任意大利文化部电影司中国事务部专员,曾参与多部著名电影的制作和发行。</i></p>
<hr color="#ddd700">
<font color="gray" size="2">
<center>郑州大学 网上新闻与公告<br>
版权所有© 郑州大学 2000-2019<center>
</font>
</body>
</html>
结果:
图片标签
img:展示图片
属性:
- src:指定图片的位置
演示相对路径:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>郑州大学网上新闻与公告</title>
</head>
<body>
<!-- 相对路径 -->
<image src="images/image_demo.jpg" align="left" alt="登山" width="500" />
</body>
</html>
结果:
相对路径
以.开头的路径
./ 代表当前目录./image/1.jpg
(两个点)/ 代表上一级目录
引入网络中的图片:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>郑州大学网上新闻与公告</title>
</head>
<body>
<image src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-278444.jpg" align="left" alt="登山" width="500" />
</body>
</html>
链接
a:定义一个超链接
属性:
- href:指定访问资源的URL(统一资源定位符)
- target:指定打开资源的方式
- _self:默认值,在当前页面打开
- _blank:在空白页面打开
上面 引用网络上的图片就是src的作用之一
关于link 比较容易理解 等写CSS的复习笔记的时候,会用到
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
<nav> 标签定义导航链接的部分。
并不是所有的 HTML 文档都要使用到
后序有一个Deno,在Demo中进行演示
列表标签
这里比较重要的是
<ul><ol><li>标签
演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
</head>
<body>
<ul>
<li>早餐吃面条</li>
<li>中午吃面条</li>
<li>晚上吃面条</li>
</ul>
<ol>
<li>早餐吃面条</li>
<li>中午吃面条</li>
<li>晚上吃面条</li>
</ol>
</body>
</html>
结果:
算了,再多演示一点吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
</head>
<body>
<dl>
<dt>周一到周日饭谱</dt>
<dd>早上吃面条</dd>
<dd>中午吃面条</dd>
<dd>晚上吃面条</dd>
</dl>
</body>
</html>
结果:
块级标签
div和span:
- div:每一个div占满一整行。块级标签
- span:文本信息在一行展示,行内标签 内联标签
语义化标签:html5中为了提高程序的可读性,提供了一些标签。
- <header>:页眉
- <footer>:页脚
当然还有别的
它们这些标签结合CSS一起使用
完整:
表格标签
这里展示一下table的属性:
有些可能逐渐被淘汰了,但是还是要求了解一下
详细点:
table:定义表格
- width:宽度
- border:边框
- cellpadding:定义内容和单元格的距离
- cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
- bgcolor:背景色
- align:对齐方式
tr:定义行
- bgcolor:背景色
- align:对齐方式
td:定义单元格
- colspan:合并列
- rowspan:合并行
th:定义表头单元格
- <caption>:表格标题
- <thead>:表示表格的头部分
- <tbody>:表示表格的体部分
- <tfoot>:表示表格的脚部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#fedba7" align="center">
<thead>
<!--thead没有任何样式变化-->
<tr >
<th>姓名</th>
<th>成绩</th>
<th>编号</th>
</tr>
</thead>
<tbody>
<tr bgcolor="green" align="center">
<td>1</td>
<td>梅西</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>贝克汉姆</td>
<td>51</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3</td>
<td>林俊杰</td>
<td>30</td>
</tr>
</tfoot>
</table>
</body>
</html>
结果:
用一个Demo综合演示一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
</head>
<body>
<!-- 采用table完成布局 -->
<!--最外层的table,用于整个页面的布局-->
<table width="100%" align="center">
<!--第一行-->
<tr>
<td>
<img src="images/top_banner.jpg" alt="旅游节" width="100%"></img>
</td>
</tr>
<!--第二行-->
<tr>
<!--直接布局,不好布局,进行嵌套-->
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="images/logo.jpg" alt="Logo"/>
</td>
<td>
<img src="images/search.png" alt="Search"/>
</td>
<td>
<img src="images/hotel_tel.png" alt="hotel_tel"/>
</td>
</tr>
</table>
</td>
</tr>
<!--第三行-->
<tr>
<td>
<table width="100%" align="center">
<tr bgcolor="#ffd700" align="center" height="45">
<td>
<a href="#">首页</a>
</td>
<td>
<a href="#">门票</a>
</td>
<td>
<a href="#">酒店</a>
</td>
<td>
<a href="#">郑州车票</a>
</td>
<td>
<a href="#">出境游</a>
</td>
<td>
<a href="#">港澳游</a>
</td>
<td>
<a href="#">抱团定制</a>
</td>
<td>
<a href="#">全球自由行</a>
</td>
<td>
<a href="#">收藏排行榜</a>
</td>
</tr>
</table>
</td>
</tr>
<!--第四行-->
<!--轮播图-->
<tr>
<td>
<img src="images/banner_3.jpg" alt="" width="100%" />
</td>
</tr>
<!--第五行-->
<!--轮播图-->
<tr>
<td>
<img src="images/icon_5.jpg" alt="" alt="小星星"/>
旅行精选
<hr color="#ffd700">
</td>
</tr>
<!--第六行-->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="images/jingxuan_1.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_1.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_1.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_1.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第七行-->
<tr>
<td>
<img src="images/icon_6.jpg" alt=""/>
国内游
<hr color="#ffd700"/>
</td>
</tr>
<!--第八行-->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td rowspan="2">
<img src="images/guonei_1.jpg" alt=""/>
</td>
<td>
<img src="images/jingxuan_2.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_2.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_2.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
</tr>
<tr>
<td>
<img src="images/jingxuan_2.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_2.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_2.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第九行-->
<tr>
<td>
<img src="images/icon_7.jpg" alt=""/>
境外游
<hr color="#ffd700"/>
</td>
</tr>
<!--第十行-->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td rowspan="2">
<img src="images/jiangwai_1.jpg" alt=""/>
</td>
<td>
<img src="images/jingxuan_3.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_3.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_3.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
</tr>
<tr>
<td>
<img src="images/jingxuan_3.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_3.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_3.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第11行-->
<tr>
<td>
<img src="images/footer_service.png" width="100%"/>
</td>
</tr>
<!--第12行-->
<tr>
<td align="center" bgcolor="#ffd700" height="40">
<font color="gray" size="2">
XXX旅行有限公司<br>
版权所有 Copyright 2000-2019 ©
</font>
</td>
</tr>
</table>
</body>
</html>
结果:
表单标签
基础
- 概念:用于采集用户输入的数据的。用于和服务器进行交互。
使用的标签
- form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
属性:
- action:指定提交数据的URL
- method:指定提交方式, 分类:一共7种,2种比较常用
- get:
- 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议)。
- 请求参数大小是有限制的。
- 不太安全。
- post:
- 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议)
- 请求参数的大小没有限制。
- 较为安全。
表单项中的数据要想被提交:必须指定其name属性不指定name属性,无法进行提交
表单项标签
首先介绍一个关键的标签input 以及相关的属性等.
- input:可以通过type属性值,改变元素展示的样式
- type属性:
- text:文本输入框,默认值
- password:密码输入框
- radio:单选框
注意:
- 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
- 一般会给每一个单选框提供value属性,指定其被选中后提交的值
- checkbox: 复选框
注意:
- 一般会给每一个单选框提供value属性,指定其被选中后提交的值
- checked属性,可以指定默认值
- 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
- submit:提交按钮。可以提交表单
- file:文件选择框
- hidden:隐藏域,用于提交一些信息。
- button:普通按钮
- image:图片提交按钮
- src属性指定图片的路径
- placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
label:指定输入项的文字描述信息
注意:
- label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
关于type属性的取值详细信息:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="get">
<label for="username">用户名:</label><input name="username" type="text" placeholder="请输入用户名" id="username"><br>
密码:<input name="password" type="password" placeholder="请输入密码"><br>
性别(真正的单选):<input type="radio" name="gender" value="man">男
<input type="radio" name="gender" value="woman">女<br>
性别(非真正的单选,name属性值不同):<input type="radio" name="gender1" value="man1">男
<input type="radio" name="gender2" value="woman1" >女<br>
爱好:<input type="checkbox" name="hobby" value="Java">Java
<input type="checkbox" name="hobby" value="Python">Python
<input type="checkbox" name="hobby" value="C/C++">C/C++<br>
图片:<input type="file" name="file"><br>
隐藏域:<input type="hidden" name="id" value="aaaa"><br>
取色器:<input type="color"> <br>
生日 : <input type="date" name="birtday"> <br>
生日 : <input type="datetime-local" name="birtday"> <br>
邮箱 : <input type="email" name="email"><br>
数字 : <input type="number" name="number"><br>
<input type="submit" value="登录">
<input type="button" value="一个按钮">
<input type="image" src="images/guonei_1.jpg">
</form>
</body>
</html>
结果:
演示一个小Demo加深印象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="post">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="username" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="username" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="tel">手机号</label></td>
<td><input type="password" name="username" id="tel"></td>
</tr>
<tr>
<td><label>性别</label></td>
<td><input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女</td>
</tr>
<tr>
<td> <label for="birtday">出生日期</label></td>
<td><input type="date" name="birtday" id="birtday"></td>
</tr>
<tr>
<td> <label for="checkcode">验证码</label></td>
<td><input type="date" name="birtday" id="checkcode">
<img src="images/verify_code.jpg" alt="">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
结果:
下拉列表
<select> 元素用来创建下拉列表。
<select> 元素中的 标签定义了列表中的可用选项。
测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select</title>
</head>
<body>
<form action="#" method="post">
<table>
<!--value设置为空 可不被提交-->
省份 <select name="省份" id="">
<option value="">--请选择--</option>
<option value="1">--北京--</option>
<option value="2">--上海--</option>
<option value="3">--郑州--</option>
</select>
<tr>
<td><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
结果:
文本域
<textarea> 标签定义一个多行的文本输入控件。
文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。
相关属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textarea</title>
</head>
<body>
<form action="#" method="post">
<textarea name="" id="" cols="50" rows="30"></textarea>
<table>
<tr>
<td><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
结果:
HTML5重要内容
文档类型和字符设定
文档类型设定
document
- HTML
- XHTML
- HTML5
字符设定
<meta http-equiv="charset" content="utf-8">:HTML与XHTML中建议这样去写
<meta charset="utf-8">:HTML5的标签中建议这样去写
新标签,新属性
常用新标签
- header:定义文档的页眉
- nav:定义导航链接的部分
- footer:定义文档或节的页脚
- article:标签规定独立的自包含内容
- section:定义文档中的节(section、区段)
- aside:定义其所处内容之外的内容,比如说侧边小窗口
- datalist: 标签定义选项列表。请与input元素配合使用该元素
- fieldset元素可将表单内的相关元素分组,打包 legend搭配使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html5</title>
</head>
<body>
<header>语义:定义页面的头部,页眉</header>
<nav>语义:定义导航栏</nav>
<footer>语义:定义 页面底部 页脚</footer>
<article>语义:定义文章</article>
<section>语义: 定义区域</section>
<aside>语义:定义其中所处内容之外的内容 侧边</aside>
<hr>
<input type="text" name="" id="" placeholder="输入明星" list="star"/>
<!-- input里面用list
注意input与datalist关联起来才能够使用datalist
datalist里面用id来实现与input的连接
-->
<datalist id="star">
<option value="周杰伦"></option>
<option value="周杰"></option>
<option value="周轮"></option>
<option value="周向仑"></option>
<option value="周周"></option>
</datalist>
<br><br><br><br><br><br>
<hr>
<fieldset id="">
<legend>用户登录</legend>
用户名: <input type="text"><br><br>
密码: <input type="password">
</fieldset>
</body>
</html>
结果:
常用input新属性
属性 | 用法 | 含义 |
---|---|---|
placeholder | <input type="text" placeholder="请输入用户名"> | 占位符提供可描述输入字段预期值的提示信息 |
autofocus | <input type="text" autofocus> | 规定当页面加载时 input 元素应该自动获得焦点 |
multiple | <input type="file" multiple> | 多文件上传 |
autocomplete | <input type="text" autocomplete="off"> | 规定表单是否应该启用自动完成功能 |
required | <input type="text" required> | 必填项 |
accesskey | <input type="text" accesskey="s"> | 规定激活(使元素获得焦点)元素的快捷键 采用alt + s的形式 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html5</title>
</head>
<body>
<fieldset id="">
<legend>HTML5新增的 input type 属性</legend>
<form action="">
规定当页面加载时 input 元素应该自动获得焦点 <input type="text" autofocus> <br>
多文件上传 <input type="file" multiple> <br>
必填项 <input type="text" required> <br>
规定激活(使元素获得焦点)元素的快捷键 <input type="text" accesskey="s">
</form>
</fieldset>
</body>
</html>
结果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html5</title>
</head>
<body>
<fieldset id="">
<legend>HTML5新增的 input type 属性</legend>
<form action="">
姓名: <input type="text" name="_username_" id="" value="on" autocomplete/>
<input type="submit">
</form>
</fieldset>
</body>
</html>
结果:
新增的type属性值
类型 | 使用示例 | 含义 |
---|---|---|
<input type="email"> | 输入邮箱格式 | |
tel | <input type="tel"> | 输入手机号码格式 |
url | <input type="url"> | 输入url格式 |
number | <input type="number"> | 输入数字格式 |
search | <input type="search"> | 搜索框(体现语义化) |
range | <input type="range"> | 自由拖动滑块 |
time | <input type="time"> | 小时分钟 |
date | <input type="date"> | 年月日 |
datetime | <input type="datetime"> | 时间 |
month | <input type="month"> | 月年 |
week | <input type="week"> | 星期 年 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html5</title>
</head>
<body>
<fieldset id="">
<legend>HTML5新增的 input type 属性</legend>
<form action="">
邮箱: <input type="email"><br>
手机: <input type="tel"><br>
网址: <input type="url"><br>
数字输入框: <input type="number"><br>
搜索输入框: <input type="search"><br>
自由拖拽: <input type="range"><br>
时间 小时分钟: <input type="time"><br>
时间 年月日 <input type="date"><br>
时间 时间: <input type="datetime"><br>
时间 月年: <input type="month"><br>
时间 星期年 <input type="week"><br>
</form>
</fieldset>
</body>
</html>
结果:
新增多媒体标签
- embed:标签定义嵌入的内容
- audio:播放音频
- video:播放视频
多媒体 embed
embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。
因为兼容性问题,我们这里只讲解 插入网络视频, 后面H5会有 audio 和video 视频多媒体。
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
多媒体 audio
HTML5通过<audio>标签来解决音频播放的问题。
格式
并且可以通过附加属性可以更友好控制音频的播放,如:
- autoplay 自动播放
- controls 是否显不默认播放控件
- loop 循环播放
由于版权等原因,不同的浏览器可支持播放的格式是不一样的,如下图供参考
多浏览器支持的方案,如下图
多媒体 video
HTML5通过<video>标签来解决音频播放的问题。
同音频播放一样,<video>使用也相当简单,如下图
同样,通过附加属性可以更友好的控制视频的播放
- autoplay 自动播放
- controls 是否显示默认播放控件
- loop 循环播放
- width 设置播放窗口宽度
- height 设置播放窗口的高度
由于版权等原因,不同的浏览器可支持播放的格式是不一样的,如下图供参考
多浏览器支持的方案,如下图
HTML超全笔记的更多相关文章
- CSS超全笔记(适合新手入门)
CSS CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等 ...
- 【Redis】命令学习笔记——列表(list)+集合(set)+有序集合(sorted set)(17+15+20个超全字典版)
本篇基于redis 4.0.11版本,学习列表(list)和集合(set)和有序集合(sorted set)相关命令. 列表按照插入顺序排序,可重复,可以添加一个元素到列表的头部(左边)或者尾部(右边 ...
- 【Redis】命令学习笔记——哈希(hash)(15个超全字典版)
本篇基于redis 4.0.11版本,学习哈希(hash)相关命令. hash 是一个string类型的field和value的映射表,特别适合用于存储对象. 序号 命令 描述 实例 返回 HSET ...
- 【Redis】命令学习笔记——字符串(String)(23个超全字典版)
Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). 本篇基于redis 4.0.11版本,学习字符串( ...
- 【Redis】命令学习笔记——键(key)(20个超全字典版)
安装完redis和redis-desktop-manager后,开始学习命令啦!本篇基于redis 4.0.11版本,从对键(key)开始挖坑! 准备工作,使用db1(默认db0,由于之前练习用db0 ...
- 超全面的JavaWeb笔记day03<JS对象&函数>
1.js的String对象(****) 2.js的Array对象 (****) 3.js的Date对象 (****) 获取当前的月 0-11,想要得到准确的月 +1 获取星期时候,星期日是 0 4.j ...
- 超全的web开发工具和资源
首页 新闻 产品 地图 动态 城市 帮助 论坛 关于 登录 注册 · 不忘初心,继续前进,环境云V2接口正式上线 · 环境云测点地图全新改版 · 祝福各位环境云用户中秋快乐! 平台信息 培训互动 ...
- 【转】iOS超全开源框架、项目和学习资料汇总
iOS超全开源框架.项目和学习资料汇总(1)UI篇iOS超全开源框架.项目和学习资料汇总(2)动画篇iOS超全开源框架.项目和学习资料汇总(3)网络和Model篇iOS超全开源框架.项目和学习资料汇总 ...
- 大数据-将MP3保存到数据库并读取出来《黑马程序员_超全面的JavaWeb视频教程vedio》day17
黑马程序员_超全面的JavaWeb视频教程vedio\黑马程序员_超全面的JavaWeb教程-源码笔记\JavaWeb视频教程_day17-资料源码\day17_code\day17_1\ 大数据 目 ...
随机推荐
- Java虚拟机理解-内存管理
运行时数据区域 jdk 1.8之前与之后的内存模型有差异,方法区有变化(https://cloud.tencent.com/developer/article/1470519). java的内存数据区 ...
- BZOJ3527 推出卷积公式FFT求值
BZOJ3527 推出卷积公式FFT求值 传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=3527 题意: \(F_{j}=\sum_{i&l ...
- visio基础
右下角是一个切换文件的按钮 也可以用ctrl+tab键进行切换 页面底部左边是一个页面的增加与切换的几个按钮 这是切换页面不是切换文件 右上角这个按钮是一个功能隐藏的按钮 左上角这个按钮可以自定义快速 ...
- 20191031-4 beta week 1/2 Scrum立会报告+燃尽图 02
此作业要求参见 https://edu.cnblogs.com/campus/nenu/2019fall/homework/9912 git地址:https://e.coding.net/Eustia ...
- 从零开始のcocos2dx生活(五)ActionEase
文章目录 sineEaseIn sineEaseOut sineEaseInOut expoEaseIn expoEaseOut expoEaseInOut easeIn easeOut easeIn ...
- $Noip2014/Luogu1351$ 联合权值 树形
$Luogu$ $Description$ 给定一棵树,每两个距离为$2$的点之间可以产生"联合权值","联合权值"定义为这两个数的乘积.求最大的联合权值以及所 ...
- 1069 微博转发抽奖 (20分)C语言
小明 PAT 考了满分,高兴之余决定发起微博转发抽奖活动,从转发的网友中按顺序每隔 N 个人就发出一个红包.请你编写程序帮助他确定中奖名单. 输入格式: 输入第一行给出三个正整数 M(≤ 1000). ...
- React框架随笔
React框架随笔 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了 ...
- 初学者的API测试技巧
API(应用程序编程接口)测试是一种直接在API级别执行验证的软件测试.它是集成测试的一部分,它确认API是否满足测试人员对功能.可靠性.性能和安全性的期望.与UI测试不同,API测试是在没有GUI层 ...
- 假设检验的Python实现
结合假设检验的理论知识,本文使用Python对实际数据进行假设检验. 导入测试数据 从线上下载测试数据文件,数据链接:https://pan.baidu.com/s/1t4SKF6U2yyjT365F ...