前端学习A

最新推荐文章于 2024-10-04 21:00:38 发布
最新推荐文章于 2024-10-04 21:00:38 发布
阅读量218 收藏
点赞数
分类专栏： 前端 文章标签： 前端 学习 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GanZzaz/article/details/126249027
版权

一、HTML基本语法
下载 Visual Studio Code – > 新建文本文件 --> 选择语言HTML -->复制代码 --> 按下F5运行 --> 选择浏览器。
1）基本结构

<!DOCTYPE html>  <!--文档类型声明：用于声明HTML的版本信息，这次为HTML5-->

<html lang="en"> <!--代表整个HTML文档 lang语言种类en(英语)zh-CN(中文)-->
    <head> <!--文档的头部-->
        <meta charset="UTF-8"> <!--编码格式的设置-->
        <title>Hello,World</title><!-- 标题 -->
    </head>
    <body><!--文档的主体-->
        <h1> 标题一 </h1> <!-- 标题标签 -->
    </body>
</html>

2）常用标签
HTML中元素分为单标签元素和双标签
双标签结构

 <h1> 内容 </h1>
标签格式描述
< h1 >, …,< h6 >标题标签
< font >字体样式
< p >段落标签
< div > < span >盒子标签
< br >换行
< ul > < li >无序列表
< ol > < li >有序列表
< strong > < b >强调
< em > < i >斜体
< u >下划线
< a href = “…” download = “文件名”>超链接
< a href = “contacts.html#Mailing_address” >通过 id的超连接
< a href = “#Mailing_address” >通过 id的超连接
< img src=“…” alt =“…”图片
< dl > < dt > < dd >描述
< p>The quote element — <q> — is
< addr title = “”>缩略语
< address >标记联系方式
< sup> < sub >上标，下标
< time datetime=“2016-01-20”>20 January 2016时间
< header >页眉
< nav >导航栏
< main >主内容
< aside >侧边栏
< footer >页脚

二、CSS
1）CSS结构
选择器 { 属性 ：值；}
声明
2）书写方式
1嵌入式

<!DOCTYPE html>  

<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <style type="text/css"> 
            p{
                color: red;
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <p>Hello,World</p>  
    </body>
</html>

2.外联式
单独写.css文件，然后在中写入

<!DOCTYPE html>  

<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <link rel = "stylesheet" href="地址">
    </head>
    <body>
        <p>Hello,World</p>  
    </body>
</html>

3行内式

<!DOCTYPE html>  

<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
    </head>
    <body>
        <p style="background-color: red;">Hello,World</p>  
    </body>
</html>

3）选择器
通过一定的语法规则选取对应的HTML标记。然后对其设置样式。
1基本选择器

选择器格式含义举例
通用选择器*{属性:值}不建议使用
标签选择器标签名{属性:值}
类选择器.class属性值{属性:值}
ID选择器#ID属性值{属性:值}

4）尺寸样式属性

属性值
heightauto:自动 length:使用px定义高度%百分比
width同上

5）文本与字体属性

属性值含义
heightauto:自动 length:使用px定义高度%百分比
width同上

6）文本属性

属性名值 含义
color#ff0000或red或rgb(3,5,8)给文本设置颜色
text-alignleft(居左)、right(居右)、center(居中)设置文本的水平对齐方向
text-decorationnone(去掉文本修饰线)、underline(下划线)、overline(上划线)、line-through（删除线）设置文本修饰线
text - transformcapitalize\uppercase\lowercase大小写转换或者首字母大写
Line-height固定值或百分比设置行高
text-indentpx或者em设置首行缩进 允许负值
latter - spacingpx设置字符间距
word-spacingpx设置单词间距

7)字体属性

属性名值功能
font-stylenormal(正常)、(italic)斜体设置文本为斜体
font-weightrnormal(正常)、bolde设置文字粗细
font-sizepx给文本设置大小
font-family微软雅黑、楷体、宋体…给文本设置字体
fontefont:italic bold 14px“微软雅黑写属性能够同时给文本设置斜体、加粗、大小、字体每一个值之间需要使用空格 并且一定要有顺序。

8)复合选择器

