2019-05-06 HTML5知识点总结:

HTNL5内容:

<form>表单:用于搜集用户输入</form>表单元素
表单包含:<input>输入框、<select>下拉选项框、<textarea>多行文本输入框、<button><datalist>-input元素预定义选项列表-HTML5新增

input输入框:text类型(文本输入)、radio类型(多选一按钮)、submit类型、passwordnumberemail等类型

text类型
<input type = "text" placeholder = "文本输入"/>

radio类型

<span>男</span><input type ="radio" name="sex" value="男" checked>&nbsp&nbsp
<span>女</span><input type = "radio" name = "sex" value = "女">

submit类型
<input type = "submit" value="提交">

password类型
<input type = "password" placeholder = "输入密码"/>

下拉选项框:

<select name="fruits">
    <option value="apple">apple</option>
    <option value="pear">pear</option>
    <option value="bnana">bnana</option>
</select>

多行文本输入:

<textarea name="message" rows="3" cols="5">
The cat was playing in the garden.
</textarea> 

button按钮:
<button type="button" onclick="alert('❤️')">点我有惊喜</button>

块级元素与内联元素

块元素是指从新的一行开始的元素,而内联元素不会另起一行。
常见的块级元素有:<div>、<p>、<h1>-<h6>、<hr>、<form>、<ul>、<ol>、<table>等标签元素
常见的内联元素有:<span>、<a>、<img>、<br/>、<input>、<select>、<em>、<strong>等标签
内联元素可通过添加style属性:display:block变为块级元素

特殊符号

空格:&nbsp 、小于号 :&lt/&#60 、等号:&#61、大于号:&#62/ $gt等
其余特殊符号可参考:特殊符号转义

1,HTML5新增标签

新增语义元素

HTML5定义了很多新的语义元素,分别有:<article>、<header>、<aside>、<footer>、<section>、<nav>、<figure>、<figcation>等元素,接下来分别介绍新增的语义元素。

<article>

<article>一般用于博客、论坛、新闻等。具体事例:

<article>
   <h1>粉色天气</h1>
   <p>
      从粉色的茶水开始,粉红色的玫瑰,花瓣凋零过半,将一片片花瓣夹入淡绿色的笔记本中。
      便是粉色的天气粉色的一天了。
   </p>
</article>

<header>

<header>一般用于定义文档或section的页眉
代码实例:

<article>
   <header>
        <h1>金牛座季节</h1>
        <p>4月末,金牛座的季节</p>
   </header>
   <p>周边的金牛座陆续的过了生日</p>
</article>

<footer>

<footer>一般用于定义文档或section的页脚
代码实例:

<article>  
   <header>
       <h1>开心明天</h1>
       <p>明天又是美好的一天</p>
   </header>
   <p>
       最近情绪上天入地,时时安慰自己:
       又是充满希望的一周,明天又是美好的一天,明天应该是美好的,因为还没开始,
       还可以有激情有勇气去过好。
   </p>
   <footer>
       <p>北京二吊子程序媛所码</p>
   </footer>
</article>

<section>

<section>定义一个节
代码示例:

<section>
    <p>章节一</p>
</section>
<section>
    <p>章节二</p>
</section>

<nav>

<nav>定义导航链接集合
代码示例:

<nav>
     <a href="http://baidu.com">百度一下 |</a>
     <a href="http://byr.bbs.cn">北邮人论坛 |</a>
     <a href="http://iqiyi.com">爱奇艺 |</a>
</nav>

2,HTML5图像

canvas

HTML5 的 canvas 元素是使用 JavaScript 在网页上绘制图像,canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
实现方法步骤
1.在页面中创建canvas元素,
<canvas id="myCanvas" width = "200" height = "150" ></canvas>
2.通过JavaScript来绘制:

<script type="text/javascript">
   var c=document.getElementById("myCanvas");
   var cxt=c.getContext("2d");
   cxt.moveTo(10,10);
   cxt.lineTo(150,50);
   cxt.lineTo(10,50);
   cxt.stroke();
</script>

3.通过javascript绘制图像

SVG

SVG指可伸缩矢量图形,SVG图像具有可通过文本编辑器来创建修改,也可被搜索、索引、压缩等优点。
代码示例:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
    <polygon points="100,10 40,180 190,60 10,60 160,180" 
     style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>

3,HTML5媒体

媒体元素主要为音频元素和视频元素,HTML5通过<object>来加载,进而播放音频或视频。
代码示意:直接在页面body部分通过<object>标签来添加音频或视频文件

<object width="420" height="360"  
   classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
   codebase="http://www.apple.com/qtactivex/qtplugin.cab">
   <param name="src" value="/i/bird.wav" />
   <param name="controller" value="true" />
</object>

4,HTML5API

HTML5新增了诸多API 接口,包括地理定位、拖放、WEB存储、应用存储等接口。

5,HTML5 定位

HTML5 Geolocation API 可用于获得用户的地理位置,Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
1: navigator.geolocation,可用于检测设备是否支持HTML5定位
2:getCurrentPosition() 方法可用户获取当前设备的经纬度位置
利用HTML5定位获取定位示例:HTML5获取定位

6,HTML5 拖放

HTML5增加了新的属性draggable,当某元素的draggable属性设置为true时,表示该属性可以被拖动。
HTML5同时还新增了鼠标事件ondragondropondragstartondragover等事件来运行和拖放有关的脚本;每个事件的具体意义可参考w3cHTML事件
HTML5拖放代码示例

  1. 在页面中添加可拖放的元素

  2. 确定拖放元素与拖放目标元素的事件与对应的脚本

  3. 拖放元素与拖放目标元素的事件

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" 
width="336" height="69">

  1. 事件所触发的脚本
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

  1. 在页面中进行拖放元素

7,WEB存储

web存储也称为本地存储,通过本地存储,web 应用程序能够在用户浏览器中对数据进行本地的存储。
与cookie相比,本地存储更安全,且不影响浏览器性能,并且信息不会被传到服务器
HTML本地存储提供了两个在客户端存储数据的对象
window.localStorage - 存储没有截止日期的数据
window.sessionStorage - 当关闭浏览器标签页时数据会丢失

使用本地缓存时,应先检测是否支持本地缓存

if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码
} else {
    // 抱歉!不支持 Web Storage ..
}

代码示例

// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

8,应用程序缓存

应用程序缓存即可对web应用进行本地缓存,保证用户在离线时也可以使用应用,加载速度更快,且能够减少服务器负载,浏览器只从服务器下载更新或更改过的资源。
代码示例

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文档内容 ......
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249