软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> HTML5介绍 -> 正文阅读
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解

[Web前端]HTML5介绍

  2016-04-01 16:49:26

HTML5    
HTML5(网页的5.0版本)
2014年W3C历时8年才定制完HTML5的标准。
HTML5常用框架
sencha-touch、phoneGap、jQuery mobile、bootstrap
公司职位的划分
1> 平面设计师 作图、切图、HTML、CSS
2> 前端工程师 HTML、CSS、Javascript、模板技术
3> 后台工程师 服务器(Java、.Net、PHP)、数据库
4> 移动工程师(iOS/android)手机UI界面(OC、HTML5)、跟服务器交互
HTML5开发应用(个人推荐)
http://www.dcloud.io/
HTML5开发工具
eclipse、MyEclipse、Dreamwaver、WebStrom(?神编辑器)、HBuilderWeb开发新时代
Web1.0 主流技术:HTML+CSS
Web2.0 主流技术:Ajax(JavaScript/DOM/异步数据请求)
Web3.0 主流技术:HTML5+CSS3
HTML5亮点: Canvas HTML5音视频、Web存储、Geolocation Workers多线程处理
CSS3亮点: 设计动画 2D变形 N多新特性
http://html5test.com/
网页组成的3个部分
HTML(网页的具体内容和结构)+CSS(网页的样式)+JavaScript(掌握)
http://www.w3school.com.cn/
常见的HTML标签
标题:h1、h2、h3、h4、h5....
段落:p
换行:br
容器:div、span(用来容纳其他标签)
表格:table、tr、td
列表:ul、ol、li
图片:img
表单:input
链接:a
HTML5新增标签
HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签
结构性标签(负责Web上下文结构的定义,确保HTML文档)
article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)
header/footer 标记头/脚部区域内容
section 区域章节表述
nav 菜单导航,链 接导航
2.块级性标签(完成Web页面区域的划分,确保内容的有效分隔)
aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
figure 对多个元素组合并展示的元素,常与figcaption联合使用
code 表示一段代码块
dialog 人与人之间对话,包含dt和dd两个组合元素(dt用于表示说话者、dd用于表示说话者的内容)
3.行内语义性标签(完成Web页面具体内容的引用和表述,丰富展示内容)
meter 特定范围内的数值,如工资、数量、百分比
time 时间值
progress 进度条,可用max、min、step进行控制,完成对进度的表示和监听
video 视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式
audio 音频元素,用于音频播放,支持缓冲预载和多种音频媒体格式
4.交互性标签(功能性内容的表达,有一定的内容和数据的关联,是各种事件的基础)
details 表示一段具体的内容,默认不显示,通过某种方式(单击)与legend交互才会显示
datagrid 控制客户端数据与显示,可用于动态脚本及时更新
menu 用于交互菜单
command 用来处理命令按钮
CSS(层叠样式表)
用来控制HTML标签的样式,在美化网页中起到非常重要的作用
CSS的编写格式是键值对形式的,比如:
color: red;
background-color: blue;
font-size: 20px;
冒号:左边的是属性名,冒号:右边的属性值
CSS有3种书写形式
行内样式:(内联样式)直接在标签的style属性中书写
<body style="color: red;">
页内样式:在本网页的style标签中书写
<style>
body {
color: red;
}
</style>
外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">
CSS选择器
标签选择器:根据标签名找到标签
<div>div1</div>
<div>div2></div>
div {
      color:blue;
}
结果:
div1
div2
类选择器:
<div class="high">div1</div>
.high {
       color:blue;
}
结果:
div1
id选择器
<div id="high">div1</div>
#high {
         color:blue;
}
结果:
div1
并列选择器:多个标签,相同的样式写到一起
复合选择器:快速定位标签
后代选择器:标签内包含所有指定标签
直接后代选择器:标签内指定标签
相邻兄弟选择器:两个标签之间的标签
属性选择器:标签后面中括号里,跟上相应的属性
伪类选择器:
伪类:
:active 向被激活的元素添加样式。  
:focus 向拥有键盘输入焦点的元素添加样式。  
:hover 当鼠标悬浮在元素上方时,向元素添加样式。  
:link 向未被访问的链接添加样式。  
:visited 向已被访问的链接添加样式。  
:first-child 向元素的第一个子元素添加样式。  
:lang 向带有指定 lang 属性的元素添加样式。  

伪元素:
:first-letter 向文本的第一个字母添加特殊样式。  
:first-line 向文本的首行添加特殊样式。  
:before 在元素之前添加内容。  
:after 在元素之后添加内容。  

选择器优先级:
important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
HTML标签类型
HTML有N多标签,根据显示的类型,主要可以分为3大类
块级标签
独占一行的标签
能随时设置宽度和高度(比如div、p、h1、h2、ul、li)
行内标签(内联标签)
多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸(比如span、a、label)
行内-块级标签(内联-块级标签)
多个行内-块级标签可以显示在同一行
能随时设置宽度和高度(比如input、button)
修改标签的显示类型
CSS中有个display属性,能修改标签的显示类型
none:隐藏标签
block:让标签变为块级标签
inline:让标签变为行内标签
inline-block:让标签变为行内-块级标签(内联-块级标签)
CSS属性 – 可继承属性
所有标签可继承
visibility、cursor
内联标签可继承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
块级标签可继承
text-indent、text-align
列表标签可继承
list-style、list-style-type、list-style-position、list-style-image
CSS属性 – 不可继承属性(红色表示常用)
display、margin、border、padding、background
height、min-height、max-height、width、min-width、max-width
overflow、position、left、right、top、bottom、z-index
float
、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
盒子模型
网页上的每一个标签都是一个盒子
每个盒子都有四个属性
内容(content)
盒子里装的东西
网页中通常是指文字和图片
填充(padding,内边距)
怕盒子里装的(贵重的)东西损坏,而添加的泡沫或者其它抗震的辅料
边框(border):盒子本身
边界(margin,外边距)
盒子摆放的时候的不能全部堆在一起,盒子之间要留一定空隙保持通风,同时也为了方便取出
CSS3新增特性
RGBA透明度
RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道,可用于设置透明值
块阴影与圆角阴影
box-shadow text-shadow
圆角
border-radius
边框图片
border-image
形变
transform: none | <transform-function>[<transform-fuction>
上一篇文章      下一篇文章      查看所有文章
2016-04-01 16:48:17  
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 人民的名义 人民的名义在线看 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图
中国文化英文 多播视频 装修知识库
2017-4-30 15:06:07
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --