HTML和CSS复习

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值