![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
守住⒈份信仰°
这个作者很懒,什么都没留下…
展开
-
选择器的权重
样式的冲突:当我们通过不同的选择器,选中相同的元素,并且为该元素的同一个样式设置不同的值时,此时就发生了样式的冲突。发生冲突时,为发生冲突的样式设置哪个值由选择器的权重(优先级)决定。样式的优先级:(由高到低)样式权值内联样式1,0,0,0id选择器0,1,0,0类和伪类选择器0,0,1,0元素选择器0,0,0,1通配选择器0,0,0,0继承的样式没有优先级注:1、比较优先级时,需将所有的选择器权值相加计算(相加是按位相加..原创 2020-09-05 16:29:18 · 415 阅读 · 0 评论 -
样式的继承
样式的继承 :我们为一个元素设置的样式同时也会应用到他的后代元素上。注意:并不是所有的样式都会被继承,比如背景相关的、布局相关的等不会被继承。具体的样式会不会被继承需查参考手册。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=.原创 2020-09-04 20:48:46 · 248 阅读 · 0 评论 -
伪元素选择器
表示页面中一些特殊的并不真实存在的元素(特殊的位置)伪元素一般使用::开头常见伪元素:1、::first-letter 表示第一个字母2、::first-line 表示第一行3、::selection 表示选中的内容4、::before 表示元素的起始位置5、::after 表示元素的末尾位置注:before、after伪类必须结合content属性来使用,不然没有效果。通过这两个伪类可以使用CSS添加内容,但用CSS添加的内容无法被选中。<!DOCTYPE html>..原创 2020-09-03 17:57:14 · 152 阅读 · 0 评论 -
超链接的伪类
链接的几种状态链接的不同状态都可以不同的方式显示,这些状态包括:活动状态(鼠标点击时的状态),已被访问状态,未被访问状态,和鼠标悬停状态。超链接的伪类:link 未访问的链接:visted 访问过的链接,但由于隐私的原因,:visted这个超链接伪类只能修改访问过的链接的颜色,而不能修改大小等。注:以上这两个伪类选择器只有超链接才有,即a标签独有。两个其他的伪类选择器:hover 表示鼠标移入的状态:active表示鼠标正在点击的状态注:这两个伪类选择器对所有标签有效。&原创 2020-09-03 16:55:19 · 2139 阅读 · 0 评论 -
伪类选择器
伪类选择器CSS选择器在编码时的应用(类似快捷键):利用选择器快速生成标签举例:1.输入ul>li按tab键:可快速生成一ul标签嵌套一个li标签。2.输入ul+ul按tab键:可快速生成两个ul标签。3.输入ul>li*5按tab键:可快速生成包含5个li标签的ul标签。...原创 2020-09-02 22:15:16 · 171 阅读 · 0 评论 -
VS code快捷键
编辑器与窗口管理新建文件: Ctrl+N文件之间切换: Ctrl+Tab打开一个新的VS Code编辑器: Ctrl+Shift+N关闭当前窗口: Ctrl+W关闭当前的VS Code编辑器: Ctrl+Shift+W切出一个新的编辑器窗口(最多3个): Ctrl+切换左中右3个编辑器窗口的快捷键: Ctrl+1 Ctrl+2 Ctrl+3复制代码代码编辑注释:Ctrl+/标签自动补全:tab键自动生成html结构和meta声明:首先输入“!”,然原创 2020-09-02 21:29:58 · 168 阅读 · 0 评论 -
属性选择器
属性选择器(5种)作用:选中带指定属性的元素语法:[属性名]作用:选中含指定属性和属性值的元素语法:[属性名=属性值]作用:选中属性值以指定值开头的元素语法:[属性名^=属性值]作用:选中属性值以指定值结尾的元素语法:[属性名$=属性值]作用:选中属性值中带指定值的元素语法:[属性名*=属性值]<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8">原创 2020-08-31 19:01:07 · 991 阅读 · 0 评论 -
父子兄弟选择器
元素之间的五种关系父元素:直接包含子元素的元素叫父元素。子元素:直接被父元素包含的元素是子元素。祖先元素:直接或间接包含后代元素的元素叫做后代元素的祖先元素。子元素的父元素也是祖先元素,父元素只有一个,祖先元素可以有多个。后代元素:直接或间接被祖先元素包含的元素称为后代元素。兄弟元素:拥有相同父元素的元素是兄弟元素。父子兄弟选择器(关系选择器)子元素选择器:选中指定父元素中的指定子元素。语法:父元素 > 子元素后代选择器:选中指定元素中的指定后代元素。语法:祖先元素 后代元素原创 2020-08-31 18:38:01 · 1545 阅读 · 0 评论 -
复合选择器
交集选择器选中同时符合多个条件的元素语法:选择器1选择器2选择器3选择器n{ }注:交集选择器中有元素选择器,必须以元素选择器开头例子:div.red{ }选择器分组(并集选择器)同时选择多个选择器对应的元素语法:选择器1,选择器2,选择器3,选择器n{ }例子:h1,span{ }<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <ti原创 2020-08-30 20:30:04 · 85 阅读 · 0 评论 -
常用选择器
元素选择器根据标签名来选中指定元素语法:标签名{ }例子:p{ }、h{ }、div{ }id选择器根据元素的id属性值选中一个元素语法:#id属性值{ }例子:#box{ }、#red{ }类选择器class是标签的属性,它和id类似,但它允许多个标签的class属性相同,class可以重复使用。可以通过class属性为标签分组。可以为一个元素指定多个class属性值,不同属性值间用空格隔开。根据标签的class属性值选中一组元素。语法:.class属性值{ }例子:.原创 2020-08-30 19:45:43 · 147 阅读 · 0 评论 -
CSS基础、CSS语法
CSS基础CSS中文叫层叠样式表,样式:颜色、大小、形状等。网页是层次结构的,通过CSS我们可以为每一层设置样式,最终我们看到的只是最上面一层。总之,CSS为网页中的元素设置样式。使用CSS修改样式的三种方法:1、第一种方式(内联样式,行内样式):在标签内部使用style属性设置样式,style属性的值就是样式,样式也是名值对结构。可以设置多个样式,以分号结束。问题:使用内联样式只能对一个标签生效,当样式发生改变时,维护成本太高,实际开发绝对不要使用内联样式。2、第二种方式(内部样式表):将样式原创 2020-08-30 17:31:08 · 133 阅读 · 0 评论 -
音视频
audio标签用来向页面中引入一个音频文件,音视频文件引入时默认情况下不允许用户控制播放停止等。属性:src:指定音频文件的路径controls:无值属性,有则表示允许用户控制;无则表示用户不能控制。若设置了可以控制,则会显示一个播放器,但这个播放器在不同浏览器中显示效果不同,需用CSS和JS修改后使其在所有浏览器中显示效果相同。autoplay:无值属性,音频文件是否自动播放,如果设置了autoplay则在页面打开时会自动播放,但目前大部分浏览器都不会对音频进行播放loop:无值属性,是否循原创 2020-08-30 16:08:34 · 97 阅读 · 0 评论 -
图片标签、图片格式、内联框架
img元素img元素是自结束标签,用于向当前页面引入图片,img元素介于块元素和行元素之间(具有两种元素的特点)属性:src属性指定的是图片的路径(路径规则和超链接相同,即可以是站内资源也可是站外资源)。alt属性是图片的描述,这个描述默认情况下不会显示,有些浏览器会在图片无法加载时显示,同时搜索引擎也是根据该描述识别图片的内容,如果不写该属性则不会被搜索引擎收录。width属性指定图片的宽度。(单位是像素)height属性指定图片的高度。(单位是像素)注:宽度和高度中如果只修改一个,另一个原创 2020-08-30 13:03:11 · 234 阅读 · 0 评论 -
超链接、路径
超链接简介超链接可以从一个页面跳转到其他页面或当前页面的其他位置使用a标签来定义超链接,是行内元素,在a标签中可以嵌套除它自身外的任何元素(包括块元素)a标签的属性:href:指定跳转的目标路径,值可以是外部网站的地址,也可以是内部页面的地址相对路径当我们需要跳转到一个服务器的内部页面时,常使用相对路径相对路径都会使用.或…开头./表示当前文件的目前,./...原创 2020-08-30 11:31:57 · 512 阅读 · 0 评论 -
布局标签(结构化语义标签)、列表标签
布局标签1、header表示网页的头部2、main表示网页的主体部分(一个页面只能有一个)3、footer表示网页的尾部注:header和footer可以有多个,即可用来表示整个网页的头部尾部,也可用来表示网页某个部分的头部尾部4、nav表示网页中的导航5、aside表示与主体相关的其他内容(比如侧边栏等)6、article表示独立的一篇文章7、section表示一个独立的区块(当用上述的标签不能合适表示的内容可以section)8、div没有语义,就用来表示一个区块,目前div还是主要的原创 2020-08-30 11:12:46 · 982 阅读 · 0 评论 -
meta标签、语义化标签、块级行级元素
meta标签主要用来设置网页中的一些元数据,元数据不是给用户看的,是给搜索引擎看的。常用以下三种属性:charset 指定网页的字符集name 指定的数据的名称content 指定的数据的内容常见数据有:keywords 网站的关键字description 网站的描述<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <!-- ..原创 2020-08-29 23:48:37 · 363 阅读 · 0 评论 -
VS Code使用、实体
安装VS code安装中文语言包修改主题(ayu主题包)下载live sever包将一个文件目录作为项目目录打开创建一个网页原创 2020-08-29 21:09:48 · 182 阅读 · 0 评论 -
字符编码、完整的网页结构
字符基础编码:将字符转换为二进制码的过程称为编码。解码:将二进制码转换为字符的过程称为解码。字符集(charset):编码和解码采用的规则称为字符集。乱码问题:编码和解码采用的字符集不同则会造成乱码。常见字符集:ASCII(美国,7位)、ISO88591(欧洲,8位)、GB2312(国标)、GBK(国标扩展)、UTF-8(万国码,程序开发时都使用UTF-8)meta标签(元素)通过meta标签来设置网页的所使用的字符集,避免乱码。其中meta标签的字符集属性应和网页源码所使用的字符集相同。&原创 2020-08-29 20:42:46 · 191 阅读 · 0 评论 -
自结束标签、注释、标签的属性、文档声明
自结束标签:只有一个,单独存在<img>或 <img /><input>或 <input />HTML的注释(注释不能嵌套)<!-- 注释内容 -->标签的属性在标签(开始标签或自结束标签)中还能设置属性,属性是一个名值对(x=‘y’)单引号、双引号均可,属性用来设置标签中的内容如何显示。< font > 标签规定文本的字体、字体尺寸、字体颜色。<html> <head> .原创 2020-08-29 18:55:47 · 362 阅读 · 0 评论 -
编写第一个网页
<标签名> 内容 (标签体)</标签名>标签一般成对出现,含开始标签和结束标签,为了区分开始标签和结束标签,在结束标签前加一个斜杠。常见标签标题标签< h1 > < /h1 >:一级标签< h2 > < /h2 >:二级标签< h3 > < /h3 >:三级标签…段落标签< p > < /p >根标签< html > < /html >一原创 2020-08-29 17:58:28 · 135 阅读 · 0 评论 -
HTML简介
HTML(Hyper Text Markup Language)HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。超文本是一种组织信息的方式,它通过超级链接方法(从一个页面跳转到另一个页面)将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理原创 2020-08-29 17:25:26 · 461 阅读 · 0 评论 -
前端简介及历史
软件分类:系统软件、应用软件软件组成:客户端(发送请求)+服务器(响应请求)服务器开发语言:Java、PHP、C#、Python、Node.js客户端形式:文字客户端、图形化客户端(C/S架构)、网页客户端(B/S架构)网页中使用的语言:HTML、CSS、JS...原创 2020-08-29 16:30:33 · 406 阅读 · 0 评论