HTML5学习总结篇-2

最新推荐文章于 2022-07-26 15:23:35 发布

小王没有BUG

最新推荐文章于 2022-07-26 15:23:35 发布

阅读量759

点赞数 1

分类专栏：前端文章标签： HTML5

本文链接：https://blog.csdn.net/aa792978017/article/details/79634167

版权

前端专栏收录该内容

5 篇文章 2 订阅

订阅专栏

继续上一次的总结，今天学到文件与拖放那一块了，涉及了很多函数，感觉都是JavaScript里面的知识，所以最后那一点点总结得有点蒙逼，直接复制代码，因为那些代码有部分语法看不懂，JavaScript只是简单看了那么一丢丢，明天开始HTML跟JavaScript一起看，先稍微学一下Js的语法再学后面的HTML5应该会好一点，继续加油啦！

注释：<!-- --!>

一、<head>里面的应用元素：

1.显示在网页标题栏上的文字：<title></title>

2.<meta name="    " content="       ">     content里面写的是内容
keyname       具体关键字
  description   对页面的描述语言
generator     编辑软件的名称
author       作者的姓名
robots        所要限制的搜索方式       （1.All:表示能搜索当前网页及链接的网页；2.Index：表示能搜索当前网页；3.Nofollow：表示不能搜索与当前网页链接的网页；4.Noindex；表示不能搜索当前网页；5.None：表示不能搜索当前网页及其链接网页）
build       网页建立的日期（2008.08.08）
copyright     网页版权信息（明日科技）
reply-to      联系人邮箱

        设置网页文字及其语言： <meta charset="UTF-8">
设置网页定时跳转： <meta http-equiv=“refresh” content="跳转时间"；url="跳转地址">
设置到期时间：    =”expires“ content="到期时间"             （时间必须是GMT时间格式：星期，日月年时分秒如Web，14 september 2011 16：20：00 GMT）（网页一旦过期则必须到服务器上重新调用）
禁止从缓存中调用网页:                   ="cache-control(pragma)" content="no-cache"    （如果网页频繁跟新，用这个能使用户每次打开网页都能看到最新的消息）
删除过期的cookie   =”set-cookie“ content=”GMT时间“
强制打开新窗口：   =”windows-target“ content=”_top“      （强制网页在当前窗口中独立显示，防止自己的网页被别人当做frame页调用)
设置网页过渡效果：   =”过渡事件（page-enter/page-exit）“ content=”revealtrans（duration=过渡持续效果，transition=过渡方式)“>   (ie9以上都不能用，过渡方式见另外的说明书)

3.<base>    基底网址标记    <base herf="基地网址">（body中有<a herf="../1.html"></a> 其网址打开的时候是：基底网址/1.html 即把相对地址转换为绝对地址）

二、<body>里面的应用元素

1.body 页面的主体标记（<body text="">）
  text  设定页面文字的颜色
bgcolor 页面背景的颜色
background 页面背景图片
bgproperties 背景图片设为固定，不随页面的滚动而滚动
link  设定默认链接颜色
alink  鼠标单击时的颜色
vlink  访问过后的颜色
margin  页面边距（topmargin。。。）

2.文字标题的建立
<h1></h1>一级标题
<h6></h6>六级标题（网页设置不同等级标题时运用）

<h1 align="标题文字的对齐方式"> left center right 左对齐居中对齐右对齐
<cite>标题</cite> (表示作品的标题，书，文章，歌曲等，作用为斜体)

设置文字格式                <font 属性=”“>

设置文字字体  face（face=”字体1，字体2，华文彩云“）优先使用字体1，若无1则用二
设置字号  size（size=”3（1-7）（+1-+7）“）3号字体与默认字体相同，字号为相对默认字体大小设置
设置文字颜色  color
字体效果  <strong>粗体</strong>
    <em>斜体<>
    <u>带下滑线的文字
    <strike>删除线
    <code(samp)>等宽文字
