用dw制作一个网站,wordpress自己写特效,免费空间+网站空间+虚拟主机,seo网站系统W3school在线教程 html5css3基本不兼容ie678。
大标题小节一、html51. html4 和 html5 的区别2. 标签语义化3. 智能表单的使用和规范二、css3选择器1. 属性选择器2. 结构性伪类选择器#xff08;层级选择器/符#xff09;3. UI状态性伪类选择器4. 相邻兄弟选择器5. 其他选择…W3school在线教程 html5css3基本不兼容ie678。
大标题小节一、html51. html4 和 html5 的区别2. 标签语义化3. 智能表单的使用和规范二、css3选择器1. 属性选择器2. 结构性伪类选择器层级选择器/符3. UI状态性伪类选择器4. 相邻兄弟选择器5. 其他选择器三、文字相关属性1. 兼容前缀2. 渐进增强和优雅降级3. 文字相关属性阴影、换行、单词大小写、颜色值、盒子阴影、边框背景、圆角一、html5
1. html4 和 html5 的区别
1写法更简单 2标签语义化 3语法更宽松
!DOCTYPE html
html langen
headmeta charsetUTF-8 /titleDocument/title
/head
body
/body
/html比如生成的 meta 标签中 /是没有的其实原本是有的因为 html5 语法宽松可以省略除此之外属性值不加双引号也是 html5 所允许的。但是作为一个严谨的程序员最好不要省略。
4多设备跨平台 5自适应网页设计 6兼容性 html4css2.0 兼容 ie6/7/8html5不能兼容ie6/7。 2. 标签语义化
语义化就是口头化信息直白更好地理解 1新增的语义化标签 ① 常用的语义化标签
header头标签nav导航标签section表示文档的结构/栏目footer页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等article文章标签aside侧边栏导航mark凸显文字行元素main主要部分不支持ie6/7/8
② 其他
figure用来表示网页上一块独立内容figcaption用来表示 figure 的标题作为第一个或最后一个元素常与 figure 配合使用output显示表单元素结果datalist提供表单选项列表等。改良的 ol start3
!-- 1. 可以自定义编号 start
2. 可以按编号反向排序 reversed
3. 可以使用typeA
类型值可以是A大写字母a小写字母I大写罗马数字 i小写罗马数字1阿拉伯数字。--
ol start3liaaaa/liliaaaa/liliaaaa/li
/ol③ 配合 js
定义视频这里的视频格式只能是*.mp4、*.ogg 、*.webMviedo 、定义音频audio 、画布用来替换 热点mapcanvas
④ 删除的 Html 标签部分浏览器支持marquee applet bgsound blink
⑤ 完全抛弃rb acronym dir isindex listing xmp nextid
2语义化标签的优点
为了在没有CSS的情况下页面也能呈现出很好地内容结构、代码结构比 div 标签有更加丰富的含义方便开发与维护方便搜索引擎能识别页面结构有利于SEO方便其他设备解析如移动设备、盲人阅读器等有利于合作遵守W3C标准 3. 智能表单的使用和规范
input type? / 有兼容问题. 1地址栏input typeurl /输入无效地址会自动提示
2输入数字input typenumber value2 min1 max10 step1/step 跳跃数min 最小值max 最大值
3输入电子邮件input typeemail requiredrequired multiplemultiple/required 判断是否为空multiple 可用逗号分隔邮件地址
4拖动 input typerange step1 max20 min1/
5搜索 input typesearch /
6颜色 input typecolor value#ff0000/value 的值必须为6位
7电话 input typetel /
8日期 input typedate /
9月份 input typemonth /
10XX年第X周 input typeweek /
11时间 input typetime /
12日期时间 input typedatetime-local /
查看更多… 二、css3选择器
只支持ie9及ie9部分兼容ie8。 CSS即层叠样式表Cascading StyleSheets用于控制网页的样式和布局。css 概念 CSS3 是最新的 CSS 标准。css3 是 css 技术的升级css3 语言开发时朝着 模块化 发展的模块包括 盒子模型列表模块超链接方式语言模块背景和边框文字特效多栏布局 等css3 完全向后兼容ie8以上浏览器通常支持 css2。 选择器选择器是 css3 中的一个重要内容使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。
1. 属性选择器
1[属性A] 选择当前页面所有含 属性A 的元素权重 10
2[属性B属性值b] 选择所有 属性B属性值b 的元素
① 属性值为数字或特殊字符必须加双引号否则不生效。即 [属性B1]常用于表单元素中当属性值有多个时此方法不适用应该使用下面这种。② 加双引号其实是为了让代码规则符合 w3c 规范。
3[classa b] 选择 classa b的元素 值为多个时必须全部写上且要加双引号
4[class~a] 选择包含 单词为 a 的元素
style[class~a]{background:#f9f;}
style/
bodydiv titlediv1 classa1/div !-- 正确 --div classa ba b/div !-- 正确 --div classaa baa b/divdiv classabab/divdiv classaa abaa ab/divdiv classaa aaa a/div !-- 正确 --
/body5[class|a]选择要么为单词 a 要么 a- 开头的完整单词的元素 注意div classa b/div //错误这也就意味着class里面只有一个单词没有空格分隔的两个及两个以上的单词。
6[class^a]选择所有 a 开头的元素 注意div classb a/div //错误
7[class$a]选择所有 a 结尾的元素 注意div classb a/div //正确
8[class*a]选择所有带 a 的元素 2. 结构性伪类选择器层级选择器/符 ① 不常用 1:root{}选择根目录 :root{background:#ff0} 相当于给 html 标签设置样式伪类权重为 10属性选择器权重为 01 2:not(元素A){}给 除了元素A 以外的所有元素设置样式 例如body :not(p){background:#000}给 body标签内除 元素p 以外的其他所有元素设置样式。 3元素B:empty{}选择 元素B内容为空 的元素设置样式换行和空格不算内容为空 4:target{}给 当前锚点选中的元素 设置样式锚点切换时有坑常用 js 去做而不用伪类 ② 常用 1元素A:first-child{}选择第一个子元素元素A作为父元素中的第一个子元素 2元素B:last-child{}选择最后一个子元素元素B作为父元素中的最后一个子元素 3元素C:nth-child(n){}n 为数字选择第n个子元素n 从 1 开始元素C作为它父元素中的第n个子元素这里是指元素C在父元素中的顺序选择在父元素中序号为n且元素为C 4元素D:nth-last-child(n){}n 为数字选择倒数第n 个子元素 5元素E:nth-child(odd){}选择奇数个子元素从第 1 个开始 6元素F:nth-child(even){}选择偶数个子元素从第 2 个开始 7元素G:nth-of-type(n){}有关这个元素的第n个子元素元素G是父元素中的第n个子元素这里是指元素G的个数选择在父元素中有关元素G的第n个元素G 8元素H:nth-last-of-type(2){}有关这个元素的倒数第二个子元素 9元素I:only-child{}父元素中只有 元素I元素I 是唯一一个子元素才有效 !-- :nth-child(n){} 和 :nth-of-type(n){} 的区别 --
style /*选中的是dl中的第1个dd。dl中的dd,并且这个dd作为dl中的第二个子元素*/dl.dl3 dd:nth-child(2){background:#00f;}/*选中的是dl中的第2个dd。dl中的dd,这个dd是父元素中的第二个dd*/dl.dl3 dd:nth-of-type(2){background:#9f9;}
/style
dl classdl3dtdt2/dtddd1/ddddd2/ddddd3/ddddd4/dd
/dl③ n 元算法这里的 n 是从 0 开始计算无限大的数字 1元素A:nth-child(n2){}匹配从第二个元素开始包括2 2元素B:nth-child(2n){}匹配偶数 3元素B:nth-child(2n1){}匹配奇数 3. UI状态性伪类选择器
1input:focus{}元素获取焦点时的状态
2input:enabled{}元素可用时的状态没有 disabled 属性时就是可用状态
3input:disabled{}元素禁用时的状态
!-- 禁用状态 html4的写法 --
input typetext name disableddisabled/!-- 禁用状态 html5的写法 --
input typetext name disabled/4input:read-only{}元素只读时的状态 只读状态不能编辑但可以复制禁用状态不能编辑也不能复制
!-- 只读状态 html4的写法 --
input typetext name readonlyreadonly/5input:read-write{}元素非只读时的状态
6input:checked{}元素被选中时的状态
7input:default{}元素默认有 checked 时的状态
8input:indeterminate{}元素都没选中过的状态只支持Google 即给元素初始状态时添加样式。若元素状态发生改变样式则不生效了刷新时才会恢复样式。
9input::selection{}元素被选取的状态也可以设置选取文字时的样式。这个选择器只能使用 color 和 background 这两个属性
4. 相邻兄弟选择器
1lili{}选择 与 li 指“”前的 li相邻的后面的 li“”后的 li 添加样式 例如h3p{}给与 h3 相邻的后面的 p标签 添加样式且 p标签 在 h3标签 的后面。若 h3标签 前面有 p标签这个 p标签 的样式不生效。
stylediv{display: flex;}ul.one lili{color:#f00}ul.two .firstli{color:#f00;}
/style
div ul classoneli1/lili2/lili3/lili4/lili5/li/ulul classtwoli classfirst1/lili2/lili3/lili4/lili5/li/ul
/div需要注意的是这两个标签必须是相邻的。
2span~p{}选择 span标签 之后所有的同级 p 元素 5. 其他
ulli{} 选择 ul 的亲儿子 三、文字相关属性
1. 兼容前缀
1-o- Presto 2-ms- Trident 3-moz- Gecko 4-webkit- Webkit 很久以前浏览器前缀 css3 和正常 css3 都不支持 不久之前浏览器只支持前缀 css3 不支持正常 css3; 现在有些浏览器既支持前缀 css3 又支持正常 css3; 未来所有浏览器不支持前缀 css3 仅支持正常 css3; 主要的需要添加浏览器引擎前缀(vendor-prefix)的属性包括
keyframes移动和变换属性(transition-property, transition-duration, transition-timing-function, transition-delay)动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay)border-radiusbox-shadowbackface-visibilitycolumn 属性flex 属性perspective 属性 2. 渐进增强和优雅降级
1渐进增强 一开始就针对低版本浏览器进行构建页面到高版本的变化 渐进增强progressive enhancement 针对低版本浏览器进行构建页面保证最基本的功能然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。从被所有浏览器支持的基本功能开始逐步地添加那些只有新式浏览器才支持的功能向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时它们会自动地呈现出来并发挥作用。 !-- 渐进增强写法 --
style
.transition{-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all .5s;
}
/style2优雅降级 一开始就构建网站针对高版本向低版本进行兼容 优雅降级graceful degradation 一开始就构建完整的功能然后再针对低版本浏览器进行兼容。Web站点在所有新式浏览器中都能正常工作如果用户使用的是老式浏览器则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题针对不同版本的IE的hack实践过优雅降级了为那些无法支持功能的浏览器增加候选方案使之在旧式浏览器上以某种形式降级体验却不至于完全失效。 !-- 优雅降级写法 --
style
.transition{ transition: all .5s;-o-transition: all .5s; -moz-transition: all .5s;-webkit-transition: all .5s;
}
/style3渐进增强和优雅降级的区别
① 优雅降级是从复杂的现状开始并试图减少用户体验的供给而渐进增强则是从一个非常基础的、能够起作用的版本开始并不断扩充以适应未来环境的需要。② 渐进增强的适用场景渐进增强观点认为应该关注于内容本身。内容是我们建立网站的诱因有的网站展示它有的则收集它有的寻求、有的操作还有的网站甚至包含以上的种种但相同点是他们全都涉及到内容这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持Graded Browser Support)“策略的原因所在。③ 优雅降级的适用场景优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段并把测试对象限定为主流浏览器如IE、Mozilla等的前一个版本。 在这种设计范例下旧版的浏览器被认为仅能提供“简陋却无妨poor,but passable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点因此除了修复较大的错误之外其它的差异将被直接忽略。 3. 文字相关属性
1文本阴影属性可以继承 text-shadow: x坐标 y坐标 阴影大小 颜色;
style
/*多个阴影用 逗号, 隔开*/
span{text-shadow:1px 1px 1px #f00,2px 2px 1px #f80,3px 3px 1px #ff0;
}
/style2单词换行word-bread:
nomal默认keep-all只能在半角空格或连接字符处换行bread-all;宽度不够分割单词换行
3单词换行word-wrap:
normal默认break-word;宽度不够整个单词换行
4text-transform:
uppercase单词都大写lowercase单词都小写capitalize每个单词首字母大写
5显示服务端字体font-face{}
style
font-face{/*创建字体*/font-family:WebFont;/*创建字体名*/src:url(fonts/Fontin_Sans_B_45b.otf);/*链接字体库*/format(opentype);
}
p:nth-child(1){font-family:WebFont;} /*使用*/
/styleformat声明文件类型用来做兼容的 opentype *.otftruetype *.ttf *eot格式文件不需要声明 format
6颜色值 rgba(十六进制,十六进制,十六进制,透明度0-1) 只让背景透明 不让子元素透明。 rgba中 rred、ggreen、 bblue 、 aalpha透明度 补充 hsla(色调0-100,饱和度0-100%,亮度0-100%,透明度0-1);
名称opacityrgba区别有 opacity 属性的所有后代元素都会继承 opacity 属性而RGBA后代元素不会继承不透明属性。
7盒子阴影 box-shadow:x轴 y轴 模糊度 颜色 inset; inset设置内阴影。
style
/*多个阴影用 逗号, 隔开*/
div{box-shadow: 0px 0px 5px #f00,0px 0px 10px #f80,0px 0px 15px #ff0;
}
/style8与背景有关 ① background-clip: border-box / padding-box / content-box;设置背景显示区域 ② background-origin: border-box / padding-box / content-box;指定绘制背景图像时的起点 ③ background-size: 大小或百分比 / cover / contain;指定背景中图像的尺寸
cover 按比例撑满背景 contain 刚好填满一遍大小的尺寸
④ background-break
9与边框相关 ① border-color边框颜色 ② border-image图片边框。
url()图片路径上 右 下 左4个方向截取背景图片的宽/高度注意这里是数值不需要写px/宽度pxborder的宽度平铺方式stretch除了不相交部分其他拉升round除不相交部分其他平铺
例如border-image: url(../images/border.png) 25 25 25 25/15px round; 25 25 25 25是指在图片 border.png 的上方截取 25px右边截取25px下边截取25px左边截取25px。具体案例 ③ border-radius圆角属性。 类似 margin 的值想象 将方块向右旋转45°。不支持 ie8。
两个值border-radius: 左上右下 右上左下;三个值border-radius: 左上 右上左下 右下;四个值border-radius: 左上 右上 右下 左下;border-radius: 宽和高值较小的的一半px;胶囊型border-radius: 10px/10px;左边设置水平半径右边设置垂直半径
stylediv {height: 100px; margin-bottom: 20px;}div.one {width: 200px;background: #f00;border-radius:50px;}div.two {width: 200px;background: #f80;border-radius:100px 100px 0 0;}div.three {width: 200px;background: #ff0;border-radius:50%;}div.four {width: 100px;background: #0f0;border-radius:10px/50%;}
/style
body div classone/div!-- 胶囊 --div classtwo/div!-- 半圆 --div classthree/div!-- 椭圆 --div classfour/div!-- 胶囊 --
/body
