新增的HTML5标签

  • 语义化标签 ：<header> 头标签      <nav> 导航标签      <section> 表示文档的结构、栏目      <footer> 页脚      <article> 文章标签      <aside> 侧边栏导航     <mark> 凸显文字

网页的组成及标准                  HTML 指的是超文本标记语言 (Hyper Text Markup Language)

结构(Html)【W3C】       表现(css)【W3C】     行为(DOM ECMAScript) 【ECMAScript】

<!DOCTYPE html>命名文档类型是html5

<html>创建html

<head>创建头部

<meta charset=“utf-8” />编码格式utf-8

<title>标题</title>创建网页标题

</head>头部结束标签

<body>创建主体

主体显示内容

</body>主体结束标签

</html>html结束标签

表格

cellspacing=“10” 单元格与单元格之间的距离         cellpadding=“10” 单元格与内容之间的距离                   colspan=“2” 合并列                   rowspan=“2” 合并行

表单

<input type=“表单元素类型” />表单元素

text 单行文本框

password 密码输入框

submit 提交按钮

reset 重置按钮

表单字段集 <fieldset></fieldset>

字段级标题 <legend></legend>

<textarea>文本内容</textarea>多行文本框

<select>下拉框

<option>下拉框内容</option>

<option selected=“selected”>默认内容</option>

</select>

<input type=“表单元素类型” />表单元素

radio 单选框

checkbox 复选框

checked=checked 默认选中

file 上传文件

button 自定义按钮

Image 图片按钮 <input type="image" src="路径" />

hidden 隐藏

选择器

伪类选择符

a:link {属性:属性值;} 初始化状态

a:visited {属性:属性值;} 被点击后的状态

a:hover {属性:属性值;} 当鼠标滑过时候的状态

a:active {属性:属性值;} 当鼠标按下时候的状态

说明：伪类选择器只能给特殊的带有href属性的a标签使用 并且只有在特殊的条件下才会有效果

内联样式的权重为 1000

id选择符的权重为 0100

class选择符的权重为 0010

伪类选择符的权重为 0010

元素选择符的权重为 0001

继承样式的权重为 0000

后代选择符的权重：为后代选择符的权中之和

文本溢出

width:200px; 文本超出多少才隐藏

white-space:nowrap; 强制不换行

overflow:hidden; 溢出隐藏属性

text-overflow:ellipsis; 文本溢出隐藏时出现省略号

元素分类

块元素 (block) 默认宽度和父框一样宽 强制换行 能设置宽高

div p h1-h6 form dl dt dd ul ol 等

行元素 (inline)(内联元素) 元素不能设置宽高 在一行显示 宽高由内容撑大

a span b strong i em u s del 等

行内块元素(inline-block) 在一行显示 并且能设置宽高 能设置宽高的行内元素

img input select textarea 等

不显示元素(none)

该类型是特点是元素隐藏不占文档流 有点类似备注的效果

没有元素默认是这个类型

图片整合的概念

优劣势：

通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。

通过整合图片来减小图片的体积。

增加了开发人员的负担。

给一个元素定义背景图 通过 background-position 来实现应用

注：一般background-position的值都是负值

主流浏览器

浏览器内核：

Trident   IE

Gecko    火狐

Webkit    原谷歌现苹果（Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）

Blink       现在opera和谷歌  (由Google和Opera 开发的浏览器排版引擎)

Presto     原opera （ 迅速的）

浏览器常见的兼容问题

图片间隙

div中的图片间隙 描述：在div中插入图片时，图片会将div下方撑大三像素。

hack:将<img>转为块状元素，给<img>添加声明：display:block;

表单元素在一行高度不一致

hack:给表单元素添加声明：float:left;

按钮元素默认大小不一致

按钮元素的padding和border 大小会算在width,height里面

margin:0 auto; width:数值px; 能让块元素居中的属性

box-sizing:border-box   怪异盒模型

动画

transform:

translate() 移动

通过 translate() 方法，元素从其当前位置移动，根据给定的left（x 坐标） 和 top（y 坐标） 位置参数

rotate() 旋转

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

scale() 缩放(是gay)

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

skew() 倾斜(是Q)

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

3D位置移动 的3种写法

transform: translate3d(30px,30px,800px)

transform:translateZ(800px) translateX(30px) translateY(30px);

transform:translateZ(800px) translate(30px,30px);

3D视距 perspective 元素要使用3D效果 需要perspective属性配合