特殊字符  空格（&nbsp）等   查html手册   记住常用的即可
上下标   sup 上标   sub下标（数学里面的平方或者底数）

设置段落格式

段落标记  <p></p>
取消换行标记  <nobr><nobr> (一行文字太长，会加滚动条而不换行)
换行标记  <br/>
保持排版标记  <pre></pre>
居中对齐标记  <center></center>
向右缩进标记  <blockquote></blockquote>
添加水平线  <hr width= height= color= align= noshade>    (设置宽高，颜色，对齐方式，去掉水平线阴影)
文字标注标记  <ruby>被说明的文字<rt>文字的标注</rt></ruby>   （同样可设置文字标注的属性，颜色，字体等）
声明变量标记  <var></var> （效果为斜体，一般用于变量声明如：x+y=2；等数学情形）
忽视HTML标签标记 <plaintext(xmp)> (时HTML标记失去作用，直接显示代码，一般放在<body>后面)
地址文字标签  <address></address> (一般用于定义地址，签名，文档作者身份等信息，电子邮箱等等）
small标签  <small></small>  （表示“附属细则”通常来免责、警告、提出法律限制或者版权，只允许被当作辅助信心用inline方式内嵌在页面上使用）

列表
无序列表标记  <ul type=”“> <li>第一项</li> </ul> （ul表示无序列表的开始，li表示每一项）
         （type表示列表项开始的符号 disc 实心圆；circle：空心圆；square：实心方型）

有序列表标记  <ol type= start=""><li></li></ol>  (type表示列表开始的符号   1：数字1.2.3；i：小写罗马数字；I：大写罗马数字；a：英文字母abc；A：英文字母ABC)
          (start表示有序列表起始数值)

定义标记列表  <dl>
     <dt>名词1<dd>解释1
     <dt>名词2<dd>解释2   (dl表示定义列表的开始，dt后面时要解释的名词，dd后面时解释（一个dt可有多个dd），常用于术语的解释)
    <dl>

菜单列表标记  <menu><li></menu>    (效果跟无序列表一样，主要用于设计单列的菜单列表)
目录列表  <dir><li></dir>     (主要用于显示文件内容的目录大纲，通常用于设置一个压缩窄列的列表，用于显示一系列的列表内容)
设置列表文字的颜色 <li><font color=></font></li>
有序无序列表的嵌套使用 <ul><ol></ol></ul>    (依据需求直接嵌套即可)

超链接的使用

建立文本链接   <a href="链接地址" target="目标窗口打开方式">链接文字</a>   (可以时绝对地址也可以是相对地址)
设置超链接的目标窗口       (_parent:在上一级窗口打开，常在分帧的框架页面中使用；_blank:新建一个窗口打开；_self:在同一个窗口打开；_top:在浏览器的整个窗口打开，将会忽略所有框架结构)
建立书签  <a name="书签名字">文字</a>   (name中的为书签的名字，后面将是设置跳转效果)
链接到同一页面的书签 <a href="#书签名字">文字</a>   （语法：href=“#+书签名字”，点击链接则会跳转到书签名字的文字）
链接到不同页面的书签 <a href="链接的文件地址#书签的名称">链接的文字</a>

外部链接
    <a href="http://...">链接文字</a>       (通过http)
    <a href="ftp://..">链接文字</a>   (通过ftp文件传输协议)

发送email  <a href="mailto:792978017@qq.com"></a>  (通过mailto标签发送邮件，会自动打开计算机系统中默认的电子邮件客户端软件)
    <a href="mailto:电子邮件地址?CC=电子邮件地址">         （抄送收件人）
                                ？Subject=主题文字  （电子邮件主题）
           ？BCC=电子邮件地址  （暗送收信人）
           ？Body=邮件内容       （电子邮件内容）

下载文件 <a href=“文件所在地址” （绝对地址和相对地址都可以）

脚本链接 <a href="javascript:..."></a> (地址上放上脚本语言）？？不确定得去调查

空链接 “#” （指向链接后，鼠标变手型）

使用图片

添加图片  <img src="图片文件的地址" height=   width=   border= hspace=   vspace=   aglin=   title=   alt=   >
       （高；宽；边框；图像水平间距（设置图片与图片或文字的间距）；垂直间距（同水平）；图像相对于文字基准线的对齐方式（下面详解）；图像的提示文字（鼠标放到图片上显示的内容）；图像的替换文字（图片无法显示的时候显出来）)

    aglin=  top  把图像的顶部与同行文字（或图像）的最高部分对齐
      middle  把图像的中部与同行的中部对齐（通常是文本的基线，并不是时间的行中间）
      bottom  把图像的底部与同行文本的底部对齐
      texttop  把图像的顶部和同行中最高的文本的顶部对齐
      absmiddle   把图像的中部和同行中最大项的中部对齐
      baseline 把图像的底部和文本的基线对齐
      absbottom 把图像的底部和同行中的最低项对齐
      left  使图像和左边界(网页的左边界)对齐（文字环绕图像）
      right  使图像的右边界对齐（同上）
插入avi文件  <img src="" dynsrc="avi.文件地址" loop=“循环次数”（数值或-1/infinite（无限次）） start=“播放方式”（fileopen：网页打开时播放；mouseover鼠标放上去播放，不是点击）>

图像超链接  <a href="链接地址" target=“目标窗口的打开方式（同上面出现过的一样）”><img src=></a>
设置图像热区链接 <img src="" usemap="映射图像名称">         （在图像文件设置热区映射图像名称）
    <map name="映射图像名称"><area shape="热区形状" coords=“热区坐标” href="热区地址"></map> （定义热区形状和坐标）
    shape值：rect（矩形区域）;circle(圆形)；poly（多边形）
    coords：（rect包含四个参数：left top right bottom（理解为两个对角的点坐标））    （circle包含三个 circle-x circle-y radius）

创建表格：

表格基本结构  <table width= height= align= border= bordercolor= cellspacing= cellpadding= bgcolor= background=>(table表格标记，tr行标记，td行内格子，caption标题，th表头，)
     <caption>表格标题</caption>      (cellspacing内框宽度，就是单元格之间的宽度，cellpadding文字与边框的间距)
     <tr> <th> </th>
      <td> </td>       （可以单独对th，td，tr设置以上的属性）
      <td>    </td>       （valign=垂直对齐方式（top middle bottom））
     </tr>
     </table>
水平垂直跨度（跨行，列）<td colspan="列数"（rowspan=“行数”）>      （所跨的其他格子不用再写td，第一个各自写了colspan或rowspan即可）
单元格亮边框与暗边框 <td bordercolorlight="颜色代码" bordercolordark=“”>
表格的表首标记    <thead><tr><th></th></tr></thead>      （用于表首第一行，表示它是表首，结构化语言）
表格的表主体标记 <tbody><tr><th></tbody>        （用再第一行后面，包含剩下所有的行，以示表格主体这个结构）
表格的表尾标记  <tfoot></tfoot>         （一般用于注释表格，或者写日期啥的）
表格的嵌套   (直接嵌套即可，嵌套再设置属性，可能会简便省事一些)

层--div标签（主要介绍常用属性，冷门的去查手册把）

div属性 <div align= id="唯一id" class="类"></div> （id:唯一标识，只能有一个（css中：#唯一id{}调用）；class：类型标识，可多个（css中：.类{}调用））

checkValidity(显示验证法) 涉及JavaScript以后再研究（如果想要控制验证反馈的显示，那么不建议使用这个方法）

避免验证法一：对form用novalidate即（<form novalidate>关闭这个表单里面的所有验证）
法二：对input或submit用formnovalidate让表单对单个input失效，不过对submit用的话，会想法一效果1一样，使整个表验证失效

setCustomValidity(自定义错误信息) （自己定义检验错误时的提示信息，因涉及JavaScript，暂时不做深究）
<output> (暂时只有opera支持，不做过多了解)

label定义标签  （可用于指定id class style等核心属性，也可以指定onclick等事件属性，还可以与表单控件关联）  隐式关联：<label for="某个id" >文字</label>   显示关联：<label> 文字<控件></label>   点标签文字时，同上点击了控件

button定义按钮  （定义一个按钮，里面可以包含文本，图片等内容，指定内容同上，标记间都是按钮的内容）  <button type="submit/reset"><im.....></buttom>

文本域标记textarea （有个大框给你输入文本） <name="" rows="行数" cols="列数" value"默认值">

多媒体页面

滚动文字标记marquee <mraquee direction="滚动方向"（up down left right） behavior="滚动方式"（scroll 循环滚动默认；slide滚一次就停；alternate 来回交替滚动）scrollamount="滚动速度"（像素为单位）scrolldelay="滚动延迟"（单位时毫秒）loop="循环次数">
<width="滚动宽度" height="滚动高度" bgcolor="滚动背景颜色" hspace="水平留白空间" vspace="竖直留白空间 ">

添加背景音乐bgsound <bgsound src="背景音乐地址" loop="循环次数">

添加多媒体文件 <embed src="多媒体文件地址" width="播放界面宽度" height="" autostart="true/false(是否自动播放)" loop="true/false(是否循环播放，否则播放一次)"hidden="true/false（是否显示播放页面，可用于隐藏界面，播音乐）" quality="high" pluginspage="插件地址" type="所需插件类型" womde="transparent"(插入背景透明的flash动画)>（可以插入flash，mpeg等类型文件）

(PS:embed用于非IE浏览器，object用于IE，为避免不兼容两个同时用，embed放在object里面)

object标签 (用于添加多媒体对象，如flash，音频，视频等) <object classid="需要下载的插件类型" codebase="下载插件的地址" quality="high(以高质量播放视频)"><param name="filenname" value="音频文件地址" （name="wmode" value="transparent"加入背景透明的flash动画）/></object>

HTML5新增元素：

新增的结构元素
  <section></section> (定义文档或应用程序的一个区段，对页面上的内容进行分块，标示文档结构)
  <article></article> (表示文档、页面、应用程序中的一块独立的内容，如博客或报纸中的一篇文章，自包含成分构成的一个页面的一部分；若嵌套是，里外的article原则上应该有内容上的关联，主要就是告诉大家这是具有联系的一大块内容)
  <header></header> （表示页面中的一个内容区块或者整个页面的标题）
  <nav></nav>  （用来构建导航链接的部分，属于一个包装器，把链接放进nav标签即可，使用场合：传统导航条、侧边栏导航、页内导航、翻页操作）
  <footer></footer> （表示整个页面或页面中一个内容区块的注脚。一般包含作者信息，日期，联系信息啥的）
  <time datetime="2011-10-12T20:20Z" pubdate> (表示时间，“T”表示日期和时间的分隔，“Z”表示使用UTC标准时间，“pubdate”表示为发布时间)
  <hgroup></hgroup> （将标题及其子标题进行分组的元素;PS:感觉直接用h1-h6就够了）

新增的块级语义元素
  <aside></aside>  （表示article元素的内容之外的与article内容相关的内容，用法1：在article中作为附属信息部分；用法2：作为页面或站点全局的附属信息）
  <figure><figcaption>figure标题</figcaption>其他内容</figure>  （表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元）
  <dialog>内容</dialog> （定义对话）（常用dt dd定义对象和对话内容）

新增的行内元素

  <time></time>  （表示时间或日期，可以同时表示两者）
  <progress></progress> （表示正在运行中的进程，可用于显示js中耗时间的函数的进程，有value（已经完成的工作量）和max（总共的工作量）两个属性）
  <meter></meter>  （表示度量，仅用于已知最大值和最小值的度量，必须定义度量范围，可以在元素的文本中和min/max/value/low（低值区）/high（高值区）/optimum(最佳值)属性中定义）


新增的嵌入多媒体元素
  <video/audio src="视频/音频">您的浏览器不支持video标签</video（audio）>  标签内的文字如果浏览器不支持会被显示出来   （ps:实践过程中失败）

新增的页面元素
  details（展开收缩区域）   <details><summary></summary><p>收缩的文字</p></details>
  <figure></figure> （表示一个块级图像，还可以包含说明，可以用于audio video iframe embed等，用<figcaption>要加的标题</fagcaption>加标题）
  <mark></mark>  （主要用在视觉上向用户呈现那些需要突出显示或高亮显示的文字，相当于用荧光笔画一段话，非原文作者所做，时引用时加上）

全局属性
  contentEditable="true"  （允许用户编辑元素中的内容，有继承属性，若子元素未设置，默认跟父亲一样//iscontentEditable自行去了解）
  designMode   （用来指定整个页面是否可以编辑，只能在JavaScript中被编辑修改，语法：document.designMode="on"//例如：<body οndblclick="document.designMode="on"">）
  hidden    （控制内容是否显示hidden="true",相当于css中display：none，内容会被创建，只是不显示）
  spellcheck   （检查元素的拼写和语法，并非所有浏览器都支持）
  tabindex   （使用tab健，控制页面上的元素获得焦点的顺序）

HTML5结构

大纲：即文档中各内容区块的结构编排有显示编排和隐式编排两种，建议用显示编排，这样的文档结构会比较明显，可读性强

文件与拖放

文件选择

1.file对象选择文件      <input type="file" multiple size="数字"/>
     <input type="button" οnclick="ShowName（）；"value="上传文件">
     <script language=javascript>
      function ShowName(){
       var file;
       for(var i=0;i<document.getElementByld("file").files.length;i++){
       file = document.getElementByld("file").files[i];
       alert(file.name);

   }
      }
2.blob接口获取文件大小及类型
     <script language=javascript>
      function ShowFileType()
      {
           var file;
             //得到用户选择的第一个文件
           file = document.getElementById("file").files[0];
           var size=document.getElementById("size");
             //显示文件字节长度
           size.innerHTML=file.size;
           var type=document.getElementById("type");
            //显示文件类型
        type.innerHTML=file.type;
      }
     </script>
     选择文件：
     <input type="file" id="file" />
     <input type="button" value="显示文件信息" οnclick="ShowFileType();"/><br/>
     文件字节长度:<span id="size"></span><br/>
     文件类型：<span id="type"></span>

3.通过类型过滤选择文件（15.2）
     <script language=javascript>
      function FileUpload()
      {
       var file;
       for(var i=0; i<document.getElementByld("file").files.length;i++)
       {
        file= document.getElementByld("file").files[i];
        if(!/image\/\w+/.test(file.type))
        {
         alert(file.name+"不是图像文件！")
         break;
        }
        else
        {
         alert(file.name+"文件可以上传")；
        }
       }
      }
     </script>
     选择文件：<input type="file" id="" multiple/>
        <input type="button" value="上传文件" οnclick="FileUpload();"/>

                            法二：<input type="file" accept="inage/*"/>   只接受图片文件

使用FileReader接口读取文件

1。检测浏览器对FileReader接口
     if(typeof FileReader==='undefined')
     {
      alert("您的浏览器为实现FileReader接口"）；
     }
     else
     {
      var reader = new FileReader();
     }

2.FileReader接口的方法：
     abort    none        中断读取
     readAsBinaryString  file    将文件读取为二进制码（一般读取到后端存储）
     readAsDataURL    file    将文件读取为DataURL（读取为DataURI，Data URL是一种将小文件直接嵌入文档的方案）
     readAsText    file，[encoding]  将文件读取为文本（读取结果为文本原来的内容）