交互响应式HTML5[第二课]
交互响应式HTML5
-
固定宽度设计：采用自适应方式
- -下面的横线用来引出操作方式的功能响应式网站前期复杂后期轻松
- width=device-width(宽度等于设备屏幕的宽度)
- initial-scale=1.0(初始缩放比例)
- minimum-scale=0.5(最小缩放比例)
- maximum-scale=2.0(最大缩放比例)
- user-scalable=yes(允许用户缩放)
- 搜索优化，响应式设计可以更好的让谷歌爬虫获取页面url，从而获取更好的排名。
响应式内容
- 内容策略是规划管理内容方法（文字，图像，视频，音频），关系到网站运作。
- 内容整理，不要企图把所有的内容全部放到网站上。
- 维护需要对网站内容组织，整理，更新，检查链接等等一切的维护。
- 精简内容，把内容分类整理好，通过导航的方式，引导用户进入观看。
HTML文档结构
- head结构
- body结构
html文档标签
- 格式标签
- <h1>...<h6>标题标签
位置标签,align= - 注释标签：<!--注释开始标签 -->注释结束标签
- 元信息标签：<meta>,页面隐藏信息，名称，关键字，作者等。
- <meta name="author content="作者的姓名">,基本结构，name="" content=""
- 掌握基底标签：<base>
- 限制搜索标签： <meta name="robots" content="搜索方式">
- 设置网页定时跳转：<meta http-equiv="refresh content="跳转时间；url=链接地址">
- 设置有效期：<meta http-equiv="expires content="web,119 February 2020 10:00 GMT ">,错误
- 禁止从缓存中调用<meta http-equiv="cache-control"content="no-cache">
- 删除过期的cookie:<meta http-equiv="set-cookie" content="Web, 14 september 2020 16:00:00 GMT"> 强制打开新窗口：<meta http-equiv="windows-target" content="_top"> 设置网页过渡效果：<meta http-equiv="过渡事件" content="revealtrans(duration=过渡效果持续时间，transition=过渡方式)"> 过渡效果：
- 0:盒状收缩 - 1：盒状放射 - 2：圆形收缩 - 3：圆形放射 - 4：由下往上 - 5：由上往下 - 6：从左至右 - 7：从右至左 - 8：垂直百叶窗 - 9：水平百叶窗 - 10：水平格状百叶窗 - 11：垂直格状百叶窗 - 12：随意溶解 - 13：从左右两端向中间展开 - 14：从中间向左右两端展开 - 15：从上下两端向中间展开 - 16：从中间向上下两端展开 - 17：从右上角向左下角展开 - 18：从右下角向左上角展开 - 19：从左上角向右下角展开 - 20：从左下角丗右上角展开 - 21：水平线展开 - 22：垂直线展开 - 23：随机产生一种过渡方式 - 以上内容实测IE6版本，IE9以上版本无法运行 - 设定建立网站日期 <meta name="build" content="网站建立日期">
- 设定网页版权信息 <meta name="copyright" content="书友汇在线">
- 设定联系人邮箱 <meta name="reply-to" content="邮箱地址">
- 基底网址标记<base>,运用基底设置绝对路径，那么页面内容就可以设置相对路径 头部定义一个基底网址：<base href="https://www.sina.com.cn\"> 页面中可以把基底部分用..代替+其他部分网址
使用HTML实体
页面符号 输入编码 < 输入：< > 输入：> & 输入：& § 输入：§ © 输入：© ® 输入：® TM 输入：™ ## 页面的主体标记 - text:设定页面文字
- \<body text="#0000ff"> :设定页面文字颜色 - bgcolor:设定页面背景文字
- \<body bgcolor="#0000ff" text="FFFFFF">设定页面颜色和文字颜色 - background:设定页面的背景图像
- /
- 定义背景不重复显示的性质：1、head部加style定义类型 2、body{background:no-repeat}
- 定义背景x轴重复显示的性质：1、head部加style定义类型 2、body{background:repeat-x}
- bgproperties:设定页面背景图像为固定，不随页面滚动
- 不随鼠标移动而移动
- link:设定页面默认链接颜色
- link功能1：
- link功能2：对样式表的外链功能
- head标签内，
- link功能3：对标签快捷图新链接
- alink:设定鼠标正在单击时的链接颜色
- vlink:设定访问过后的颜色
- <body link="颜色值" alink="颜色值" vlink="颜色值">
- topmargin:设定页面的上边距
- leftmargin:设定页面的左边距
自适应图片
- 1、建立一个css扩展的样式表
- 2、加入代码：img{max-width:100%;}
媒体查询
- 1、建立一个css扩展的样式表
- 2、加入代码：img{max-width:100%;}
- 3、语法：media="screen"屏幕响应
- media="print"打印预览响应
- media="screen and (min-width:880px)"屏幕宽度条件响应
- <link rel="stylesheet" type="text/css" media="screen" href="screenstyles.css"
- 上句含义：当媒体是有屏幕的，调用样式表
- <link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css"/>
- 上句含义，媒体是有屏幕并且是垂直朝向的，调用样式表 媒体查询属性：
- width:视口宽度
- height:视口宽度
- device-width:渲染表面宽度（设备屏幕宽度)注：新版放弃
- device-height:渲染表面高度（设备屏幕调试)注：新版放弃
- aspect-ratio:视口宽度比。aspect-ratio:16/9 意16:9宽屏
- color:颜色组分的位深。比如min-color:16表示设备至少支持16位深。
- color-index:设备颜色查找表中的条目数，值必须是正的数值。
- monochrome:单色帧缓冲中每个像素的位数值必须为正整数，monochrome:2
- resolution:屏幕或打印分辨率，比如min-resolution:300dpi
- scan:针对电视逐行扫描（progressive)和隔行扫描（interlace).
- scan:progressive判断720p HD TV
- scan:interlace 判断 1080i HD TV
- @import url("tiny.css") screen and (min-width:200px) and (maxwidth:360px);
- 含义：视口介于200和360像素之间才会被应用。
- meta标签：
- <meta name="viewport" content="initial-scale=2.0,width=device-width"/>
- 含义：针对视口，内容放大为原来的2倍，宽度和设备宽度相同。
- <meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5" /> 含义：最大放大为3倍，最小缩小为原来的二分之一。
浙公网安备 33010602011771号