HTML5

  1. Html学习
    1. Html是什么及其组成部分

这里记录了html的主要标签,所谓的标签可以说成工具,用来使用的,不同的标签代表不同的工具,有的工具是用来装东西的,有的是用来打包装箱的,还有的是用来美化的。标签想要学完那是不可能的,有好多中,就像我们修机器用的工具不可能每一个都用过,也不可能每一个都会用,用好常用的就行。

下面是html的标签。

HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本。

标记< html></html>说明该文件是用超文本标记语言来描述的,它是文件的开头,而</html>则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。

头部<head></head>表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。

主体<body></body>网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

 

    1. Html有什么作用和用途

HTML命令可以说明文字图形动画声音表格链接等。超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。

    1. Html标签总结
  1. utf-8 对于文本文字的排序和整理
  2. <html> 图片、链接、音乐、程序、等非文字元素超文本标记。

3. <div> 块级元素

4. <hr /> 对于文本的直线标记

5 <!--  --> 注释(对于对于网页的区分及自我的说明)(还可以查找错误)

6. 单、双标签的区分: <br  />(折行)   <b></b>(字体加粗)

7. <h1>~<h6> 标题从大到小

8. <img scr:” ”; title=” ”; alt=” ”> 图片的置入对于单个图片在页面的名字网页错误时输入的文字代码或者符号

9. <style> 内部连接修改和内连修改文本的样式定义

10. <ol> </ol> 有序排列

11. <ul></ul> 无序排列  用的计较多

12. <form></form> 表单

13. <form action=” ”> 表单内容的提交地址

14. <input type="text" name=" " value="账户"> 输入用户名,注册输入电话号码,电子邮件,家庭住址等。输入框中的默认值(字

15. <input type“password”name=“”valu=“密码” 显示为保密字符

16. <input type=“text”name=“”size=“20maxlength="20" /> 表示输入框的长度大小、输入的最大值

17. <input type="radio" name="" value="" /> 表单单选框架

18. <input type="checkbox" value="" /> 表单复选框架

19. <font> 对于文本里规定文本的字体外观、字体尺寸和字体颜色

20. float:left(right) 针对图片文本 或者附带超链接的图片和文本左上浮动(右上浮动)

21. Margin: ; 外边距

22. Padding: ; 内边距

23 <table>  表单

    1. Html元素的类型

html中的标签元素大体被分为三种不同的类型:
块状元素内联元素(又叫行内元素)和内联块状(行内块元素元素。

块状标签:标签独占一行,可指定宽、高 (可调节宽高)

行内块 <img>、<input>标签就是这种内联块状标签。(横向排列至一行用完自动排列下一行)

行内标签:标签在一行内,宽度与高度由内容决定,只有在内容超过HTML的宽度时,才会换行(不可调节宽高

常用的块状元素有:
<div>(现在用的最多) <p>(换行)、<h1> ...<h6>(标题的大小)、{<ol><ul><dl>}(标题的大至小排列)、<table>(用于表格)、{<address><blockquote>} (没用过) <form>(常常用于表单)

常用的行内元素有:
<a>(超链接)、<span>(行内添加的文本,不可控制)、<i>(斜体字)、<em>(没用过)、<strong>(粗体字)、<label><q><var><cite><code>

常用的行内块状元素有:
<img><input>

    1. Html5的十大特性

(1)语义标签

HTML5赋予网页更好的意义和结构。HTML5增加了新的内容标签,这些标签带有一定的语义,使搜索引擎爬取你的网站信息更高效。

(2)增强型表单

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

(3)视频和音频

HTML5 提供了播放音频文件的标准,即使用 <audio> 元素。

<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

HTML5 规定了一种通过 video 元素来包含视频的标准方法

<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

(4)Canvas绘图

标签只是图形容器,必须使用脚本来绘制图形。

(5)SVG绘图

SVG是指可伸缩的矢量图形

(6)地理定位

HTML5 Geolocation(地理定位)用于定位用户的位置。

·  window.navigator.geolocation {

·      getCurrentPosition:  fn  用于获取当前的位置数据

·      watchPosition: fn  监视用户位置的改变

·      clearWatch: fn  清除定位监视

navigator.geolocation.getCurrentPosition(

    function(pos){

    console.log('用户定位数据获取成功')

    //console.log(arguments);

    console.log('定位时间:',pos.timestamp)

    console.log('经度:',pos.coords.longitude)

    console.log('纬度:',pos.coords.latitude)

    console.log('海拔:',pos.coords.altitude)

    console.log('速度:',pos.coords.speed)

},    //定位成功的回调

function(err){

    console.log('用户定位数据获取失败')

    //console.log(arguments);

}        //定位失败的回调

 (7)拖放AP

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素,而目标对象则是指拖动之后要放置的目标位置。把 draggable 属性设置为 true

<img draggable="true"> 拖动什么 - ondragstart 和 setData()         放到何处 - ondragover      进行放置 – ondrop

(8)Web Worker

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

 (9)Web Storage

使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为:

1.localStorage - 没有时间限制的数据存储

2.sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后,数据会被删除。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值