HTML5 - 技术教程文章

html5+css3(七)锚点链接

锚点链接 含义:锚点链接,是在一个网页的不同区域进行跳转。锚点理解为“定义记号”。定义锚点(作个记号):<a name = “锚点名称”></a>锚点名称的命名规则:可以包含字母、数字、下划线,但只能以字母开头。注意:<a>和</a>之间没有内容,换句话说:这个记号不是让我们看的,而是给链接用的。例如:<a name = “top2”></a>跳转到锚点(记号): 语法:<a href = “文件名#锚点名称”>……</a>文件名:可有可无。如果是同一个网...

HTML5—输入框下拉菜单功能的代码示例

这篇文章主要介绍了HTML5输入框下拉菜单功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧 1.单选框代码 性别: 男 女 需要注意的是单选框name值需保持一致 样式: 复选框 2.复选框代码 喜欢的类型: 妩媚的 可爱的 小鲜肉 老腊肉 都喜欢 如需要进行form表单提交 则需要name的属性一样 样式 文本框 3.文本框代码示例 所在地区: 代码运行界面样式: 文本域 4.文本域代码...

html5视频标签video画中画几个API【代码】

画中画看上去很酷,总感觉API也会很复杂,实际上,除了名称长了点,超简单的。 假设变量video就是我们的<video>视频元素,则,进入画中画模式,直接一句: // 进入画中画 video.requestPictureInPicture();退出画中画模式,也是一句: // 退出画中画 document.exitPictureInPicture();为了方便我们监听视频的播放状态,还提供了2个事件API接口,如下: // 进入画中画模式时候执行 video.addEventListener('enterpictureinpicture...

HTML5【代码】【图】

HTML5 一、什么是HTML 超文本标记语言 二、W3C标准 结构化标准语言(HTML、XML) 表现标准语言(CSS) 行为标准(DOM) 三、标签含义 DOCTYPE:告诉浏览器,我们要使用什么规范。 head标签代表网页头部。 body标签代表网页主体。 title标签代表网页标题。 meta标签:描述性标签,用来描述我们网站的一些信息。 四、网页基本标签 1、标题标签 <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签...

HTML5画布如何设置线的样式?【图】

在画布中,默认线的颜色为黑色,宽度为1像素,但我们可以使用相应的方法为线添加不同的样式。下面将从宽度、描边颜色、端点形状三方面详细讲解线样式的设置方法。1. 宽度使用画布中的lineWidth属性可以定义线的宽度,该属性的取值为数值(不带单位),以像素为计量,例如下面的示例代码,表示设置线的宽度为10像素。2. 描边颜色使用画布中的strokeStyle属性可以定义线的描边颜色,该属性的取值为十六进制颜色值或颜色英文,例如下面的...

HTML5新增input输入类型,你知道多少?【代码】【图】

HTML5新增input输入类型,你知道多少? 1、email2、url3、number4、range5、Date Pickers(日期选择器)6、search 1、email email 类型用于应该包含 e-mail 地址的输入域。 在提交表单时,会自动验证 email 域的值。 <!DOCTYPE HTML> <html> <body><form action="/example/html5/demo_form.asp" method="get">E-mail: <input type="email" name="user_email" /><input type="submit" /></form></body> </html>效果如图,当输入错误...

重头学习html5+css3系列笔记(11)【代码】

网页favicon图标 截取png格式的图片在网站中将其转为.ico格式在head中引入<link rel="shortcut icon" href="favicon.ico">网站三大标签SEO优化 SEO(search Engine Optinization)意思是搜素引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名的方式 页面必须有三个标签TDK,即title description keyword来进行SEO优化 title 网站标题 title具有不可替代性,是我们网页的第一个重要的标签,是搜索引擎了解网页的...

html5语法小记8-内联框架【代码】

内联框架 <iframe src="地址" name="window1" frameborder="1" width="1000" height="800"></iframe>属性说明 src:地址 w-h:宽高 tips:超链接的目标页可以是内联框架

HTML5学习笔记【代码】

HTML5学习笔记 一、基本标签 1.了解 <!-- 注释--> < !DOCTYPE html > <!--告诉浏览器要用什么规范--> <meta> 用来做SEO <html></html>快捷键 1.tab键 快速补全 例:p接tab键即可打出p标签 2.ctrl+/ 添加注释2.基础标签 1.head标签<head></head> 2.body标签<body></body> 3.标题 (6级)<h1>一级标题</h1>。。。。<h6>六级标题</h6> 4.段落标签 <p></p> 5.换行标签 <br/> 6.水平线标签 <hr/> 7.粗体 <strong></...

html5语法小记3-列表【代码】【图】

有序列表 <ol><li>灼热的黎明</li><li>往生</li><li>无间</li><li>落幕</li><li>黑烟</li> </ol>效果无序列表 <ul><li>往生</li><li>无间</li><li>落幕</li><li>黑烟</li> </ul>效果自定义列表 <dl><dt>烂俗英雄故事·上</dt><dd>往生</dd><dd>无间</dd><dd>落幕</dd><dt>下册</dt><dd>黑烟</dd></dl> 效果

千锋重庆前端技术教程:HTML5进阶FileReader的使用方法【图】

FileReader 对象FileReader 对象主要用来把文件读入内存,并且读取文件中的数据。通过构造函数创建一个 FileReader 对象。 这个文件读取对象有以下几种方法: 1.readAsText():读取文本文件(可以使用Txt打开的文件),返回文本字符串,默认编码是UTF-8。 2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看,而是存储文件。例如:读取文件的内容,获取二进制数据,传递给后台,后台...

HTML5 2D Graphic 实现五朵金花版型设计【图】

HTML5提供的绘图新特性使基于Web的2D Graphic的图像设计有了新突破。大多数现代浏览器如谷歌、火狐、QQ浏览器、Safari, Opera, IE9 和 10获得支持。用户不再需要Adobe Flash Palyer插件完成2D图像创作。以五朵金花花瓣形设计为例介绍他们的新特性。1,进入 “图龙解” 设计版,在画布上创建多边形图元,如图本例指定边数为5,面板可以设置边数,设置填充色,边框色,阴影色等。导入图片,上传导入后,图像自动填充到图元。缩放、移...

HTML5新增表单元素和表单属性【代码】【图】

新表单元素 选项列表。与 input 元素配合使用,定义 input 可能的值 用于表单的密钥对生成器字段 不同类型的输出,比如脚本的输出。Safari和IE9以下不支持, 规定了输入域的选项内容 ,与input元素配合使用,定义input输入域的选项内容。 <form action="" method=""> <input list="browsers"><!-- 通过使用input里面的一个属性list,跟datalist的id相联系--> <datalist id="browsers"><option value = "Internet Explorer"><option...