欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

初学HTML5做的小知识点

程序员文章站 2022-06-07 14:38:23
新增的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;