首页 前端知识 HTML和CSS复习

HTML和CSS复习

2024-08-14 22:08:59 前端知识 前端哥 944 2 我要收藏

1. 空白折叠

空白折叠后的一个空格大小是font-size的值

 去掉空白折叠的方法:

   1)直接将两个行级标签无空隙书写

   2)设置该元素的父元素的font-size的值为零

pre元素

<code>

   <pre>

      <p style="color:blanchedalmond">           我爱张文愚</p>

   </pre>

</code>

   

## white-space 设置pre属性值

    <code style="white-space:pre">

        var i = 2;

        if(i){

            console.log(i);

        }

    </code>`

2. 锚链接

写法: 运用id属性,注意href属性值中的  "#"

 * ``` <a href="#chapter1">章节1</a>```

   ``` <h2 id="chapter1">章节1</h2>```


 

 **  <a href="锚链接.html#chapter3">

        锚链接页面的第三章

    </a>


 

3. 功能链接

点击后,触发某个功能

- 执行JS代码,javascript:

- 发送邮件,mailto:

要求用户计算机上安装有邮件发送软件:exchange

- 拨号,tel:

要求用户计算机上安装有拨号软件,或使用的是移动端访问

    <a href="tel:14354663333">

        点击给我拨打电话

    </a>

   

4. 相对路径与绝对路径

5. title属性

    <h1 title="this is my first page">

        第一个网页

    </h1>

6. ## target属性

表示跳转窗口位置。

target的取值:

- _self:在当前页面窗口中打开,默认值

- _blank: 在新窗口中打开

7. 图片元素

使用map元素

8. 多媒体元素  (我自己的笔记)



 

9. 列表

## ol元素属性

type属性:  (一般用Css表示)

      取值为1,表示列表里边前面的序列用数字排列

      取值为i,表示列表里边前面的序列用罗马数字排列

      取值为a,表示列表里边前面的序列用小写字母排列

      取值为A,表示列表里便前面的序列用大写字母排列

reversed属性:表示序列倒着排序  布尔属性

10. ## 语义化容器元素

header: 通常用于表示页头,也可以表示文章的头部

footer:通常表示页脚,也可以用于表示文章的尾部

article:通常表示整篇文章

section:表示文章的章节

aside:通常用于表示侧边栏


 

11. ## 改变背景覆盖范围

默认情况下,背景覆盖边框盒

可以通过background-clip进行修改

12. 盒模型的应用

13. 行块盒盒模型

14. 更多的样式

15. ## 透明度

1. opacity:他设置整个元素的透明度

2. 在颜色位置设置alpha通道(rgba)


 

每个颜色都具有透明通道,0 ~ 1  (1是完全不透明,0是完全透明,可取小数)

1. rgba(红、绿、蓝、alpha)

alpha表示透明通道

2. hex: #红绿蓝透

16. ## 盒子隐藏

1. display:none,不生成盒子

2. visiblity:hidden,生成盒子,只是从视觉上移除盒子,盒子仍然占据空间。  默认值为visible


 

17. ## 换行

直接再要换行的部位加  br元素

例如:    <b>|</b><span class="border"><a href="">友盟</a></span>

        <b>|</b><span class="border"><a href="">阿里安全</a></span>

        <br>

        <b>|</b><span class="border"><a href="">大麦网</a></span>

        <b>|</b><span class="border"><a href="">钉钉</a></span>

        <b>|</b><span class="border"><a href="">支付宝</a></span>

18.

translate():元素进行平移,接受两个参数,分别是水平偏移量和垂直偏移量。例如, 将元素向右平移 100 像素,向下平移 50 像素。translate(100px, 50px)

19. 表单元素

form元素提交信息时

内部提交内容的元素必须带有name属性和value属性

select元素

name属性可以直接加在select元素上,内部option元素可以不用加value属性,内部的值即为value值

20. 选择器

id选择器:必须是 "一一" 对应关系

类选择器:是  "多对多"  关系


 

css权重为256进制


 

直接子元素选择器

<!-- 选择div的子元素,后代元素中的span不行 -->

div > span  

浏览器读选择器时是自右向左

21.

font-size设置字体大小;但实际改变的是高


 

22. 透明度

opacity属性:设置整个元素的透明度


 

23. 元素嵌套

行块盒只能嵌套行块盒

p元素不能嵌套块级元素

a元素不能嵌套a元素


 

24. line-height

    绝对的值:zhiline-height:50px;

    相对的值:

      line-height:1.5;

      line-hieght:150%;

      line-height:1.5em;

   

25. base标签

 在文档头只能用一次base标签

 可以设置文档体中所有a标签的herf和target属性“基础值”

26. 多个换行的行级元素之间的空白折叠

    可以给其父元素设置font-size:0;

    然后分别给内部行级元素设置font-size值

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15595.html
标签
评论
发布的文章

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!