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格式
文档声明:
<!doctypehtml>
根节点:
<html>
网页头部
<head>
网页标题
<title>我们的第一个网页</title>
</head>
网页主体部分
<body>
哈哈哈哈哈哈哈哈, 第一个网页
</body>
</html>
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
文本标题标签:
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
在设计的角度上, 一般单个网页中, 不建议出现一次以上一级标题 !
3、标签
文字格式化标签 (html5时, 不再推荐使用)
用来修饰文字的一系列标签:
加粗:<b>这里文本是加粗的</b>
倾斜:<i>这里文本是斜体的</i>
删除线:<del>这里的文本是带有删除线的</del>
下划线:<u>这里的文本是带有下划线的</u>
练习:
编写一段文本, 实现它的效果为: 加粗+斜体+删除线+下划线
<b><i><del><u>加粗+斜体+删除线+下划线</u></del></i></b>
格式符号标签 br hr p  
<br>: 换行
<hr>: 分割线
<p> : <p>文字段落标签</p>
: 表示空格
超级链接标签a
超级链接标记 , 指向一个网址, 当点击这个超级链接时 , 浏览器会发生跳转 !
格式 : <a href="地址" title="弹出文本提示">提示文本</a>
- 跳转到普通网页:
<ahref="https://www.baidu.com" title="点击跳转到百度">点击去百度</a>
- 打开邮件发送
<a href="mailto:邮箱地址" title="点击给我发邮件">发送邮件</a>
例如:
<a href="mailto:[email protected]"title="点击给我发邮件">发送邮件</a>
- 使用新窗口打开网页
添加target属性=_blank 即可
例如:
<ahref="https://www.baidu.com" target="_blank" title="点击跳转到百度">点击去百度</a>
超链接锚点 a name
通过a标签, 给网页添加锚点, 然后在跳转至此网页时 , 可以直接跳到锚点位置 !
步骤
1. 在被跳转的位置 , 加入a元素 , 并给a元素添加name属性(创建锚点, 并起名称)
2. 在跳转位置的超链接中编写href="页面名称#锚点名称";
如果是在当前页面编写锚点的跳转,href="#锚点名称"
案例:
网页1:
<h1>商城</h1>
<!-- 锚点1,用来标记网页头部 -->
<aname="top"></a>
<h3>网页头部</h3>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<!-- 锚点2,用来标记网页内容第一部分 -->
<aname="content_1"></a>
<h3>网页第一部分内容</h3>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<!-- 锚点3,用来标记网页内容第二部分 -->
<aname="content_2"></a>
<h3>网页第二部分内容</h3>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
元素的分类:
块元素 : 单独占据一行 , 可以控制自身的宽高 比如: p元素, div元素
行内元素 : 在一行内, 从左至右顺序排列 ,无法调整自身宽高 , 它们的宽高, 由自己的内容决定 , 比如: b元素,i元素,del元素,a元素,span元素等等
行内块元素 , 在一行内, 从左至右顺序排列, 可以调整自身宽高 !
图片标签img:
属性:
- src : 一个url , 图片的地址(网络地址,本地绝对地址,本地相对地址)
- alt : 当图片出现问题, 无法加载时, 用来替换的错误提示文本
- width: 指定图片的宽度
- height: 指定图片的高度
我们一般不建议, 同时指定宽度与高度 ! 图片会呈现一个拉伸的效果
我们建议只指定宽度, 因为在宽度调整时, 高度会自动缩放 / 我们建议只指定高度, 因为在高度调整时, 宽度会自动缩放
案例:
<img width="300px" alt="这是一个美女图片"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
案例:
<h1>音频播放</h1>
<audiosrc="http://home.itdage.cn:8090/mp3/sf.mp3" controls="1"autoplay="1"></audio>
音频播放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
案例:
<h2>视频播放</h2>
<videosrc="http://home.itdage.cn:8090/mp4/gnzw.mp4" controls="1"autoplay="1"></video>
<video src="lsjddw.mp4"controls="1" autoplay="1"></video>
媒体播放embed
属性:
- src : 一个url , 视频的地址(网络地址,本地相对地址)
外地兄弟: http://home.itdage.cn:8090/shiba.swf
北京兄弟: http://192.168.13.224/shiba.swf
案例:
<h2>flash播放</h2>
<embedsrc="http://home.itdage.cn:8090/shiba.swf">
列表标签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. 表格主体(正文)<tbody> <thead头部><tbody身体><tfoot脚>
可以忽略的标签: 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 不支持 <table> align 属性。请用CSS 代替。
合并单元格:
在td上 , 指定单个单元格跨越的横向宽度:colspan=数字
在td上 , 指定单个单元格跨越的垂直宽度: rowspan=数字
<tablewidth="1000px" height="300px" border="1"bordercolor="red" gcolor="#f2f2f2">
<tr>
<tdwidth="100px" rowspan="4">垂直占用四个单元格</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr> <td>2</td>
<td>3</td>
<tdbgcolor="#33ff33">4</td>
</tr>
<tr> <td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr> <td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
强调区别href url src alt:
标签之间是可以进行嵌套的
例如: 超链接 <ahref="超链接地址">超链接文本</a>
图片:<img src="图片地址">
通过嵌套, 可以完成图片超链接
<ahref="https://www.baidu.com" title="去百度"><imgsrc="images/xiyangyang.jpg"></a>
div{
url(统一资源定位器)，在前端中，只出现在CSS中，一般用来设置背景或图片;
background-image:url(“”);
list-style-image:url(“”);
}
src暂时只在HTML中的音频视频图片（多媒体）中出现
<imgsrc="图片路径名称"alt="多媒体文件无法正常显示时，显示的文字">
相对地址的使用
绝对地址: 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
作用: 将一个网页嵌入到另一个网页中
使用方式:
<iframesrc="引入的URL"height="高度"width="宽度"></iframe>
长度单位:
常用的长度单位:
- px像素
- 占父元素的百分比
- em: 字体的大小
不常用的长度单位:
pt: point点
pc: 派卡
in: 英寸
mm: 毫米
cm: 厘米
HTML5新功能的限制
IE10以下不支持
CSS
相关示例及代码：D:\XML HTML+CSS+JS\day02 CSS和day03 CSS
1、定义及意义
层叠样式表(Cascading Style Sheets)
用来定义HTML网页中的标签如何去显示!
样式通常存储在样式表中 国内设计看电商国外设计看门户
意义：
让内容与表现分离
2、定义样式常用样式注释特性
三种定义方式:
1.内联样式
样式定义在元素的style属性中:
修改一个块元素的文字的颜色
<div style="color:#be3131">床前明月光,德玛西亚~ </div>
2.内部样式表
在html文件的head中定义style标签:
<style type="text/css">选择器{
样式1;
样式2
} </style> 案例:
<style type="text/css"> p{ color:red; font-size:50px; } </style> 3.外部样式表(工作中常用)
定义在外部的一个独立的.css文件中
步骤:
1.编写css文件,描述文件的编码:
在文件第一行@charset "UTF-8";
2.像内部样式表中一样定义样式:
选择器{
样式1;
样式2
} 3.在一个html文件的head中,引入这个样式表
<link rel="stylesheet" type="text/css" href=".css文件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属性,将多个不同的元素,分为一类元素!然后对这类元素进行样式的选择!
案例:
<style type="text/css"> .hahaha{ color:red; } </style> <a class="hahaha">一二三四五</a>
<i class="hahaha">上山打老虎</i>
<span class="hahaha">老虎没打到</span>
<span class="heheda">打到小松鼠</span>
id 选择器# 重点
我们通过给一个元素添加id属性,然后通过#id来选择一个元素!
与类选择器使用上的区别:
他们的区别是程序员对id这个单词赋予的特殊含义~
一般我们在编写时,规范id是不允许重复的(HTML是允许ID重复的,不报错!) ,所以一般情况下id选择器,是明确的给一个元素添加样式~
案例:
<style type="text/css"> #div1{ font-size:20px; } #div1{ color:red; } </style> <div id="div1">11111111111111111111</div> <div id="div2">22222222222222222222</div> <div id="div3">33333333333333333333</div> 选择器组了解
有时候,一个元素与其他元素存在共性的属性,元素很难使用基本选择器确定!
通过多个选择器,确定某一个元素
选择器1选择器2..选择器n{
样式
} 例如给下面的第一个div添加颜色为红色:
<p class="abcd">一二三四五</p>
<div class="abcd">六七八九十(改变为红色)</div>
<div>哈哈哈哈哈</div>
<div>嘿嘿嘿嘿嘿</div>
div.abcd{/*元素名称为div,且元素的class属性为abcd的元素*/
color:red;}组选择器了解
将一个样式应用到多个选择器上
选择器1,选择器2...选择器n{
样式;
} 例如:
<p class="a">一二三四五</p>
<div class="b">六七八九十(改变为红色)</div>
<span id="c">哈哈哈哈哈</span>
<a id="d">嘿嘿嘿嘿嘿</a>
将上述的所有元素,修改为颜色红色
.a,.b,#c,#d{ color:red;}派生选择器> 熟练
子选择器
通过一个父元素选择器,确定其中的直接子元素
格式:
父元素选择器>子元素选择器{
} 例如:给如下div中的span颜色更改为红色
<div><span>一二三四五</span>
</div> <p><span>上山打老虎</span>
</p> div>span{ color:red; }后代选择器
与子选择器使用方式基本一致,但是样式会应用到所有匹配的后代元素!
格式:
父元素选择器后代元素选择器{
样式
}伪类选择器: (点击超链接)
用来对于不同状态下的元素添加样式!
-应用到超链接的:
:link选择未被访问的超链接
:active选择被激活的元素
:visited选择访问过的超链接
案例:
:link{/*给未访问的超链接添加颜色为红色*/
color:#be3131; } :visited{/*给访问后的超链接添加颜色为白色*/
color:#fff; } :active{/*给激活的元素(点击后未松开的超链接),添加灰色*/
color:#929292; }:hover :当鼠标悬停时
菜单案例:<ul>
<li>用户添加</li>
<li>用户修改</li>
<li>用户删除</li>
<li>用户查询</li>
</ul> :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.实线solid
css3中的边框圆角
border-radius:长度px;
长度如果指定为50% ,则表示是一个圆形的图片!
案例:
#img2{ width:200px; height:200px; /*border:1px solid red;*/ border-radius: 50%; }超出边框的内容overflow
overflow : - 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"); } <ul id="menu"><li id="menu_1">管理员工</li>
<li id="menu_2">员工添加</li>
<li id="menu_3">员工查找</li>
<li id="menu_4">员工删除</li>
</ul>鼠标形状cursor
cursor - default :指针
- pointer :手指
- text :文本输入时的焦点
- wait :等待
- help :帮助
8、定位
默认定位(static)
默认定位的元素分类:
元素都有自己默认的显示方式，包括块元素block
从上至下，可以设置宽高，如<h1>、<p>、<div>等
行内元素inline
从左至右，不能设置宽高，如<span>、<a>等
行内块inline-block
从左至右，可以设置宽高，如<input>、<img>等
修改默认的元素分类
通过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文档声明: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5文档声明: <!DOCTYPE html>
2.网页文件编码设置不同
4编码设置: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5编码设置:<meta charset="UTF-8">
3.大小写不敏感
属性名称大小写不敏感! :例如: <img SrC=""/>
标签名称大小写不敏感! :例如: <iMg SrC=""/>
属性的值大小写不敏感! :
4. boolean类型的属性
有些属性的取值,就像开关,取值范围只有两个!
这一类属性,在HTML5版本中,更改为了boolean类型属性,这类的属性,如果写则为true,不写则为false
5.引号的省略
如果属性的值中没有出现特殊字符,则可以省略属性值的引号!
6.结尾标签省略
我们在编写一个标签时,可以不写结束标签!
例如:
<inPut tyPe=BuTTon value=哈哈哈>
<p>第一段文本</p>
<p>第二段文本</p>
<p>第三段文本</p>
7.浏览器不支持HTML5时,自动忽略标签的特性
浏览器不支持HTML5时,自动忽略标签,浏览器支持HTML5时,自动忽略文本内容
案例: <video src="lsjddw.mp4" controls>您的浏览器版本过低,请升级~ </video>
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 :软换行
可展开内容区域 <details><summary>点击展开</summary>
折叠区域的开始
这里就是被折叠的文本
</details>联想文本输入框 步骤:
1.先编写联想的列表
使用datalist标签+option标签创建列表,并指定id
2.将联想列表,绑定到input标签中
通过input标签的list属性=列表id
案例:
<datalist id="input_data"><option value="床前明月光"/>
<option value="地上鞋两双"/>
<option value="床上狗男女"/>
<option value="其中有凯凯"/>
</datalist> <input type="text" list="input_data"/>过时的标签
被放弃的标签,大致分为三类:
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代码:
<div> </div>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;} 图片移动：%{给各单位必须一致}
<style type="text/css"> img{ position: fixed; width: 320px; height: 180px; animation: ma 4s; animation-iteration-count: 999; } @keyframes ma{ 0%{left: 0px;（%{内属性必须一致}）
top: 0px; } 25%{ left: 950px; top: 0px; } 50%{ left: 950px; top: 400px; } 75%{ left: 0px; top: 400px; } 100%{ left: 0px; top: 0px; } } </style> </head><body> <img src="lsj.jpg" alt=""></body></html>按钮 button
<style type="text/css"> #button1{ width: 70px; height: 45px;background-color: #fff;/*背景色*/
border:1px solid red;/*边框红色*/
transition:all 2s; /*过渡时间2s*/
border-radius: 3px; /*圆角3px*/
} #button1:hover{ /*鼠标悬停*/
background-color: red; /*背景色为红色*/
color: #fff; /*文字白色*/
} </style><body> <button id="button1">XDL</button> </body>
图片选项卡
<style type="text/css"> .content_div{ width:250px; height:220px; display: inline-block; margin: 30px; border: 1px solid #e2e2e2; transition:all 1s; } .content_div:hover{ box-shadow: 6px 6px 5px 3px #888; cursor: pointer; } .content_div>img{ width:250px; height:140px; } .content_div>p{ line-height: 60px; text-align: center; }</style> <div id="content"> <div class="content_div"> <img src="images/img_1.jpg"><p>这是一张图片选项卡</p>
</div></div>响应式图片（图片随网页大小调整）
max-width:100%;来实现