Little_Green1-CSDN博客

原创 18.后代选择器,子代选择器,并集选择器,交集选择器

这里我就写了两个选择器嘛,一个<p>标签选择器一个类选择器,然后上面那句话:选中同时满足多个条件的元素,第一个<p>标签,满足了标签选择器,还使用了class属性.属性值为box,也满足了类选择器,所以选中第一个标签,第二个<p>标签只满足标签选择器,第三个<div>标签只满足类选择器.所以只会选中第一个.有并集就有交集,两兄弟属于是.交集选择器选中同时满足多个条件的元素,选择器写法:选择器1选择器2,选择器之间连写.如果交集选择器中有标签选择器,标签选择器写最前面。

2024-08-17 10:09:50 1273

原创 17.图片对齐,文本修饰线,color文字颜色

属性名color,有四种属性值表示方法:1.颜色关键字,red,green.2.rgb表示法,rgb(3,6,30)r,g,b表示红绿蓝三原色,取值0,255. 3.rgba表示法,a表示透明度,取值0,1,可实现透明色. 4.十六进制表示法,#RRGGBB,比如#000000,#ffcc00,如果是两两相同,可以省略一个:#000,#fc0.一.水平对齐方式-图片。三.color文字颜色。

2024-08-16 11:02:54 399

原创 16.字体族,font复合属性,文本缩进,文本对齐

当写文章时,一开头需要空两格,这时候就用到文本缩进属性,text-indent属性,属性值有两种,数字+px,或数字+em(1em=当前标签字号大小),建议用第二种,一般不都是缩进两个空格么,2em就是缩进两个当前字号大小不就是两空格么。这个是用来简写的,一个属性对应多个值的写法,各个属性值之间用空格隔开,如果要使用font复合属性,属性值要按特定的顺序书写,分别是:是否倾斜是否加粗字号/行高字体,同时字号跟字体必须写进去,否则不生效。二.font复合属性。

2024-08-15 17:25:34 534

原创 15.画盒子,文字修饰属性,行高

行高用来设置多行文本的间距,属性名是line-height属性值可以有两种写法,直接数字加px,就正常设置,或者直接写数字,就是当前font-size属性值的倍数,比如你现在字体大小30px,你行高写2,那你的行高就相当于60px.如果要测算行高,我们可以计算第一行文字的顶部,到第二行文字的顶部,这就是这个文段的行高了,还有一个小技巧,文字垂直居中,就是把行高属性值等于盒子高度属性值,这样就可以实现垂直居中效果了.

2024-08-14 16:58:47 619

原创 14.类选择器,id选择器,通配符选择器

先打一点. 然后加上类名,类名自己喜好,但不要纯数字或中文,然后大括号,使用方法:在想添加CSS样式的标签内加class属性,然后属性值写类选择器的名字就好,比如。这个用来查找页面所有标签,设置相同样式,会用来把标签的基本样式全部删除,然后我们自己来设置想要的样式,*加空格加大括号然后就可以编写CSS代码了。id选择器跟类选择器类似,但有区别,id选择器一个页面只能用一次,什么叫只能用一次,就是。的元素上，但这并不是预期的行为，且可能导致不可预测的布局和样式问题。：虽然这不是直接的技术问题，但重复的。

2024-08-13 17:39:57 483

原创 13.体验CSS,CSS的引入方式,标签选择器

为了看清楚我把整个骨架写进来了,CSS书写在<title>标签下,写了一个<style>双标签,然后在<style>标签内添加选择器,p就是个选择器,这个选择器名字跟HTML代码中<p>标签同名,这种选择器叫标签选择器(<p>标签是段落标签,前面好像忘记讲了),然后在标签后加大括号,在大括号里面写CSS代码.写完然后通过<link>标签引入,<link>标签是什么,以后会学到的,现在知道就行,后面学习我们都是用内部样式表。还有就是行内样式,就是直接在标签里加style属性,属性值写CSS代码,比如。

2024-08-13 17:10:24 525

原创 12.无语义标签,字符实体

这主要讲的是某些符号我们怎么通过代码展现出来,比如<p>是段落标签,那我们要在网页中显示<p>这个符号,怎么办,这时候就要用字符实体,有三个, 表示空格,<表示小于号,>表示大于号.为什么会有空格,因为浏览器只能识别一个空格,如果你打多了浏览器识别不了,所以用来代替空格,当需要打出多个空格时,就使用。顾名思义,这个标签就是单纯用来划分区域布局,并没有什么功能,有<div>还有<span>标签,<div>标签独占一行,<span>标签则不换行。

2024-08-12 19:58:28 435

原创 11.label标签,按钮,form标签

第一种为这种编写方式,type属性确定<input>标签实现什么功能,name属性进行分组,最后的id属性,用来跟<label>标签内的for属性配对,属性值要相同,然后<label>标签包裹文字内容,这样子就可以将表单控制键与文字绑定,先不管id属性是什么,记住id属性跟for属性的属性值一致就行.第二种方式就非常简单,直接<label>标签包裹正规<input>标签就行,不用添加额外的属性,建议用这种,方便很多.<from>标签内的action属性是我们要发送数据的地址,现在先不填.

2024-08-12 11:30:25 1007

原创 10.上传文件,多选框,下拉菜单,文本域

在默认情况下,文件上传表单控件只能上传一个文件,在<input>标签添加multiple属性可以实现文件多选功能,这里的multiple属性为什么可以单独写一个,忘记的回前面复习.这个下拉菜单的操作我们通过<select>嵌套<option>标签实现,<select>标签是下拉菜单整体,<option>标签是下拉菜单的选项,都是双标签。这个就是下来菜单的代码演示,有同学发现,怎么有一个selected标签,这个跟前面的单选多选框效果一样,是默认选择的效果。文本域就是用来多行输入文本的表单控件,例如发评论。

