1、CSS笔记:
点击链接后退页面:
——修改placeholder提示的样式:
1.除IE外通用写法
类名或标签名::placeholder {color: red;}
2.加兼容前缀写法
css超出一行显示省略号:
给定宽度(width:100px)、
超出隐藏(overflow:hidden)、
强制在同一行显示(white-space: nowrap)、
省略号(text-overflow:ellipsis)
——常见字体单位——
1.em
移动端常用的字体尺寸单位,相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5。
但当div进行嵌套时,em始终按当前div继承的字体大小来缩放。
2.rem
r是root的意思,即相对于根节点html的font-size进行缩放,当有嵌套关系时,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。
3.vh
vh就是当前屏幕可见高度的1%,即 height:100vh == height:100%;
它的好处是当元素没有内容时候,设置height:100%该元素不会被撑开,
但设置height:100vh,该元素会被撑开屏幕高度一致。
4.vw
viewpoint width,视窗宽度,1vw = 视窗宽度的1%。
vw就是当前屏幕宽度的1%,
当设置width:100%,被设置元素的宽度是按照父元素的宽度来设置,
但100vw是相对于屏幕可见宽度来设置,所以会出现50vw 比50%大的情况。
2、HTML5笔记
5.在网页中,HTML决定结构和内容,CSS设定网页的表现样式,JavaScript控制网页的行为。
6.必须位于HTML文档第一行。
7.标签:用于方便浏览器解析或搜索引擎搜索,一般放置于
中,用"名称/值"方式:(1)表示文档内容类型、字符串编码信息 如:
(2)为搜索引擎定义关键词:
(3)为网页定义描述内容:
(4)定义网页作者:
(5)每30秒中刷新当前页面:
8.字体样式标签:字体变粗、字体倾斜
9.注释
10.特殊符号:空格 >大于号> <小于号< "引号" 版权符号©
11.常用图片格式:JPG、GIF、PNG、BMP
12.图片标签,必须要有src和alt属性:
13.超链接标签(target指定在哪个窗口打开 值有_self自身窗口、_blank新建窗口)
14.链接地址
(1)绝对路径(指向目标地址的完整描述 多指向本站点外的文件
如百度)、
(3)相对路径中"../"表示当前目录的上级目录,"../../"表示上上级目录
15.超链接的应用场合:
(1)页面间链接:如为您跳转到登录页
(2)锚链接:
先在目标位置B设置标记如:这里是目标位置,
(3)功能性链接:单击时启动本机自带的应用程序如QQ、电子邮箱等
如电子邮件链接:"mailto:电子邮件地址"
16.元素分类
(1)块元素:如
无论内容有多少,该元素都独占一行(一块)。
块状元素特点:如果没有设置自身宽度,则显示为父容器的100%。
(2)行内元素:如 显示宽度由自己的内容决定,其他元素可以排在它后面。
16.元素类型转换:
(1)块状元素转为内联元素:display: inline;
(2)内联元素转为块状元素:display: block;
(3)把元素设为内联块状元素: display: inline-block;
(就是同时具备内联元素、块状元素特点,如img、input)
——2 列表、表格、媒体元素——
17.三种列表:
(1)有序列表
-
(2)无序列表
- ul中只能嵌套li,而li可以嵌套任意标签。
(3)定义列表
- 是标题及列表项的结合。
18.表格基本结构:单元格、行、列
(1)
(2)HTML5中已废除table的border属性,用css控制边框宽度。
(3)跨列(横向):
内容
跨行(竖向):
内容 ,两者都要删除被合并的其他单元格。
(4)表格特点:同行单元格高度一致且水平对齐,同列单元格宽度一致且垂直对齐。
19.视频元素:
(1)controls属性提供播放暂停和音量控件、autoplay属性自动播放、loop属性循环播放
(2)source元素链接不同的视频文件,浏览器会自动选择第一个可识别的格式:
你的浏览器不支持video标签
20.音频元素:使用语法和视频元素一样,只要把video换成audio即可。
21.HTML5的结构元素(先划分结构再写内容):
header(头部)、footer(脚部)、
section(独立区域)、article(独立文章内容)、
aside(相关内容或应用,常用于侧边栏)、nav(导航类辅助内容)
22.
23.
——3 表单——
24.表单标签form:
(1)action="url"属性意为把表单提交到某个页面,method=get|post意为向服务器发送数据的方式。
(2)提交方法:get提交,表单数据会在地址栏url中显示;而post提交不会显示,所以post提交更安全。
(3)enctype="text/plain"指enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。text/plain 空格转换为加号+,但不对特殊字符编码。
24.表单元素:
(1)表单元素标签的属性:
type(默认text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可选,该元素的初始值)、size(该元素的初始宽度)、maxlength(可输入的最大字符数)、checked(按钮被选中)
(2)列表框
(3)按钮:button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据),reset重置。要求美观可使用图片按钮如
(4)多行文本域:不能用value属性赋初始值
自我评价
(5)数字number:限制输入的数据为数字,设定最大值最小值、合法的数据间隔step或默认值等
(6)滑块range:作用和数字number一样,只是外观显示为用滑动条选择数值
(7)search搜索框:在任意页面中用于输入搜索关键词的文本框
(8)文件域:多用于文件上传
(9)当表单数据包含普通数据、文件数据等多部分内容时,要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。
(10)表单隐藏域hidden:数据不会页面中显示,但会随表单一同提交。
(11)表单元素 只读属性readonly、禁用disabled
(12)W3CHTML5标准中,规定对布尔类型的属性,属性值可以省略。
(13)表单元素的标注label:当鼠标单击标注的文本时,浏览器会自动对焦关联的表单元素,for属性规定label与哪个表单元素绑定。name和id属性必需。
24.HTML5表单新标签
块状元素特点:如果没有设置自身宽度,则显示为父容器的100%。
(2)行内元素:如 显示宽度由自己的内容决定,其他元素可以排在它后面。
16.元素类型转换:
(1)块状元素转为内联元素:display: inline;
(2)内联元素转为块状元素:display: block;
(3)把元素设为内联块状元素: display: inline-block;
(就是同时具备内联元素、块状元素特点,如img、input)
——2 列表、表格、媒体元素——
17.三种列表:
(1)有序列表
-
(2)无序列表
- ul中只能嵌套li,而li可以嵌套任意标签。
(3)定义列表
- 是标题及列表项的结合。
18.表格基本结构:单元格、行、列
(1)
(2)HTML5中已废除table的border属性,用css控制边框宽度。
(3)跨列(横向):
内容 跨行(竖向):
内容 ,两者都要删除被合并的其他单元格。(4)表格特点:同行单元格高度一致且水平对齐,同列单元格宽度一致且垂直对齐。
19.视频元素:
(1)controls属性提供播放暂停和音量控件、autoplay属性自动播放、loop属性循环播放
(2)source元素链接不同的视频文件,浏览器会自动选择第一个可识别的格式:
你的浏览器不支持video标签
20.音频元素:使用语法和视频元素一样,只要把video换成audio即可。
21.HTML5的结构元素(先划分结构再写内容):
header(头部)、footer(脚部)、
section(独立区域)、article(独立文章内容)、
aside(相关内容或应用,常用于侧边栏)、nav(导航类辅助内容)
22.
23.
——3 表单——
24.表单标签form:
(1)action="url"属性意为把表单提交到某个页面,method=get|post意为向服务器发送数据的方式。
(2)提交方法:get提交,表单数据会在地址栏url中显示;而post提交不会显示,所以post提交更安全。
(3)enctype="text/plain"指enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。text/plain 空格转换为加号+,但不对特殊字符编码。
24.表单元素:
(1)表单元素标签的属性:
type(默认text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可选,该元素的初始值)、size(该元素的初始宽度)、maxlength(可输入的最大字符数)、checked(按钮被选中)
(2)列表框
(3)按钮:button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据),reset重置。要求美观可使用图片按钮如
(4)多行文本域:不能用value属性赋初始值
自我评价
(5)数字number:限制输入的数据为数字,设定最大值最小值、合法的数据间隔step或默认值等
(6)滑块range:作用和数字number一样,只是外观显示为用滑动条选择数值
(7)search搜索框:在任意页面中用于输入搜索关键词的文本框
(8)文件域:多用于文件上传
(9)当表单数据包含普通数据、文件数据等多部分内容时,要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。
(10)表单隐藏域hidden:数据不会页面中显示,但会随表单一同提交。
(11)表单元素 只读属性readonly、禁用disabled
(12)W3CHTML5标准中,规定对布尔类型的属性,属性值可以省略。
(13)表单元素的标注label:当鼠标单击标注的文本时,浏览器会自动对焦关联的表单元素,for属性规定label与哪个表单元素绑定。name和id属性必需。
24.HTML5表单新标签
- 是标题及列表项的结合。
- ul中只能嵌套li,而li可以嵌套任意标签。