animation: name 5s linear 2s infinite alternate;

初学HTML5做的小知识点的更多相关文章

  1. 【转】HTML5的小知识点小集合

    html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...

  2. html5的小知识点小集合

      html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...

  3. HTML5做手机站页面字体显示很小的解决方法

    HTML5做手机站需要加上一部分代码,不然字体会显示很小的,经历了很久的不解才发现的,希望给大家一些帮助 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD ...

  4. 使用PixiJS做一个小游戏

    PixiJS PixiJS使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库. 官方 ...

  5. 刚接触Linux，菜鸟必备的小知识点（一）

    身为一个将要大四的学生,而且还是学计算机的没有接触过linux简直是羞愧难当.这个假期做了一个软件测试员,必须要熟悉linux的操作,所以对于我这个菜鸟我也就说几点比较重要的小知识点吧. 第一.cd指 ...

  6. easyui中的combobox小知识点~~

    一直使用的easyui中,一些不为人知的小知识点,与君共勉: 1.combobox设置高度:使用panelHeight属性: 2.combobox本身自带“自动补全”功能,但是在浏览器中是有限制的,在 ...

  7. jQuery 小知识点（插件）

    1.jQuery插件小知识点: 估计很多人都没弄明白下面的东西,特从网络上搜索了下面的知识,自己以后用起来也比较方便: $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例 ...

  8. python中的小知识点

    这里是一些小知识点的汇集,为的是以后查找的方便. 行与缩进: 物理行:实际看到的代码行数. 逻辑行:在意义上的函数(即解释器执行的行数) 如果一个物理行中包含了多个逻辑行,则每个逻辑行之间需要用分号 ...

  9. 深入了解webpack前，可以了解的小知识点。

    阅读前:文章大概是写,简单用过webpack,想继续深入了解webpack前需要了解的知识.但文章内容跟webpack使用关系并不大. 文章概要: Object.defineProperty call ...

随机推荐

  1. Spring还可以这样用缓存，你知道吗？

    大家在项目开发过程中,或多或少都用过缓存,为了减少数据库的压力,把数据放在缓存当中,当访问的请求过来时,直接从缓存读取.缓存一般都是基于内存的,读取速度比较快,市面上比较常见的缓存有:memcache ...

  2. TP 5.0 架构 简介

    TP 5.0 架构 简介 thinkphp 5.0 为API开发而设计的的高性能框架,是与以往thinkphp5.0以下版本大不相同的新型框架,病对以颠覆和重构版本,采用全新的架构思想,引入了更多的P ...

  3. PHP -- 数据库访问

    一.过时方法(PHP5以前的版本用的):用函数链接数据库,相当于面向过程的方式 //设置页面编码格式 header("content-type:text/html;charset=utf-8 ...

  4. 优化 Ubuntu

    优化Ubuntu 1. 更换 apt 源 echo 'deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe mul ...

  5. Linux/UNIX编程：使用C语言实现简单的 ls 命令

    刚好把 Linux/UNIX 编程中的文件和IO部分学完了,就想编写个 ls 命令练习一下,本以为很简单,调用个 stat 就完事了,没想到前前后后弄了七八个小时,90%的时间都用在格式化(像 ls ...

  6. JSP+java上传图片到服务器，并将地址保存至MYSQL + JSP网页显示服务器的图片

    这两天遇到个需求——用户头像修改功能. 查了好多资料,不是代码不全,就是某些高端框架,卡了好久,今已实现,分享给大家,如果有更好的方法,非常感谢可以在下方评论区写出 一.整体项目架构 二.web.xm ...

  7. ios下，微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样

    问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...

  8. 百度网盘 人工智能书籍【Tensorflow和深度学习】

    链接:https://pan.baidu.com/s/1ejCvwn08ILI2fMhBEdXR8w 提取码:6pk9

  9. 深入理解java内存模型--读书笔记

    深入理解java内存模型 java内存模型的抽象 java线程之间的通信由java内存模型(JMM)控制,JMM决定一个线程对共享变量的写入何时对另一个线程可见 从抽象的角度来看,JMM决定了线程和主 ...

  10. 关于JVM内存溢出的原因分析及解决方案探讨

    前言:JVM中除了程序计数器,其他的区域都有可能会发生内存溢出. 0.什么是内存溢出 当程序需要申请内存的时候,由于没有足够的内存,此时就会抛出OutOfMemoryError,这就是内存溢出. 1. ...