html5+css3网页前端开发基础Word文档格式.docx
- 文档编号:19213467
- 上传时间:2023-01-04
- 格式:DOCX
- 页数:18
- 大小:3.67MB
html5+css3网页前端开发基础Word文档格式.docx
《html5+css3网页前端开发基础Word文档格式.docx》由会员分享,可在线阅读,更多相关《html5+css3网页前端开发基础Word文档格式.docx(18页珍藏版)》请在冰豆网上搜索。
3.脚本和链接无需type
在HTML4或XHTML中,你需要用下面的几行代码来给你的网页添加CSS和JavaScript文件。
linkrel="
stylesheet"
href="
path/to/stylesheet.css"
type="
text/css"
/>
scriptsrc="
path/to/script.js"
text/javascript"
.<
/.script>
而在HTML5中,你不再需要指定类型属性。
因此,代码可以简化如下:
4.新的语义标签
普通的页面的布局方式:
HTML5新标签带来的新的布局:
1.开发人员更直观的了解页面每一部分的功能。
2.搜索引擎以及屏幕阅读器也能更方便地识别页面每一部分的功能。
注:
低版本ie浏览器兼容性
IE9以下版本浏览器兼容HTML5的方法,使用XX静态资源的html5shiv包:
--[ifltIE9]>
[endif]-->
载入后,初始化新标签的CSS,转为块状元素:
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:
block}
1.区块标签
header:
一般被放置在页面的顶部,或者页面中某个区块元素的顶部。
在一个文档中,可以定义多个<
header>
标签,它不局限于写在网页头部,也可以写在网页内容里面,可以为body、article、section和aside增加<
标签。
footer:
一般被放置在页面的底部,或者页面中某个区块元素的底部。
nav:
定义一个页面的导航链接区域。
搜索引擎或屏幕阅读器会根据nav标签确定网站内容,所以并不是任何一组超链接都适合放在nav标签中。
aside:
包含的内容不是页面的主要内容,具有独立性,是对页面内容的补充。
(侧边栏广告,友情链接,文章引语等)
article:
代表一个独立的、完整的相关内容块,可独立于页面其它内容使用。
例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等等。
section:
定义一个主题性的内容分组,里面可以有头部(header)和尾部(footer)。
类似于div标签,但是div标签应用更广泛,只要想为一个区域定义一个样式,就可以使用。
section包含的内容是一个明确的主题。
2.内容分组标签
figure:
规定独立的流内容(图像、图表、照片、代码等等)。
figcaption:
定义figure标签的标题。
figcaption标签应该被置于figure标签的第一个或最后一个子元素的位置。
以前图片列表(图片+标题或者图片+标题+简单描述)的常规写法:
li>
p>
title<
/p>
imgsrc="
/li>
在html5中:
figure>
figcaption>
AviewofthepulpitrockinNorway.<
/figcaption>
shanghai_lupu_bridge.jpg"
width="
350"
height="
234"
/figure>
3.文本级别标签
time:
表示一个日期,或者一个时间,或者同时表示一个时期和时间值。
方便搜索引擎以及屏幕阅读器等设备正确地识别日期和时间值。
datetime属性规定日期或时间。
在该元素的内容中未指定日期或时间时,使用该属性。
timedatetime="
YYYY-MM-DDThh:
mm:
ssTZD"
i:
HTML4:
修饰文字样式的,将文字显示为斜体文本
HTML5:
表示强调不同的情绪或声音,也可以表示技术术语、生物分类、一个想法等
i>
家猫<
/i>
是一种可爱的动物。
Thankgod<
项目终于按时交付了。
我希望这次可以成功<
,他想。
b:
修饰文字样式的,将文字显示为粗体文本
表示文档中的关键字、商品名称等
em:
用于强调的重点内容,显示为斜体文本
strong:
用于非常重要、严重性的内容,显示为粗体文本
如果只是单纯想把文字的样式显示为斜体或粗体,不要使用这几个语义标签,用css去定义文字样式。
5.新的Input类型
1.email类型用于应该包含e-mail地址的输入域。
inputtype="
email"
name="
user_email"
2.url类型用于应该包含URL地址的输入域。
url"
user_url"
3.number类型用于应该包含数值的输入域。
number"
points"
min="
1"
max="
10"
4.range类型用于应该包含一定范围内数字值的输入域。
(显示为滑动条)
range"
5.拥有多个可供选取日期和时间的新输入类型:
date-选取日、月、年
month-选取月、年
week-选取周和年
time-选取时间(小时和分钟)
datetime-选取时间、日、月、年(UTC时间)
datetime-local-选取时间、日、月、年(本地时间)
date"
user_date"
6.新的表单元素
datalist:
元素规定输入域的选项列表,规定form或input域应该拥有自动完成功能。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
inputlist="
browsers"
datalistid="
<
optionvalue="
InternetExplorer"
Firefox"
Chrome"
Opera"
Safari"
/datalist>
IE9和更早版本的IE浏览器以及Safari不支持<
datalist>
标签。
7.新的表单属性
HTML5验证
1.placeholder
2.autofocus
3.autocomplete
4.multiple
5.form
6.formaction\formmethod\formenctype\formtargert
8.全局属性
accesskey
tabindex
9.视频
HTML5规定了一种通过video元素来包含视频的标准方法,可以不用通过插件(比如Flash)来显示,可以控制播放/暂停以及调整尺寸等。
videowidth="
320"
240"
controls="
controls"
autoplay="
autoplay"
sourcesrc="
/i/movie.ogg"
video/ogg"
/i/movie.mp4"
video/mp4"
/i/movie.webm"
video/webm"
objectdata="
embedwidth="
src="
/i/movie.swf"
/object>
/video>
HTML5<
video>
元素会尝试播放以mp4、ogg或webm格式中的一种来播放视频。
如果均失败,则回退到<
embed>
元素(插件)。
10.音频
HTML5规定了一种通过audio元素来包含音频的标准方法,audio元素能够播放声音文件或者音频流,可以不用通过插件(比如Flash)来显示。
可以控制播放、暂停和音量等
audiocontrols="
100"
song.mp3"
audio/mp3"
song.ogg"
audio/ogg"
embedheight="
/audio>
元素会尝试播放以mp3或ogg来播放音频。
如果失败,代码将回退尝试<
11.Canvas与SVG
Canvas
∙依赖分辨率
∙不支持事件处理器
∙弱的文本渲染能力
∙能够以.png或.jpg格式保存结果图像
∙最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
∙不依赖分辨率
∙支持事件处理器
∙最适合带有大型渲染区域的应用程序(比如谷歌地图)
∙复杂度高会减慢渲染速度(任何过度使用DOM的应用都不快)
∙不适合游戏应用
12.Web存储
HTML5存储提供了一种方式让网站能够把信息存储到你本地的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据,并再以后需要的时候进行获取。
这个概念和cookie相似,区别是它是为了更大容量存储设计的。
Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。
提供了两种在客户端存储数据的新方法:
1.sessionStorage-针对一个session的数据存储,当用户关闭浏览器窗口后,数据会被删除。
说明:
1.cookie的存储限制在了4k之内,相比来说,sessionstorage有了更大的存储空间,但至于具体多大,这要参照浏览器厂商的具体实现。
2.cookie有一个机制,就是在每次客户端请求服务器的时候都会将cookie发送给服务器,这无疑会做很多不必要的操作,因为并不是每次请求服务器都需要cookie的所有信息,而sessionstorage很好的解决了这个问题,它不是采取自动发送的方式,这样就减少了不必要的工作。
3.通过sessionStorage所存储数据的生命周期,和Session类似,关闭浏览器(或标签页)后数据就不存在了。
但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在。
4.sessionstorage每个窗口的值都是独立的(每个窗口都有自己的数据),它的数据会随着窗口的关闭而消失,窗口间的sessionStorage也是不可以共享的。
5.setItem中的key、value使用的是字符串的形式进行存储的。
也就是说如果有如下的代码:
setItem(‘count’,1);
通过getItem(‘count’)+5得到的将不是预期的6(整数),而是’16’(字符串)。
6.再次使用setItem设置已经存在的key的value时,新的值将替代旧的值。
7.当存储中的数据发生改变时,会触发相应的事件(window.onstorage),但目前各浏览器对此事件的支持并不完善,暂时可以忽略。
2.localStorage-没有时间限制的数据存储,第二天、第二周或下一年之后,数据依然可用。
1.localstorage把只把数据存储在了客户端使用,不会发送的服务器上(除非你故意这样做)。
2.而且对于某一个域下来说,localstorage是共享的(多个窗口共享一个“数据库”)。
3.localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
13.CSS3圆角
border-radius
14.CSS3背景
background-size指定背景图片的大小。
CSS3以前,背景图片大小由图像的实际大小决定。
这个属性允许我们为背景图片定义一个合适的尺寸,让我们重新在不同的环境中指定背景图片的大小。
您可以指定像素或百分比大小。
background-size:
length|percentage|cover|contain;
cover和contain不同之处在于:
在no-repeat情况下,如果容器宽高比与图片宽高比不同:
原图
cover:
图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被截掉;
contain:
图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域;
解决ie6,ie7,ie8下兼容问题:
可以使用滤镜效果,在样式中加入:
filter:
progid:
DXImageTransform.Microsoft.AlphaImageLoader(src='
../images/login_and_reset/login_bg.jpg'
sizingMethod='
scale'
);
问题1:
只能background-size:
100%,不能直接指定任意大小background-size。
问题2:
里面的内容无法选中。
(position:
relative;
)
15.CSS3不透明度
opacity:
设置元素的不透明度。
一个元素的opacity属性会应用到这个元素本身以及这个元素所有的子孙元素上。
注意:
IE8和早期版本不支持opacity属性,可以使用另一种过滤器属性,像:
Alpha(opacity=50)
16.CSS3盒子尺寸
box-sizing属性允许您以确切的方式定义适应某个区域的具体内容。
content-box(默认值):
宽度和高度只包含内容区域
border-box:
宽度和高度只包含内容区域、padding和border
17.CSS3文本属性
1.text-shadow
文本阴影:
text-shadow:
水平阴影的位置垂直阴影的位置模糊距离颜色;
2.box-shadow
盒子阴影:
box-shadow:
水平阴影的位置垂直阴影的位置阴影的大小模糊距离颜色inset
3.text-overflow(文本溢出显示省略符号来代表被修剪的文本)
4.3.word-break和word-wrap(超长单词换行)
引用样式后:
18.CSS3颜色属性
普通颜色表示法:
1.关键字颜色:
red
2.十六进制颜色:
#FF0000
3.RGB颜色:
rgb(255,0,0)
CSS3新增颜色表示法:
1.RGBa颜色
2.HSL颜色
3.HSLa颜色
a(alpha)表示颜色的透明度
HSL颜色
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html5 css3 网页 前端 开发 基础