属性名值功能
选择器1，选择器2{属性：值}多元素选择器多元素选择器同时匹配选择器1和选择器2，多个选择器之间用逗号分隔p,h1,h2{marqin:0px}
E F{属性：值}后代元素选择器后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔#slidebar p{font-color:#990000:}
E>F{属性：值；}子元素选择器子元素选择器，匹配所有E元素的子元素Fdiv>p{color:#990000;}
E+F{属性：值；}相邻元素选择器相邻元素选择器，匹配所有紧随E元素之后的同级元素Fdiv+div{color:#990000；}

9）列表样式属性

属性名值含义
list-style-typenone (将列表前面的项目符号去掉),disc (实心园),square (实心小方块),circle (空心园)设置列表前项目符号的类型。
list-style-positioninside , outside设置列表项标记的放置位置。
list-style-imageurl (图像路径)将图象设置为列表项标记。
list-stylesquare inside url(arrow.gif)在一个声明中设置所有列表属性

10)伪类选择器
格式 a：link{ }

选择器含义
link向未被访问的链接添加样式。
visited向已被访问的链接添加样式。
hover当鼠标悬浮在元素上方时，向元素添加样式。
active鼠标放在元素上面时，点击的一瞬间

a:hover{

}

11)属性选择器

属性名含义举例
[attr]匹配所有具有attr属性的元素，不考虑它的值h1[align]{…} input[type][size]{…}
[attr=val]匹配属性等于指定值的所有元素h1[align = “center”]{…}
[attr^ = “val”]匹配属性以指定值开头的所有元素Font[color^=“#ff"
[attr$ = “val”]匹配属性的值以指定值结束的所有元素Font[color$=“00"
[attr* = “val”]匹配属性中包含指定值的所有元素Font[color*=“00"

input[type = “text”]{ font - size : 36px; }

12）继承性
body的子标签会继承body的样式。
1.只有文本与字体样式属性能被继承，其他样式属性不能被继承
2.实际工作中，会给boby标签设置字体大小以及字体颜色，因为body标签是最外层的元素，内层元素会继承外层的元素样式。

13）优先级
行内样式>ID选择器>类选择器>标签选择器
值：1000 > 100 > 10 > 1

14)!important属性
提升属性的权重。其属性的权重无穷大。
格式 选择器{属性：值!important;} （在css里使用）
注意：改属性只是提升 属性的权重，并没有提升选择器的优先级，所以同样的选择器，并无影响

15）一个标签可以携带多个类名

div.div${黑马程序员$}*3

按下Tab，生成三条语句

        <div class="div1 div2">黑马程序员3</div>

如果冲突，会以后写的CSS属性值作为值

16）背景样式属性

属性值含义
background-color#ff0000、red.rgb(255,0,0)背景颜色
background-imageurl(图像路径和名称);背景图像
background-repeatrepeat、repeat-x、repeat-y、no-repeat背景图像是否重复
background-positioncenter center 或 x% y% 或 xpos ypos背景图像起始位置
background-attachmentscroll (滚动)、fixed (固定)设置背景图像是否固定或者随着页面的其余部分滚动。
backgroundurl(1.ipga) no-repeat center center fixed设器背景的简写形式

17)浮动属性

.div{
	float: left;
}

18)清除浮动

<!DOCTYPE html>  

<html lang="en"> 
    <head> 
        <meta charset="UTF-8">
        <style type="text/css">
            .clear {
                clear: both;
            }
            .box{
                width: 600px;
                border: 1px solid yellow;
                margin-left: auto;
                margin-right: auto;
            }
            .div1{
                width: 100px;
                height: 100px;
                background-color: red;
                float: right;
            }
            .div2{
                width: 100px;
                height: 100px;
                background-color: green;
                float: left;
            }
            .div3{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
            }
        </style> 
    </head>
    <body>
        <div class="box">
            <div class="div1">hhh1</div>
            <div class="div2">hhh2</div>
            <div class="div3">hhh3</div>
            <div class="clear"></div>
            <p>ffffff</p>
        </div>
    </body>
</html>


        <ul style="overflow:hidden;">
            <li> 项目管理1</li>
        </ul>>

19）盒子模型
什么是盒子?

盒子是用来存储物品 sI-

思考一下:一个盒子是由哪些部分进行组成 !v 我们可以将一个盒子理解为一个快递的包裹:v

有内容+有填充物+纸盒子 v

那我们如何去理解 csS 中的盒子呢?“

在 css 中一个盒子的组成部分:内容 (content) +内填充 (padding) +边框(border) +外边距( margin) 一个盒子中的主要属性: width、height、padding、border、marginu