2024-08-11 22:39:24 647

原创 9.表单,input标签,单选框

br>标签是干什么的呢,忘记的去前面复习.我们看到,<input>是单标签,而且标签内有type属性,属性值的不同,导致<input>标签在网页实现的功能不同,有文本框(text),密码框(password),单选框(radio),多选框(checkbox),上传文件(file).我们可以看到,表单里面,有一些文本框,密码框,单选多选框,还有的表单可以上传文件,这些我们可以通过<input>标签来实现,当然<input>标签只能实现这些输入框,其他的装饰得用CSS来实现。一.表单,input标签。

2024-08-11 16:46:50 1187

原创 8.表格,合并单元格

当我们将数学那一列进行跨行合并时,保留最上,是不是要保留张三那一行的数学,然后将李四那一行的数学分数去掉,然后在张三的数学分数标签里加rowspan属性,属性值写数字,合并几格就写数字几.然后当我们要合并"全市第一"这几个单元格时,是跨列合并,跨列保存最左的单元格,那我们就把其他两个的"全市第一"删除,在剩下的那个全市第一的<td>标签里面加上clospan属性,属性值一样写数字.我们可以将单元格合并,以合并同类信息,我们可以跨行合并或者跨列合并,通过在<td>标签内添加属性,就可以进行合并.

2024-08-05 17:30:59 570

原创 7.三种列表

这个就是无序列表,其实列表前面的那个小圆点可以去掉的哦,等后面讲到CSS就知道了.列表是用来布局内容排列整齐的区域,分为无序列表,有序列表,定义列表,如下所示。

2024-08-04 17:56:37 502

原创 6.超链接、音频标签、视频标签

中间这个<a>标签就是超链接标签,是一个双标签,那么我来解释一下:href属性值是跳转地址,我们需要填入网页的地址,或者你网盘中文件的地址,神奇吧,还可以跳转本地的网页文件.(绿老师提醒:属性与属性值,href这个就是属性名,等于号后面双引号包裹的内容为属性值,href="https://www.baidu.com/" 这一整个就是属性.)然后在标签中间打上需要成为超链接的文字.然后我们想跳转到本地网页文件我们就需要在href属性值填写用。视频标签为<video>标签,也是为双标签,用法如下。

2024-08-04 16:52:54 594

原创 5.图像标签、相对与绝对路径。

图片标签除了src这个属性之外,还有其他属性,有:alt,title,width,height. alt为替换文本,作用为,当图片无法显示时,显示你输入的文字,比如,那么当图片无法显示时,就会出现"图片不见了哦"这几个字作为替换.title为提示文本,当鼠标悬停在图片上时,就会在鼠标旁边显示你输入的文字.width,height这两个是图片的高和宽,只允许输入数字,输入其他的没用.当我们学习了相对路径后,我们填写src的属性值就方便很多.

2024-08-01 13:31:30 1786

原创 4.换行、水平线标签、文本格式化标签

有时候,我们想给网页文字添加不同的效果,比如加粗,倾斜等等,这时我们可以用到文本格式化标签,总共有八个标签,两两对应,<strong>与<b>对应,为加粗效果,<em>与<i>对应,为倾斜效果,<ins>与<u>对应,为下划线效果,<del>与<s>对应,为删除线效果.我们可以看到,一个效果可以由两个标签表示,我推荐记忆前面的标签,例如<strong>标签为加粗,strong这个单词就有强壮的的意思,更好记忆.名字下方有一条水平线分割,这是用到了<hr>标签,这是一个单标签,使用方法如下。

2024-07-30 13:52:22 767

原创 3.标签的关系、注释、标题标签。

这是一段html代码,图中有标签,标签,标签,我们可以看到标签跟标签有空格缩进,表明这两个标签嵌套在标签里,这种关系叫做嵌套关系也叫父子关系,在外面的标签叫做父标签,有空格缩进的叫子标签.那么标签跟标签,都是同样的四格空格缩进,类似于并列平行,并没有谁嵌套谁,这样的关系叫做并列关系.也是兄弟关系.在例如新闻网页中,第一行会有个大标题,这个就是标题标签的用处,标题标签有五个,分别对应不同的大小,如图所示。

2024-07-28 14:59:21 440

原创 2.html的基本骨架

4.告诉浏览器如何控制页面的尺寸和比例以适应不同设备的屏幕。在每次书写html项目时,都要有html骨架,那么如何快速写出骨架,我们可以在VSCode中,打出!3.表明使用的字符集为UTF-8编码。6.网页头部,存放给浏览器看的代码,例如CSS代码。7.网页主体,存放给用户看的代码,例如图片,视频.

2024-07-25 19:27:20 281

原创 1.html的前情提要

同时我们打出代码后可以通过谷歌浏览器进行查看,查看我们所布置的网页是怎么样的,所以我们也要在电脑上下载谷歌浏览器, 同时在VSCode软件下载Open in Browser这个插件,这个插件可以让我们直接在VSCode上打开我们所编写代码的网页。然后在电脑下面的搜索栏搜索控制面板 ,打开后找到默认程序四个字,点击进去,下滑找到谷歌浏览器,点击进去,然后将.htm跟.html类型的默认浏览器都设置成谷歌浏览器就行.一.写html代码的提前准备。二.html代码的样子。

2024-07-25 13:41:58 316

Little_Green1的博客