首页
博客统计
关于我
友链
留言板
推荐
网页导航
公益图床
Search
1
HTML 笔记
15 阅读
2
CSS 笔记
9 阅读
3
简单图床——EasyImage2.0
7 阅读
4
Adobe Illustrator 2021 特别版
6 阅读
5
Adobe Photoshop 2021 特别版
5 阅读
项目部署
软件分享
笔记分享
网站推荐
党课
登录
/
注册
Search
标签搜索
破解
Adobe
前端
html
宝塔
软件
Javascript
代码
CSS
零落山船
累计撰写
8
篇文章
累计收到
0
条评论
首页
栏目
项目部署
软件分享
笔记分享
网站推荐
党课
页面
博客统计
关于我
友链
留言板
推荐
网页导航
公益图床
搜索到
4
篇与
的结果
2024-09-03
2024河北单招 计算机类 大纲归纳
一、计算机基础知识信息的基本概念:泛指人类社会传播 的一切内容。数据基本概念:数据是信息的表现形式和载体,可以是符号、文字、数字、语音、图像、视频等。而信息是数据的内涵,信息是加载于数据之上,对数据作具有含义的解释通信的概念:通信,指人与人或人与自然之间通过某种行为或媒介进行的信息交流与传递计算机的发展历史:世界上第一台现代电子数字计算机埃尼阿克(ENIAC) 诞生于1946年2月14日的美国宾夕法 尼亚大学世界上第一台离散变量自动电子计算机 (EDVAC)是一台美国早期电子计算机。与它的前任ENIAC不 同,EDVAC采用二进制,而且是一台冯·诺伊曼结构的计算机计算机发展的四个阶段代次起止年份所用电子元器件数据处理方式运算速度应用领域第一代1946~1957电子管汇编语言、代码程序几千~几万次/秒国防及高科技第二代1958~1964晶体管高级程序设计语言几万~几十万次/秒工程设计、数据处理第三代1965~1970中、小规模集成电路结构化、模块化程序设计 实时控制几十万~几百万次/秒工业控制、数据处理第四代1970~今在规模、超大规模集成电路分时、实时数据处理 计算机网络几百万~上亿条指令/秒工业、生活等各方面计算机之父——冯·诺伊曼3. 冯·诺伊曼结构(1)采用二进制逻辑(2)程序存储执行/存储程序和程序控制(核心)(3)计算机由五个部分组成:运算器、控制器、存储器、输入设备、输出设备计算机的基本原理:主要分为存储程序和程序控制(冯·诺伊曼结构)计算机的特点:1.工作自动化 2.运算速度快 3.运算精度高 4存储容量大5.具有记忆和逻辑判断能力 6.可靠性高 7.高性能的实时通信和交流能力计算机的分类:1.按信息的表示方式分类:可分为模拟计算机、数字计算机、混合计算机 2.按应用范围分类:可分为专用计算机、通用计算机3.按计算机的规模、功能、速度、存储容量等综合性能指标分类 :(1)巨型机 (2)大型机 (3)中型机 (4)小型机(5)微型机:又称个人计算机(PC) (6)工作站计算机应用领域:1.科学计算:是最早的应用领域,如气象预报 2.数据处理/信息处理:最广泛的应用领域,如表格处理软件,数据库管理 3.过程控制:一般应用于工业,如数控机床4.计算机辅助系统:CAD-计算机辅助设计 CAM-计算机辅助制造CAI-计算机辅助教学 CAT-计算机辅助测试 CAE-计算机辅助教育5.办公自动化(OA) 6.网络应用 7.人工智能计算机发展新动态:1.物联网:如商品条形码、二维码等。2.大数据:基于搜索引擎的搜索关键词分析社会热点,基于交易大数据分析用户的购买习惯3.人工智能: 如机器人、语言识别、图像识别、自然语言处理和专家系统等4.虚拟现实VR:3D眼镜等5.增强现实AR:AR书籍、博物馆展示引导等人工智能的基本特点:学习能力、 推理能力、自主决策、适应性、速度与效率、智能交互、多领域应用、潜在风险物联网的基本概念:通过信息传感设备,按约定的协议,将任何物体与网络相连接物联网的基本特点:获取信息的功能 传送信息的功能 处理信息的功能 施效信息的功能计算机的系统:一个完整的计算机系统由硬件系统和软件系统组成。1.硬件系统: 指计算机的物理系统,是看得见、摸得着的物理器件,包括主机和外设。2.软件系统:指管理计算机软件和硬件资源,控制计算机运行的程序、指令、数据及 文档的集合。 补充:通常把没有软件的计算机称为“裸机”主机由CPU和内存组成CPU:中央处理器/微处理器,是计算机中最关键的部件,由运算器+控制器+寄存器组成。(1)运算器:又称算术逻辑单元(ALU),能进行算术运算和逻辑运算。(2)控制器:计算机的神经中枢,指挥各个部件自动协调工作。内存/主存:存放当前正在进行的程序和数据,由随机存储器+只读存储器组成(1)随机存储器(RAM):断电后信息丢失。(2)只读存储器(ROM):只能读出信息不能写入,断电后信息不丢失。高速缓冲存储器(Cache):高速缓冲存储器是存在于主存与 CPU之间的一级存储器, 解决CPU与内存之间速率不匹配的问题。外部设备由外存和输入输出组成硬盘:存储容量大、存取速度快 光盘:CD-ROM(只读光盘)U盘:质量轻、体积小、可以通过USB接口即插即用输入设备:指向计算机输入程序、数据和命令的部件。键盘(标准输入)、鼠标、扫描仪、光笔、话筒、数码相机输出设备:指输出经过计算机运算或处理后所得的结果,并将结果 字符、数据、图形等人们能够识别的形式进行输出的设备 显示器(标准输出)、打印机、绘图仪、投影仪、音响计算机存储单位:计算机最小的存储单位是比特,也就是就位(bit),代表一个二进制位,比特的单位有字节(Byte)千字节(KB)兆字节(MB)吉字节(GB)太字节(TB) 1Byte=8bit 1KB=1024Byte 1MB=1024KB 1GB=1024MB 1TB=1024GB计算机最小的存储单位是位(bit) 计算机的基本存储单位是字节(Byte)在计算机中一个汉字是占2字节 一个西文字符(英文和符号)占1字节数制中基数、权的概念:基数:某数制可以使用的数码个数。十制的基数是10;二进制的基数是2 16进制的基数是16 权:权是基数的幂,表示数码在不同位置上的数值。常见ASCII码的大小规则:数字< 大写字母 < 小写字母。几个常见字母的ASCII码大小:“A”为65;“a”为97;“0”为48 。汉字编码:(1)国标码:GB2312-80 (2)汉字内码 (3)汉字输入码/外码:音码、形码 (4)汉字字形码:在输出时产生汉字的字形,通常用点阵形式产生区位码:GB2312是一种汉字编码方式机内码:是微软为了解决汉字编码与ASCLL编码冲突。从而规定把每个字节的最高位都从 0 换成 1三者的关系:国标码 = 区位码 + 2020H; 机内码 = 国标码 + 8080H;三者的转换:(1)将区位码中的区码和位码分别转换为十六进制数;(2)区位码的十六进制数+2020H = 国标码;(3)国标码+8080H = 机内码常见的文件扩展名一、图形图像文件的常见扩展名1、BMP:不压缩,不会丢失任何图像细节。2、JPG:有损图像压缩格式,提供2:1到40:1的压缩比例。一般可以获得10:1的压缩率而不觉得有明显失真。3、GIF:8位位图,最大支持256种颜色。支持动画格式和透明效果。4、PNG:一种较新的位图格式,与GIF格式相类似,支持透明,不支持动画,最大支持24位真彩色 。5、TIF\TIFF:标记图像文件格式,主要用于页面排版。6、PSD:ps专用的图像存储格式,保真度同BMP。可以记录层的存在,所以文件较大。二、动画文件扩展名1、FLA:flash源文件 2、SWF:flash影片文件 三、声音文件扩展名1、WAV :利用该格式记录的声音文件能够和原声基本一致,质量非常高,但这样做的代价就是文件太大。 2、MP3 :现在最流行的声音文件格式,因其压缩率大,在网络可视电话通信方面应用广泛,但和CD唱片相比,音质不能令人非常满意。 3、RA:这种格式真可谓是网络的灵魂,强大的压缩量和极小的失真使其在众多格式中脱颖而出。和MP3相同,它也是为了解决网络传输带宽资源而设计的,因此主要目标是压缩比和容错性,其次才是音质。4、MIDI:Musical Instrument Digital Interface(乐器数字接口)的缩写。它是由世界上主要电子乐器制造厂商建立起来的一个通信标准,以规定计算机音乐程序 电子合成器和其它电子设备之间交换信息与控制信号的方法。 5、VOC :Creative公司波形音频文件格式,也是声霸卡(sound blaster)使用的音频文件格式。6、RMI:Microsoft公司的MIDI文件格式,它可以包括图片标记和文本。 7、AIF:Apple计算机的音频文件格式。四、视频文件扩展名1、AVI:(最清晰的、最常用)它的英文全称为Audio Video Interleaved,即音频视频交错格式。可以将视频和音频交织在一起进行同步播放 。2、MPEG:即运动图像专家组格式,家里常看的VCD、SVCD、DVD就是这种格式。 3、MOV :美国Apple公司开发的一种视频格式,默认的播放器是苹果的QuickTimePlayer。 4、WMV :Windows Media Video,也是微软推出的一种采用独立编码方式并且可以直接在网上实时观看视频节目的文件压缩格式。6、DAT:VCD视频文件,用常用的播放器都可以打开观看 。五、其它常见扩展名DOC:WORD文档 EXE:可执行文件 TXT:文本文件 COM:可执行文件 XLS:EXCEL文件 BAT:批处理文件 Zip:压缩文件 Rar:压缩文件ppt:幻灯片文件 DAT:数据文件 Pcx:一种图形文件 MDB:数据库文件HTML:网页文件 QPR:查询文件机器数:一个数在计算机的存储形式是二进制数,我们称这些二进制数为机器数,机器数是有符号,在计算机中用机器数的最高位存放符号位,0表示正数,1表示负数原码的表示与机器数真值表示的一样,即用第一位表示符号,其余位表示数值。反码:正数 : 和原码相同 负数 : 在其原码的基础上,符号位不变,其余各位取反补码:正数 : 补码是其原码本身。负数 : 补码是在其原码的基础上,符号位不变,其余各位取反后加1(即在反码的基础上加1)。信息安全:为数据处理系统建立和采用的技术 、管理上的安全保护,为的是保护计算机硬件、 软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。防治网络病毒入侵基本知识:防火墙技术 病毒防护技术 访问控制技术 数字签名技术 生物识别技术 信息加密技术 计算机病毒:人为编写的影响计算机正常使用并且能够自我复制的一组计算机指令或程序代码。计算机病毒特征:破坏性、传染性、寄生性、隐蔽性、可触发性、可执行性传播途径:通过移动存储设备进行病毒传播 通过网络来传播 利用计算机系统和应用软件的弱点传播防范措施: 杀毒软件 打全系统补丁常用杀毒软件:360、瑞星、火绒、金山毒霸、卡巴斯基、诺顿、小红伞二:操作系统操作系统的特点:操作系统(OS):管理计算机硬件与软件资源的计算机程序。操作系统也提供一个让用户与系统交互的操作界面操作系统的功能:(1)进程管理(2)作业管理 (3)设备管理 (4)文件管理 (5)存储管理 快捷键通用:Ctrl+c复制 Ctrl+v粘贴 Ctrl+x剪切 Ctrl+a全选 Ctrl+z撤销 Ctrl+s保存 Ctrl+Alt+delete调出任务管理器 Ctrl+o打开 Ctrl+F查找 Alt+Tab窗口切换 Ctrl+Shift切换输入法 Ctrl+space(空格)输入法切换 Ctrl+home光标定位文件开头 Ctrl+end 光标定位末尾 Ctrl+P打印 Ctrl+Esc显示开始菜单 Alt+F4关闭窗口(在桌面关机) Win+E资源管理器WordCtrl+H替换 Ctrl+N新建 Ctrl+D字体ExecelCtrl+H替换 Ctrl+N新建 Ctrl+T创建表PPTCtrl+H替换 Ctrl+N新建 Ctrl+M 新建幻灯片 Shift+F5在当前页放映 F5放映鼠标的基本操作1、移动2、单击3、拖动4、右击5、双击桌面图标:代表文件、文件夹、程序和其它项目的小图片,由文字和图标组成。图标实际上是对象的 快捷方式,双击图标可以启动或打开对象系统图标:默认只显示回收站图标,其它系统图标有计算机、网络、控制面板等 桌面图标的操作主要有创建、移动、排序、删除等桌面小工具的使用方法:添加小工具 调整小工具大小和位置 个性化设置 安装更多小工具任务栏的使用:可以改变大小、改变位置(上下左右)、自动隐藏、锁定任务栏的构成:开始菜单、应用程序区、语言选项带、托盘区等部分组成任务栏的作用:包括启动和切换应用程序、显示正在运行的应用程序的图标、快速访问固定在任务栏上的常用应用程序窗口的组成:标题栏、功能区、状态栏、控制按钮、工作区和滚动条(1)标题栏:文件名+应用程序名 (2)控制按钮:最小化、最大化/还原、关闭(3)功能区 (4)工作区 (5)滚动条 (6)状态栏补充:窗口既可移动也可改变大小,Windows 7是一个多任务操作系统,允许多个程序同时运行,但在某一时刻,只能有一个窗口处于活动状态,这个窗口就称为活动窗口。窗口的操作:(1)移动窗口:按住鼠标左键拖动(2)更改窗口尺寸最大化/还原:单击“最大化/还原”按钮或双击标题栏最小化:单击“最小化”按钮可以隐藏窗口,单击任务栏上的活动应用程序图标可以重新显示其它尺寸:将鼠标移动到窗口的4个边框或4个角,当光标变成双向箭头时,拖动边框即可关闭窗口:单击“关闭按钮”排列窗口:层叠、堆叠、并排对话框只能移动不能改变大小1.单选框:只能选一个,圆形2.复选框:可多选,方形单击菜单中带有省略号(…)的命令会打开一个对话框主分区:能够安装操作系统,能够进行计算机启动的分区 , 这样的分区可以直接格式化,然后安装系统,直接存放文件。磁盘分区后, 必须经过格式化才能够正式使用Window系统安装方法:1.准备启动介质 2.准备计算机 3.进入BIOS设置 4.启动计算机 5.安装Windows 6.系统设置 7.安装应用程序和驱动程序 8.备份和更新启动U盘的制作方法:要将其刻录到空白的 DVD或制作成可启动的USB闪存驱动器 计算机的日常维修计算机的日常维修:1. 清洁 2. 检查电源 3. 硬盘维护 4. 升级硬件 5. 冷却系统 6. 硬件故障诊断软件维护:1. 操作系统更新 2. 软件管理 3. 病毒和恶意软件防护 4. 磁盘清理 5. 磁盘碎片整理 6.系统备份与恢复 7. 软件故障诊断软件技能:1. 学习基础 2. 故障排除 3. 专业工具 4. 持续学习文件命名规则:文件名:主文件+扩展名组成,中间用“.”分割(1)文件名最长可以使用255个字符。(2) 可以使用扩展名, 扩展名用来表示文件类型,也可以使用多间隔符的扩展名 。 win.ini.txt是一个合法的文件名,但其文件类型由最后一个扩展名决定。(3)文件名中允许使用空格,但不允许使用下列字符(英文输入法状态)< > / \ | : " *?(4)windows系统对文件名中字母的大小写在显示时有不同,但在使用时不区分大小写。Windows 7操作系统是通过树形结构来组织和管理计算机资源的,一个盘有且只有一个根目录,不能删除通配符的使用:通配符包括星号“*”和问号“?”可以使用星号代替单个或多个字符 (星号优先句子),可以使用问号代替一个字符文件的属性:(1)隐藏(2)存档(3)只读:表示文档或属性只能读取,不能修改也不能储存。资源管理器:是Windows 系统提供的资源管理工具,可以用它查看本台电脑的所有资源 ▷符号代表有子菜单管理文件及文件夹的操作方法:1.选择:Shift选择连续的,Ctrl选择不连续的 2.复制:(1)按Ctrl拖动 (2)不同磁盘之间复制直接拖动3.移动 (2)直接拖动 (3)不同磁盘之间移动:Shift+鼠标拖动4.删除 (1)直接拖到回收站 (2)快捷菜单 (3)彻底删除:Shitt+Delete 注意:删除U盘中文件,不经过回收站直接删除回收站的概念:回收站是计算机操作系统中用于临时存放用户删除文件的一个特殊文件夹在回收站中的文件可以被恢复,直到用户清空回收站回收站的操作:可以调节回收站的大小 删除文件或文件夹 还原文件或文件夹使用“编辑”菜单删除文件 清空回收站剪贴板的概念:用于临时存储和交换数据,如文字、图像、图形、声音和视频等。 剪贴板是内存中的一块区域,通常由操作系统的内核管理。剪贴板的操作:复制、剪切、粘贴控制面板:它允许用户查看并更改基本的系统设置,比如添 加/删除软件,控制用户帐户,更改辅助功能选项。多媒体技术的基础知识:多媒体技术的定义:媒体是一种把文本、图形、图像、动画和声音等形式的信息结合在一起,并通过计算机进行综合 处理和控制,能支持完成一系列交互 式操作的信息技术多媒体技术的主要特征: 集成性、交互性、实时性图像像素点越多(分辨率越高) ,图像越清 晰,文件也就越大。动画即逐帧拍摄对象并连续播放而形成运动影像的技术。位图图像:由许多点组成的,这些点称为像素,单位面积内像素点数目越多 ,则图像 越清晰,否则图像越模糊。图像占据的存储空间比较大。将它放大、缩小和旋转时会失真矢量图形:它的图形形状主要由点和线段组成,图形的特点是占用的空间小,放大或 缩小后不失真。图像的数字 化要经过采样、量化和编码三个阶段。获取多媒体素材的方法:在线素材网站 利用扫描仪计算机网络的定义:计算机网络是用通信线路和通信设备将多个计算机 系统互相连接起来实现彼此之间的 数据通信和资源共享的系统计算机网络的功能:1.数据通信:是计算机网络的最主要的功能之一。2.资源共享:是人们建立计算机网络的主要目的之一。计算机资源包括硬件资源、软件资源 和数据资源计算机网络的分类:按通信距离: 可分为局域网(LAN)、城域网(MAN)、广域网(WAN)按网络拓扑结构: 可以分为总线型、星型、树型、环型、网状、混合型等按通信介质: 可以分为双绞线网、同轴电缆网、光纤网和卫星网按传输介质: 可以分为有线网和无线网按用途: 可以分为专用网和公用网计算机网络主要由计算机系统、数据通信系统、网络软件及协议三大部分组成网络的拓扑结构:分为点对点结构和广播式结构 点对点结构有星形、树形、环形、网状形 广播式有总线形、卫星、微波等局域网常用的网络拓扑结构有:环形拓扑、星行拓扑、总线拓扑三个局域网组网技术:路由技术、交换技术、远程访问技术、VLAN技术、DHCP技术 静态路由技术网络传输介质:双绞线(TP):是一种综合布线工程中最常用的传输介质、双绞线在传输距离,信道宽度和数据传输速度等方面均受到一定限制 、价格较为低廉同轴电缆:可用于模拟信号和数字信号的传输光纤又称为光缆:光纤的电磁绝缘性能好、信号 衰小、频带宽、传输速度快、传输距离大价格昂贵计算机网络设备连接:中继器(RP)是工作在物理层上的连接设备 。适用于完全相同的两个网络的互连 ,主要功能 是通过对数据信号的重新发送或者 转发,来扩大网络传输的距离。计算机网络连接设备:把网络中的通信线路连接起来的各种设备的总称1.中继器(RP):工作在物理层上的连接设备 。适用于完全相同的两个网络的互连 ,主要功能 是通过对数据信号的重新发送或者转发,来扩大网络传输的距离。2.集线器的(Hub):集线器的主要功能是对接收到的信号进行再生整形放大,以扩大 网络的传输距离3.交换机(Switch):一种用于电(光)信号转发的网络设备。它可以为接入交换 机的任意两个网络节点提供独享的电信号通路4.路由器(Router):连接两个或多个网络的硬件设备,在网络间起网关的作用5.调制解调器(Modem):俗称“猫”,它能把的数字信号和模拟信号相互转换开放系统互连(OSI)分为7层它将网络通信的工作划分为七个层次,从下到上依次是物理层、数据链路层、网络层、传输层、会话层、表示层和应用层物理层:负责通过网络通信媒介(如电缆、光纤、无线电等)将比特流数据从发送设备的物理层传输到接收设备的物理层。数据链路层:负责将从物理层接收到的比特流数据打包成数据帧,并处理流控制,确保数据正确传输。网络层:负责将数据从源地址传输到目标地址,通过路由选择和IP协议实现数据的传输。传输层:负责数据的传输,包括错误恢复、流控制和支持重新传输会话层:负责在网络中的两节点之间建立和维持通信表示层:负责数据的格式化,确保不同应用程序之间数据的通用性。应用层:直接对应用程序提供服务,应用程序可以变化,但要包括电子消息传输。协议分为四层:应用层、传输层、网络层、网络接口层互联网层: IP(指网际互连协议)、ARP(地址解析协议)、RARP(反向地址转换协议) ICMP(控制报文协议)、IGMP(网际组管理协议)传输层: TCP(传输控制协议)、UDP(用户数据报协议)应用层: FTP(文件传输协议)、TELNET(远程登录服务)、DNS(域名解析协议)SMTP(电子邮件传输的协议)、HTTP(超文本传输协议)POP3(电子邮件传输的协议)IP编址技术:IP地址分由32位二进制组成,被分为4段,每段8位,中间用圆点隔开,每段取值0~255,IP地址包括网络号和主机号A类:第一段取值于1~127 子网掩码255.0.0.0 最多容纳16777214台主机 第一段为网络号后三段为主机号B类:第一段取值于128~191 子网掩码255.255.0.0 65534台主机 前两段为网络号后两段为主机号C类:第一段取值于192~223 子网掩码255.255.255.0 254台主机 前三段为网络号后一段为主机号D类:第一段取值 224~239 组播地址E类:第一段取值 240~255 不做业务用IPV6版IP地址由128位二进制位组成,用8段4位十六进制表示,中间用冒号隔开网络共享资源的访问控制设置方法:文件夹共享设置、高级共享设置、网络和共享中心设置 组策略设置、客户端配置移动终端接入无线网的配置方法:线路连接、 开启无线网络、 连接无线网络、 登录路由器管理界面、配置无线网络、完成设置万维网的定义:万维网/环球信息网/WWW 超文本传传输协议(HTTP),它负责规定浏览器和服务器怎样互相交流。超文本标记语言(HTML),作用是定义超文本文档的结构和格式网页文件:是用HTML编写的,可在万维网上传输,能被浏览器识别显示的文本文件。其扩展名是.htm和.htmlURL:统一资源定位器/统一资源定位符/网址收藏夹收藏的是网址而非网页域名入网结构:主机名+机构名+网络名+最高层域名一个IP地址可以有多个域名,一个域名只能有一个IP地址非实时信息交流方式:E-mail(1)发送:SMTP 接收:POP3 (2)地址格式:用户标识符+@+域名实时信息交流方式:QQ、微信浏览器:用来检索、展示以及传递Web信息资源的应用程序。Web信息资源由统一资源标 识符(URI)所标记服务器的主要任务有:(1)接受请求。(2)请求的合法性检查,包括安全性屏蔽。(3)针对请求获取并制作数据,包括Java脚本和程序、CGI脚本和程序、为文件设置适当的MIME类型 来对数据进行前期处理和后期处理。(4)把信息发送给提出请求的客户机。信息资源的特点:复合性、智能性、资源性、有限性和分布的非均匀性文档的创建:1启动 Word 会自动创建一个名为“文档 1”为名称的空白文档 2文件- 新建-可用模板“空白文档”-创建 3桌面右键-新建-DOCX文档文档的保存:(1)自定义快速访问工具栏-保存;(2)文件-保存;(3)文件-另存为 系统默认自动保存文档时间间隔为10 分钟文档的编辑:插入:在原有文本左边输入文本时原有文本右移;改写:在原有文本左边输入文本时原有文本被替换;插入/改写的切换键 Insert文本选定文本选定区:单击选行、双击选段、三击选全文/全选(Ctrl+A)Shift选择连续的文本,Ctrl 选择不连续的,Alt 选择矩形文本块;字/词-双击、句子 - Ctrl+单击、段-三击定位 Ctrl+G 插入超链接:Ctrl+K拼写和语法:拼写错误:红色波浪线;语法错误:绿色波浪线文档打印:【文件】--【打印】 Ctrl+P 打印预览:文件-打印/自定义快速访问工具栏-打印预览按钮 自定义打印范围:用逗号隔开文档的保护:设置打开密码:【文件】-【信息】-【保护文档】-【用密码进行加密】 设置成只读模式:【文件】-【另存为】-【工具】-【常规选项】-【修改文件时的密码】-【确定】设置字体:(1)默认宋体五号字两端对齐;(2)加粗:Ctrl+B、倾斜:Ctrl+I、下划线 Ctrl+U 下标:Ctrl+=、上标:Ctrl+Shift++设置段落格式:(1)段落是文本、图形或其它对象的集合,后面紧跟一个段落标记,是文档构 成的基本单元;段落标记不仅表示一个段落的结束,还存储了该段落的格式。(2)左对齐:Ctrl+L、右对齐:Ctrl+R、居中对齐:Ctrl+E、两端对齐:Ctrl+J、分散对齐:Ctrl+Shift+J调整页面布局:1.页面设置2.页眉和页脚:显示文档中的注释性信息,如文章的章节标题、作者、日期时间、 文件名或单位名称等。页眉在正文的顶部,页脚在正文的底部。3.分栏4.分页符:分页的一种符号,上一页结束以及下一页开始的位置分页符快捷键:Ctrl+Enter5.分节符:不仅可以将文档内容划分为不同的页面,而且还可以分别针对不同的节,进行页面设置操作。插入分节符可设置不同的页眉页脚。表格的制作:1.创建表格 2.输入表格内容 3.编辑表格 4.格式化表格(1)光标移动到下一单元格:Tab;(2)光标移到上一单元格:Shift+Tab编辑表格:(1)选定表格、行、列、单元格 选择整个表格:单击表格左上角的十字按钮 选择一个单元格:鼠标指向单元格左下角,光标呈右上角方向黑色实心箭头单击 选择行:鼠标指向该行左端边沿处(选定区)单击 选择列:鼠标指向该列顶端边沿处,光标呈向下黑色实心箭头单击 选择多个单元格:鼠标从左上角拖动至右下角 (2)插入单元格、行、列 插入行、列 插入单元格 删除单元格、列、行和表格 合并和拆分单元格文档中图形、图片的插入: 艺术字:具有图形属性,但可以像文本一样编辑 自选图形形状:按 Shift 绘制正圆、正方形 插入SmartArt图形 插入本地图片设置图形环绕方式: 剪贴画和图形文件默认嵌入型的文字环绕方式艺术字、自选图形形状和文本框采用浮于文字上方的文字环绕方式文本框的插入:点击菜单栏上的“插入”选项卡——选择文本框——选择文本框——在文档中移动鼠标,画出文本框,输入文字符号的输入:点击菜单栏上的“插入”选项卡——转到 “插入符号”——选择一个符号,或选择 “更多符号” ——找到所需的符号后,双击该符号该符号将插入到文件中工作簿和工作表的基本操作:1、新建:(1)新建空白工作簿。选择“文件”“新建”选项或按Ctrl+N组合键,进入“新建”界面,单击模板列表中的“空白工作薄”选项,即可快速新建一个工作簿。(2)根据模板新建工作簿。选择“文件”-“新建”选项,进人“新建”界面,在模板列表中选择与需要创建工作薄类型对应的模板,即可生成带有相关文字和格式的工作簿。2、打开:(1)选择“文件”-“打开”选项。(2)单击快速访向工具栏中的“打开”按钮。(3)按Ctrl+O组合键。3、保存(1)手动保存工作簿。选择“ 文件”→“保存”选项或单击快速访问工具栏中的“保存”按钮,即可保存工作簿。(2)自动保存工作簿。选择“文件”→“ 选项”选项 ,弹出“Excel选项”对话框。在左侧窗格中选择“保存”选项,在右侧窗格的“保存工作簿”选项组中选中“保存自动恢复信息时间间隔”复选框,并设置间隔时间,然后单击“确定”按钮即可。默认情况下,Excel自动保存间隔时间为10分钟。(3)快捷键Ctrl+S4、重命名(1)右击工作表标签,在弹出的快捷菜单中选择“重命名”命令,输入新的工作表名称。(2)在“开始”体项卡的“单元格”组中单击“格式”下拉按钮,在其下拉列表中选择“重命名工作表命令”,输入新的工作表名称。(3)双击工作表标签,在标签位置处输入新的工作表标签名称。5、单元格复制、移动、粘贴、清除(1)复制单元格复制单元格是指将单元格中的数据复制到目标单元格中,原有位置的数据仍然存在。(2)移动单元格移动单元格是指将单元格中的数据移到目标单元格中,原有位置留下空白单元格。(3)粘贴单元格粘贴单元格是将单元格的数据移动或复制到目标单元格中。(4)单元格的复制、移动与粘贴操作方法移动单元格的方法和复制单元格的方法基本相同:首先选定要移动或复制数据的单元格,然后在“开始”选项卡的“剪贴板”组中单击“剪切”按钮或“复制”按钮,再选中目标位置处的单元格,最后单击“剪贴板”组中的“粘贴”按钮。(5)清除单元格选中单元格或单元格区域,在“开始”选项卡的“编辑”组中单击“清除”下位按钮,选择 相应的命令,可以实现单 元格中内容、格式 、批注 等的清除。清陈下拉列表如图所示,其命令包括:(1)全部清除:清除单元格中的所有内容。(2)清除格式:只清除格式,保留数值、文本或公式。(3)清除内容:只清除单元格的内容,保留格式。(4)清除批注:清除单元格附加的批注。(5)清除超链接:清除单元格附加的超链接。注意:(1)使用Delete键只能清除单元格中的内容,无法清除单元格的格式。(2)清除单元格中批注的方法是使用“审阅”选项卡的“批注”组中的“删除’命令工作表数据的输入、编辑和修改:(1)数据输入:选中目标单元格:点击你要输入数据的单元格,使其处于编辑状态;输入文本:直接键入文本内容。如果需要输入数字,只需键入数字即可(输入日期:键入日期,或者在输入栏中使用格式化功能设置日期格式)(2)拖拽填充数据序列:输入起始数据:在一个单元格中输入起始数字或文本。拖拽填充:将鼠标光标放在单元格的右下角,出现小黑点。然后,拖动以自动填充相邻单元格。Excel 会根据规律智能填充数据序列。1.单元格默认格式:文本左对齐、数值、日期和时间右对齐、逻辑值居中对齐2、条件格式:根据条件使用数据条、色阶和图标集,以突出显示相关单元格,强调异常值。以及实现数据的可视化效果。3、自动填充1.快速填充相同的数值:直接拖2.快速填充步长值为1的等差数列:输入1,按Ctrl拖动3.快速填充任意的等差数列:第一个单元格输入1,第二个单元格输入3,拖动填充柄单元格引用:1、相对引用(默认):例A1,当公式移动或复制时,将根据移动或复制的位置自动调整。2、绝对引用:例$A$1,固定的,公式的复制或移动不影响它所引用的单元格位置。3、混合引用:例A$1、$A1,指相对引用与绝对引用混合使用函数的使用:1、函数组成结构:等号+函数名+参数/变量2、常用函数(1)SUM求和函数(2)AVERAGE平均值函数(3)MAX(最大值)、MIN(最小值)(4)COUNT计数函数(5)COUNTIF计数函数(满足特定条件)图表的创建:1、柱形图:用于比较相交于类别轴上的数值大小。2、折线图:用于显示随时间变化的趋势。3、饼图:用于显示每个值占总值的比例。4、条形图:是用于比较多个值的最佳图表类型。补充:图表是依据数据创建的,数据改变图表随之改变筛选排序:1、排序是对数据清单按某字段名重新排列顺序,用来排序的字段称为关键字。2、筛选数据列表的意思就是将不符合用户特定条件的行隐藏起来,可以让用户更方便地查看数据。3、分类汇总,分类汇总是对数据清单按某个字段进行分类将字段值相同的连续记录作为一类,进行求和、平均值、计数等汇总运算;针对一个分类字段,还可进行多种汇总。在分类汇总前,必须对分类字段进行排序。创建演示文稿:分别为空白演示文稿、最 近打开的模板、样本模板、主题、我的模板和根据现有内容新建(1)空白演示文稿:空白演示文稿不包含任何文本格式图案和色彩,适用于准备自己设计图案、配色方案和文本格式的情况。(2)样本模板 :PowerPoint 模板是另存为.potx文件的一个或一组幻灯片的模式或设计图。模板可以包含版式、 主题颜色 、 主题字体、 主题效果、 背 景 样 式 , 甚 至 可 以 包 含 内 容 。 PowerPoint2010提供了多种模板,利用模板输人相应的文字即可自动快速地创建演示文稿。(3)根据主题创建:PowerPoint 提供了多种设计主题,包含协调配色方案、背景、字体样式和占位符位置。使用预先设计的主题,可以轻松快捷地统一演示文稿的整体外观。(4)根据现有内容新建:根据现有内容新建指对已经存在的演示文稿进行修改,生成新的演示文稿编辑演示文稿:对每张幻灯片中的对象进行编辑操作;对演示文稿中的幻灯片进行 插入、删除、移动和复制等操作保存演示文稿:(1)单击“文件”按钮,在弹出的下拉菜单中选择 “保存”命令,或单击快速访问工具栏 中的“保存”按钮,弹出“另存为”对话框。(2)由于是第一次保存文件,此时文件使用的是系统默认的“演示文稿1”文件名,用户要 使用自定义的文件名,只需在“文件名”文本框中输人新的文件名即可。(3)在“保存位置”下拉列表框中选择文件要保存的位置。(4)使用默认的演示文稿保存类型“*.pptx”。PowerPoint2010有多种文件格式,最常用的是ppt和pptx。演示文稿的视图:(1)普通视图:普通视图是默认的视图模式,只能显示一张幻灯片。普通视图集成了“幻 灯片”和“大纲”两个视图标签(2)幻灯片浏览视图 :幻灯片浏览视图可以同时显示多张幻灯 片,方便对幻灯片进行移动、 复制、删除等操作。(3)阅读视图:应用阅读视图可以方便地在屏幕上阅读文 档,而不显示”文件”选项卡功 能区等窗口元素。(4)幻灯片放映视图:幻灯片放映视图用于放映幻灯片,其与单击“幻灯片放映” 选项卡 “开始放映幻灯片”选项组中的“从头开始”按钮的功能是相同的。(5)备注页视图 :在“视图”选项卡“演示文稿视图”组中单 击“备注页”按钮,进入备 注页模式。幻灯片的新建:在启动PowerPoint2010后会自动建立一张新的空白幻灯片“开始”——“幻灯片”——附件下载word
2024年09月03日
2 阅读
0 评论
1 点赞
2024-07-19
Javascript 笔记
一、Javascript 概述1. JS 简介Javascript,简称 JS, 是一种客户端脚本语言,主要用来向 HTML 网页添加各种动态效果。作者是 Brendan Eich , 10天完成 Javascript 设计,网景公司初始名为 Livescript,后来和 Sun 合作,改名为 JavascriptJavascript 是一种可以在客户端运行的脚本语言,不需要进行编译编译型语言需要将所有代码在编译器中进行编译再转换为机器语言让CPU运行解释型语言通过解释器逐行转换为机器语言执行Javascript 可以做什么?表单动态校验(密码强度检测) 也是 JS 产生最初的目的网页特效服务端开发(Node.js)命令行工具(Node.js)桌面程序 (Electron)App (Cordova)控制硬件-物联网 (Ruff)游戏开发 (cocos2d-js)2. JS 组成ECMAscript - Javascript 语法DOM - 页面文档对象模型BOM - 浏览器对象模型ECMAscriptECMAScript 是 ECMA 国际进行标准化的一门编程语言,往往被称为 Javascript 或 JScript,实际上后两者是 ECMAScript 的是实现和扩展DOM - 页面文档对象模型文档对象模型(Document Object Model)通过 DOM 提供接口可以对页面上的各种元素进行操作(大小、位置、颜色)BOM - 浏览器对象模型浏览器对象模型(Browser Object Model),可以对浏览器窗口进行互动的对象结构,通过BOM可以操作浏览器窗口,比如弹窗、控制浏览器跳转、获取分辨率等。二、JS 基本使用1. JS 嵌入方式在 HTML 中使用 JS 可以用以下几种方式实现:行内式内嵌式外部引用 js 文件行内式,可以在 html 元素中直接用使用 js 语句,但是一般都是调用函数或简短的语句。<input type="button" value="Click Me!" onclick="alert('Hellow World')">内嵌式,一般用于实现比较小的功能,代码不长的情况<script> alert('Hello World'); </script>外部JS文件,最常见的方式<script src="my.js"></script>2. JS 注释// 单行注释 /* 多行注释 */3. JS 输入输出语句alert(msg) // 浏览器弹出框 console.log(msg) // 浏览器控制台打印输出信息 prompt(info) // 浏览器弹出输入框,用户可以输入三、变量1. 定义变量是程序在内存中申请的一块用来存放数据的空间。通过变量名称我们可以使用或修改保存在系统中的对应的数据。2. 声明变量Js 是一种弱类型或者说动态语言,不用提前声明变量的类型,变量的类型会自动判断。即使赋值之后,变量的类型根据重新赋值的数据类型同样进行改变。var age; // 声明一个名称为age的变量 age = 12; // 给age这个变量赋值为12通常声明与赋值一起使用:var age = 12;3. 初始化变量var age = 12 var name = 'Tom' name = 'OO' // 再次给相同变量赋值则不用 var 进行初始化 var a = 10, b = 20, c = 30; // 可以同时声明多个变量4. 输入存储变量var name = prompt('请输入你的名字') alert(name)5. 变量的命名规范由字母、数字、下划线、$符号组成,不能以数字开头不能是关键字和保留字,例如:for,while,this,name区分大小写变量名必须有意义小驼峰命名法,如:myName建议不要用$作为变量名6. 查看变量alert(变量名) // 弹出框显示 console.log(变量名) // 控制台显示 document.write(变量名) // HTML 页面上显示四、数据类型1. 数字型3 // 十进制 010 // 八进制 0xa // 十六进制 3.14 // 小数 NaN // 非数字 Not a Number数字型范围:console.log(Number.MAX_VALUE); // 1.7976931348623157e+308 console.log(Number.MIN_VALUE); // 5e-3242. 字符串型var str1 = '这是个字符串';字符串转义符:\n // 换行 \r // 回车 \\ \' \" \t \b // 空格 \xnn // 16进制字符,如 \x41 代表 'A' \unnn // 16进制 unicode 字符, 如 \u03a3 代表∑字符串长度:用 变量.length 可以得到字符串长度,如:var str1 = 'hello world' console.log(str1); // 输出结果:11字符串拼接:var str = str1 + str2; var str = '字符串' + 123; // 输出字符串123,字符串拼接其他类型会自动转换为字符串 var str = 'My age is' + age + 'years old'; // 字符串+变量拼接只要与字符串做加法运算都会被转换成字符串字符串中的双引号和单引号:var str = "他是'程序猿'";3. 布尔型布尔型 Boolean 只有两个值,一个是 true, 一个是 falseconsole.log(1 + true); // 在运算中,true代表1 console.log(1+ false); // false 代表0 console.log('t' + true); // 在字符串拼接,会直接以字符串形式拼接 ttrue4. null 空值console.log(null+ 'pp'); // 会拼接字符串 nullpp console.log(null + true); // 会输出 1null表示"没有对象",即该处不应该有值。作为函数的参数,表示该函数的参数不是对象。作为对象原型链的终点。5. undefined 未定义一个声明后没有被赋值的变量会有一个默认值 undefinedconsole.log(undefined + 'pp'); // 会拼接字符串 undefinedpp console.log(undefined + true); // 会输出 NaN console.log(undefined + 1); // 会输出 NaN变量被声明了,但没有赋值时,就等于undefined。调用函数时,应该提供的参数没有提供,该参数等于undefined。对象没有赋值的属性,该属性的值为undefined。函数没有返回值时,默认返回undefined。undefined 和 null 的区别只设置了null作为表示"无"的值。根据C语言的传统,null被设计成可以自动转为0。JavaScript的最初版本是这样区分的:null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。undefined和null在if语句中,都会被自动转为false6. 其他类型数组对象7. 数据类型转换7.1. typeof() 查看数据类型var num = 1; console.log(typeof num); console.log(typeof(num)); // 也可以使用参数的形式查看null 返回的是 object7.2. 转换为字符串var num = 1; alert(num.toString()); // 无法用 .toString() 方法转换 undefined 和 null alert(String(num)); // 可以转换 undefined 和 null alert(num + '');7.3. 转换为数字型// 转换为整型 parseInt(num); parseInt('3.14'); // 取整为3 parseInt('90px'); // 去掉单位(只取int遇到字符串自动中断) parseInt('rem120px') // 字符串转换后变为 NaN parseInt(undefined) // undefined 转换后变为 NaN parseInt(null) // 转换后为0 parseInt(true) // 布尔型转换后变为 1 或 0 // 转换为浮点型 parseFloat(num); parseFloat(3); // 还是输出3,不会自带小数点,3.0也是一样 // 强制转换 Number(num); // 隐式转换,可以用 - * / (加号正能用作正负值将字符串转为数字型,如果用在变量后边则变为拼接字符串) console.log(+'100') console.log('123' - 120); console.log('t' - 120); // 输出 NaN7.4. 转换为布尔型代表空、否定的值都会被转换为 false,如:0,'',NaN,null,undefined其余值都会被转换为 trueBoolen('abc'); // 返回 True Boolean(0); // 返回 False五、Javascript 运算符表达式:任何能代表值的式子var a = 10, b=20; var c = a + b; // a + b 就是表达式1. 算数运算符+ - * / %浮点数运算精度问题,尽量避免用浮点数直接进行运算console.log(0.1 + 0.2); // 0.30000000000000004 console.log(0.07 * 100); // 7.000000000000001 var num = 0.1 + 0.2; console.log(num == 0.3); // false2. 递增递减运算符++i; // 前置递增(先自加后返回) --i; // 前置递减 var i = 1; console.log(++i + 10); // 11 (先自加,然后参与运算) i++; // 后置递增(先返回值,后自增) i--; // 后置递减 var i = 1; console.log(i++ + 10); // 20 (先运算,后自加) console.log(i); // 2前置后置递增进阶:var e = 10; var f = e++ + ++e; consolo.log(f); // 22(e++ 返回 10,然后e自增为11,++e 返回12)3. 比较运算符比较运算符,是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为运算结果。// 普通比较运算符 < > >= <= == // 不会比较数据类型 (18 == '18' 为真) === // 会比较数据类型 != !== // 全不等(包括数据类型)比较运算符两侧表达式先转为布尔型再进行比较'0' 用 Boolen() 做判断的时候是 true,但是用 == 比较运算符和布尔值比较的时候 '0' 是 false,但 '0' == 0 是真undefined 和 null 在 Boolen() 做判断的时候是 flase,但是用 == 比较的时候他们不等于 falseNaN 和任何值都不相等,包括它本身,即 NaN == NaN 为假4. 逻辑运算符逻辑运算符说明&&逻辑与II逻辑或!逻辑非如果只是普通逻辑运算(两侧都是布尔型),返回的还是布尔型与 undefined, null 做 && 运算返回 undefined, null!1 返回 false4.1. 逻辑运算短路逻辑与运算短路// 当表达式1和2为真时,返回表达式2 console.log(123 && 456); // 返回456 // 当表达式1为假时,直接返回表达式1 console.log(0 && 456); // 返回0逻辑或运算短路// 当表达式1为真,则返回表达式1 // 当表达式1为假,则返回表达式2 var num = 1; console.log(123 || num++); console.log(num); // 15. 赋值运算符num += 2; // 相当于 num = num + 2 num -= 1; num *= 1; num /= 1;7. 运算符优先级运算符结合性优先级.、[ ]、( )从左到右最高++、--、-、!、new、typeof从右到左 *、/、%从左到右 +、-从左到右 <、<=、>、>=、in、instanceof从左到右 ==、!=、===、!==从左到右 &&从左到右 II从左到右 ?:从右到左 =、*=、/=、%=、+=、-=、&=、^=、!=从右到左 ,从左到右最低任何写这种式子的人都是神经病:var s = 4 >= 6 || 'a' != 'b' && !(12 * 2 == 144) && true console.log(s) // true赋值运算符优先级最低,先不用看它然后是逻辑运算符 || 和 &&,从左到右开始4 >= 6 为 false,所以看右侧返回值右侧的三个 && 返回的都是 true,最后表达式返回 true如果最右侧表达式是数值的话,则返回数值六、流程控制1. 顺序结构A -> B -> C2. 选择结构2.1. if 分支结构单分支结构if (条件表达式) { // 执行语句 } // 其他代码当条件表达式为真时,程序进入分支,执行完毕后,继续执行其他代码当条件表达式为假时,程序直接跳过条件分支,执行其他代码双向分支if (条件表达式) { // 执行语句 } else { // 执行语句 } // 其他代码当条件表达式为真时,程序进入分支,执行完毕后,继续执行其他代码当条件表达式为假时,程序执行 else 代码块中的代码,执行完毕后再执行其他代码多分支结构if (条件表达式1) { // 执行语句1 } else if (条件表达式2) { // 执行语句2 } else { // 执行语句3 } // 其他代码如果满足条件表达式1,则执行执行语句1,直接跳出如果不满足,则判断条件表达式2,为真则执行语句2,不为真则去执行 else多分支语句只是多选一,最后只有一个语句执行例:判断分数var score = promot('请输入分数:') if (score >= 90) { alert('优') } else if (score >= 80) { alert('良') } else if (score >= 60) { alert('中') } else { alert('差') }2.2. 三元运算符如果条件表达式结果为真,则返回表达式1,的值,否则返回表达式2的值条件表达式 ? 表达式1 : 表达式2//输入一个 0~59 数字,如果小于10,则在数字前边补0 var time = prompt('请输入一个0~59的数字'); console.log(time<10 ? '0' + time : time);2.3. Switchswitch(表达式){ case value1: // 执行语句1 break; case value2: // 执行语句2 break; default: // 如果无条件满足,最终执行语句 }开发中表达式通常写为变量,变量值需要和 case 的 value 值全匹配,值和数据必须完全一致Switch 与 IF 区别switch...case 语句通常处理 case 为比较确定值的情况,if...else语句通常用于范围判断(大于、小于)switch 语句进行条件判断直接跳转到case,效率更高,if 语句是顺序判断,效率低3. 循环3.1. for 循环for(初始化变量; 条件表达式; 操作表达式){ // 循环体 } // 初始化变量: 用 var 声明的一个普通变量,通常用于计数器使用 // 条件表达式: 用来判断每一次循环是否继续执行,是终止的条件 // 操作表达式: 是每次循环最后执行的代码,经常用于计数器变量的更新(递增或递减)例:输出一百句你好for(var i = 1; i<=100; i++){ console.log('你好'); }例:从0加到100var sum =0; for(var i = 1; i<=100; i++){ sum+=i; }3.2. 嵌套循环for (外层循环初始化变量; 外层循环表条件达式; 外层操作表达式){ for(内层循环初始化变量; 内层循环表条件达式; 内层操作表达式){ // 循环代码 } }外层循环一次,内层循环执行全部例:输出 5x5 的 *var str = ""; for (var i = 1; i <= 5; i++) { for (var j = 1; j <= 5; j++) { str = str + "*"; } str = str + "\n"; } console.log(str);3.3. while 循环while(条件表达式){ // 循环体 }例:用 while 实现从1加到100var num=1; while(num<=100){ console.log(num); num++; }while 循环一般需要配一个计数器,然后再循环体内设置一个终止循环,否则会陷入死循环3.4. do while 循环do { // 循环体 } while(条件表达式) 和 while 循环比,do while 循环至少需要执行一次,然后进行判断是否终止循环。3.5. continue 和 breakbreak 关键字用于直接跳出循环continue 关键字用于立即跳出本次循环,进入下一次循环3.6. 断点调试在 Chrome 中 F12 进入调试模式,进入 Sources,在代码行数下断点,然后刷新则会进入到断点七、数组数组可以把一组相关的数据一起存放,并提供方便的访问方式。1. 创建数组// 利用对象创建数组 var arr = new Array(); // 利用 [] 快捷创建数组 var arr = []; var arr = [1, 2, 3, 'Pink', True];2. 访问数组元素数组可以通过索引来访问、设置、修改对应的数组元素,可以通过 “数组名[索引]“ 的方式来获取数组中的元素。var arr1 = ['张三', '李四', '王五', '淑芬']; // 索引号: 0 1 2 3 console.log(arr1); // 输出整个数组所有元素 console.log(arr1[0]); // 使用 数组名[索引号] 获取数组数组内指定元素的值3. 遍历数组arr= ['a', 'b', 'c', 'd']; for (var i = 0; i <= 3; i++) { console.log(arr[i]); }4. 数组长度属性 lengtharr= ['a', 'b', 'c', 'd']; console.log(arr.length); // 输出4利用 length 添加新的数组元素arr = ["a", "b", "c", "d"]; arr[arr.length] = 'e'; console.log(arr[arr.length - 1]); // 输出结果 e6. 冒泡排序var arr = [5, 4, 3, 2, 1]; for (var i = 0; i < arr.length - 1; i++) { // 外层循环 for (var j = 0; j <= arr.length - i - 1; j++) { if (arr[j] > arr[j + 1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } console.log(arr);八、函数1. 声明函数// 声明函数 function 函数名(){ // 函数内部代码,又称为函数体 } // 调用函数 函数名(); 例:将1~100 累加封装成函数function sum(){ var sum = 0; for(var i=1; i<=100; i++){ sum = sum+i; } console.log(sum); } sum();2. 函数参数function 函数名(形参1, 形参2){ // 函数体 } 函数名(实参1, 实参2);函数调用参数实例:function cook(arg){ console.log(arg); } cook('炒米饭');如果调用函数的时候,实参个数大于形参,则只会以形参个数为准如果调用函数的时候,实参个数小于形参,未使用的形参值为 undefined3. return 返回值函数执行完毕后,只完成里边的代码,如果我们想要获取到函数运行中产生的数据,就需要用到返回值。function getResult(){ return 666; } console.log(getResult());return 会终止函数并只会返回一个值,返回的是最后一个值如果函数没有 return 则会返回 undefined4. 不定参数传递function test(){ console.log(arguments); } test(1,2,3,4,5); // 输出结果 [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]伪数组:具有数组 length 属性按照索引方式进行存储它没有真正数组的一些方法: pop(), push()5. 函数中调用函数function test1(){ console.log('test1'); } function test2(){ test(); console.log('test2'); } test2();6. 匿名函数匿名函数没有名字function(){ // 代码块 }调用匿名函数:用小括号的方法实现函数的自调用,注意,这种调用方法只能调用一次(function(){ console.log('hello world'); })();还可以将匿名函数赋值给一个变量,当给这个变量加上() 的时候,就相当于调用了这个函数fn = function (x, y) { return x + y; }; console.log(fn(1, 2));7. 将函数当做参数var f1 = function () { return 100; }; var f2 = function (fun) { console.log(f1()); }; f2(f1); // 输出结果 100九、作用域全局变量:变量在<script>标签之内,或者是一个单独js文件如果在函数内部没有声明的变量也属于全局变量(即在函数内部可以使用外部的变量)浏览器关闭才会销毁局部变量:变量声明在函数内部函数的形参也可以看做是局部变量函数执行完毕就会销毁链式作用域:函数内部可以调用父集中的变量var num = 10; function fn(){ var num = 20; function fun(){ console.log(num); // 链式作用域,找父集中的变量,如果没有再找上级 } }十、解析机制1. 预编译js 引擎会把 js 里边所有的 var 提升,然后再提升 function。 提升到 当前作用域 的最前面,不提升赋值操作。console.log(num); // undefined 因为提升了声明,没有提升赋值 var num = 10; // 相当于 var num; console.log(num); num = 10;fun(); // 报错,同理 var fun = function(){ console.log(22); }fn(); // 函数声明已经提升到最前边,所以可以执行。 function fn(){ console.log(1); }var f1 = 100; function(f1){ console.log(200); } console.log(f1); // 实际执行顺序 var f1; function f1(){ console.log(200); } f1 = 100; console.log(f1); 最后输出 100函数内部的 var 声明只会提升到函数开头,而不会跳出函数到全局。// console.log(num); 会报错 show(); // 可以运行,因为函数声明被提升 function show() { // 显示 undefined,已经声明但是没有提升赋值 console.log(num); var num = 1; console.log(num); }var a = b = c = 9; // 相当于 var a = 9; b = 9; c = 9; // 即 var a; a = 9; b = 9; c = 9;2. 报错机制js 运行顺序是先进行预编译,之后代码一行一行按顺序执行,如果出现错误:预编译出现错误,当前 script 标签中的整个代码都不执行,寻找下一个 script 标签执行过程中出现错误,当前 Script 标签中,执行出错之前的代码,之后代码不执行。然后寻找下一个 script 标签十一、对象1. 创建对象利用字面量创建对象利用 Object 方法创建对象使用字面量创建对象:var obj = { uname: "Tom", // 属性以键值对形式存在,不用 var 声明 'age': 18, sex: "male", sayHi: function () { console.log("hi"); } } console.log(obj.age); obj.sayHi();对象的属性名可以不加引号使用 new Object 方法创建对象// 利用 new Object 创建对象 var obj = new Object(); obj.uname = 'Tom'; obj.saiHi = function(){ console.log('Hi'); }2. 调用对象中的属性和方法// 调用属性 obj.uname; obj['age']; // 调用方法 obj.sayHi();给对象属性重新赋值:obj.uname = 'zhangsan'; obj['age'] = 18;3. 构造函数创建对象自己创建一个函数,利用传参的方式构建对象的属性和方法。function 构造函数名(参数1, 参数2, 方法1 ...){ this.属性 = 值; this.方法 = function(){ // 代码块 } }例:function Star(uname, age, sex){ // 构造函数命名大驼峰 this.name = uname; this.age = age; this.sex = sex; } var person = new Star('Luis', 18, 'Male'); console.log(person.name);new 关键字创建对象的执行顺序在内存中创建一个新对象让 this 指向这个新对象,this 就是这个函数所要创建的对象执行构造函数里边的代码,给这个新对象添加属性和方法返回这个对象this 指向构造函数中,this 指向所要创建的对象实例普通函数中,this 指向 window4. for...in 遍历对象for(变量 in 对象){ // 代码块 }数组也可以使用 for..in 来进行遍历var obj = { uname: "Tom", age: 18, sex: "male", } for (var k in obj) { console.log(k); // 因为 k 是变量,所以只能用 obj[k] 的方式 // 如果使用 obj.k ,那么就会去寻找 obj 中的 k 属性(并不会自动将变量k解析成对应的字符串) console.log(obj[k]); } // 输出结果: uname Tom age 18 sex male5. 内置对象内置对象是 JS 内部已经做好的对象,方便用户调用5.1. Math 数学对象https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Mathconsole.log(Math.PI); console.log(Math.max(1,2,3,45)); // 取多个值中的最大数 Math.min(1,2,3); Math.floor(3.4); // 向下取整 3 Math.ceil(3.4); // 向上取整 4 Math.round(1.1); // 四舍五入 Math.abs(-3); // 取绝对值 3 Math.pow(10,2) // 10的2次方 Math.sqrt(100) // 开平方 Math.random(); // 生成0~1之间的随机小数 [0,1) === 左闭右开区间// 生成一个区间的随机整数 function getRandom(min, max){ return Math.floor(Math.floor(Math.random() * (max - min +1)) + min; } // 原理: 0 ~ 100 Math.random() * 100 // 乘100提升范围 100~200 Math.random() * 100 + 100 // 加100提升基数 0~200 Math.random() * (300-100) 100~300 Math.random() * (300-100) + 1005.2. Date 日期对象https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DateDate 是一个构造函数,需要使用 new 来创建对象var date = new Date(); console.log(date); // Wed Apr 21 2021 19:34:46 GMT+0800 date.getFullYear(); // 返回当前年份 date.getMonth(); // 返回的月份小1月 date.getDate(); // 返回几号 date.getDay(); // 返回周几,周一是1,周日是0 date.getHours(); date.getMinutes(); date.getSeconds(); // 获得总毫秒数从1970年1月1日(时间戳) date.valueOf(); date.getTime(); // H5 浏览器可以直接用 date 中的方法获取时间戳 var now = Date.now() // 不支持 HTML5 的浏览器可以使用下面的方式获得时间戳 var now = +new Date()获得指定日期对象var date = new Date(1619005441955); // 传入时间戳 var date = new Date(2015, 4, 1); // 传入年、月、日(月份从0开始计数) var date = new Date("2020-5-10"); // 字符串方式传入年-月-日转换成字符串toString()例:将时间对象整理为 "2020-04-15 11:47:30"的格式 // 2020-04-21 20:01:01 function time() { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth(); var date = now.getDate(); var hour = now.getHours(); var min = now.getMinutes(); var sec = now.getSeconds(); // 补0仓做 month = month < 10 ? "0" + month : month; date = date < 10 ? "0" + date : date; hour = hour < 10 ? "0" + hour : hour; min = min < 10 ? "0" + min : min; sec = sec < 10 ? "0" + sec : sec; return ( "" + year + "-" + month + "-" + date + " " + hour + ":" + min + ":" + sec ); } console.log(time());5.3. 数组对象https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Arraynew Array() 创建数组var arr1 = new Array(2); // 创建长度为2的空数组 var arr2 = new Array(2,3); // 创建一个[2,3]的数组isArray() 验证是否是数组console.log(arr instanceof Array); console.log(Array.isArray(arr));push() 在数组结尾添加元素push 可以给数组结尾追加新的元素push() 参数直接写需要添加的数组元素push 完毕之后,返回的结果是新数组的长度原数组会发生改变arr = [1, 2, 3]; t = arr.push(4, "pink"); console.log(t); console.log(arr); // 输出结果 5 [1, 2, 3, 4, "pink"]例:遍历数组中大于2000的数值var arr = [800, 1500, 2010, 3100, 5000, 1800]; var newArr = []; for (var i = 1; i <= arr.length; i++) { if (arr[i] > 2000) { // newArr[newArr.length] = arr[i]; newArr.push(arr[i]); // 可以直接用 push 代替上方代码 } } console.log(newArr);unshift() 在数组头部添加元素和 push 类似,只不过 unshift 是在数组开始处插入元素,返回值为新数组的长度arr = ["black", "white", "orange"]; t = arr.unshift("red"); console.log(t); console.log(arr); // 输出结果 4 ["red", "black", "white", "orange"]pop() 删除数组末尾元素使用 pop() 可以删除数组最后一个元素, 返回值为删除的元素arr = ["black", "white", "orange"]; t = arr.pop(); console.log(t); console.log(arr); // 输出结果 orange ["black", "white"]shift() 删除数组起始元素arr = ["black", "white", "orange"]; t = arr.shift(); console.log(t); console.log(arr); // 输出结果 black ["white", "orange"]reverse() 数组逆序arr = ["black", "white", "orange"]; arr.reverse(); console.log(arr); // 输出结果 ["orange", "white", "black"]sort() 排序arr = ["n", "b", "z", "a", "j", "x"]; arr.sort(); console.log(arr); // 输出结果 ["a", "b", "j", "n", "x", "z"]sort() 对于数值的排序只按第一个字符排序,不会按值大小排序。如:arr = [1, 11, 4, 2, 21, 24, 3]; arr.sort(); console.log(arr); // 输出结果 [1, 11, 2, 21, 24, 3, 4]解决方案:sort 方法里边可以传一个 compareFunction 匿名函数,函数中有两个参数 a, b。a 和 b 代表两个用于比较的元素当 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。arr = [1, 11, 4, 2, 21, 24, 3]; arr.sort(function (a, b) { return a - b; // 升序排列 // return b - a; // 降序排列 }); console.log(arr);indexOf(), lastIndexOf() 通过值获取索引indexOf() 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1lastIndexOf() 返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找var arr = ["Red", "Blue", "Yellow", "Orange", "PINK", "Blue"]; console.log(arr.indexOf("Blue")); // 只返回第一个找到的索引,找不到返回 -1 console.log(arr.lastIndexOf("Blue")); // 输出结果 1 5例:数组去重function unique(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) === -1) { // 检测新数组中是否存在 newArr.push(arr[i]); // 如不存在则 push 进新数组 } } console.log(newArr); } var arr = [800, 800, 2010, 1800, 3100, 700, 3100, 5000, 1800]; unique(arr);toString() 转字符串返回一个字符串,表示指定的数组及其元素var arr = [1,2,3,'pink']; console.log(arr.toString()); //输出结果 1,2,3,pinkjoin() 连接数组元素join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。const elements = ['Fire', 'Air', 'Water']; console.log(elements.join()); // expected output: "Fire,Air,Water" console.log(elements.join('')); // expected output: "FireAirWater" console.log(elements.join('-')); // expected output: "Fire-Air-Water"concat() 连接数组concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。const array1 = ['a', 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = array1.concat(array2); console.log(array3); // expected output: Array ["a", "b", "c", "d", "e", "f"]slice() 截取数组slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // expected output: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // expected output: Array ["camel", "duck"] console.log(animals.slice(1, 5)); // expected output: Array ["bison", "camel", "duck", "elephant"] splice() 删除元素splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。返回值:由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。插入元素var myFish = ["angel", "clown", "mandarin", "sturgeon"]; var removed = myFish.splice(2, 0, "drum"); // 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"] // 被删除的元素: [], 没有元素被删除删除元素var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; var removed = myFish.splice(3, 1); // 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"] // 被删除的元素: ["mandarin"] 替换元素var myFish = ['angel', 'clown', 'drum', 'sturgeon']; var removed = myFish.splice(2, 1, "trumpet"); // 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"] // 被删除的元素: ["drum"]5.4. 字符串对象https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String包装对象字符串、数字、布尔值这三种原始类型的值,为什么会有对象调用方法?这是因为 JS 引擎会自动将原始类型的值转换为包装对象,使用之后会立即销毁。String 对象Number 对象Boolen 对象str = '123'; // 内部处理 var temp = new String('123'); // 实际上是将字符串对象化 str = temp; // 然后将临时变量传递给str temp = null; // 销毁临时变量 str.length(); // 这时候 str 已经是对象了,可以调用方法字符串不可变str = '1'; str = '2';看似 str 变量从1变成了2,其实并不是 str 的变量改变,而是系统在内存中又开辟了一个空间存放数值2,然后将 str 的地址引向数据,但是原数据1还是存放在内存当中的。indexOf(), lastIndexOf() 查找字符位置和数组类似,可以将字符串也看做数组,第一个字符索引为0。返回值:查找的字符串 searchValue 的第一次出现的索引,如果没有找到,则返回 -1。// str.indexOf('要查找的字符', [起始的位置]) var str = '白日依山尽'; console.log(str.indexOf('山')); console.log(str.lastIndexOf('山'));例:求某个字符出现的次数和位置var str = "adfajiwerasdfjklweasdfawer"; var index = str.indexOf("a"); var num = 0; while (index != -1) { console.log(index); num++; index = str.indexOf("a", index + 1); } console.log(num);charAt() 按索引返回字符串var str = 'andy'; str.charAt(3); // 返回index位置的字符 str.charCodeAt(3); // 返回 index 位置的 ASCII 码 str[3]; // 获取指定位置处字符例:遍历字符串中字符var str = "andy"; for (var i = 0; i < str.length; i++) { console.log(str.charAt(i)); }例:统计字符串中出现次数最多的字符var str = "tqwerasdfwerqiuyasdfggyweasdf"; var o = {}; for (var i = 0; i < str.length; i++) { var chars = str.charAt(i); // 通过 charAt() 获取字符串每个字符 if (o[chars]) { // 判断如果没有该字符属性,则初始化1,有则+1 o[chars]++; } else { o[chars] = 1; } } var max = 0; var max_str = ""; for (var k in o) { // k 是键名 // o[k] 是值 if (o[k] > max) { max = o[k]; max_str = k; } } console.log(max_str); console.log(max); // 输出结果 w 3concat() 拼接字符串将一个或多个字符串与原字符串连接合并,形成一个新的字符串并返回。var str1 = "a"; var str2 = "b"; var str3 = "c"; var str4 = str1.concat(str2, str3); console.log(str4); // 输出结果 abcsubstr() 按长度截取字符串语法:substr(start, length); // 从start索引位置开始,length 为取的个数,不输入 length,截取到末尾var anyString = "Mozilla"; console.log(anyString.substr(1,4)); // 输出结果 ozilslice() 截取字符串语法:slice(start, end); // 从 start 位置开始,截取到 end 位置(不包括end)。不输入 end 默认截取到结尾var anyString = "Mozilla"; console.log(anyString.slice(1, 4)); // 输出结果 ozi如果是负数索引,从 -1 开始计数substring() 截取字符串substring 提取从 indexStart 到 indexEnd(不包括)之间的字符。slice() 用法与 substring() 用法类似,slice() 方法也可以使用在数组中,并且支持负数索引substring() 只可以在字符串中使用,不支持负数索引如果 indexStart 等于 indexEnd,substring 返回一个空字符串。如果省略 indexEnd,substring 提取字符一直到字符串末尾。如果任一参数小于 0 或为 NaN,则被当作 0。如果任一参数大于 stringName.length,则被当作 stringName.length。如果 indexStart 大于 indexEnd,则 substring 的执行效果就像两个参数调换了一样。语法:str.substring(indexStart[, indexEnd])var anyString = "Mozilla"; console.log(anyString.substring(-2,3)); // 输出结果 Mozreplace() 替换字符串replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。语法:stringObject.replace(regexp/substr,replacement)字符串替换只替换第一个匹配项目批量替换需要使用正则例:var anyString = "Hello World"; console.log(anyString.replace("World", "Javascript")); // 输出 Hello JavascripttoUpperCase(), toLowerCase() 大小写转换console.log("aBc".toUpperCase()); console.log("Abc".toLowerCase()); // 输出结果 ABC abc5.5 instanceof 判断对象使用 instanceof() 可以判断该数据或变量是否是某个对象的实例,如:console.log(1 instanceof Number); var arr = [1, 2, 3, 4, 5]; console.log(arr instanceof Array); function Student(name, age, score) { this.name = name; this.age = age; this.score = score; } var xiaoming = new Student("xiaoming", 18, 99); // true xiaoming 是 Student 对象的实例 console.log(xiaoming instanceof Student); // true xiaoming 也是 Object 对象的实例,因为 Student 算是 Object 的子类 console.log(xiaoming instanceof Object); 算法:1. 交换变量的值// 使用第三个临时变量 var a = 1, b =2, var c; c = a; a = b; b = c; // 加减法交换 var a = 1, b =2; a = a + b; // a = 3 b = 2 b = a - b; // a = 3 b = 1 b = a - b; // a = 2 b = 1 2. 交换数组变量的值var a=1, b=2; // 数组中先放a的值 // 第一个值确定后,执行表达式 a = b,此时 a = 2 // 但是数组第一个值已经确定下来,不影响整个数组,数组现在是 [1, 2] // [a,a=b] // [1, 2] a =2 // 最后只要拿到数组下标为0的值给b就完成了值的互换 b = [a, a=b][0]3. 交换对象的值var a=1, b=2; b = {"attr1":a, "attr2":a=b}.attr1;
2024年07月19日
2 阅读
0 评论
0 点赞
2024-07-15
CSS 笔记
一、CSS 简介CSS(Cascading Style Sheets) 层叠样式表,主要是用来设置 HTML 页面中文本内容内容(字体、大小、对齐方式)、图片的外形(高宽、边框样式、边距)以及版面的布局和外观显示样式二、CSS 书写规则1. 书写规则CSS 规则由两部分构成,选择器以及一条或多条声明选择器 {样式} // 样式用属性与属性值的方式书写(属性:属性值;)选择器指的是 HTML 中的标签,花括号内是对该标签设置的具体样式,属性与属性值是以键值对的方式出现,最后用分号结束。h1 {font-size: 12px; color: red;}书写格式书写规范:所有CSS建议小写书写。选择器与大括号之间保留1个空格,属性与值之间的冒号后边也需要保留一个空格。2. 紧凑格式h1 {font-size: 12px; color: red}3. 展开格式h1 { font-size: 12px; color: red; }推荐使用展开格式4. 属性值单位颜色:#8fa, #aaffaa, red, rgb(255,0,0) 大小:em, px, pt, %, pc, cm, mm, in, 三、引入方法1. 内联样式表:内联样式是在 HTML body 标签中将样式直接嵌入在标签内,也被称为行内样式<p style=font-size:30px; color:red;>TTT</p>2. 内部样式表:内部样式表示在头部中嵌入CSS,也被称作嵌入式CSS,在 head 标签内部添加 <style>CSS样式</style><head> <style> p { color: red; } </style> </head>style 标签理论上是可以放在 HTML 文档的任何地方,但一般会放在 head 标签中3. 外部样式表:独立 CSS 文件,在 HTML 中通过 Link 元素加载 CSS<link rel="stylesheet" type="text/css" href="global.css" /> <link rel="stylesheet" href="global.css" />优先级:行内样式 > 其他的引入方式其他的和加载顺序有关4. import 导入方式导入方式指的是使用 CSS 规则引入外部 CSS 文件。<style> @import url(style.css); </style>link 导入和 @import 导入区别:link 属于 HTML,通过 <link> 标签中的 href 属性来引入外部文件,而 @import 属于 CSS,所以导入语句应写在 CSS 中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件;@import 是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import 引用的文件则会等页面全部下载完毕再被加载;小结:我们应尽量使用 <link> 标签导入外部 CSS 文件,避免或者少用使用其他三种方式。四、注释/* 这里可以写任何注释 */ /* 也可以 多行显示 */五、CSS 选择器CSS 选择器是根据不同需求把不同的标签选出来,简单来说,就是选择标签用的。W3School:https://www.w3school.com.cn/cssref/css_selectors.asp基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器1. 标签选择器标签选择器是指用 HTML 标签名称作为选择器,按标签名分类,为页面某一类标签指定统一的CSS样式。标签名 { 属性1: 属性值1; 属性2: 属性值2; }标签选择器可以把某一类标签全部选择出来,比如所有的 <div> 标签,能快速为页面中同一类型的标签统一设置样式。<head> <style> div { color: red; } </style> </head> <body> <div>文本文字</div> </body>2. 类选择器如果想要差异化选择不同标签,单独选择一个或者几个标签,可以使用类选择器。.类名 { 属性1: 属性值1; 属性2: 属性值2; }<style>.red {color: red;} </style> <div class="red">文本文字></div>p.class1(class1即是类名)同一个选择器能有不同的类,因而允许同一个元素有不同的样式。p.class1 适用于 html 中 任何 <p class="class1">的内容.one 适用于 html 中 任何 one 类的内容,如 <p class="one"> or <b class="one">类命名规范:https://blog.csdn.net/shadow_zed/article/details/72820007多类名我们可以给一个标签指定多个类名,从而达到更多选择的目的,这些类名都可以选出这个标签。类标签用空格隔开。<div class="red font20"></div>多类名使用场景:将相同元素属性放在一起,不同的单独列出来<style> .box {width: 50px; height: 50px;} .red {color: red;} .pink{color: pink;} </style> <div class="box red"></div> <div class="box pink"></div> <div class="box red"></div>3. ID选择器id 选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS中id选择器以 "#" 来定义。#id名 { 属性1: 属性值1; 属性2: 属性值2; }<style>.red {color: red;} </style> <div id="red">文本文字></div>id 属性规定 HTML 元素的唯一的 id。id 在 HTML 文档中必须是唯一的。id 属性可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。.class 可以在标签中多次使用同一个类名4. 通配符选择器在 CSS 中,通配符选择器使用 * 定义,它表示选取页面中的所有元素(标签)。* { 属性1: 属性值1; }通配符选择器不需要调用,自动给所有元素使用的样式六、CSS 字体属性1. 字体显示p {font-family: "微软雅黑";} div {font-family: Arial, "Microsoft Yahei", "微软雅黑", sans-serif;}CSS 使用 font-famliy 属性定义文本的字体系列虽然CSS设置 font-family 可以使用中文,但是最好还是使用字体的英文名称可以添加多个字体,用逗号分隔多个英文单词组成的字体用“”包含font-family 设置多个字体的时候,会按照顺序查找浏览器支持字体,如果没有则继续找下一个,如果都没有则用系统默认字体2. 字体大小font-size 属性可以定义字体大小body {font-size: 12px;}谷歌浏览器默认是 16px可以给 body 指定整个页面的文字大小3. 字体粗细font-weight 属性可以设置字体的粗细body {font-weight: normal} p {font-weight: 700}font-weight 属性值 normal // 正常粗细。与400等值。 bold // 加粗。 与700等值。 lighter // 比从父元素继承来的值更细(处在字体可行的粗细值范围内)。 bolder // 比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。 <number> // 一个介于 1 和 1000 (包含) 之间的 <number> 类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。一些常用的数值对应于通用的字体重量名称,如章节常见粗细值名称和数值对应所描述。4. 字体样式font-style 属性设置文本的风格(斜体)p {font-style: italic;}font-style 属性值normal // 正常风格(默认) italic // 斜体风格一般不会用 font-style 设置斜体,反而(em、i)标签更为常用5. 字体复合属性用 font 标签一次性定义多个字体属性body { font: font-style font-weight font-size/line-height font-family; }body { font: italic 400 12px "Microsoft Yahei" }使用 font 属性时,必须按照顺序书写,不能更换顺序,各个属性用空格隔开不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性6. 文本属性文本属性可以定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。颜色:p { color: red; }颜色属性值:预定义颜色的值: red,green,blue 等等 16进制:#FF0000, #FF6600, #CCC RGB:rgb(255,0,0)开发中最常用的是十六进制7 .对齐方式text-align 属性用于设置元素内文本内容的水平对齐方式div { text-align: center; }对齐方式属性值:left // 左对齐 right // 右对齐 center // 居中对齐装饰文本text-decoration 属性规定添加到文本修饰,可以给文本添加下划线、删除线、上划线等。a { text-decoration: none; }属性值:none // 默认,没有装饰线 underline // 下划线,连接 a 自带下划线(常用) overline // 上划线(几乎不用) line-through // 删除线(不常用)文本缩进text-indent属性可以用来指定文本的第一行缩进,通常是将段落首行缩进p { text-indent: 10px; }em 是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。这个单位常用于响应式布局p { text-indent: 2em; // 代表缩进2个文字大小的空间 }行间距line-height 属性用于设置行间的距离(行高),可以控制文字行与行之间的距离。p { line-height: 26px; }行高 = 上间距 + 文本高度 + 下间距当行高小于盒子高度,文字偏上当行高大于盒子高度,文字偏下当行高等于盒子高度,文字居中七、Emmet 语法Emmet 语法的前身是 Zen coding,它使用缩写,来提高 html/css 的编写速度, VSCODE 已经内置集成该语法1. 快速生成HTML 结构语法生成标签直接输入标签名,按tab键即可比如 div ,然后按 tab 键就可以生成 <div></div>生成多个相同标签,加上 * 就可以了比如 div*3,就可以快速生成3个div父子关系可以用 ul > li 快速生成标签ul>li兄弟关系可以用 + 快速生成标签div+p生成带有类名或者id名字的div,直接写 .demo 或者 #two tab 键就可以了,如果是其他标签生成类名,则用标签名.类名快速生成输入 .demo 然后按 Tab 就会快速生成 <div class="demo"></div> 输入 p.one 然后按 Tab 就会快速生成 <p class="one"></p>如果生成 div 是有顺序的,用$符做自增通配符,$从1开始计数.demo$*3 <div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div>如果想要在生成的标签内部写内容可以用 {} 表示div{标签内的内容} <div>标签内的内容</div>2. 快速生成CSS样式输入 css 属性第一个字母,会自动生成 CSS 标签输入 ti,按tab键,则会自动生成 text-indent: ;类似的还有h = height w = width输入缩写后,还可加上属性值h100 height: 100px; tac text-align: center; ti2em text-indent: 2em; tdn text-decoration: none;八、CSS 复合选择器复合选择器是建立在基础选择器之上,对基本选择器进行组合行程的。复合选择器可以更准确,更搞笑的选择目标元素复合选择器是由两个或多个基础选择器,通过不同方式组合而成常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等1. 后代选择器后代选择器又称为包含选择器,可以选择父元素里边的子元素,其写法就是把外层标签写在前边,内层标签写在后边,中间用空格分隔。当标签发生嵌套时,内层标签就成了外层标签的后代。元素1 元素2 {样式声明}如:li 标签就是 ol 标签的后代<ol> <li></li> </ol>用 css 复合选择器来选择 ol 标签中的 liol li { color: red; }后代选择器不仅仅可以选择子标签,还可以隔代选择,比如 div>ul>li,用 CSS 复合选择器 div li 也可以选择出来。只要是元素1的后代,用后代选择器都可以选择出来。2. 子元素选择器子元素选择器只能选择作为某元素的最近一级子元素。元素1>元素2 {样式声明}<div class="nav"> <a href="">link1</a> <p> <a href="">link2</a> </p> </div>只选择 div 下边的 a 标签,对于 p 标签中的 a 标签不做任何改变.nav > a { text-decoration: none; }如果用了后代选择器,如:.nav a 则两个 a 标签都会发生改变3. 并集选择器并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明。并集选择器用逗号分隔。元素1,元素2 {样式声明}<div class="nav">文字</div> <div><p>文字</p></div>同时改变li标签和div标签中元素.nav,p { color:red; }4. 伪类选择器伪类选择器用于向某些选择器添加特殊的效果,比如给连接添加特殊效果,或者选择第一个,第n个元素。伪类选择器最大的特点是用冒号表示,如 :hover, :first-child伪类选择器有很多:链接伪类、结构伪类链接伪类选择器a:link // 选择所有未被访问的链接 a:visited // 选择所有已被访问的链接 a:hover // 选择鼠标指针位于其上的链接 a:active // 选择活动链接(鼠标按下未弹起的链接)注意顺序,不然CSS效果会失效实际工作中大部分只用 a 标签 和 a:hover 标签a { color: #333333; text-decoration: none; } a:hover { color: orange; }经过某选择器,另外选择器生效.tudou:hover .mask { display: block; }:focus 伪类选择器:focus 用于选取获得焦点的表单元素焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器也主要针对表单元素来说。input:focus { background-color:yellow; }其他伪类选择器::first-line 首行:first-letter 首字母p:first-line { color: red; } p:first-letter { font-size: 22px; }九、元素的显示模式元素的显示模式就是元素(标签)以什么方式进行显示,比如 div 标签独占一行,比如 span 标签一行可以放多个。HTML 元素一般分为块元素和行内元素两种类型。1. 块元素常见的块元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 等,其中 <div> 是最典型的块元素块元素特点:独占一行高度、宽度、外边距及内边距都可以控制宽度默认是容器(父集宽度)的100%是一个容器及盒子,里边可以放行内元素或块元素文字类元素内不能使用块集元素,<p>标签主要用于存放文字,因此<p>标签里边不能再放其他块级元素。同理,<h1>~<h6>也是文字类块元素,也不能放其他块元素2. 行内元素常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 等,其中 <span> 和 <a> 是最常用的行内元素行内元素特点:相邻行内元素在同一行上,一行可以显示多个行内元素高、宽无法直接设置默认宽度就是它本身内容的宽度行内元素只能容纳文本或其他行内元素<a> 标签中不能再放其他链接<a> 可以放块级元素3. 行内块元素有几个特殊的标签,<img>、<input>、<td> 它们同时具有块元素和行内元素的特点。行内块元素的特点:和相邻行内元素(行内块)在一行上,但是它们之间会有空白缝隙。一行可以显示多个默认宽度就是它本身内容的宽度(行内元素特点)高度、行高、外边距以及内边距都可以控制(块级元素特点)4. 显示模式的转换特殊情况下,我们需要将元素模式转换将行内元素转换成块元素display: block;将块元素转换为行内元素display: inline;将元素转换为行内块元素display: inline-block;十、背景属性通过 CSS 背景属性,可以给页面元素添加背景样式背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。1. 背景颜色background-color 属性定义了元素背景颜色background-color: 颜色值;默认值是 transparent(透明)2. 背景图片background-image 属性可以定义元素的背景图像,实际应用中,logo,页面中装饰性小图片,整个页面的背景图,或者精灵图,都可以用这个属性来做。background-image: none | url(url) // 没有图片或者指定一个url图片路径插入Logo图background-image: url(images/logo.png);3. 背景平铺如果需要在 HTML 页面上对背景图片进行平铺,可以使用 background-repeat 属性background-repeat: repeat | no-repeat | repeat-x | repeat-yrepeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。 inherit 规定应该从父元素继承 background-repeat 属性的设置。4. 背景图片位置利用 background-position 属性改变图片在背景中的位置background-position: x y;left top left center left bottom right top right center right bottom center top center center center bottom如果仅指定一个关键字,其他值将会是"center"x% y% 第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。 。默认值为:0%0% xpos ypos 第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他 CSS单位。如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions inherit 指定background-position属性设置应该从父元素继承可以混合精确数值和方位,如 20px center,第一个参数永远是 x 横轴,如果省略一个参数,另外一个参数以 center 默认。背景图像固定(背景附着)background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动background-attachment: scroll | fixedscroll 背景图像是随着对象内容滚动 fixed 背景图像固定(不会随页面滚动而滚动)5. 背景复合写法为了简化背景属性代码,我们可以将这些属性像font一样合并到同一个属性 background 中,这里没有顺序要求。background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置6. 背景色半透明CSS3 为我们提供了背景颜色半透明效果,可以实现黑色遮罩效果background: rgba(0,0,0,0.3);Red / Greed / Blue / Alpha(透明度)取值范围在0~1十一、CSS 三大特性CSS 有三个非常重要的特性:层叠性、继承性、优先级1. 层叠性相同选择器给设置相同的样式,一个样式就会覆盖另一个样式,层叠性主要解决样式冲突。层叠性原则:样式冲突,遵循的原则就是就近原则,哪个样式离结构近,就执行哪个样式2. 继承性CSS中继承:子标签会继承父标签的某些样式,比如文本颜色和字号。可以继承的样式text- font- line- colordiv 标签和 p 标签继承body的样式<style> body { color: pink; } </style> <body> <div>文本文字</div> <p>文本文字</p> </body>行高的继承body { color: pink; font: 12px/1.5 "Microsoft Yahei"; } p { font-size: 16px; }1.5 是倍数的意思,p标签继承行高和字体,行高是 16x1.5 = 24px3. 优先级当同一个元素指定多个选择器,就会有优先级的产生选择器相同,则执行层叠性(就近原则)选择器不同,则根据选择器权重执行优先级权重逐渐递增权重最高:color: pink!important;权重的叠加:/* 标签选择器权重 0,0,0,1 */ li { color: red; } /* 权重叠加 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */ ul li { color: green; } /* 权重叠加 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */ .nav li { color: pink; } <ul class="nav"> <li>优先级权重</li> </ul>十二、盒子模型1. 边框border 可以设置元素的边框,边框有三部分组成:边框宽度、边框样式、边框颜色border: border-width || border-style || border-color可以直接定义:border-width 定义边框的粗细,单位px border-style 边框的样式(solid、dashed、dotted) border-color 边框颜色也可以使用复合定义(无顺序要求):border: 1px solid black;可以定义部分边框:border-top border-bottom border-left border-right合并相邻的边框border-collapse: collapse;border 会影响盒子的大小2. 内边距padding 属性用于设置内边距,即边框与内容之间的距离padding-left padding-right padding-top padding-bottom复合式写法:padding: top right bottom left;padding: 5px; 1个值,代表上下左右 padding: 5px 10px; 2个值,代表上下5px,左右10px padding: 5px 10px 20px; 3个值,代表上5px,左右10px,下20px padding: 5px 10px 20px 30px; 4个值,上右下左(顺时针)padding 的单位可以是 px 也可以是 empadding 也会影响盒子的大小如果盒子本身没有指定 widith/height 属性,则此时 padding 不会撑开盒子(改变盒子宽高)3. 外边距margin 属性用来控制盒子与盒子之间的距离margin-left margin-right margin-top margin-bottom复合式写法和 padding 相同外边距典型应用外边距可以让块级盒子水平居中,需要满足一些条件:盒子必须制定宽度(width)盒子左右的外边距都设置为 automargin-left: auto; margin-right: auto; margin: auto; margin: 0 auto; // 常用行内元素或者行内块元素水平居中可以给其父元素添加 text-align: center 即可相邻块元素垂直外边距的合并当上下相邻的两个块元素(兄弟关系)相遇时,如果上边的元素有 margin-bottom,下边的元素有 margin-top,则他们之间的的边距不是 margin-bottom 与 margin-top 的和,而是取两个值中较大者。所以尽量只添加一个 margin 的值嵌套元素垂直外边距的塌陷当两个嵌套关系(父子)的块元素,父元素有 margin-top ,子元素也有 margin-top,此时,父元素会塌陷。塌陷的距离是两个 margin-top 中较大的值。解决方案:可以为父元素定义上边框可以为父元素定义上内边距可以为父元素 添加 overflow: hidden 样式4. 清除内外边距网页元素很多都带有默认的样式,如内外边距,而且不同的浏览器默认的值也不一样,所以一般在布局的时候,需要清除下网页元素的内外边距。* { margin: 0; padding: 0; }行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了5. 清除 list 中的样式list-style: none;none, disc, circle, square, uppercase, lowercase, upper-alpha, lower-roman,也可以用 list-style: url() 图片来替换6. 圆角边框(CSS3)border-radius 属性可以设置元素的外边框圆角border-radius: length;radius 半径,用以 length 为半径的圆与直角相切如果需要一个圆形,则盒子设置为正方形,然后半径设置正方形边长的一半即可 length 可以用百分号表示,如:50%如果需要一个圆角矩形,length 设置为 height 的 50%border-raidus 的复合写法:border-radius: 左上角、右上角、右下角、左下角 (顺时针)单个值写法:border-top-left-radius: length7. 盒子阴影(CSS3)box-shadow: h-shadow v-shadow blur spread color inseth-shadow 必须,水平阴影的位置,允许负值 v-shadow 必须,垂直阴影的位置,允许负值 blur 可选,模糊距离 spread 可选,阴影的尺寸 color 可选,阴影的颜色 inset 可选,将外部阴影(outset)改为内部阴影盒子阴影不占用盒子宽高鼠标经过出现阴影div:hover { box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3) }文字阴影text-shadow 设置文字阴影text-shadow: h-shadow v-shadow blur colorh-shadow 必须,水平阴影的位置,允许复制 v-shadow 必须,垂直阴影的位置,允许负值 blur 可选,模糊距离 color 可选,阴影的颜色盒子透明给盒子设置透明和背景透明不同,盒子透明,连文字也跟着透明,opacity 值越小越透明,为0则消失。div { background-color: black; opacity:0.5 }十三、CSS 浮动CSS 提供三种传统布局方式:标准、浮动、定位标准流就是标签按照规定好默认方式排列块级元素独占一行,从上向下排列顺序行内元素按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行浮动可以改变元素标签默认的排列方式最典型的浮动应用:可以上多个块级元素一行内排列显示,虽然用 display: inline-block 也可以做出来,但是,盒子与盒子之间会有空隙,用浮动则没有这个问题多个模块纵向排列标准流,横向排列浮动1. 浮动float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 {float: 属性值;}none 元素不浮动 left 元素向左浮动 right 元素向右浮动两个盒子必须都是浮动,第一个盒子会浮动到父元素边缘,第二个盒子会自动寻找上一个 float 元素的边缘。.left, .right { float: left; width: 100px; height: 100px; background-color: blue; }浮动特性浮动元素会脱离标准流,不再保留原先的位置浮动元素会一行内显示,并且元素顶部对齐浮动元素会具有行内块元素的特征当第一个盒子设置浮动后,第二个盒子就会占据原先盒子的位置,发生重叠.float { float: left; } <div class="float"></div> <div class="normal"></div>如果多个盒子都设置了浮动,则他们会按照属性值一行内显示并且顶端对齐排列,浮动的元素是互相靠在一起的(没有缝隙),如果父集宽度装不下这些浮动盒子,多出的盒子会另起一行对齐。任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后就会具有行内块元素的特征(比如可以添加宽度高度).float { float: left; width: 50px; height: 20px; } <span class="float"></span> <span class="float"></span> <span class="float"></span>浮动元素的位置(与标准流搭配)为了约束浮动元素的位置,网页布局一般采用的策略是:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。一般行内小盒子布局用 ul 和 li 标签来做https://gitee.com/xiaoqiang001/html_css_material/blob/master/%E7%AC%AC%E5%85%AD%E5%A4%A9/12-%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80%E7%BB%83%E4%B9%A02.html 2. 常见网页布局标准流布局:一个元素浮动了,同一个盒子中的其余的元素也要浮动,防止引起问题浮动的盒子只会影响浮动盒子后边的标准流,不会影响前边的标准流3. 高度自适应之前的例子都是给父元素设定高度的,但是很多情况父元素需要自适应,需要根据子元素的高度,来自动调节父元素的高度。但是当父盒子没有给高度的时候,子盒子用用浮动显示的话,父盒子高度就会变为0,下边如果还有块元素的话,会自动上移到浮动元素的下边。如图所示,父元素只剩下个 border 留下,两个浮动元素上移,Footer 占据之前父元素的位置<style> .father { background-color: pink; border: 1px blue solid; } .son { float: left; width: 200px; height: 200px; background-color: skyblue; } .footer { height: 200px; background-color: red; } </style> </head> <body> <div class="father"> <div class="son">子盒子1</div> <div class="son">子盒子2</div> </div> <div class="footer"></div> </body>4. 清除浮动清楚浮动的本质就是清楚浮动元素造成的影响,如果父元素已经有了高度,则不需要清除浮动。清除浮动后,父元素就会根据子盒子的高度自动调节。选择器 {clear: 属性值;}left 清除左侧浮动(不允许左侧有浮动元素) right 清除右侧浮动 both 清除两侧浮动实际工作中,both 比较常用清除浮动的方法:额外标签法(W3C 推荐做法)父级添加 overflow 属性父级添加 after 伪元素父级添加双伪元素额外标签法:额外标签法会在浮动元素末尾添加一个空标签,如:<div style="clear:both"></div> 或者用 <br /> 块级标签等在之前的例子里边加上div clear 空标签,并在 style 中定义 clear 属性.clear { clear: both; } <div class="father"> <div class="son">子盒子1</div> <div class="son">子盒子2</div> <div class="clear></div> </div> <div class="footer"></div>这样就会在最后一个浮动标签后边封死,不会影响后边的其他元素。虽然是 W3C 推荐的,但是工作中不太常用overflow 属性:可以给父级添加 overflow 属性,将其属性值设置为 hidden、auto 或 scrolloverflow: hidden;优点:代码简洁缺点:无法显示溢出部分:after 伪元素:after 方式是额外标签法的升级版,也是给父元素添加.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、IE7 专有 */ *zoom: 1; }相当于在浮动元素最后边添加了一个元素,然后用 display: block; 转换成了块元素,然后再 clear: both; 清除浮动。高度设置0,显示方式为隐藏则不会显示出来。双伪元素清除浮动将浮动元素两侧都清除浮动.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix{ *zoom: 1; } 浮动应用:导航栏制作实际开发中,导航栏一般用 li + a 来做<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>十四、CSS 书写顺序布局定位属性: display/ position / float / clear / visibility / overflow自身属性: width / height / margin / padding / border / background文本属性: color / font / text-decoration / text-align / vertical-align / white-space / break-word其他属性(CSS3): content / cursor /border-radius / box-shadow / text-shadow / background:linear-gradient...十五、CSS定位浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。定位则是可以让盒子自由的在盒子内移动位置或固定屏幕中某个位置,并且可以压住其他盒子定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子定位=定位模式+边偏移Position 属性static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位边偏移边偏移就是定义元素相对于其父元素的相对偏移距离,有 top、bottom、left 和 right 4个属性1. 静态定位静态定位是元素的默认定位方式,无定位的意思。选择器 {position: static;}静态定位按照标准流特性摆放位置,它没有边偏移2. 相对定位相对定位是元素在移动位置的时候,是相对于它原来的位置来说的。选择器 {position: relative;}特点:相对于原来的位置进行移动盒子被相对定位后,原来的位置继续占有,不影响后边盒子的位置(不会提升也不会下降)3. 绝对定位绝对定位是元素在移动位置的时候,相对于它的祖先元素来说的。选择器 {position: absolute;}特点:如果没有祖先元素或者祖先元素没有定位,则以浏览器为准(DOM)如果祖元素有定位(相对、绝对、固定),则以最近一级带有定位的祖元素为准做位置偏移绝对定位不再占有原先的位置相对定位与绝对定位的使用场景(子绝父相)子级是绝对定位的话,父级要用相对定位子级绝对定位,不会占有位置,可以放到父盒子中任意一个地方,不会影响其他兄弟盒子父盒子需要加定位限制盒子在父盒子中显示4. 固定定位固定定位是元素固定于浏览器可视区的位置,主要使用场景是可以在浏览器页面滚动时,元素位置不变。选择器 {position: fixed;}特点:以浏览器的可视窗口为参照点移动元素跟父元素没有任何关系不随滚动条滚动固定定位不占有原先的位置案例:将盒子定位到版心盒子的旁边.w { width: 800px; height: 1400px; margin: 0 auto; } .fixed { position: fixed; left: 50% margin-left: 400px; width: 50px; height: 150px; }行内元素添加绝对定位或固定定位,可以直接设置高度和宽度块级元素添加绝对定位或固定定位,默认大小是内容的大小元素设置浮动后,会压住下边的盒子,但不会压住下边块元素盒子里边的文字或图片绝对定位(固定定位)则会完全压住盒子5. 粘性定位粘性定位可以被认为是相对定位和固定定位的混合体。选择器 {position: sticky; top: 10px;}以浏览器的可视窗口为参照点移动元素(固定元素特点)粘性定位占有原先的位置(相对定位特点)必须添加 top、left、right、bottom 其中一个才有效注意:IE不支持这个定位属性6. 定位的叠放次序 z-index在使用定位布局时,可能会出现盒子重叠的情况,此时,可以使用 z-index 来控制盒子的前后次序选择器 {z-index: 1;}数值可以是正整数、负整数或0,默认是 auto,数值越大,盒子越靠上如果 z-index 的值相同,则按书写顺序,最后一个盒子最靠上只有定位的盒子才有 z-index 属性盒子的居中版心盒子.w { margin: 0 auto; }加了绝对定位的盒子,是不能通过 margin:0 auto; 水平居中,但是可以通过以下计算方法实现水平和垂直居中。绝对定位盒子.box { position: absolute; left: 50%; margin-left: -100px; /* 减掉盒子宽度的一半 */ width: 200px; height: 200px; }十六、元素的显示和隐藏display 属性display: none; 隐藏对象 display: block; 除了转换为块级元素之外,同时还有显示元素的意思元素用 display 隐藏后,不再占有原来的位置visibility 属性visible 对象可视 hidden 对象隐藏元素用 visiblity 隐藏后,继续占有原来的位置overflowvisible 不剪切也不添加滚动条 auto 自动添加滚动条(默认) hidden 不显示超过对象尺寸的内容 scroll 总是显示滚动条定位的盒子,慎用 overflow: hidden 因为它会隐藏多余的部分盒子布局总结标准流可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。浮动可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局定位定位最大特点会有层叠的概念,可以让多个盒子前后叠压显示,如果元素自由在某个盒子内移动就用定位布局。十七、CSS 精灵图 (Sprite)精灵图的技术主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中。移动背景图片位置使用 background-position,移动距离就是这个目标图片的 x 和 y 坐标。/* 定义精灵图大小 */ weight: 100px; height: 100px; background: url(images/sprites.png) no-repeat; background-position: -180px -100px; /* 负数是因为需要将图片从0坐标左移180个像素,下移100个像素 */也可以复合方式写background: url(images/sprites.png) no-repeat -180px -100px;坐标可以用 left right 代替left 代表图片最左侧坐标,一般是 0pxright 代表图片最右侧坐标top 图片最上方,一般也是 0pxbottom 图片最下方坐标精灵图缺点:图片文件比较大图片本身放大会失真修改不方便精灵图滑动门左侧头部图片,右侧尾部图片,中间重复图片拉伸.box { width: 500px; height: 100px; background-color: #999; } span { float: left; height: 33px; } .left, .right { width: 25px; } .left { background: url(images/li_bg.png) left -190px; } .right { background: url(images/li_bg.png) right -190px; } .center{ background: url(images/li_bg.png) center -190px; }<div class="box"> <span class="left"></span> <span class="center">文字拉伸</span> <span class="right"></span> </div>十八、字体图标(Iconfont)兼容所有浏览器,对于小图标,一般使用字体图标来做,而不是用精灵图字体图标的下载:icomoon 字库http://iconmoon.io阿里 iconfont 字库http://www.iconfont.cn选择自己需要的图标,然后生成字体即可字体图标的引入将 fonts 文件夹放入网页的根目录(里边有4种不同的字体格式,是根据浏览器不同选择不同的字体显示)在 style.css 中选择引入的 CSS 代码去DEMO.html 中 Copy 文字指定字体span { font-family: 'icomoon'; }字体图标的追加在网站中 import selection.json 文件,然后加入新的图标,重新生成新的字体即可。十九、综合应用1. CSS 三角写法高度、宽度都为0的盒子,四个边的 border 上颜色,就会形成三角形,三角形大小由 border 大小决定。.box1 { width: 0; height: 0; line-height: 0; // 兼容性 font-size: 0; // 兼容性 border-top: 10px solid pink; border-right: 10px solid red; border-bottom: 10px solid blue; border-left: 10px solid green; }制作一个三角形,其他 border 为透明色.box1 { width: 0; height: 0; border: 10px solid transparent; border-top-color: pink;2. CSS 用户界面样式更改一些用户操作样式,以便提高更好的用户体验。更改鼠标样式 cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状li {cursor: pointer;}default 小白(默认) pointer 小手 move 移动 text 文本 not-allowed 禁止3. 输入框轮廓线边框 outline在 input 和 textarea 标签中,点击输入框,会显示轮廓线,如果不想显示,用 outline: 0 样式取消。<input type="text" /> <textarea name="" id="" cols="30" rows="10"></textarea>取消轮廓线input {outline: 0;} input {outline: none;}防止 textarea 输入框拖拽变形textarea {resize: none}4. vertical-align 垂直对齐经常用 vertical-align 设置图片或者表单(行内块元素)和文字垂直对齐,如果是img则不用转换,如果是其他标签,需要用 display: inline-block 转换。vertical-align: baseline | top | middle | bottombaseline 默认,元素放置在父元素的基线上 top 把元素的顶端与行中最高的元素顶端对齐 middle 把元素放置在父元素的中部 bottom 把元素的顶端与行中最低的元素顶端对齐<style> img { vertical-align: middle; } </style> <img src="sample.jpg" alt="" />这里是文字img 图片标签下方有空隙,只要不用基线,其他线都可以去掉(建议使用) img { vertical-align: bottom; }或者转换为块元素img {display: block}5. 溢出文字用省略号显示单行文本溢出显示省略号div { /* 强制一行内显示文本 默认为 normal */ white-space: nowrap; /* 超出部分隐藏 */ overflow: hidden; /* 文字用省略号替代超出部分 */ text-overflow: ellipsis; }多行文本溢出显示省略号(一般用后端做)div { overflow: hidden; text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制在一个块元素显示的文本行数 */ -webkit-line-clamp: 2; /* 设置检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical; /* 修改盒子高度限制现实行数 */ height: 50px; }6. Margin 负值的应用利用 margin 负值,可以让两个盒子的边框重合li { float: left; width: 200px; height: 300px; list-style: none; border: 1px solid red; margin-left: -1px; }如果想实现 hover 改变边框颜色,右侧的边框会被压住,这时候可以将盒子变成相对定位(保留位置)li:hover { position: relative; border: 1px solid blue; }如果盒子已经有了定位,则可以用 z-index 改变层级显示li:hover { z-index: 99; border: 1px solid blue; }7. 文字环绕效果* { margin: 0; padding: 0; } .box { width: 300px; height: 70px; background-color: pink; margin: 0 auto; padding: 5px; } .pic { float: left; width: 120px; height: 60px; margin-right: 5px; } .pic img { width: 100%; }<div class="box"> <div class="pic"> <img src="images/img.png" alt=""> </div> <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p> </div>8. 页面页数https://gitee.com/xiaoqiang001/html_css_material/blob/master/%E7%AC%AC%E4%B9%9D%E5%A4%A9/12-%E8%A1%8C%E5%86%85%E5%9D%97%E7%9A%84%E5%B7%A7%E5%A6%99%E8%BF%90%E7%94%A8.html9. 三角强化https://gitee.com/xiaoqiang001/html_css_material/blob/master/%E7%AC%AC%E4%B9%9D%E5%A4%A9/13-CSS%E4%B8%89%E8%A7%92%E5%BC%BA%E5%8C%96%E7%9A%84%E5%B7%A7%E5%A6%99%E8%BF%90%E7%94%A8.html10. CSS初始化https://gitee.com/xiaoqiang001/html_css_material/blob/master/%E7%AC%AC%E4%B9%9D%E5%A4%A9/14-%E4%BA%AC%E4%B8%9Ccss%E5%88%9D%E5%A7%8B%E5%8C%96.css11. 分栏显示当盒子内一般是 p 标签,文字过多时,可以分栏显示column-count 分栏column-rule 隔断框column-width 分栏宽度p { column-width: 50px; comlumn-count:3; column-rule: 5px solid red; }12. 放大缩小使用 zoom 可以让盒子放大或缩小div { width: 200px; height: 200px; background-color: pink; zoom: 2; }13. 版心<div class="w"> <div class="header"></div> </div>.w { width: 100%; background-color: skyblue; } .header { margin: 0 auto; width: 1200px; height: 50px; background-color: slateblue; }二十、HTML5 和 CSS3 新特性1. HTML5 新增语义话标签<header> 头部标签 <nav> 导航标签 <article> 内容标签 <section> 定义文档某个区域 <aside> 侧边栏标签 <footer> 尾部标签这些语义话标签主要是针对搜索引擎的,这些新标签在页面中可以使用多次IE9中,需要把这些元素转换为块级元素移动端更适合这些标签(因为全部兼容)2. HTML5 视频标签<video src="视频地址" controls="controls"></video>尽量使用MP4格式,兼容性最好兼容性写法<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签。 </video>视频标签常见属性3. HTML5 音频标签<audio src=""></audio>建议用 MP3 格式的音频auido 标签常见属性4. HTML5 新增 input 类型之前的 input 只有 text 类型,现在类型可以使语义化更加明显<!-- 我们验证的时候必须添加form表单域 --> <form action=""> <ul> <li>邮箱: <input type="email" /></li> <li>网址: <input type="url" /></li> <li>日期: <input type="date" /></li> <li>时间: <input type="time" /></li> <li>数量: <input type="number" /></li> <li>手机号码: <input type="tel" /></li> <li>搜索: <input type="search" /></li> <li>颜色: <input type="color" /></li> <!-- 当我们点击提交按钮就可以验证表单了 --> <li> <input type="submit" value="提交"></li> </ul> </form>新增表单属性可以通过以下设置方式修改 placeholder 里边的字体颜色:input::placeholder { color: pink; }5. CSS3 新增选择器属性选择器可以选择具有属性的元素input[value] { color: pink; } <input type="text" value="请输入">类选择器、属性选择器、伪类选择器,权重为10结构伪类选择器结构伪类选择器主要根据文档结构来选择元素,常用于选择父级中的子元素,权重也是10选择符简介nth-last-child()从后选择,倒数第二个 nth-last-child(2)nth-child(1) 可以选择第几个元素,也可以加公式如 2*n , n从0开始循环ul li:nth-child(2n) { background-color: #ccc; }隔行变色效果nth-child() 参数可以是 even(偶数) 或是 odd(奇数)ul li:nth-child(even) { background-color: #ccc; }nth-child() 执行顺序nth-child() 先选择参数中序列元素,然后再看CSS选择器找对应盒子<style> section div:nth-child(1) { background-color: #ccc; } </style> <section> <p>1</p> <div>2</div> <div>3</div> </section>nth-child 先将盒子内所有标签排序,然后找到 section 中的第一个元素,然后再找 div,这时候因为不匹配,所以不会有任何效果,所以需要应该是2,才可以显示效果。nth-of-type()nth-of-type 是将盒子内指定元素先排列序号,这时候就可以用 nth-of-type() 这个来进行选择。<style> section div:nth-child(1) { background-color: #ccc; } </style伪元素选择器伪元素选择器可以帮助我们利用CSS创建新的标签元素,而不需要HTML标签,从而简化HTML结构,这个新创建的元素在文档树中式找不到的,所以称为伪元素。::before 在元素内部前边插入内容 ::after 在元素内部的后边插入内容before 和 after 创建的元素属于行内元素before 和 after 必须有 content 属性伪元素选择器和标签选择器一样,权重为1语法:element::before {}div::before{ content:'前边元素'; } div::after{ content: '后边元素'; }伪元素使用场景伪元素字体图标@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?1lv3na'); src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?1lv3na') format('truetype'), url('fonts/icomoon.woff?1lv3na') format('woff'), url('fonts/icomoon.svg?1lv3na#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } div { position: relative; width: 200px; height: 35px; border: 1px solid red; } div::after { position: absolute; top: 10px; right: 10px; font-family: 'icomoon'; /* content: ''; */ content: '\e91e'; color: red; font-size: 18px; }土豆遮罩层用伪元素改写https://gitee.com/xiaoqiang001/html_css_material/blob/master/%E7%AC%AC%E5%8D%81%E5%A4%A9/12-%E4%BB%BF%E5%9C%9F%E8%B1%86%E7%BD%91%E6%98%BE%E7%A4%BA%E9%9A%90%E8%97%8F%E9%81%AE%E7%BD%A9%E6%A1%88%E4%BE%8B.html伪元素清除浮动:after 伪元素:after 方式是额外标签法的升级版,也是给父元素添加.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、IE7 专有 */ *zoom: 1; }相当于在浮动元素最后边添加了一个元素,然后用 display: block; 转换成了块元素,然后再 clear: both; 清除浮动。高度设置0,显示方式为隐藏则不会显示出来。双伪元素清除浮动将浮动元素两侧都清除浮动.clearfix:before, .clearfix:after { content: ""; display: table; /* 转换成块元素,然后列用列表使两个标签在同一行 */ } .clearfix:after { clear: both; } .clearfix{ *zoom: 1; }6. CSS3 盒子模型CSS3中可以通过 box-sizing 来指定盒子模型,有两个值:content-box、border-box,这个我们可以计算盒子大小的方式就发生了改变盒子大小为 width + padding + border (默认)box-sizing: content-box盒子大小为 width 宽度(不会因为padding、border而改变盒子大小,前提是 border 和 padding 不会超过 width 宽度)box-sizing: border-box7. CSS3 滤镜 filterfilter 属性可以将图像进行模糊或颜色偏移等效果的处理filter: 函数();8. blur 模糊处理,数值越大越模糊filter: blur(5px);9. CSS3 calc 函数:calc() 这个 CSS函数可以让你在声明CSS属性值得时候进行一些计算。width: calc(100%-80px);10. CSS 过渡效果过渡(transition)是CSS3中具有颠覆性的特征之一,可以让元素在不使用 Javascript 或 Flash 的情况下,变换为另一种样式。IE9以下并不支持。现在经常和 :hover 搭配一起使用transition: 要过渡的属性 花费时间 运动曲线 何时开始;属性:想要变化的 css 属性,宽度高度,背景颜色,内外边距都可以,如果想要所有的属性都变化过渡,可以使用 all。花费时间:单位是秒,必须写单位,如 1s, 0.5s运动曲线:默认是 ease(可以省略)linear, ease, ease-in, ease-out, ease-in-out何时开始:单位是秒(需要带单位),可以设置延迟触发时间,默认是 0s(可以省略)改变宽度,实现动画过渡效果div { width: 200px; height: 100px; backgroud-color: pink; transition: width .5s; } div:hover { width: 400px; height: 100px; } 改变多个元素 div { width: 200px; height: 100px; backgroud-color: pink; transition: width .5s, height .5s; } div:hover { width: 400px; height: 300px; }改变所有元素div { width: 200px; height: 100px; backgroud-color: pink; transition: all .5s; } div:hover { width: 400px; height: 300px; backgroud-color: skyblue; }进度条特效 .box { width: 200px; height: 50px; border: 1px solid red; border-radius: 25px; } .box-in { width: 20px; height: 50px; background-color: red; border-radius: 25px 0 0 25px; transition: all 0.5s; } .box:hover .box-in { width: 100%; border-radius: 25px; } <div class="box"> <div class="box-in"></div> </div>11. 2D 转换 transformtransform 是 css3 中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。移动:translate旋转:rotate缩放:scale移动:translatetransform: translate(x,y); transform: translateX(n); transform: translateY(n);单位:px单位:百分比(针对自身宽度或高度的百分比)不会影响到其他元素的位置,保留自身原来的位置。对行内标签没有效果图片 hover 上移效果:img { transition: all 0.3s; } img:hover { transform: translateY(-5px); }旋转: rotatetransform:rotate(度数)rotate 里边跟度数,单位是 deg 比如 rotate(45deg)角度为正时,顺时针旋转。负值为逆时针旋转默认旋转的中心点事元素的中心店头像 hover 旋转效果:div { position: relative; width: 50px; height: 50px; border: 1px solid pink; border-radius: 50%; } img { position: absolute; top: 7px; left: 7px; transition: all 0.3s; } img:hover { transform: rotate(360deg); }CSS 三角,除了用字体文件制作,还可以用CSS制作,用一个正方形,然后将两边 border 设置透明色,然后旋转向下即可。div { width: 5px; height: 5px; border: 1px solid #000; border-top: transparent; border-left: transparent; transform: rotate(45deg); }设置转换中心点:transform-origin:x y;x 和 y 参数用空格隔开,不是逗号x y 默认转换的中心点是元素的中心点(50% 50%)还可以给 x y 设置像素或者方位名词(top bottom left right center)缩放:scaletransform: scale(x,y);x, y 是用逗号分隔,数字不跟单位transform: scale(2,2) 宽度和高度都变为原来的两倍transform: scale(2) 宽高都变为原来的两倍scale 不会影响其他的盒子scale 可以设置缩放的中心点用 transform 缩放和 zoom 缩放的区别是:scale 以中心点放大zoom 以左上角坐标放大鼠标经过图片放大效果:div { overflow: hidden; } img { transition: all 0.3s; } img:hover { transform: scale(1.3); }2D 转换综合写法transform: translate() rotate() scale();其顺序会影响转换效果(先旋转会改变坐标轴方向)如果同时又位移和其他属性的时候,要将位移放到最前边12. 动画效果 animationanimation 可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。keyframes 定义动画@keyframes 动画名称 { 0%{ width:100px; } 100%{ width:200px; } }也可以用 from to@keyframes move { from { transform: translate(0,0); } to{ transform: translate(1000px,0); } }使用动画div { animation-name: 动画名称; animation-duration: 2s; }动画序列@keyframes 动画名称 { 0%{ transform: translate(0,0); } 25%{ transform: translate(0,0); } 50%{ transform: translate(0,0); } 75%{ transform: translate(0,0); } 100%{ transform: translate(0,0); } }动画里边常见属性:动画属性简写animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画的起始或结束状态animation: name 5s linear 2s infinite alternate;简写属性不包含 animation-play-state暂停动画 animation-play-stat: paused; 经常和鼠标经过等其他配合使用想要动画逆向播放,用 animation-direction: alternate盒子动画结束后,停在结束位置用 animation-fill-mode: fowards速度曲线 animation-timing-function:规定动画的速度曲线,默认是 ease多个动画 animation 用逗号隔开animation: bear 1s steps(8) infinite, move 1s;13. 3D 转换三维坐标系由三个轴共同组成x轴:水平向右 x右边是正值 y轴:垂直向下 y下边是正值 z轴:垂直屏幕 往外边是正值3D移动 tanslate3d和 2D 相比,多了一个z轴transform: translateZ(100px); transform: translate3d(x,y,z);简写不能忽略参数,如果不变则写0如果只移动z轴,不会产生变化,必须加上透视透视 perspective透视需要卸载被观察元素的父盒子上perspective: 500px;透视越小(视距,如上图d),元素越大z轴越大,元素越大3D旋转 rotate3dtranform: rotateX(45deg); tranform: rotateY(45deg); tranform: rotateZ(45deg); tranform: rotate3d(x,y,z,deg); 沿着自定义轴旋转 deg 角度角度是正值,则向后倒,顺时针转角度是负值,则向前倒,逆时针转rotateX 左手法则(图片旋转方向):rotateY 左手法则:总结,正值都是往屏幕里旋转自定义轴旋转:tranform: rotate3d(1,0,0,45deg); 3D呈现 transform-style控制子元素是否开启三维立体环境transform-style: flat; 子元素不开启3d立体空间(默认) transform-style: preserv-3d; 子元素开启立体空间代码需要写在父级,但是影响的是子盒子14. 浏览器私有前缀浏览器私有前缀是为了兼容老版本的写法,新版本浏览器无需添加-moz- 火狐 -ms- ie浏览器 -webkit- 代表safari、chrome -o- 代表 Opera二十一、项目实战网站制作流程初稿审核美工设计原型图和渲染图,然后交给前端开发页面,后端开发功能,后期维护一般6个月-1年,只修复BUG,不添加新功能(所以在指定方案的时候一定要让客户说明白,合同写清楚)代码规范https://gitee.com/xiaoqiang001/html_css_material/blob/master/%E7%AC%AC%E5%8D%81%E4%B8%80%E5%A4%A9/%E7%B4%A0%E6%9D%90/%E5%93%81%E4%BC%98%E8%B4%AD%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83.md文件夹规范images css、背景图片 upload 产品、文章图片 fonts 字体文件 js 脚本文件 css css文件文件规范初始化样式 base.css 公共样式 common.csscommon.css 公共样式可以包括版心宽度、清除浮动、页面文字颜色、header、footer 等公共元素的样式。Favicon 图标<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">二十二、SEO 优化title、description、keyword 是基本的 SEO 三大元素,需要构建好,才可以使网页在搜索引擎中排名靠前显示。title 网站标题网站名 - 网站的介绍(不要超过30个字) 文章标题 - 网站名description 描述简要说明网站的主要功能、作用<meta name="description" content="">keywords网站的关键词,6~8个关键词,关键词用英文逗号隔开,关键字越靠前排名越高csscss移动端布局1. 布局方案百分比流式布局flex 弹性布局rem + less 媒体查询布局混合布局vw / vh 布局响应式布局2. 常见移动端尺寸🔥https://material.io/devices3. 单位尺寸pxdpdpiptppi4. 视口在 meta 标签中有这么一句话:<meta name="viewport" content="width=device-width, initial-scale=1.0">viewport 就是视口的意思,浏览器显示页面内容的屏幕区域,视口可以分为布局视口、视觉视口和理想视口4.1. 布局视口 layout viewport一般移动设备的浏览器的浏览器都设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。iOS、Android 基本都将这个视口的分辨率设置为 980px ,所以 PC 端网页大多都可以在手机上呈现,只不过看上去很小,可以通过手势缩放网页。4.2. 视觉视口 visual viewport视觉视口是用户正在看到的网页的区域,可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度4.3. 理想视口 ideal viewport由于智能手机的发布,Jobs 发明了理想视口。 为了使网站在移动端有最理想的浏览和阅读宽度而设定,理想视口,对设备来讲,是最理想的视口尺寸。需要手动添加 meta 视口标签通知浏览器操作。 meta 视口标签的主要目的是让布局视口的宽度和理想视口的宽度一致,简单理解就是设备有多宽,我们的布局视口就有多宽。4.4. meta 视口标签<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">属性解释说明width宽度设置的是 viewport 宽度,可以设置 device-width 特殊值intial-scale初始缩放比例, 大于0的数字maximum-scale最大缩放比minimum-scale最小缩放比user-scalable用户是否可以缩放,yes 或 no5. 二倍图5.1 物理像素和物理像素比物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的,这是厂商在出厂时就设置好了,比如苹果6/7/8 是 750 * 1334 就是手机的像素。而我们开发时候书写的 1px 不一定等于1个物理像素。一个 px 能显示物理像素点的个数,称为物理像素比或屏幕像素比。PC 段页面,1个px等于1个物理像素移动端不尽相同。如 iphone,1个px等于2px物理像素。所以在开发中,我们又称这个 1px 为开发像素,而真正显示在屏幕上的像素我们称为物理像素。PC 端和早期的手机屏幕像素比是 1:1 的,1px 开发像素 = 1 手机物理像素。Retina(视网膜屏幕)是一种显示技术,可以将更多的物理像素点压缩到一块屏幕里,从而达到更高的分辨率,提高屏幕显示的细腻程度。 2 x 2 开发像素,在视网膜技术中可以显示 4 x 4 像素,从而更加清晰。所以同样的图片,在手机里显示会被放大倍数。造成图片模糊。这种情况一般就会使用二倍图来处理,有些手机还存在3倍图和4倍图的情况。二倍图原理就是准备一个比原来图片大1倍的图片,然后经过缩放处理针对桌面用户,而手机用户会自动按比例放大一倍,就不会出现图片模糊的情况。5.2. 普通图片二倍图<style> // 手动缩小1倍,在手机中会自动放大1倍原始比例 img { width: 50px; height: 50px; } </style> <img src="100x100.jpg"/>5.3. 背景图2倍图<style> // 背景图缩放1倍 .b1 { background: url(100x100.jpg); background-size: 50px 50px; } </style> <div class="b1"></div>语法: background-size: px | % | cover | containpx 只写一个值是宽度,高度会自动等比例缩放% 相对于父盒子比例(背景所在盒子)cover 高宽完全覆盖,直到图片宽高都触及盒子边缘。contain 一方达到边缘就停止一般背景二倍图写法:background-size: 50%;5.4. 精灵图2倍图精灵图在手机端也需要二倍图,使用原版(无缩放)精灵图。在 Fireworks 中将精灵图等比例缩放为原来的一半根据大小测量坐标在 background-size 中改为原来宽度的一半,高度 auto 自适应5.5. 二倍图工具PS 插件 cutterman,选中图片,导出2倍图慕客6. 移动端开发方案单独制作(m.jd.com)桌面端与手机端不同手机用户直接转向到手机端页面响应式布局同页面,根据宽度自适应不同设备7. 移动端样式7.1. 移动端特殊样式由于移动端是后出现的技术,所以对 H5 与 CSS3 完美适配,可以放心使用,不用担心兼容性问题。除此之外移动端还可以使用一些特殊样式。// 盒子模型 box-sizing: border-box; -webkit-box-sizing: border-box; // 手机中点击a链接,取消背景高亮 -webkit-tap-highlight-color: transparent; // 移动端浏览器默认的外观在 iOS 加上这个属性才能给按钮和输入框自定义样式 -webkit-apperance: none; // 禁用长按页面时弹出菜单 img, a { -webkit-touch-callout: none; }7.2. 移动端样式初始化Normalize.css 初始化样式https://necolas.github.io/normalize.css保护了有价值的默认值修复浏览器 BUG模块化拥有详细文档8. 流式布局(百分比布局)非固定像素,通过百分比进行缩放,也称作非固定像素布局。通过合资的宽度设置百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充,流式布局方式是移动web开发使用的比较常见的布局方式。section { width: 100%; /* 设置最大、最小宽度,达到宽度限额不再缩放 */ max-width: 980px min-width: 320px; } section div { float: left; width: 50%; height: 400px; } section div:nth-child(1) { background-color: pink; } section div:nth-child(2) { background-color: green; }<section> <div></div> <div></div> </section>京东移动端案例:https://gitee.com/xiaoqiang001/mobile/tree/master9. Flex 布局9.1. 传统布局与flex布局传统布局flex 布局兼容性好操作方便,布局简单,移动端应用广泛布局繁琐PC 端兼容性较差局限性,不能再移动端很好的布局IE11或更低版本不支持9.2. flex 布局原理可以给任何一个容器都可以使用 flex 布局。如:div { display: flex }当父盒子设置为 flex 布局后,子元素中的 float,clear 和 vertical-align 属性都失效将父盒子设置成 flex 属性后,该盒子就变成了 flex 容器,其中的子元素称为 flex item,默认横向排列。并且子元素自动变为 inline-block 类型。也就是说可以设置宽高。9.3. 常见父盒子属性flex-direction 设置主轴方向justify-content 设置主轴上子元素的排列方式flex-wrap 设置子元素是否换行align-content 设置侧轴上的子元素的排列方式(多行)align-item 设置侧轴上的子元素排列方式(单行)flex-flow 复合属性,相当于同时设置了 flex-direction 和 flex-wrap在 flex 布局中,分为主轴和侧轴,设置主轴后,可以让子元素按照主轴的方向排列主轴方向是 x 轴方向,水平向右侧轴方向是 y 轴方向,水平向下属性值说明row默认值:从左到右row-reverse从右到左column从上到下column-reverse从下到上justify-content 可以设置主轴上子元素的排列方式,类似 WORD 中的靠左,靠右,居中,平分空间注意:使用这个属性之前一定要确定好主轴是哪个,之后属性值说明flex-start默认值,从头部开始,如果主轴是x轴,则从左到右(整体靠左)flex-end从尾部开始排列(整体靠右)center在主轴居中对齐(如果主轴是x轴,水平居中)space-around平分剩余空间space-between先两边贴边再平分剩余空间space-evently等距离对齐flex-wrap在 flex 布局中,默认是不换行的,如果没有设置 flex-wrap 属性的话,那么子元素会一直在主轴内一直增加,自动缩小宽度(即使设置了盒子宽度),如果需要换行的话,需要给盒子加上 flex-wrap 属性。属性说明nowrap默认值,不换行wrap换行wrap-reverse换行,但第一行在下方align-items 设置侧轴上子元素排列方式(单行)justify-content 是在主轴上的排列方式(将子元素居左、居右、居中排列),而 align-items 是设置在侧轴上的排列方式。如果需要将一个盒子中的所有子元素水平、垂直居中在屏幕中心,则需要同时设置主轴和侧轴居中。需要给父元素盒子设置高度。属性说明flex-start从上到下flex-end从下到上center垂直居中baseline基线对齐stretch拉伸(不能给子元素设置高度)会将子元素拉伸至父元素高度align-contents 设置侧轴上子元素排列方式(多行)在单行下没有效果,一般应用于多行,类似上下贴边,中间自由分割的情况。属性值说明flex-start默认值,从头部开始,如果主轴是x轴,则从左到右(整体靠左)flex-end从尾部开始排列(整体靠右)center在主轴居中对齐(如果主轴是x轴,水平居中)space-around平分剩余空间space-between先两边贴边再平分剩余空间space-evently等距离对齐stretch设置子项元素高度平分父元素高度flex-flow该属性是 flex-direction 和 flex-wrap 属性的复合属性,可以写成一行,如:div { display:flex flex-flow: row wrap;9.4. 常见子元素属性flex 定义子项目分配剩余空间,用 flex 来表示占用多少份align-self 子项目单独排列方式order 子项目排序,类似 z-indexflex 属性,自由分配没被占用宽度的剩余空间(其他子元素有宽度),使用 flex 属性的不能有宽度。<style> section { height: 500px; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: tan; } div { height: 50px; background-color: pink; } div:nth-child(1) { width: 150px; background-color: skyblue; } div:nth-child(2) { flex: 1; background-color: pink; } div:nth-child(3) { width: 150px; background-color: blue; } </style> <section> <div></div> <div></div> <div></div> </section>左右盒子固定大小,中间自由分配1份剩余空间如果想平均分配,就给每个子元素设置flex:1,如果想让中间的占的多一些,那么就用比例的分配1:2:1 这样分配 flex 份数。align-items 可以设置所有元素在侧轴的对齐方式,如果只想要一个单独子元素居下对齐,那么可以使用 align-self 属性。align-self 是给单独子元素设置对齐方式。div:nth-child(3) { align-self: flex-end; }order 属性可以设置盒子的位置,比如三个盒子,编号1,2,3,如果给2号盒子设置 order 属性 -1,那么显示的顺序则是 2,1,3。默认为0,越小越靠前。div:nth-child(2) { order: -1; }10. rem 适配布局rem布局类似于等比例缩放,设置一个基数,然后所有元素根据屏幕比例进行缩放。页面布局文字可以随着屏幕大小变化而变化10.1. rem 单位rem( root em ) 是一个相对单位,类似于 em,em 基准是相对于父元素字体大小。而 rem 的基准是相对于 html 元素的字体大小。比如:根元素 html 设置 font-size: 12px; 非根元素设置 width: 2rem,则实际大小换成 px 就是 24px。rem 的优势就是可以通过修改 html 里边的文字大小来改变页面中元素的大小,从而达到整体控制。10.2. 媒体查询 CSS3因为 rem 单位可以根据 html 字体大小改变而改变,针对不同尺寸的屏幕,我们需要将 html 的字体大小设置不同的值。就需要使用到 CSS3 的新特性,媒体查询。使用媒体查询可以:以针对不同的媒体类型定义不同的样式可以针对不同的屏幕尺寸设置不同的样式当浏览器大小发生改变,页面会根据浏览器宽度高度重新渲染页面支持 iOS, Android语法规范:@media mediatype and|not|only (media feature) { CSS-Code; }参数说明mediatype媒体类型and not only逻辑判断media feature媒体特性,需带小括号mediatype 查询类型在不同的终端设备划分成不同的类型,称为媒体类型。值说明all用于所有设备print用于打印机和打印预览screen用于电脑屏幕,平板电脑,只能手机媒体特性值说明width定义输出设备中页面可见区域的宽度min-width最小可见区域宽度max-width最大可见区域宽度例:设置在所有小于 800px 屏幕上显示的样式@media screen and (max-width:800px){ body { font-size: 12px; } }当宽度大于800px时,样式失效如果再次细分,宽度小于 600px,再显示另外一个样式。@media screen and (max-width:600px){ body { font-size: 14px; } }当两个媒体查询同时生效时,屏幕小于600px会显示一个样式,600px-800px显示另外一个样式,800px以上则样式消失。一般按照从小到大(使用 min-width)的顺序定义。10.3. 媒体查询 + rem<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } @media screen and (min-width: 320px) { html { font-size: 50px; } } @media screen and (min-width: 640px) { html { font-size: 100px; } } @media screen and (min-width: 980px) { html { font-size: 150px; } } .top { height: 1rem; background-color: pink; color: white; text-align: center; font-size: 0.5rem; line-height: 1rem; } </style> </head> <body> <div class="top">购物车</div> </body> </html> 10.4. 引入资源当样式比较繁多的时候,我们可以针对不同屏幕引入不同的 css 文件。<link rel="stylesheet" href="css/style320.css" media="screen and (min-width:320px)"> <link rel="stylesheet" href="css/style640.css" media="screen and (min-width:640px)"> <link rel="stylesheet" href="css/style980.css" media="screen and (min-width:980px)">11. lessCSS 并非是一种语言,没有变量、函数、作用域等概念。针对于这些缺点,LESS 可以帮助我们解决这些问题。Less(Leaner Style Sheets) 是一个 CSS 预处理工具,它只是在 CSS 的基础上,为 CSS 加入了程序语言的特性。Less 中文网址: http://lesscss.cn类似 LESS 这样的工具还有 SASS, Stylus 等。11.1. Less 的使用首先需要新建一个扩展名为 less 的文件,在这个 less 文件里书写 less 语句less 变量less 编译less 嵌套less 运算11.2 Less 变量可以在 less 中定义变量,语法:@变量名: 值;变量名命名规范和其他语言类似:必须以@开头不能以数字开头大小写敏感不能有特殊符号使用变量:@color: pink; @font14: 14px; body { background-color: @color; } div { font-size: @font14; }11.3. less 编译html 不能直接解析 less 文件,需要将 less 文件转成 css 文件才可以。使用 vscode 插件 easy LESS 可以轻松将 less 文件转为 css 文件。安装插件完毕后,只要保存一下 less 文件,就会自动生成 css 文件。11.4. less 嵌套在 less 中可以使用嵌套写法(在父元素中定义子元素的样式)普通 css 写法:.header { width: 200px; height: 200px; background-color: pink; } .header a { color: blue; }在 less 中可以这样写:.header { width: 200px; height: 200px; background-color: pink; a { color: blue; } } 自动生成的 css 会自动按照css语法书写。伪元素 less 嵌套a { color: red; &:hover { color: blue; } } nav { .logo { color: green; } &::before { content: ""; } }11.5. less 运算@border: 5px + 5; div { width: 200px; height: 200px; border: @border solid @red; }less 运算规则运算符左右需要有空格如果只有一个单位,则使用该单位如果有两个单位,以第一个值得单位为准颜色也可以进行运算11.6 less 导入@import "style"; // 导入 style.less @import "style.less"; // 导入style.less @import "style.php"; // style.php 作为LESS文件被导入 @import "style.css"; // 文件内容被原样输出12. rem 适配方案less + 媒体查询 + rem 适配方案flexible.js + rem 适配方案(推荐)12.1. less + 媒体查询 + rem市面上屏幕尺寸各种各样,一般情况下以1到2套效果适应大部分屏幕。现在基本以750px为界限。动态设置 html 标签 font-size 大小假设设计稿是 750px,我们可以把屏幕划分为15等份(标准不一,也可以是20或10等份)用屏幕分辨率除以份数得出的结果就是 html 中 font-size 的大小。font-size = 屏幕像素数 / 划分的份数元素大小取值方法得到了 html 根元素的 font-size,那么页面中其它元素定义大小呢?rem值 = 页面元素值 / (屏幕宽度 / 划分的份数)rem值 = 页面元素值 / font-size 字体大小比如一个div我们想让它是 100px,那么就用 100 / font-size 大小,得到的值就是 rem 值。另外也可以使用 vscode 中的插件 cssrem 来自动转换。注意需要转换 html 字体基准值打开设置(快捷键 ctrl + ,)less 预处理// 定义默认 PC 端 font-size html { font-size: 50px; } // 我们此次定义的划分的份数 为 15 @no: 15; // 320 @media screen and (min-width: 320px) { html { font-size: 320px / @no; } } // 750 @media screen and (min-width: 750px) { html { font-size: 750px / @no; } }12.2. flexible.js + remflexible 是淘宝团队出的简洁高效移动端适配库,不需要在写不同屏幕的媒体查询,因为这些都在 js 文件中做了处理,它的原理是把当前设备划分为10等份,我们需要做的就是确认 html 文字大小就可以了。比如 750px 屏幕,font-size 就是 75px(750px / 10)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/flexible.js"></script> <title>Document</title> </head> <body> </body> </html>body { /* 设置页面 body 最小宽度和最大宽度 */ min-width: 320px; max-width: 750px; /* flexible 给我们划分了 10 等份 */ width: 10rem; margin: 0 auto; line-height: 1.5; font-family: Arial, Helvetica; background: #f2f2f2; } /* 如果我们的屏幕超过了 750px 那么我们就按照 750设计稿来走 不会让我们页面超过750px */ @media screen and (min-width: 750px) { html { font-size: 75px!important; } }Bootstrap 响应式布局https://gitee.com/xiaoqiang001/bootstrapbootcss.comgetbootstrap.combootstrap.css88.com1. 开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的设备分辨率手机< 768px平板768px ~ 992px桌面显示器992px ~ 1200px大型桌面显示器>=1200px2. 响应式布局容器响应式需要一个父级作为布局容器,来配合子集元素来实现变化效果,原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里边子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。设备分辨率布局容器宽度手机< 768px100%平板768px ~ 992px750px桌面显示器992px ~ 1200px970px大型桌面显示器>=1200px1170px布局容器要比屏幕分辨率小的原因是为了美观,给浏览器两边留出空白3. 利用媒体查询做响应式布局<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .container { width: 750px; margin: 0 auto; } .container ul li { float: left; width: 93.75px; height: 30px; background-color: green; } @media screen and (max-width: 767px) { .container { width: 100%; } .container ul li { width: 33.33%; } } </style> </head> <body> <div class="container"> <ul> <li>导航栏</li> <li>导航栏</li> <li>导航栏</li> <li>导航栏</li> <li>导航栏</li> <li>导航栏</li> <li>导航栏</li> <li>导航栏</li> </ul> </div> </body> </html>4. Bootstrap 简介Bootstrap 来自 twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML, CSS 和 JS 的。它整合了很多样式,不用用户自己编写,可以直接调用,从而使得 Web 开发更加快捷。优点:标准化 html+css 编码规范提供一套简介、直观、强悍的组件有自己的生态圈,不断的更新迭代让开发更加简单,提高开发效率5. Bootstrap 的使用创建文件夹结构创建 html 骨架结构引入相关样式文件书写内容5.1. 文件夹结构index.htmlcssimagesjsbootstrapcssfontjs5.2. html 结构<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>是让浏览器以 IE 最高版本内核运行<meta http-equiv="X-UA-Compatible" content="IE=edge">解决IE9对html5标签不识别,导致css不起作用问题<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <![endif]-->解决浏览器对 css3 无法进行媒体查询问题<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->引入 bootstrap css 文件<link href="css/bootstrap.min.css" rel="stylesheet">引入 bootstrap js 文件<script src="js/bootstrap.min.js"></script>使用 bootstrap,可以不用使用 normalize.css 初始化,已经集成在 bootstrap 里边了。5.3. 书写内容直接拿 bootstrap 预定义好的样式来使用修改 Bootstrap 原来的样式,注意权重问题https://www.bootcss.com/6. Bootstrap 布局容器Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器, Bootstrap 预先定义好了这个类。和我们之前手写响应式布局一样。container 类设备分辨率布局容器宽度手机< 768px100%平板768px ~ 992px750px桌面显示器992px ~ 1200px970px大型桌面显示器>=1200px1170pxcontainer-fluid 类流式布局容器百分百宽度占据全部视口的容器适合单独做移动端开发7. 栅格系统栅格系统是指将页面布局划分为等宽列,然后通过列数定义来模块化页面布局。Bootstrap 随着屏幕尺寸增加,系统最多划分为12列。只有在里边有多个内容,需要平分布局的情况下,才需要使用到 container 容器。7.1. 栅格系统参数栅格系统用于通过行(row)与列(column)组合来创建页面布局。 手机平板中等屏幕宽屏.container 最大宽度100%750px970px1170px类前缀.col-xs-.col-sm-.col-md-.col-lg-列数12121212行(row)必须放到 container 布局容器里边行内容器列比例进行布局,如4个图片,每个图片分3列。class="col-lg-4"每一列默认有左右15px的padding可以为同一列指定多个设备类名,如: class="col-md-4 col-sm-6" <style> .w { width: 100%; margin: 0 auto; background-color: pink; } </style><div class="w"> <div class="container"> <div class="row"> <div class="col-lg-3">1</div> <div class="col-lg-3">2</div> <div class="col-lg-3">3</div> <div class="col-lg-3">4</div> </div> </div> </div>如果元素列数分配小于12份,则会出现空白大于12份,会另起一行7.2 设置多尺寸自适应中等屏幕3等分,小屏幕2等分<div class="w"> <div class="container"> <div class="row"> <div class="col-lg-3">1</div> <div class="col-lg-3">2</div> <div class="col-lg-3">3</div> <div class="col-lg-3">4</div> </div> </div> </div>7.3. 列嵌套可以在元素中再次使用栅格系统<div class="w"> <div class="container"> <div class="row"> <div class="col-lg-4"> <!-- 列嵌套最好加上1行row,可以取消父元素的 padding 值,并且高度和父元素一样高 --> <div class="row"> <div class="col-md-6">a</div> <div class="col-md-6">b</div> </div> </div> <div class="col-lg-4">2</div> <div class="col-lg-4">3</div> </div> </div> </div>7.4 列偏移使用 .col-md-offset- 类可以将列向右侧偏移,这些类实际是通过使用 选择器为当前元素增加了左侧的边距 margin <div class="container"> // 左右两侧盒子偏移 <div class="row"> <div class="col-lg-4">1</div> <div class="col-lg-4 col-lg-offset-4">2</div> </div> // 中间盒子居中 <div class="row"> <div class="col-lg-8 col-lg-offset-2">1</div> </div> </div>7.5 列排序通过使用 .col-md-push- 和 .col-md-pull- 类可以很容易的改变列的顺序<div class="container"> // 左右两侧盒子偏移 <div class="row"> <div class="col-lg-4 col-lg-push-8">1</div> <div class="col-lg-8 col-lg-pull-4">2</div> </div> </div>7.6 响应式工具有时候对手机用户或平板用户,不需要显示某些页面元素,可以使用以下类进行控制.hidden-xs.hidden-sm.hidden-md.hidden-lgswiper 轮播图https://www.swiper.com.cn/总结1. HTML 中默认样式body 标签默认样式display: block; margin: 8px;ul 默认样式display: block; list-style-type: disc; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px;a 和 a:hover 默认样式a:-webkit-any-link { color: -webkit-link; cursor: pointer; text-decoration: underline; }盒子模型:默认样式所有文本样式会被继承,不要在结构标签中写文本样式,文本样式只写在文本标签中(如p、a等等),span 看语义,一般是文本先写结构再写样式,避免样式污染样式顺序vertical-align 针对图片对齐图片间距使用 display: block2. CSS 垂直居中的集中方法1. 盒子水平居中水平居中很简单,一般使用 margin:0 auto 即可HTML 结构<style> .parent { width: 800px; height: 800px; background-color: pink; } .child { width: 100px; height: 100px; background-color: skyblue; margin: 0 auto; } </style> <div class="parent"> <div class="child"> </div> </div>2. 版心版心,相对于 body 水平居中<style> .wrap { width: 1600px; height: 500px; background-color: pink; margin: 0 auto; } </style> <body> <div class="wrap"></div> </div> </body>3. 垂直居中使用绝对定位来垂直居中.parent { width: 600px; height: 600px; background-color: pink; position: relative; } .child { width: 50px; height: 50px; background-color: skyblue; position: absolute; top:50%; left:50%; /* 移动自身元素的一半 */ /* 使用 margin 移动 */ margin-left:-25px; margin-top: -25px; } </style> <body> <div class="parent"> <div class="child"></div> </div> </div> </body>也可以使用 transform: translate() 移动/* 使用 transform 移动 */ transform: translate(-50%, -50%);父元素无宽高,如 Body 垂直居中<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> body { position: relative; } .box { width: 100px; height: 100px; background-color: skyblue; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> <body> <div class="box"></div> </body> </html> 4. Flex基于父盒子垂直居中<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .parent { width: 600px; height: 600px; background-color: pink; display: flex; justify-content: center; align-items: center; } .child { width: 50px; height: 50px; background-color: skyblue; } </style> <body> <div class="parent"> <div class="child"></div> </div> </div> </body> </html>基于 Body 垂直居中<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> body { height: 100vh; display: flex; justify-content: center; align-items: center; } .box { width: 100px; height: 100px; background-color: skyblue; } </style> <body> <div class="box"></div> </body> </html> 设计规范尺寸系统颜色系统
2024年07月15日
9 阅读
0 评论
1 点赞
2024-07-14
HTML 笔记
一、HTML 概念HTML 定义HTML 指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。Web 标准主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面结构:用于对网页元素进行整理和分类,HTML表现:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指CSS行为:行为是只网页模型的定义及交互的编写,主要指 Javascript二、HTML 标签1. HTML 语法规范HTML 标签是由尖括号包围的关键词:例如<html>HTML 标签通常是成对出现的,例如:<html></html>,,我们称为双标签,第一个标签是开始标签,第二个标签是结束标签。有些特殊的标签是单标签,例如 <br />2. 标签关系双标签关系可以分为两类:包含关系和并列关系包含关系:<head> <title></title> </head>并列关系:<head></head> <body></body>3. 基本结构标签每一个网页都会有一个基本结构标签(也成为骨架标签),页面内容也是在这些基本标签上书写的,HTML页面又称为HTML文档。HTML 基本结构:<html> <head> <title>HTML基本结构</title> </head> <body> 网页内容 </body> </html><html></html> HTML 标签,页面中最大的标签,我们称为根标签<head></head> 文档的头部,注意在 head 标签中我们必须要设置的标签是 title<title></title> 文档的标题,让页面拥有一个属于自己网页的标题<body></body> 文档的主体,元素包含文档的所有内容,页面内容,基本都放在body里边的。3.1 头部标签HTML 框架<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html><!DOCTYPE> 文档类型声明标签,告诉浏览器使用哪种 HTML 版本来显示网页<!DOCTYPE html> // 使用最新版本的 HTML 来显示网页必须写在最前边,处于 html 标签之前,它不是一个 HTML 标签,它只是一个文档类型声明标签html 标签中可以加入 lang 语言种类<html lang="en"> // 当前文档的显示语言,对搜索引擎有影响,但对文档内部无影响 <html lang="zh-CN"> // 当前页面主体为中文字符集在 head 标签中,可以通过 <meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码<meta charset="UTF-8"> // 以 UTF-8 字符集显示网页内容charset 常用值有:GB2312(简单中文)、BIG5(繁体中文)、GBK(简体繁体全部中文字符)、和 UTF-8(国际通用字符集)4. 网页开发工具 VSCode 编辑器! // 使用叹号一键直接生成框架三、HTML 常用标签1. 标题标签 <h1> ~ <h6> <h1>我是一级标签</h1>标题标签一共分为6个等级,重要度依次递减2. 段落标签 <p> </p>在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在HTML标签中,段落标签用于定义段落,一个文本内容定义一个段落,可以将整个网页分为若干个段落。<p>我是一段文字</p> <p>我是第二段文字</p>3. 换行标签 <br />如果希望某段文本强制换行,或者需要空行,需要使用 <br /> 标签。<br /><br /> 是一个单标签,与 <p> 标签的区别是,段落标签之间会插入一些垂直间距4. 文本格式化标签网页中,有时候需要设置文字为粗体、斜体、下划线等效果,这时候需要用HTML中的文本格式化标签,使文字以特殊的方式显示。<b>粗体</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <sub>下标记</sub> <sup>上标记</sup>带有语义的标签:strong - 粗体em - 斜体ins - 下划线del - 删除线用法和普通标签一样,推荐使用,语义更加强烈,并且可以用CSS控制5. 盒子标签 <div> 和 <span> 标签没有任何语义,是一个容器标签<div>这是一个盒子</div> <span>这是一段文字</span>div 标签独占一行(大盒子),span标签一行可显示多个元素(小盒子)6. 图像标签<img src="img.jpg" alt="图片描述" title="图标标题" width="500" height="500" border="15">图像标签其他属性src // 图片路径 alt // 文本(替换文本,当图像不能显示的时候,显示该文字) title // 文本(提示文本,当鼠标放在图片上,显示的文字) width // 图像的宽度 height // 图像的高度 border // 图像边框的粗细一般只做 width 或者 height 其中一个,另一个会等比例压缩路径// 相对路径 <img src="logo.png" /> // 同级路径 <img src="./img/logo.png" /> // 同级路径 <img src="img/logo.png" /> // 下级路径 <img src="../img/logo.png" /> // 上级路径// 绝对路径 <img src="http://www.baidu.com/logo.png" /> C:/appserv/www/images/logo.gif /usr/local/apache/htdocs/www/logo.png7. 超链接标签在 HTML 标签中,<a> 标签用于定义超链接,作用是从一个页面链接到另一个页面<a href="跳转目标" target="目标的弹出方式">文本或图像</a>target 参数:_self 为默认值,在本页面打开新窗口 _blank 在新窗口打开常用链接写法:<a href="http://www.forece.net" target="_blank"></a> // 外部链接 <a href="index.html"><img src="logo.png" /></a> // 图片链接 <a href="admin/1.html"></a> // 内部链接 <a href="#"></a> // 空链接锚点链接:// 回到顶部 <a href="#top">回到顶部</a> // 使用 id 设置锚点 <a href="#tag">第一课</a> <h3 id="tag">第一课</h3>邮件链接:<a href="mailto:xxx@xxx.com?subject=主题&内容&cc=抄送@xxx.com>给我留言</a>8. 预排版标签 <pre></pre>在 HTML 中,标签和一些字符会被浏览器解析转义,并且空格也不会被解析。可以使用 pre 标签,将代码中的内容原原本本的还原出来,<p>左 右</p> <pre>左 右</pre>四、HTML 注释标签<!-- 这是一段注释 -->五、常用HTML实体在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,可以用HTML实体来替换显示结果描述实体名称实体编号 空格 <小于号<<>大于号>>&和号&&"引号""'撇号' (IE不支持)'¢分¢¢£镑££¥日圆¥¥€欧元€€§小节§§©版权©©®注册商标®®™商标™™×乘号××÷除号÷÷六、表格标签HTML中的表格一般是用来显示数据的,最好不要用表格走框架布局1. 表格的基本语法<table> <tr> <td>单元格内文字</td> </tr> </table><table></table> 是用于定义表格的标签<tr></tr> 标签用于定义表格中的行,必须签到在 table 标签中<td></td> 标签用于定义表格中的单元格,必须签到在 tr 标签中<caption></caption> 表格标题标签VSCODE 中可以快捷创建表格 table>tr*5>td*3 (快速创建一个5行3列的表格)如果只生成td表格,用 td*3 即可表头单元格 <th></th>和 td 标签类似都是表格中的单元格,一般写在第一行 tr 标签中,用来当做表头<table> <tr><th>表头1</th><th>表头2</th></tr> <tr><td>普通单元格1</td><td>普通单元格2</td></tr> </table>2. 表格相关属性标签属性一般不常用,基本都是使用 CSS 来设置align // 水平对齐方式(left, center, right),可以在 table, tr, td 中使用。对包含元素全部生效 valign // 垂直对齐方式(top, middle, bottom),table 没有该属性 border // 规定表格单元是否拥有边框(1 或者 ""),默认没有边框, td 没有 border 属性 bordercolor // 表格颜色 cellpadding // 规定单元边缘与内容之间的空白,默认1像素 cellspacing // 规定单元格之间的空白,默认2像素 width // 规定表格的宽度(像素值或百分比) height // 表格的高度 例:<table align="center", border="1", cellpading="20", cellspacing="0", width="500", height="250">3. 表格结构标签<thead></thead> // 表格头部区域 <tbody></tbody> // 表格主体区域<table> <!-- 表格头部区域 --> <thead> <tr> <th>表头</th> <th>表头</th> </tr> </thead> <!-- 表格主体区域 --> <tbody> <tr> <td>单元格</td> <td>单元格</td> </tr> </tbody> </table>4. 合并单元格rowspan="合并单元格的个数" // 跨行合并(上下行合并),在上边的单元格添加属性 colspan="合并单元格的个数" // 跨列合并(左右列合并),在左侧的单元格添加属性记得删除多余的单元格<table align="center", border="1", cellpading="20", cellspacing="0", width="500", height="250"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td colspan="2">123</td> <td>123</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td rowspan="2">5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>8</td> </tr> </table>七、列表标签列表标签在 HTML 中是用来布局的,根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表1. 无序列表<ul> 标签是 HTML 页面中的无序列表,列表项使用 <li> 标签定义,列表项前边以原点显示。<ul> <li></li> <li></li> <li></li> </ul>ul 标签中只能签到 li 标签,不能放其他内容li 标签中相当于一个容器,可以容纳所有其他元素可以用 type 属性改变前边标志,如:<ul type="square"> <li>第一条</li> </ul>可以使用 disc, circle, squre 几种类型2. 有序列表<ol> 标签在 HTML 中式有序列表,列表排序以数字来显示,列表项用 <li> 标签。有序列表也可以使用 type 指定显示标志,如:<ol type="a"> <li>第一条</li> </ol>类型:1 - 1, 2, 3 默认a - a, b, cA - A, B, CI - I, II, IIIi - i, ii, iiistart 属性,可以指定序号从第几序号开始(只能是数字),如:<ol type="1" start="2"> <li>项目</li> <li>项目</li> <li>项目</li> <li>项目</li> </ol>序号从2开始计数,2,3,4,53. 自定义列表一般用于 Footer,<dl> 标签用于定义描述列表(类似table),<dt> 用来定义项目名称,<dd> 用于列表项。如小米底部设计:<dl> <dt>服务</dt> <dd>售后</dd> <dd>联系我们</dd> </dl>八、表单标签HTML 中,一个完整的表单通常由表单域、表单控件和提示信息3个部分构成1. 表单域表单域是一个包含表单元素的区域,在 HTML 标签中,<form> 标签用于定义表单域,form 标签会把范围内的表单元素信息提交给服务器<form action="url地址" method="提交方式" name="表单域名称"> 表单元素控件 </form>url // 表单递交到的网址action // 用于指定接收并处理表单数据的url地址method // 分为 get 和 post,表单数据的提交方式name // 用于指定表单的名称,以区分同一个页面中的多个表单域2. 表单控件(表单元素)在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单输入或者选择的控件<input> 表单元素input 是输入的意思,在表单元素中 input 标签用于收集用户信息。在 input 标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有多种形式(文本框、复选框、单选框、按钮、掩码后的文本控件等)<input type="属性值">input 类型:text 定义单行的输入字段,用户可以在其中输入文本,默认宽度为20个字符 password 定义密码字段,该字段中的字符被掩码 radio 定义单选按钮 checkbox 复选框 file 定义输入字段和“浏览”按钮,供文件上传 hidden 定义隐藏的输入字段 image 定义图像形式的提交按钮 submit 定义提交按钮,提交按钮会把表单数据发送到服务器 button 定义可点击按钮(多数情况下,用于通过js启动脚本) reset 定义重置按钮,重置按钮会清除表单中的所有数据2.1. 文本框<input type="text" name="username" value="文本框默认内容" placeholder="占位">其他属性:name提交 GET 或 POST 的字段名value文本框默认内容placeholder占位符,当输入文字时,占位符消失。2.2. 密码框<input type="password">2.3. 单选框radio 单选框必须 name 一致才可以实现单选效果<form> 性别: 男 <input type="radio" name="sex" value="0"> 女 <input type="radio" name="sex" value="1"> </form>只有加了 value 才可以通过 name 字段将值提交给后台2.4. 复选框<form> <input type="checkbox" name="furniture" id="" value="0">冰箱 <input type="checkbox" name="furniture" id="" value="1">电视 <input type="checkbox" name="furniture" id="" value="2">柜子 <input type="checkbox" name="furniture" id="" value="3">空调 </form>同组复选框,name 值需要统一,value 值用于提交数据2.5. 下拉框select 下拉表单元素在页面中,如果有多个选项,可以使用 select 标签控件定义下拉列表 <select name="location" id="location"> <option value="">BJ</option> <option value="">TJ</option> <option value="" selected="selected">SH</option> </select>默认选中可以用 selected 属性多选分组<form> <select name="location"> <optgroup label="省份"> <option value="SD">山东省</option> <option value="HB">河北省</option> <option value="JL">吉林省</option> </optgroup> <optgroup label="行业"> <option>服务业</option> <option>制造业</option> <option>零售业</option> </optgroup> </select> <input type="submit" value="提交"> </form>2.6. 文本域textarea 文本域标签当用户输入文字较多的情况下,可以使用 textarea 标签,在表单元素中, textaera 标签是用于定义多行文本输入的控件,textarea 标签没有 value 属性。<textarea name="" id="" cols="30" rows="10">文字</textarea>2.7. 上传文件<input type="file" name="file" id="">2.8. 按钮提交按钮将表单中内容通过 GET 方式 或 POST 提交到服务端,提交按钮可以用 input 标签,也可以使用 button 标签,实现的效果是一样的。<input type="submit"> <button>按钮</button>复位按钮将表单内容复位,如果有 value 值,则复位为 value 值。<input type="reset">普通按钮无效果,一般用于绑定 js 事件实现特殊效果<input type="button" value="点击按钮">3. input 其他属性name 定义 input 元素的名称,重要,GET 或 POST 的 key 值 value 定义 input 元素的默认值 checked 默认被选中 maxlength 规定输入字段中字符的最大长度value 是表单元素的默认值<form> 用户名: <input type="text" name="username" value="请输入用户名"> </form>name 和 value 是每个表单元素都有的属性值,主要是给后台人员使用name 表单元素的名字,要求单选按钮和复选框要有相同的 name 值checked 属性主要针对于单选按钮和复选框,可以设置默认勾选某个表单元素4. label 标签<label> 标签为 input 元素定义标注(标签)label 标签用于绑定一个表单元素,当点击 label 标签内的文本时,浏览器就会自动将焦点转移到或者选择对应的表单元素上,用来增加用户体验 <label for="username">用户名: </label> <input type="text" name="username" id="username" value="请输入用户名">需要在 label 加上指定 id,input 标签也同样需要标记对应id九、框架frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。重要事项:您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。如果您需要为不支持框架的浏览器添加一个 <noframes> 标签,请务必将此标签放置在 <body></body> 标签中!将页面分为几个部分,分别调用不同的页面左右结构用 cols 属性分割上下结构用 rows 属性分割1. 框架<html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </html>2. 框架嵌套<html> <frameset rows="25%,75%"> <frame src="/example/html/frame_a.html"> <frameset cols="25%, 75%"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </frameset> </html> 3. 框架内链接跳转<html> <frameset rows="25%,75%"> <frame src="/example/html/frame_a.html" name="top"> <frameset cols="25%, 75%"> <frame src="/example/html/frame_b.html" name="left"> <frame src="/example/html/frame_c.html" name="right"> </frameset> </frameset> </html><a href="power.html" target="right">链接</a>当点击链接后,链接则会在右侧 frame 中打开。4. 内嵌框架将框架放在一个元素内部,如 div 内部:<div> <iframe src="a.html"> </iframe> </div>十、H51. 语法简单头部声明更加简单,如 <!doctype html> ,以及字符集声明 <meta charset="utf-8">2. 语法更宽松可以省略结束标签li, dt, dd, p, optgroup, option, tr, td, th可以完全省略的标签html, head, body3. 标签语义化增加了很多标签,使标签更加有意义。<header> 头部<nav> 导航栏<article> 文章内容<section> 网页中的一块区域<aside> 侧边栏<footer> 底部4. 新增表单属性placeholder 占位显示required 必填autofocus 自动获取焦点<form action=""> <input type="text" name="username" autofocus="autofocus" required="required" placeholder="请输入用户名"> <input type="submit"> </form>5. H5 新增 input 类型email 限制邮箱 date 日期 week 星期 month 月 time 时间 color 颜色 range 滑块范围 number 数量6. H5 多媒体标签以前网页中嵌入多媒体文件,需要使用 <embed></embed> 标签进行引用:<embed src="video.mp4" type="">embed 属性:autostart = "true/false" 自动播放loop = "正整数/true/false" 循环播放hidden = "true" 设置多媒体控制面板是否隐藏在 H5 中有了新的标签:<audio><video><audio src="audio.mp3" controls autoplay></audio>controls 控制面板autoplay 自动播放loop 循环播放兼容性解决方案<video controls autoplay> <source src="video1.mkv"> <source src="video1.mp4" </video>补充:字体标签HTML 改变文字颜色和字体,建议用CSS改变任何样式<font size="2" color="blue">This is some text!</font> <font face="verdana" color="green">This is some text!</font> <p style="color:#FF0000";>Red paragraph text</p> <table bgcolor="red"></table>
2024年07月14日
15 阅读
0 评论
3 点赞