width: 指“宽度”的意思﹐但是这里的宽度指的盒子里面的内容的宽度―而不是盒子的宽刻

hegiht: 指“高度”的意思﹐但是这里的高度指的盒子里面的内容的高度而不是盒子的高度v

padding: 是“内填充”的意思，指的盒子里面的内容到盒子边框的距离

border:是“外边框”的意思指的盒子的边框

margin: 是“外边距”的意思指的是盒子与盒子之间的间距。

20）Padding属性
Padding-top：上内填充、Padding-right：右内填充、Padding-bottom：下内填充、Padding-left：左内填充
简写：Padding：10px 20px 30px 40px；表示上为10像素，左为20像素，右为30像素，下为40像素

21）margin的定义
margin-top: 上外边距。margin-right:右外边距,margin-bottom:下外边距。margin-left:左外边距·
margin:10px 20px 30px 40p;表示上外边距为10像素右外边距为20像素下外边距为30像素左外边距为40像素，

注意：
1、在标准的文档流中竖直方向的 margin 值不会叠加它会取较大的值.
2、横着方向是没有 margin 的塌陷现象.
3、浮动元素它是没有 margin 的塌陷现象的·

margin居中
Margin-bottom：100px auto；

22）border

 border: 1px solid;

border-top: 上边框、border-right: 右边框、border-bottom: 下边框、border-left: 左边框 用法同上

23)display
Display 属性取值：inline (行内)、block (块级)、none (无)

            .box{
                width: 100px;
                height: 100px;
                background-color: #f00;
                display: inline;
            }

24)position
position 在英文中表示“位置”的意思它主要是用于实现对玩元素的定位,在 CSS 中定位分为三种:
position:fixed 固定定位
position:relative 相对定位, 相对自己的位置
position:absolute 绝对定位 相对于父元素设置定位

 <!DOCTYPE html>  

<html lang="en"> 
    <head> 
        <meta charset="UTF-8">
        <style type="text/css">
            .box{
                width: 600px;
                height: 600px;
                border: 1px solid #000;
                margin: 100px auto;
            }
            .box div{
                width: 100px;
                height: 100px;
            }
            .div1{
                background-color: #f00;
                
            }
            .div2{
                background-color: #0f0;
                position: relative;
                left: 100px;
            }
            .div3{
                background-color: #00f;
            }
        </style> 
    </head>
    <body>
        <div class="box">
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
        </div>
    </body>
</html>

25）z-index （z轴，越大越好）
Ø z-index 表示谁压盖着谁，数值大的会压盖住数值小的

Ø 只有定位的元素才有 z-index 值 只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有 z-index

Ø z-index 的值是没有单位的,值是一个正整数,默认的 z-index 的值是0

Ø 如果定位元素没有设置 z-index 属性或者 z-index 值设置一样,那么写在 HTML 后面的定位前面的定位元素

 <!DOCTYPE html>  

<html lang="en"> 
    <head> 
        <meta charset="UTF-8">
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
            }
            .div1{
                background-color: #f00;
                position: absolute;
                left: 100px;
                top: 100px;
                z-index: 1;
            }
            .div2{
                background-color: #00f;
                position: absolute;
                left: 150px;
                top: 150px;
                z-index: 2;
            }
        </style> 
    </head>
    <body>
        <div class="div2"></div>
        <div class="div1"></div>
    </body>
</html>

26）结构伪类

选择器功能
E:first-child匹配第一个孩子
E:last-child匹配最后一个孩子
E:nth-child(n)匹配第n个孩子
E:nth-child(2n)或E:nth-child(even)匹配偶数的孩子
E:nth-child(2n+1) 或E:nth-child(odd)匹配奇数的孩子
E:only-child匹配有且只有一个孩子
 <!DOCTYPE html>  

<html lang="en"> 
    <head> 
        <meta charset="UTF-8">
        <style type="text/css">
            .box ul li:first-child{
                color:#f00;
                width: 100px;
                height: 100px;
                line-height: 30px;
                border: 1px solid #000;
            }
        </style> 
    </head>
    <body>
        <div class="box">
            <ul>
                <li>黑马</li>
                <li>黑马</li>
                <li>黑马</li>
            </ul>
        </div>
    </body>
</html>

27）border-collapse
border-collapse : collapse;

 <!DOCTYPE html>  

