＜前端小白＞ 前端网页知识点总结

HTML

标签   

1. 标题标签  h1到h6 

2.  段落标签     p

3.  换行    br    水平线  hr

4.  加粗 strong   倾斜 em   下划线 ins   删除 del

5.  图像标签

     img   src-图像的位置    alt- 图片加载失败显示的文字    替换文本 

              title--- 鼠标放到图片上显示的文字   提示文本

              width  宽   heigh  高

6.路径   ./    或者   ../

7.超链接        

      a       herf --点击后就会跳转的地址

               target = “_blank”  点击后会打开一个新的网页

8.音频标签

     audio     src --音频的位置

                  controls   显示音频控制面板

                  loop循环播放

                  autoplay  自动播放  浏览器设置调

9.视频

video     src  位置  

              loop    autoplay     muted静音播放

10.   无序列表   

                ul嵌套li   

11.    有序列表

        ol嵌套li  

          

12. 表格   感觉没啥迪奥用 不写了

13.    输入框

        input       type=“ text文本框    password密码   radio单选框    checkbox多选框  file上传文件”

加上  placeholder   使提示的文本    

单选框外边加上label 这个让它成为label的子类   扩大其点击范围 

14.单选框的单选属性    name 弄相同的  只能选一个   checked使默认选中

15.多文件上传  加 mutiple 

16.多选框     checkbox

17.下拉菜单    selection嵌套option    selected默认显示

        

18.   文本域   textarea

19.label 标签   某个标签的说明文本   增大点击范围

20. 按钮    button

           submit   把数据提交到后台

           resert    重置   一般用于注册

           button  普通标签

    按钮应该放在   form  action  中       form表单空间    action 提交地址

                    

21。标签布局   div  span

             div 独占一行  

             span    不换行

22.   字符实体      小于号   &lt；

                             大于号  &gt；

                              空格    &nbsp；

23.  以下是CSS内容

      写法      style标签

                    link  + rel（类型） +  herf(路径)

24.   类选择器      . 类名{}

                然后在标签名后边加 class=“类名”

25.    id选择器      #类名{}

                标签后边加id = “id名"  和类选择器差不多   和js搭配使用

26.  通配符选择器   对于所有标签进行同一个操作     *{ }  

     用于清除格式

27.画盒子    宽 width   

                    高height     

                   背景色 background-color

28.字体      大小 font-size

                粗细    font-weight   一般400细  700粗

                 倾斜  font-style    normal   italic 

                 行高文字之间    line-height     让文本垂直居中  就让行高值等于盒子的高度的值 只适用单行文字

                字体样式：  font-family   

                 字体复合样式：  font ： 是否倾斜     是否加粗   字体间行高(必写)     字体(必写)       

29.  文本缩进   text-indent       加    数字px     em（字号大小）

30.   文本对齐   text-align        左对齐 默认  left    

                                                 水平居中   center 

                                                  右对齐    right

31. 图片对齐       图片放在父级标签中  进行text-align

32.修饰线   text-decoration       无none 

                                                   下划线   underline

                                                   删除线   line-through

                                                    顶划线    over-line

33.文字颜色    color      + 颜色   或  调色板    rgb（红绿蓝）  rgba(红绿蓝 ，透明度)  或  十六进制

34. 复合选择器

           后代选择器    选择器1 然后空格 选择器2       父代 空格  子代

                相当于选择使用选择器1的标签里边的使用选择器2的标签 对他进行操作 

        

   

   子代选择器      选择器1>选择器2         父代  >  子代

                  

并集 和 交集懒得写了

伪类选择器     表示元素状态   

                        选择器：hover{CSS属性}   这个是对于超链接啥的设置的鼠标悬停状态

这个会变色 只是截图接不出来

伪类超链接  ：      按顺序写 LVHA

                             :link  访问前

                             :visited  访问后

                             : hover  悬停

                              :active  点击时

35.CSS的特性

                继承性： 对于父代的所有操作会影响子代

                层叠性： 相同的属性往后写的话会进行覆盖  不同的属性会增加

                优先级   能选择的范围越大优先级就会越低  懒得写

36.  背景属性       背景色：  background-color  前边提到过

                              背景图 ：  background-img  

                              平铺方式：   默认是平铺的 repeat

                                                   取消平铺：  background-repeat: no-repeat

                                                 根据水平 垂直方向平铺   background-repeat: repeat-x;

                                                                                        background-repeat: repeat-y;

                            背景图的位置： 见下图

        

                        背景图的缩放 ：  bckground-size   

                                                cover  全屏  但是图片可能会覆盖不全

                                                contain   宽高有一个存在相等的  就会停止

                        背景图的固定：  就是上下滚动鼠标图不动 然后文字会随鼠标上下滚动

                                  background-attachment: fixed;

                         背景图的复合属性：就空格隔开就行  对于缩放要前边加上 / 

37. 块级元素 行内元素 行内块元素

    块级元素：  

• 独占一行，前后会自动换行

• 默认宽度和父元素相同  （是父元素宽度的100%）

• 可以包含其他块级元素和行内元素

• 可以设置宽度(width)、高度(height)、内外边距(margin/padding)

• 常见的

  <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>,

行内元素

• 不会独占一行，与其他行内元素排在同一行

• 默认宽度由内容决定

• 设置宽度(width)、高度(height)无效

• 水平方向的内外边距有效，垂直方向的外边距无效

• 只能包含文本和其他行内元素

• 常见的 

  <span>, <a>, <strong>, <em>, <img>, <input>, <label>, <br>

行内块元素

• 结合了块级和行内元素的特性

• 不独占一行，与其他元素排在同一行

• 可以设置宽度(width)、高度(height)、内外边距(margin/padding)

• 默认宽度由内容决定

• 常见的： 

  <img>, <input>, <button>, <select>, <textarea>

转换：  diplay：   块级 block      行内块 inline-block     行内： inline

38. 结构伪类选择器    就是对一个父级里边的多个相同的子级标签单独拿出来操作

      子级：:first-child        :last-child        :nth-child(5)第五个

39.伪元素选择器：  before  after  不知道有damn用？？

40.盒子模型： 内容区域  用width  height

                         内边距  padding      -left     -right   -bottom   -top    多值顺时针转动 

                          外边距 margin    -left     -right   -bottom   -top      多值顺时针转动 

                         边框线   border   粗细   样式solid  dashed  dotted   颜色   

41.清除默认样式     

对于边距和无序列表 

42.元素溢出：   控制溢出元素的显示方式

                overflow  ：      隐藏hidden 

                                        scroll 无论溢出不溢出都有滚动条 水平加垂直

                                        auto  没有水平的

43.合并现象：  对于两个同级标签  当同时在垂直方向时  两者之间的相交的margin取较大的

44.塌陷问题：  子级加上了外边距导致父级往下移动了

                  解决： 1 子级不加margin   父级加内边距

                            2 父级加   overflow：hidden

                              3 父级 加边框 

45。行内元素的垂直位置        line-height  和28文字那点一样

46.  圆角效果     头像啥的用

                border-radious   也是顺时针转       

                                头像 ： 正方形 前提  然后 值写    50%

                                 胶囊 ：  高度写成盒子高度的一半

先写到这里   2025.5.18   过几天学完学透彻再来再来