HTML+CSS前端学习
HTML
相关示例及代码：D:\XML HTML+CSS+JS\day01 HTML和day02 HTML CSS
1、什么是HTML
是用来描述网页的一种语言 ! (超文本标记语言)
HTML使用的是标签来描述网页
1.1 HTMLCSS JavaScript的关系
HTML 名词
CSS 形容词
JS 动词
1.2 HTML标签是什么
与XML中标签基本一致 ,
由w3c组织定义的一系列的标签名称 !
XHTML1.0
1.3格式
文档声明:
根节点:
网页头部
网页标题
网页主体部分
哈哈哈哈哈哈哈哈, 第一个网页
1.4 HTML存储的文件格式
文件后缀可以是: .html 或者 .htm
2、网页的两部分介绍
1. 头部信息: head
用来描述网页:
- title 设置标题
- meta 用来描述网页的编码, 内容
- style 用来定义样式
- script 脚本
2. 网页主体: body
属于网页的内容部分, 我们一般会在这里添加很多其他的元素, 来丰富我们的网页 .
2.1HTML元素与属性:
HTML元素是允许嵌套不允许交叉的!
body元素 bgcolor background text
常用属性:
1. bgcolor : 用于指定网页主体的背景颜色
取值分为两种 1. 采用#RRGGBB调色 2. 颜色单词,例如red
2. background: 用于指定HTML主体的背景图片
取值: 可以是一个网络图片, 也可以是本地相对路径的图片
3. text : 用于指定网页中主体的文本颜色
取值分为两种 1. 采用#RRGGBB调色 2. 颜色单词,例如red
标题h1-->h6
文本标题标签:
1
级标题
2
级标题
3
级标题
4
级标题
5
级标题
6
级标题
在设计的角度上, 一般单个网页中, 不建议出现一次以上一级标题 !
3、标签
文字格式化标签 (html5时, 不再推荐使用)
用来修饰文字的一系列标签:
加粗:这里文本是加粗的
倾斜:这里文本是斜体的
删除线:这里的文本是带有删除线的
下划线:这里的文本是带有下划线的
练习:
编写一段文本, 实现它的效果为: 加粗+斜体+删除线+下划线
加粗+斜体+删除线+下划线
格式符号标签 br hr p
: 换行
: 分割线
文字段落标签
: 表示空格
超级链接标签a
超级链接标记 , 指向一个网址, 当点击这个超级链接时 , 浏览器会发生跳转 !
- 跳转到普通网页:
- 打开邮件发送
例如:
- 使用新窗口打开网页
添加target属性=_blank 即可
例如:
超链接锚点 a name
通过a标签, 给网页添加锚点, 然后在跳转至此网页时 , 可以直接跳到锚点位置 !
步骤
1. 在被跳转的位置 , 加入a元素 , 并给a元素添加name属性(创建锚点, 并起名称)
2. 在跳转位置的超链接中编写href="页面名称#锚点名称";
如果是在当前页面编写锚点的跳转,href="#锚点名称"
案例:
网页1:
商城
网页头部
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
网页第一部分内容
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
网页第二部分内容
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
元素的分类:
块元素 : 单独占据一行 , 可以控制自身的宽高 比如: p元素, div元素
行内元素 : 在一行内, 从左至右顺序排列 ,无法调整自身宽高 , 它们的宽高, 由自己的内容决定 , 比如: b元素,i元素,del元素,a元素,span元素等等
行内块元素 , 在一行内, 从左至右顺序排列, 可以调整自身宽高 !
图片标签img:
属性:
- src : 一个url , 图片的地址(网络地址,本地绝对地址,本地相对地址)
- alt : 当图片出现问题, 无法加载时, 用来替换的错误提示文本
- width: 指定图片的宽度
- height: 指定图片的高度
我们一般不建议, 同时指定宽度与高度 ! 图片会呈现一个拉伸的效果
我们建议只指定宽度, 因为在宽度调整时, 高度会自动缩放 / 我们建议只指定高度, 因为在高度调整时, 宽度会自动缩放
案例:
这是一个美女图片"src="images/xiyangyang.jpg">
长度单位 px
像素
音频播放audio
注意: 如果一个音频播放 , 没有指定控制器的话, 是不存在任何视图的 !
属性:
- src : 一个url , 音频的地址(网络地址,本地相对地址)
- autoplay: 是否自动播放 , 这是一个html5的boolean属性 ,这个属性只要出现, 则表示true
- controls: boolean类型属性, 是否添加控制器 , 这个属性只要出现, 则表示true
外地兄弟: http://home.itdage.cn:8090/mp3/sf.mp3
北京兄弟: http://192.168.13.224/mp3/sf.mp3
案例:
音频播放
音频播放video
注意: 如果一个音频播放 , 没有指定控制器的话, 是不存在任何视图的 !
属性:
- src : 一个url , 视频的地址(网络地址,本地相对地址)
- autoplay: 是否自动播放 , 这是一个html5的boolean属性 ,这个属性只要出现, 则表示true
- controls: boolean类型属性, 是否添加控制器 , 这个属性只要出现, 则表示true
- width: 宽度px
- height: 高度px
外地兄弟: http://home.itdage.cn:8090/mp4/gnzw.mp4
北京兄弟: http://192.168.13.224/mp4/gnzw.mp4
案例:
视频播放
媒体播放embed
属性:
- src : 一个url , 视频的地址(网络地址,本地相对地址)
外地兄弟: http://home.itdage.cn:8090/shiba.swf
北京兄弟: http://192.168.13.224/shiba.swf
案例:
flash播放
列表标签ol li ul
- 有序列表ol
列表中使用li标签来表示一列 !
属性:
- start=数字 , 表示有序列表编号的起始值
- type: 编号的文字类型: 1(数字)/a(小写字母)/A(大写字母)/i(小写罗马数字)/I(大写罗马数字)
- 无序列表ul
列表中使用li标签来表示一列 !
属性:
- type: 无序列表图标的类型 disc /square / circle
表格table tr td th
组成表格必须的标签:
1. 表格本身 table标签
2. 表格中的行元素 tr标签
3. 表格中的列元素 td标签
4. 表格中的列元素 th表头
5. 表格主体(正文) 可以忽略的标签: th : 表示表头 table与tr与td的关系 : table是表格, 包含多行记录 , 每一行又包含很多列数据 一个table可以有多个tr子元素, 一个tr可以存在多个td子元素 属性: - width: 指定table宽度 , 也可以指定td宽度 - height: 指定table或td的高度, - border: 边框的大小, 指定数字 - bordercolor: 指定表格边框的颜色 - bgcolor: 指定table的背景颜色或者 td的背景颜色 - background: 指定table的背景图片或者 td的背景图片 - align: （左右居中）"center"居中HTML5 不支持 合并单元格: 在td上 , 指定单个单元格跨越的横向宽度:colspan=数字 在td上 , 指定单个单元格跨越的垂直宽度: rowspan=数字 强调区别href url src alt: 标签之间是可以进行嵌套的 例如: 超链接 图片: 通过嵌套, 可以完成图片超链接 div{ url(统一资源定位器)，在前端中，只出现在CSS中，一般用来设置背景或图片; background-image:url(“”); list-style-image:url(“”); } src暂时只在HTML中的音频视频图片（多媒体）中出现 相对地址的使用 绝对地址: d://.... 相对地址: 基于当前文件所在文件夹的相对路径 例如: 当前编写代码的html文件路径如下: c://a/b/1.html 在html出现如下路径 : images/a.jpg : 表示的是: c://a/b/images/a.jpg ../images/a.jpg: 表示: (../相对父目录) : c://a/images/a.jpg 4、表单标签form(action、enctype、method=post/get) 作用: 表单用于显示和收集信息 , 并将信息通过http请求传递给服务器 ---------------------------- 常见的表单的用途: 1. 注册 2. 登录 表单常用的属性: - action : 表单提交的地址(URL) - enctype: 表单提交时的编码格式 , 我们一般不指定, 采用网页默认编码(meta) - method : 表单提交的方式(GET /POST) 默认GET 相同的请求key 是允许存在的! GET请求: 特点: 表单中的键值对通过在网址中拼接传递 拼接的方式: 网址与参数通过?拼接 , 参数的key与value通过=连接 多个参数之间使用&连接 举例: 网址: https://itdage.cn/s 参数: name张三 ,age18 拼接结果: https://itdage.cn/s?name=张三&age=18 POST请求: 特点: 请求时, 参数通过请求体传递 ! 可以进行文件的提交 ! 4.1表单常用的子节点: name value type input标签 常用数据: name属性: 提交数据时, 当前输入框内容的key value属性: - 输入框: 输入的内容, 也是提交的内容 - 按钮: 按钮显示的文本 - 单选框/复选框 : 提交的内容 type属性: 表示输入组件(input)的类型: - text: 默认 , 单行文本输入框 - password: 单行密码输入框, 内容会被*代替 - checkbox: 多选按钮 - radio : 单选按钮 在进行单选按钮编写时, 可以通过相同的name ,来完成单选的分组 - hidden : 隐藏的输入框 - submit : 提交按钮 - button : 普通按钮 - reset : 重置按钮 html5时添加的一个比较重要的属性: - placeholder: 提示的文本 -------------------------------------------- 单选框与复选框如何设置默认选中项 check 添加属性: checked=checked即可 不可输入的文本输入框 disabled 添加属性 disabled , html5 boolean属性 图片提交按钮 input标签type为image : 图片提交按钮 与submit基本一致 . 但是多携带了两个参数: x: 鼠标点击的image按钮的横向像素坐标位置 y: 鼠标点击的image按钮的像素垂直坐标位置 文件提交 input标签type为file: 文件上传 需要指定form表单的提交方式为post 还需要与后台程序员协商提交的协议 ! 4.2 select标签与option标签 select是下拉选框的组, option是下拉选框的选项 下拉选框标签 , 在form表单中进行数据的收集! select常用属性: - size: 下拉选框中一次展示的数据个数 - multiple: 是否支持多选 - name: 数据提交时的key option常用属性: - value: 选框的值 完成导航网页的编写: 百度搜索: 表单提交的地址:https://www.baidu.com/s 用户输入的内容的key :wd 360搜索: 表单提交的地址:https://www.so.com/s 用户输入的内容的key : q 搜狗搜索: 表单提交的地址:https://www.sogou.com/web 用户输入的内容的key :query 必应搜索: 表单提交的地址:http://cn.bing.com/search 用户输入的内容的key : q frame框架 html5 仅保留了一个frame框架:iframe 作用: 将一个网页嵌入到另一个网页中 使用方式: 长度单位: 常用的长度单位: - px像素 - 占父元素的百分比 - em: 字体的大小 不常用的长度单位: pt: point点 pc: 派卡 in: 英寸 mm: 毫米 cm: 厘米 HTML5新功能的限制 IE10以下不支持 相关示例及代码：D:\XML HTML+CSS+JS\day02 CSS和day03 CSS align 属性。请用CSS 代替。
2
3
4
2
3
2
3
4
2
3
4
图片地址">
CSS
1、定义及意义
层叠样式表 (Cascading Style Sheets) 用来定义HTML网页中的标签如何去显示 ! 样式通常存储在样式表中 国内设计看电商 国外设计看门户 意义：
让内容与表现分离
2、定义样式常用样式注释特性
三种定义方式: 1. 内联样式 样式定义在元素的style属性中: 修改一个块元素的文字的颜色 床前明月光 ,德玛西亚 ~ 2. 内部样式表 在html文件的head中定义style标签 : 案例: 3. 外部样式表(工作中常用) 定义在外部的一个独立的.css文件中 步骤: 1. 编写css文件 , 描述文件的编码: 在文件第一行@charset "UTF-8"; 2. 像内部样式表中一样定义样式: 选择器{ 样式1; 样式2 } 3. 在一个html文件的head中, 引入这个样式表 文件URL"/>2.1常用样式:
文本颜色: color:颜色RGB|颜色单词字体大小: font-size:长度单位文字居中: text-align: center;元素的宽度: width: 长度单位;元素的高度: height:长度单位; 定义宽高时, 注意: 行内元素是无法定义宽高的 !添加背景颜色: background-color: #bbbb00;添加鼠标形状: cursor: pointer;2.2 CSS中添加注释
CSS中不允许出现HTML的注释格式 CSS中的注释, 就是Java中的多行注释/*这里是注释*/2.3 为什么不同的浏览器显示效果不同
浏览器都存在默认样式 , 每个浏览器的默认样式不同 ! 我们经常会编写一个修改浏览器默认样式的css !2.4 CSS三大特性
- 继承性 给父元素定义的CSS , 可以被子元素继承 , 例如字体 , 颜色等等。 - 层叠性 同一个元素如果存在多个css样式, 对于不冲突的css 可以叠加! - 优先级 同一个元素如果存在多个相同的CSS, 对于冲突的CSS , 优先级高者为准! 就近原则: 最近的就是内联样式 内部样式表与外部样式表的优先级, 是根据style标签/link标签定义的顺序来计算的, 定义的越靠后,优先级越高 ! --- 继承来的样式 , 优先级是最低的! 浏览器的默认样式的优先级是除了继承的样式以外最低的3、选择器
将样式绑定到具体的标签上 !元素选择器重点
根据标签的名称, 确定一个或多个元素 案例: 给所有的div元素, 添加文本颜色为红色 div{ color:red; }类选择器. 重点
每个元素, 都有一个通用的属性: class 我们可以通过指定相同的class属性 , 将多个不同的元素, 分为一类元素 ! 然后对这类元素进行样式的选择! 案例: 一二三四五 上山打老虎 老虎没打到 打到小松鼠id 选择器# 重点
我们通过给一个元素添加id属性 , 然后通过#id来选择一个元素 ! 与类选择器使用上的区别: 他们的区别是程序员对id这个单词赋予的特殊含义 ~ 一般我们在编写时, 规范id是不允许重复的(HTML是允许ID重复的,不报错!) , 所以一般情况下 id选择器, 是明确的给一个元素添加样式 ~ 案例: 选择器组了解
有时候, 一个元素与其他元素存在共性的属性, 元素很难使用基本选择器确定 ! 通过多个选择器, 确定某一个元素 选择器1选择器2..选择器n{ 样式} 例如给下面的第一个div添加颜色为红色: 一二三四五 六七八九十(改变为红色) 哈哈哈哈哈 嘿嘿嘿嘿嘿 div.abcd{ /*元素名称为div,且元素的class属性为abcd的元素*/ color:red;}组选择器了解
将一个样式应用到多个选择器上 选择器1,选择器2...选择器n{ 样式;} 例如: 一二三四五 六七八九十(改变为红色) 哈哈哈哈哈 嘿嘿嘿嘿嘿 将上述的所有元素,修改为颜色红色 .a,.b,#c,#d{ color:red;}派生选择器> 熟练
子选择器
通过一个父元素选择器, 确定其中的直接子元素 格式: 父元素选择器>子元素选择器{ } 例如: 给如下div中的span颜色更改为红色 一二三四五 上山打老虎 div>span{ color:red; }后代选择器
与子选择器使用方式基本一致 , 但是样式会应用到所有匹配的后代元素! 格式: 父元素选择器后代元素选择器{ 样式 }伪类选择器: (点击超链接)
用来对于不同状态下的元素添加样式 !- 应用到超链接的: :link 选择未被访问的超链接 :active 选择被激活的元素 :visited 选择访问过的超链接 案例: :link{ /*给未访问的超链接添加颜色为红色*/ color:#be3131; } :visited{ /*给访问后的超链接添加颜色为白色*/ color:#fff; } :active{ /*给激活的元素(点击后未松开的超链接),添加灰色*/ color:#929292; }:hover : 当鼠标悬停时 菜单案例: 用户添加 用户修改 用户删除 用户查询 :focus : 当元素获取焦点4、背景background
背景颜色background-color: #RGB/单词;背景图片在进行背景的设置时, 可以指定多个图片 ,前面图片覆盖后面的图片 !格式: background-image:url("图片地址"),url("图片地址2")...url("图片地址n");控制图片的平铺
默认情况下, 背景图片在网页的水平与垂直方向上重复的出现 ! 通过background-repeat 属性控制平铺的效果: - repeat : 默认平铺 - repeat-x: 仅横向平铺 - repeat-y: 仅垂直方式平铺 - no-repeat:不平铺背景图片的缩放
background-size:x,y;背景图片的滑动
可以通过 background-attachment 属性来改变此特征默认值是 scroll：默认情况下，背景会随文档滚动可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像背景图片-精灵图片
精灵图片的使用: 1. 根据精灵图片中图标的宽高 , 创建一个对应大小的标签 2. 通过使用background-image将精灵背景图, 设置给这个对应的标签 3. 使用background-position 来指定当前标签显示背景图片中某一部分! position的使用: 通过x,y坐标来完成位置的指定 , 且为图片中xy坐标的负数值 案例: #title_left{ background-image: url("images/bg_jl.gif"); background-position: 0px -218px; width:213px; height:47px; }5、边框 border
设置边框: border-left: 宽度px,样式值,颜色值;设置左边框border-top: 宽度px,样式值,颜色值; 设置上边框border-right: 宽度px,样式值,颜色值; 设置右边框border-bottom: 宽度px,样式值,颜色值; 设置底部边框 直接指定四边边框: border:宽度px,样式值,颜色值; 样式值: 1. 使用点组成的边框 dotted 2. 虚线边框 dashed 3. 实线 solidcss3中的边框圆角 border-radius: 长度px; 长度如果指定为50% , 则表示是一个圆形的图片! 案例: #img2{ width:200px; height:200px; /*border:1px solid red;*/ border-radius: 50%; }超出边框的内容
overflowoverflow : - visible : 超出的文本可见 (默认) - hidden : 超出的内容不可见 - scroll : 给边框添加滑动条 - auto : 自适应, 溢出则添加滑动条, 内容不超出的情况下, 不显示滑动条6、盒模型
元素占用的空间大小: 宽度的计算: 元素本身宽度+左右边框宽度+左右内边距宽度+左右外边距宽度 高度的计算: 元素本身高度+上下边框宽度+上下内边距高度+上下外边距高度外边距margin
边框距离外部其他元素的距离 使用方式: margin-left: 长度;指定左外边距! margin-top: 长度;指定上外边距! margin-right: 长度;指定右外边距! margin-bottom: 长度;指定下外边距! 直接指定四个方向的外边距 margin: 左长度,上长度,右长度,下长度; margin: 长度;内边距padding
元素本身距离边框的距离 使用方式: padding-left: 长度;指定左外边距! padding-top: 长度;指定上外边距! padding-right: 长度;指定右外边距! padding-bottom: 长度;指定下外边距! 直接指定四个方向的外边距 padding: 左长度,上长度,右长度,下长度; padding: 长度;7、样式
文字样式:font
- 字体修改 - font-family:"微软雅黑"; - 字体大小 - font-size:大小; - 字体加粗 - font-weight:bold; - 文字颜色 - color:颜色值; - 文本排列: - text-align: left / right / center; - 文字修饰 - text-decoration: - underline : 下划线 - overline : 上划线 - line-through:删除线 - 行高 - line-height: 长度; 表示一个行文本占用的高度 我们可以将文本的行高与父元素的高度设置为一致, 用来达到文本上下局中的效果 - 首行缩进 - text-indent:2em; - 文字阴影 - text-shadow: 横向偏移量垂直偏移量 [阴影模糊距离] 阴影颜色表格边框 border
当我们尝试给table添加边框时, 会出现问题: 边框双线问题 , 我们可以通过如下样式,修改(边框双线合并成一条线) border-collapse: collapse;列表样式
list-style-type列表中列前的图标取值: 通过list-style-type来完成更改 无序列表 1. none :取消图标 - 使用最多 2. disc :实心圆 3. circle :空心圆 4. square :实心方块 有序列表 1. node :取消顺序数字 2. decimal :数字 3. lower-romen:小写罗马数字 4. upper-roman:大写罗马数字自定义图片样式: 在li中修改 list-style-image:url("图片地址"); 案例: #menu>li{ list-style-type: none; font-size:36px; margin-top: 15px; cursor: pointer; } #menu_1{ list-style-image: url("images/1.png"); } #menu_2{ list-style-image: url("images/2.png"); } #menu_3{ list-style-image: url("images/3.png"); } #menu_4{ list-style-image: url("images/4.png"); } 管理员工 员工添加 员工查找 员工删除 鼠标形状cursor
cursor - default :指针 - pointer :手指 - text :文本输入时的焦点 - wait :等待 - help :帮助8、定位
默认定位(static)
默认定位的元素分类:
元素都有自己默认的显示方式，包括块元素block 从上至下，可以设置宽高，如、、等
行内元素inline 从左至右，不能设置宽高，如、等行内块inline-block从左至右，可以设置宽高，如、等
修改默认的元素分类
通过display
- none : 隐藏元素
- block : 将元素设置为块元素 ,独占一行,可以修改宽高
- inline : 将元素设置为行内元素, 在一行中可以存在多个 ,无法修改宽高
- inline-block: 将元素设置为行内块元素 , 在一行中可以存在多个, 且可以设置宽高!
浮动定位float
被添加了浮动的元素, 就不再跟随默认定位规则了 . 浮动定位可以将元素放置到父元素的左边/右边 , 元素存在在父元素的内部 ! 格式: float:left/right; 清除浮动的影响: 设置一个元素某一个方向不允许出现浮动效果 ! clear:left/right/both;相对定位, 绝对定位, 固定定位如何确定元素的偏移量
通过四个关键字: left:长度; 表示元素左偏移的距离right:长度;表示元素右偏移的距离top:长度;表示元素上偏移的距离bottom:长度;表示元素下偏移的距离相对定位
相对于自身正常存在的坐标进行偏移 ! 相对定位是占用空间的, 且占用的是移动前的原有位置空间.偏移后的空间是直接覆盖的! 格式: position:relative;绝对定位
绝对定位的元素的位置, 是相对于最近的绝对定位祖先元素或body绝对定位不占用任何的网页空间, 直接采用覆盖方式存在 ! 格式: position:absolute;固定定位
将元素的内容固定在浏览器中的某个位置, 不跟随页面滑动而滑动, 不占用任何空间! 格式: position:fixed;定位中的堆叠顺序
z-index: 数字; 值越大距离用户越近 , 可以传入负数, 表示距离用户越远!9、html的5与4版本有什么区别
1. 文档声明不同 4文档声明: 5文档声明: 2. 网页文件编码设置不同 4编码设置: 5编码设置: 3. 大小写不敏感 属性名称大小写不敏感 ! : 例如: 标签名称大小写不敏感 ! : 例如: 属性的值大小写不敏感 ! : 4. boolean 类型的属性 有些属性的取值, 就像开关, 取值范围只有两个 ! 这一类属性, 在HTML5版本中, 更改为了boolean类型属性 ,这类的属性, 如果写则为true,不写则为false 5. 引号的省略 如果属性的值中没有出现特殊字符 , 则可以省略属性值的引号 ! 6. 结尾标签省略 我们在编写一个标签时, 可以不写结束标签 ! 例如: 哈哈哈> 第一段文本 第二段文本 第三段文本 7. 浏览器不支持HTML5时, 自动忽略标签的特性 浏览器不支持HTML5时, 自动忽略标签 , 浏览器支持HTML5时, 自动忽略文本内容 案例: 您的浏览器版本过低 , 请升级 ~ 10、HTML新增标签
- 结构标签- 表单标签- 媒体标签- 其他功能标签结构标签
在HTML5之前 , 我们使用DIV进行块的划分, 在HTML5中给DIV派生了一些标签, 用来语义化的表示结构section标签表示页面中的内容区域 , 比如章节/页眉/页脚..等表示文档结构article标签表示页面中一块与上下文不相关的独立内容 , 比如一篇文章aside标签与article进行辅助的 , 文章内容之外的header标签整个页面的标题, 头部hgroup标签表示对整个页面或页面中的一个内容区域的标题的组合nav标签表示页面中导航连接部分figure标签表示一段独立的流内容 , 一般用来表示文档主体流内容中的一个独立单元 , 使用figcaption为figure标签组添加标题表单标签
在HTML5中表单的input标签, 新增了一些type属性 email: 邮箱输入框 url : 必须输入url number: 只能输入数字 search : 搜索域 ,显示为常规的文本域 color : 调色板日期时间选择 date : 年月日month : 年月week : 年周time : 时间datetime: 选择年月日UTC时间 360浏览器不支持datetime-local: 本地年月日时间HTML5新增其他标签
mark : 高亮显示文本片段 progress: 显示进度条 - max属性: 进度条的最大进度 - value属性:表示当前进度 time : 用来描述被搜索引擎收录的时间 - 添加time对于我们所观察到的页面没有任何的视觉效果, 是给机器看的 ! wbr : 软换行可展开内容区域 点击展开 折叠区域的开始 这里就是被折叠的文本 联想文本输入框 步骤: 1. 先编写联想的列表 使用datalist标签+option标签创建列表, 并指定id 2. 将联想列表, 绑定到input标签中 通过input标签的list属性=列表id 案例: "/> "/> "/> "/> 过时的标签
被放弃的标签, 大致分为三类: 1. 样式标签 , 它可以被css所代替,所以放弃了 ! 例如: i标签 b标签 center标签 font标签等等 2. 放弃了一些frame框架 例如:frameset,frame,noframes,都被放弃了 ! 3. 主流浏览器所不支持的标签 只有部分浏览器所支持的标签被放弃了 ! 例如: blink ,applet等等..11、CSS3
对CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。文本新特性
css3中右两个比较常用的文本特性: - 文本溢出处理 360浏览器不支持 格式: 在文本的容器中添加样式: text-overflow: - clip :修剪文本 ,超出的不显示 ! - ellipsis:显示时使用省略号来代表被修建掉的文本 - '字符串':使用给定的字符串来代表被修剪掉的文本(火狐浏览器支持) - 文本阴影 格式: text-shadow:水平阴影长度垂直阴影长度 [模糊距离] 阴影颜色;边框与阴影
用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。 - 边框圆角 - border-radius 圆角案例: border-radius:10px; 圆形案例:border-radius:50%;//在宽高等同时 - box-shadow 阴影边框 格式: box-shadow: x偏移 y偏移 [模糊距离] [阴影大小] 阴影颜色; 案例: box-shadow:6px 6px 6px 6px #828282; -------------------------------------------------- 选项卡实现的流程: 首先编写一个div 包含三个div , 三个子div就是每一个选项卡其中包含两个元素, 一个是图片一个是文本 ----------------------------------------- css中的修饰: 给最外层的div设置一个固定的宽度 给内层的三个选项卡的div设置固定的宽高 给内层的三个图片设置固定的宽高 给内层的文本设置居中 给内层的三个选项卡div 添加阴影即可CSS3渐变效果
CSS3渐变效果 , 可以让一个元素在两个或多个指定的颜色之间平稳的过渡 ! - 线性渐变 : 向下, 向上, 向左,向右, 对角 格式: background:linear-gradient([方向/角度],颜色1,颜色2..颜色n); 上到下的案例: background:linear-gradient(red,blue);//上到下是默认的方向, 所以无序指定方向 左到右的案例: background:linear-gradient(to right,red,blue); 对角案例: background:linear-gradient(to bottom right,red,blue); -------- 跟多的建议通过指定旋转的度数来确定渐变的方向 background:linear-gradient(150deg,red,blue); - 径向渐变 (圆形) 格式: background:radial-gradient(颜色1,颜色2...颜色n); 案例: background:radial-gradient(#ff0,#f00,#f0f,#0ff,#00f);过渡效果
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。用鼠标移过下面的元素： 格式: transition:all 秒数s; 案例: 一个div , 当鼠标移动到上面时 , 慢慢的过渡到另一个效果 html代码: css代码: div{ width:200px; height:200px; transition:all 3s; } div:hover{ width:500px; }动画
动画是指一个元素, 在多个不同的样式中进行变化 注意: 如果通过定位来更改动画的位置, 则在不同的动画时间百分比中需要使用相同的方向控制 ! 使用步骤: 1. 在CSS中定义一个动画样式 格式: @keyframes 动画名称{ 百分比时间1 {样式} 百分比时间2 {样式} 百分比时间3 {样式} ... 百分比时间n {样式} } 时间百分比在指定时, 必须存在两个: 一个是0% , 一个是100%; 2. 将动画样式绑定到某个元素上 格式: 选择器{ animation:动画名称持续时间s [动画曲线] [开始延迟时间] [动画播放次数] [是否为逆向播放]; animation-iteration-count:999999; } 案例: @keyframes myani{ 0%{ background-image:url("images/bomb01.png"); } 5%{ background-image:url("images/bomb02.png"); } 10%{ background-image:url("images/bomb03.png"); } 15%{ background-image:url("images/bomb04.png"); } 20%{ background-image:url("images/bomb05.png"); } 25%{ background-image:url("images/bomb06.png"); } 30%{ background-image:url("images/bomb07.png"); } 35%{ background-image:url("images/bomb08.png"); } 40%{ background-image:url("images/bomb09.png"); } 45%{ background-image:url("images/bomb10.png"); } 50%{ background-image:url("images/bomb11.png"); } 55%{ background-image:url("images/bomb12.png"); } 60%{ background-image:url("images/bomb13.png"); } 65%{ background-image:url("images/bomb14.png"); } 70%{ background-image:url("images/bomb15.png"); } 75%{ background-image:url("images/bomb16.png"); } 80%{ background-image:url("images/bomb17.png"); } 85%{ background-image:url("images/bomb18.png"); } 90%{ background-image:url("images/bomb19.png"); } 95%{ background-image:url("images/bomb20.png"); } 100%{ background-image:url("images/bomb21.png"); } } 将上述的动画绑定到div上 div{ width:510px; height:510px; animation: myani 3s; animation-iteration-count:999999;} 图片移动： %{给各单位必须一致} 