<html lang="en"> 
    <head> 
        <meta charset="UTF-8">
        <style type="text/css">
            table{
                border-collapse: collapse;
                border-color: #ccc;
            }
        </style> 
    </head>
    <body>
        <table width="600" border="1">
            <tr>
                <td>&nbsp</td>
                <td>&nbsp</td>
            </tr>
            <tr>
                <td>&nbsp</td>
                <td>&nbsp</td>
            </tr>
        </table>
    </body>
</html>

28)伪元素

选择器功能
:first-letter操作当前元素中第一个字
:first-line操作当前元素中第一行
::beforerw在之前插入，在一个盒子内部的最前面
::after在之后插入，在一个盒子内部的最后面
 <!DOCTYPE html>  

<html lang="en"> 
    <head> 
        <meta charset="UTF-8">
        <style type="text/css">
            .box::first-letter{
                color: #9F79EE;
                font-size: 40px;
                padding: 20px;
            }
        </style> 
    </head>
    <body>
        <div class="box">
            ABCDEFG
        </div>
    </body>
</html>

29)文本阴影
text-shadow ：3px,3px,3px,#CD5C5C，第二组
水平 垂直 清晰度 颜色

 <!DOCTYPE html>  

<html lang="en"> 
    <head> 
        <meta charset="UTF-8">
        <style type="text/css">
            .box{
                font-size: 40px;
                font-family: "楷体";
                color: #32cd32;
                text-shadow: 3px 3px 3px #cd5c5c;
            }
        </style> 
    </head>
    <body>
        <div class="box">
            ABCDEFG
        </div>
    </body>
</html>

30）box-shadow盒子阴影
水平方向阴影、垂直方向阴影、模糊距离、阴影尺寸、阴影颜色、内/外阴影。

 <!DOCTYPE html>  

<html lang="en"> 
    <head> 
        <meta charset="UTF-8">
        <style type="text/css">
            .box{
                width: 400px;
                height: 400px;
                border: 1px solid #000;
                box-shadow: 3px 3px 3px 3px #f00,-4px -4px 2px 2px #da70d6 inset;
            }
        </style> 
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>

31)圆角曲形
border-radius :左上 右上 右下 左下

 <!DOCTYPE html>  

<html lang="en"> 
    <head> 
        <meta charset="UTF-8">
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: red;

            }
            div:nth-child(1){
                border-radius: 10px 20px 30px 40px;
            }
            div:nth-child(2){
                border-radius: 20px;
            }
            div:nth-child(3){
                border-radius: 20px 0px 0px 40px;
            }
        </style> 
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

