初学HTML5做的小知识点
Posted gsdnb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初学HTML5做的小知识点相关的知识，希望对你有一定的参考价值。
新增的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做的小知识点的主要内容，如果未能解决你的问题，请参考以下文章