html5-1 网页结构描述

一、总结

一句话总结：注意head中的title，keywords，description，这对seo优化很有帮助

1、如何给某元素动态使用类似onclick方法？

点onclick，然后在onclick中添加事件即可

  1. 28 $('div').mouseenter(function(){

2、jquery中如何使用setInterval函数？

和在js中一模一样

  1. 31     setInterval(function(){
  2. 32         s+=v;
  3. 33         $('div').css({'transform':'rotate('+s+'deg)'});
  4. 34     },10);

3、jquery中如何设置css？

点css，然后是，大括号，里面键值对，都加引号

  1. 33         $('div').css({'transform':'rotate('+s+'deg)'});

4、设置动画的关键字是什么？

transform

  1. 33         $('div').css({'transform':'rotate('+s+'deg)'});

5、!doctype html> 是什么？

html5文档声明

二、网页结构描述

  1.  文档类型:
  2.  <!doctype html>
  3.  
  4.  网站代码结构:
  5.  <html>
  6.      <head>
  7.          <meta charset="UTF-8">
  8.          #设置浏览器的阅读编码
  9.  
  10.          <title>云知梦-太原PHP培训|山西PHP培训</title>
  11.          #设置网站首页的标题
  12.  
  13.          <meta name="keywords" content="山西PHP培训,太原PHP培训,山西PHP开发>
  14.          #设置网站的关键字
  15.  
  16.          <meta name="description" content="云知梦PHP培训-致力于PHP培训、LAMP技术培训,只为有梦想的人。>
  17.          #网站描述
  18.      </head>
  19.  
  20.      <body>
  21.          <h1>云知梦，只为有梦想的人!</h1>
  22.          <h1>云知梦，只为有梦想的人!</h1>
  23.          #可见的网站骨架或实体内容
  24.  
  25.      </body>
  26.  </html>

三、代码

页面中图片旋转实例

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>小帅</title>
  6.      <!-- css样式设计 -->
  7.      <style>
  8.          div{
  9.              width:256px;
  10.              height:256px;
  11.              border:10px inset #f00;
  12.              margin:0 auto;
  13.              background: #ccc;
  14.              border-radius:256px;
  15.              cursor: pointer;
  16.          }
  17.      </style>
  18.      <script src="jquery.js"></script>
  19.  </head>
  20.  <!-- html标签 -->
  21.  <body>
  22.      <div>
  23.          <img src="xs.png" alt="">
  24.      </div>
  25.  </body>
  26.  <!-- js特效 -->
  27.  <script>
  28.  $('div').mouseenter(function(){
  29.      s=0;
  30.      v=10;
  31.      setInterval(function(){
  32.          s+=v;
  33.          $('div').css({'transform':'rotate('+s+'deg)'});
  34.      },10);
  35.  });
  36.  </script>
  37.  </html>

html5-1 网页结构描述的更多相关文章

  1. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  2. 【原】HTML5 新增的结构元素——能用并不代表对了

    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...

  3. 15个前卫的 HTML5 & CSS3 网页设计作品

    今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...

  4. HTML5 常用的结构化标签整理

    一.语义化结构化标签 结构化标签优点: 1.方便浏览器处理和识别,提升了网页的质量和语义. 2.减少了大量无意义的div标签,增强代码的可读性. 结构化标签:(header,nav,body,arti ...

  5. HTML5文档结构语义：页眉的header和hgroup标签使用

    HTML5提供了新的结构元素——例如header.hgroup.article.section.footer.nav等来定义网页,将使网页结构更加简洁严谨,语义更加结构化,而不用迂回通过class或i ...

  6. 【重构前端知识体系之HTML】HTML5给网页音频带来的变化

    [重构前端知识体系之HTML]HTML5给网页音频带来的变化 引言 音乐播放,相信大家都很熟悉,但是早在之前的音乐播放之前,你的浏览器会问你,是否下载flash插件.然而现在,估计一些年轻的开发者都不 ...

  7. 32+激发灵感的HTML5/CSS3网页设计教程

      HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...

  8. MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系

    MongoDB的集合(collection)可以看做关系型数据库的表,文档对象(document)可以看做关系型数据库的一条记录.但两者并不完全对等.表的结构是固定的,MongoDB集合并没有这个约束 ...

  9. HTML5新增与结构有关的元素

    HTML5新增与结构有关的元素 1.section元素 2.article元素 3.aside元素 4.header元素 5.hgroup元素 6.footer元素 7.nav元素 8.figure元 ...

随机推荐

  1. 【Todo】Zookeeper系列文章

    http://nileader.blog.51cto.com/1381108/1068033

  2. hdu-3642--Get The Treasury-线段树求面积并

    求空间中叠加3次及3次以上的体积. 由于|z|<=500.所以直接把z轴剥离出来1000层. 然后对于每一层进行线段树求面积并. #include<stdio.h> #include ...

  3. 程序猿必须知道FTP命令

                                             程序猿必须知道FTP命令 文件传输软件的使用格式为:FTP<FTP地址>.若连 接成功.系统将提示用户输入 ...

  4. 自己在linux上编译、链接、动态库和静态库的学习笔记

    在平常的项目中,我们都是使用公司要求的makefile.makedebug一类的文件,因此,在编译.链接.生成和链接动态库与静态库的时候,我们只是简单的使用一些已经设置的变量,只是简单的修改.添加一些 ...

  5. Android实现微信分享及注意事项

    一.获取帮助文档并下载相关资料 首先打开微信开放平台:https://open.weixin.qq.com/ 如果没有注册,请先注册并上传开发者资料等待审核. 资源中心----移动应用开发----分享 ...

  6. Android内存泄露分析之StrictMode

    转载请注明地址:http://blog.csdn.NET/yincheng886337/article/details/50524709 StrictMode(严格模式)使用 StrictMode严格 ...

  7. 洛谷——P1601 A+B Problem（高精）

    https://www.luogu.org/problem/show?pid=1601#sub 题目背景 无 题目描述 高精度加法,x相当于a+b problem,[b][color=red]不用考虑 ...

  8. ajax 通过return 返回data值

    方法例如以下: 1. ajax 必须为同步 设置async:false 2. 定一个局部变量 把data赋值给局部变量 然后 return 局部变量就可以 示比例如以下 function getEmp ...

  9. TCP快速重传与快速恢复原理分析（四种不同的算法）

    在TCP/IP中,快速重传和恢复(fast retransmit and recovery,FRR)是一种拥塞控制算法,它能快速恢复丢失的数据包.没有FRR,如果数据包丢失了,TCP将会使用定时器来要 ...

  10. 【u237】分数化小数

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 写一个程序,输入一个形如N/D的分数(N是分子,D是分母),输出它的小数形式.如果小数有循环节的话,把 ...