32）透明度
Rgba（红色，绿色，蓝色，透明度）
a：表示透明度的意思 透明度取值：0~1之间 0表示完全透明 1表示不透明
·背景颜色透明
Background-color:rgba(255,255,255,0.3)
·文件颜色透明
Coler:rgba(255,255,255,0.3
·边框颜色透明
Border:1px soild rgba(255,255,255,0.5)

GanZzaz
关注
专栏目录
HTML CSS3阴影属性
HTML5_student的博客
03-07 2068
css3阴影 1、文本阴影属性 ：text-shadow:10px 10px 10px red; 注： 第一个值 ： 水平方向的距离 （必须有的：支持负值） 第二个值 ： 垂直方向的距离 （必须有的：支持负值） 第三个值 ： 阴影的模糊程度 （不支持负值） 第四个值 ： 阴影的颜色 第一个值 和 第二个值得位置不能互换； 例： span{ w...
前端学习路线（简洁清晰，直击学习途径）
m0_67911008的博客
03-30 7万+
第一阶段：前端入门 1.Html5 2.Css3 第二阶段：JavaScript ①JavaScript 基础语法 ②JavaScript 高级（WebAPI/Dom Bom） ③JavaScript 框架（jQuery） ④数据可视化（echarts） 第三阶段 服务端编程 1.node js基础 2.ajax 3.promise 4.axios 5.了解学习es6语法，http协议规则 6.TypeScript 第四阶段 Vue.js
2024大前端学习规划
2401_86638480的博客
09-06 1203
第三阶段（2个星期）学习jquery以及bootstrap框架，其中前者是js框架后者是css框架。这是你学的第一个框架要认真学习，跟着里面的例子每个都手动写一遍。第四阶段（1个星期）入门完成学习html5和css3，只要你学完这个东西，你就可以去模仿淘宝或者京东首页，编写一个仿淘宝或者京东首页，这时候你就会成就感十足，我就是这样觉得的哈哈哈哈。第五阶段（1个星期）学习移动端页面布局。
前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）
热门推荐
张彦峰的博客
04-09 169万+
备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。 一、HTML简单的回顾 （一）HTML 基本结构 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&...
前端学习路线
...
10-28 8万+
先附上一张网上广为流传的前端知识体系图：前端知识体系从大图中我们总结出： 优秀的Web前端开发工程师 要在知识体系上既要有 广度 和 深度！应该具备快速学习能力。 前端开发工程师 不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
Web前端开发学习笔记
qq_41622776的博客
02-02 2707
自学笔记，仅供参考
前端学习路线（来自鱼皮）——待填补学习
警警的博客
08-17 1871
相信自己有能力，那么你就真的会有！兴趣坚持付出心态总结一下，学前端的路线其实就一句话：基础三件套 => 巩固基础 => 学习框架 => 多做项目 => 按需学习 => 拓宽视野。还有一个学任何编程技术都要注意的点，全程多敲代码！多敲代码！多敲代码！
前端导出技术学习指南
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
04-04 3万+
前端导出是一项非常实用的技术，它可以帮助用户更方便地处理和使用数据。通过掌握CSV、PDF和图片导出等关键技术，并结合实际业务需求，我们可以开发出满足用户需求的导出功能。
前端学习--async
snoto的专栏
02-03 1380
aysnc函数
前端学习路线（三）
海风依旧
11-21 4737
在前两章中，我们讲了如何去学习前端三剑客、js高级和bootstrap的重点，得到了很多前端初学者的好评，收藏量也是每天都在增加，所以今天博主想写一下第三章，主要想讲一下学习ajax和webpack的问题，ajax是前端学习的重点，如果不会ajax，写出再好的页面也只是一个空壳，而webpack则是一个打包工具，对于项目的上传具有重要的作用。
2020最新前端学习路线
12-16
2020最新前端学习路线， 从0开始完整覆盖整个前端学习阶段，按此学习路线性学习，学完第一份公众可以拿到15K以上的高薪。
前端工程师学习笔记 超级详细
10-31
正则表达式学习笔记 微信小程序学习笔记 前端部署相关笔记 前端UI库使用记录笔记 前端JS工具库使用笔记 Webpack学习笔记 Vue笔记整合 UmiJS笔记 TypeScrip笔记 Scss笔记 ...前端工具使用A 前端代码规范
前端学习代码
04-19
基于Vue.js实现的项目管理系统 相关资料：https://www.yuque.com/vilson/ef1m6t 需要配合后端接口使用，链接：https://github.com/a54552239/pearProjectApi
前端学习知识记录3
03-28
在“前端学习知识记录3”这个压缩包中，包含了作者18年毕业后至今在工作中积累的前端开发相关知识点。这份资料对于那些希望深入理解和提升前端技能的人来说，是一份宝贵的资源。下面将对其中可能涉及的一些关键知识...
前端学习笔记（不断更新中）
01-08
2.a标签中的target： _blank：在新窗口中打开被链接文档 _top：在窗口主体中打开被链接文档 _self：在被点击时的同一框架中打开被链接文档（默认） _parent：在父框架中打开被链接文档 3.input标签中的require：将...
Vue3轻松实现导出Excel文件功能
bjzhang75的博客
10-03 362
Vue3轻松实现导出Excel文件功能
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 273
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
在 TS 的 class 中，如何防止外部实例化
最新发布
读心悦
10-04 836
虽然这不是直接防止外部实例化的方法，但你可以通过提供一个静态工厂方法来控制实例的创建。这样，即使构造函数是公开的，外部代码也只能通过你提供的工厂方法来获取实例。通过将类的构造函数设为私有，你可以阻止外部代码创建该类的实例。通常，将构造函数设为私有是实现这一目的最直接和有效的方法。如果你想要定义一个类，但不允许它直接实例化，你可以将其定义为一个抽象类。抽象类不能被实例化，但可以作为其他类的基类。静态方法来获取实例。这种方式并不完全防止外部实例化（因为构造函数仍然是公开的），但它提供了一种控制实例创建的方式。
Vue根实例、实例总结
m0_54007573的博客
10-04 663
Vue根实例、实例总结
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值