web前端开发HTML+CSS+JS学习笔记Day2

最新推荐文章于 2024-08-21 22:36:29 发布

嵩你一只橙

最新推荐文章于 2024-08-21 22:36:29 发布

阅读量47

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_67911124/article/details/130996254

版权

#web前端开发HTML+CSS+JS学习笔记
#HTML核心
## 第一个网页

Emmet插件：自动生成HTML代码片段

### 注释

注释为代码的阅读者提供帮助，注释不参与运行

在HTML中，注释使用如下格式书写：

```html

```

###元素

> 其他叫法：标签、标记

```html
<a href="http://www.duyiedu.com" title="黑龙江渡一教育有限公司">渡一教育</a>
<title>Document</title>
```

整体：element （元素）

元素 = 起始标记（begin tag） + 结束标记（end tag） + 元素内容 + 元素属性

属性 = 属性名 + 属性值

属性的分类：

- 局部属性：某些元素特有的属性
- 全局属性：所有元素通用

```html
<meta charset="UTF-8">
```

有些元素没有结束标记，这样的元素叫做：**空元素**

空元素的两种写法：

1. ```<meta charset="UTF-8">```
2. ```<meta charset="UTF-8" />```

### 元素的嵌套

元素不能相互嵌套

父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的两个元素）

### 标准的文档结构

HTML：页面、HTML文档

```html
<!DOCTYPE html>
```

文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5。

不写文档声明，将导致浏览器进入怪异渲染模式。

```html
<html lang="en">
</html
```

根元素，一个页面最多只能一个，并且该元素是所有其他元素的父元素或祖先元素。

HTML5版本中没有强制要求书写该元素

lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。

```html
<head>

</head>
```

文档头，文档头内部的内容，不会显示到页面上。

```html
<meta>
```

文档的元数据：附加信息。

charset：指定网页内容编码。

计算机中，低压电（0~2 V）0，高压电（2~5 V）1，表示2，使用10

计算机中，只能存储数字

文字和数字进行对应

比如：a —— 97， A —— 64

该字典叫做字符编码表，GB2312，GBK

袁 —— GB2312 —— 100000 —— GBK —— ？？

UTF-8 是 Unicode 编码的一个版本

```html
<title>Document</title>
```

网页标题

```html
<body>
</body>
```

文档体，页面上所有要参与显示的元素，都应该放置到文档体中。
## 语义化

### 什么是语义化

1. 每一个HTML元素都有具体的含义

a元素：超链接
p元素：段落
h1元素：一级标题

2. 所有元素与展示效果无关

元素展示到页面中的效果，应该由CSS决定。

因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。

**重要：选择什么元素，取决于内容的含义，而不是显示出的效果**

### 为什么需要语义化？

1. 为了搜索引擎优化（SEO）

搜索引擎：百度、搜搜、Bing、Google

每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码

2. 为了让浏览器理解网页

阅读模式、语音模式
## 文本元素

HTML5中支持的元素：HTML5元素周期表

### h

标题：head

h1~h6：表示1级标题~6级标题

### p

段落，paragraphs

> lorem，乱数假文，没有任何实际含义的文字

### span【无语义】

没有语义，仅用于设置样式

> 以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）
> 到了HTML5，已经弃用这种说法。

### pre

预格式化文本元素

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格

例外：在pre元素中的内容不会出现空白折叠

在pre元素内部出现的内容，会按照源代码格式显示到页面上。

该元素通常用于在网页中显示一些代码。

pre元素功能的本质：它有一个默认的css属性

> 显示代码时，通常外面套code元素，code表示代码区域。
## HTML实体

实体字符， HTML Entity

实体字符通常用于在页面中显示一些特殊符号。

1. &单词;
2. &#数字;

- 小于符号

<

- 大于符号

>

- 空格符号

 

- 版权符号

©

- &符号

&
## a元素

超链接

### href属性

hyper reference：通常表示跳转地址

1. 普通链接
2. 锚链接

id属性：全局属性，表示元素在文档中的唯一编号

3. 功能链接

点击后，触发某个功能

- 执行JS代码，javascript:
- 发送邮件，mailto:

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

- 拨号，tel:

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

### target属性

表示跳转窗口位置。

target的取值：

- _self：在当前页面窗口中打开，默认值
- _blank: 在新窗口中打开
## 路径的写法

### 站内资源和站外资源

站内资源：当前网站的资源

站外资源：非当前网站的资源

### 绝对路径和相对路径

站外资源：绝对路径

站内资源：相对路径

1. 绝对路径

绝对路径的书写格式：

url地址：

```
协议名://主机名:端口号/路径

schema://host:port/path
```

当跳转目标和当前页面的协议相同时，可以省略协议

2. 相对路径

以./开头，./表示当前资源所在的目录

可以书写../表示返回上一级目录

相对路径中：./可以省略
## 图片元素

### img元素

image缩写，空元素

src属性：source

alt属性：当图片资源失效时，将使用该属性的文字替代图片

### 和a元素联用

### 和map元素

map：地图

map的子元素：area

衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：

ps、pxcook、cutpro（本人开发）

### 和figure元素

指代、定义，通常用于把图片、图片标题、描述包裹起来

子元素：figcaption
##多媒体元素
###video
controls:控制控件的显示，取值只能为controls
    `<video controls="controls" src="./images/yuanshen.mp4" style="width:1000px;"></video>`
某些属性，只有两种状态：1.不写  2.取值为属性名，这种叫做布尔属性

布尔属性，在HTML中可以不用书写属性值

autoplay:布尔属性，自动播放

``
muted:布尔属性，静音播放

loop:布尔属性，循环播放
`<video controls="controls"autoplay muted loop src="./images/yuanshen.mp4" style="width:1000px;"></video>`
###audio和视频播放完全一样
`<audio src="./images/许嵩-如约而至.mp3" controls autoplay loop muted></audio>`
###兼容性
1.旧版本的浏览器不支持这两元素

2.不同的浏览器支持的音频格式可能不一致

MP4 webm（视频为多格式的情况下可以使用子元素source）

    <source src="./images/yuanshen.mp4">
    <source src="./images/yuanshen.webm">
##列表元素
###有序列表
ol(表示整个列表）:ordered list

li（表示列表里的某一项）:list item

     <ol type="1">//1表示每一项前面是阿拉伯数字排序  i表示每一项前面是罗马数字排序  a表示英文字母排序 I、A表示大写的数字编号
        <li>打开冰箱门</li>
        <li>把大象放进去</li>
        <li>关上冰箱门</li>
    </ol>
<ol>超文本标记语言type编号类型（一般用css属性控制）

* 'a'表示小写字母编号
* 'A'表示大写字母编号
* 'i'表示小写罗马数字编号
* 'i'表示大写罗马数字编号
* '1'表示数字编号
reversed布尔属性
###无序列表
把ol改为ul

    成为废物的条件
    <ul>
        <li>喜欢睡觉</li>
        <li>喜欢摆烂</li>
        <li>不喜欢学习</li>
    </ul>
无序列表常用于制作菜单或者新闻列表。
###定义列表
通常用于一些术语
dl：definition list

dt:

dd:

    dl>
        <dt>HTML</dt>
        <dd>超文本标记语言，xxxxx</dd>
        <dt>元素</dt>
        <dd>组成HTML文档的单元，每个xxxx</dd>
    </dl>
##容器元素
容器元素：该元素代表一个块区域，内部用于放置其他元素
###div元素
没有语义，表示一块区域
###语义化容器
header:通常用于页头，也可以用于表示文章的头部。

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

article：通常表示文章

section：通常用于表示文章的章节

aside：通常用于表示侧边栏

##元素的包含元素
以前：块级元素可以包含行级元素，行级元素不包括块级元素，a元素除外

元素的包含关系由元素的内容类别决定

例如，查看h1元素中是否包含p元素（在内容类别 mdn查询)

总结：

1.容器元素中可以包含任何元素

2.a元素中几乎可以包含任何元素

3.某些元素有固定的子元素（ul>li,ol>li,dl>dt>dd)

4.标题元素和段落元素不能相互嵌套，并且不能包含容器元素
#CSS基础
CSS代码格式：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color:aqua;
            background-color:blueviolet;
            text-align:center;
        }
        #test{
            color :coral
        }
    </style>
##为页面添加样式
      h1{
            color:aqua;
            background-color:blueviolet;
            text-align:center;
        }


CSS规则=选择器（eg:h1{})+声明块

选择器：选中元素，用来确定选择的范围

1.ID选择器：选择对应ID值的元素所选择的区域比元素选择器所选择的区域范围小

```

        #test{
            color :coral
        }//html代码部分
```

     </p>
    <p id="test">lorem ipsum dolor sit amet.</p>
    <p>Dolores iste deleniti similique molestiae.</p>
    <p>Neqye dfficia minus ab nesciunt.</p>//css代码部分

效果如下图
![](/images/1.png/)
2.元素选择器

     h1{
            color:aqua;
            background-color:blueviolet;
            text-align:center;
        }//css代码部分

    <h1>她只是我的妹妹</h1>//html代码部分

3.类选择器(使用较多）

css代码部分：

    <style>
    .red{
            color:red;
            font-size:2em;
        }
    </style>

html代码部分：

    </head>
    <h1 class="red">
        她只是我的妹妹</h1>
    <p>
        lorem ipsum dolor sit amet.
    </p>
    <p class="red">lorem ipsum dolor sit amet.</p>
    <p>Dolores iste deleniti similique molestiae.</p>
    <p>Neqye dfficia minus ab nesciunt.</p>
####声明块

出现在{}中

声明块中包含很多声明（属性）每一个声明（属性）表示某一方面的样式。
###css代码书写位置
1.内部样式表：书写在style元素中

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color:aqua;
            background-color:blueviolet;
            text-align:center;
        }
    </style>
2.内联样式表（元素样式表）：直接写在style属性中

    <h1 style="color:aquamarine;">
    现在添加样式</h1>
3.外部样式表（推荐使用）

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./index.css">
    </head>
    <body>
    <div class="red-big-center">
        你是大千世界一轮清泉
    </div>
     </body>
    </html>

将样式写到独立的CSS文件中。

（1）外部元素可以解决多页面样式重复问题

（2)有利于浏览器缓存，从而提高页面的响应速度

（3）有利于代码分离，更易阅读和维护
##常见的样式声明
1.color：元素内部的文字颜色

**预设值**：定义好的单词

**三原色，色值**：光学三元色，每个颜色可以用0-255之间的数字范围来表达，色值。

    rgb表示法：
    rgb(0,255,0)//绿色
    hex(16进制）表示法：
    #ff44000

2. background-color

元素背景颜色

3. font-size

元素内部文字的尺寸大小

1）px：像素，绝对单位，简单的理解为文字的高度占多少个像素
2）em：相对单位，相对于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。

> user agent，UA，用户代理（浏览器）

4. font-weight

文字粗细程度，可以取值数字，可以取值为预设值

> strong，默认加粗。

5. font-family

文字类型

必须用户计算机中存在的字体才会有效。

使用多个字体，以匹配不同环境

sans-serif，非衬线字体

6. font-style

字体样式，通常用它设置斜体

> i元素，em元素，默认样式，是倾斜字体; 实际使用中，通常用它表示一个图标（icon）

7. text-decoration

文本修饰，给文本加线。

> a元素
> del元素：错误的内容
> s元素：过期的内容

8. text-indent

首行文本缩进

9.  line-height

每行文本的高度，该值越大，每行文本的距离越大。

设置行高为容器的高度，可以让单行文本垂直居中

行高可以设置为纯数字，表示相对于当前元素的字体大小

10.  width

宽度

11.  height

高度

12.  letter-space

文字间隙

13. text-align

元素内部文字的水平排列方式

## 选择器
选择器：可以精准的选中想要的元素

选择器：帮助你精准的选中想要的元素

### 简单选择器

1. ID选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器

*，选中所有元素

5. 属性选择器

根据属性名和属性值选中元素

6. 伪类选择器

选中某些元素的某种状态

1）link: 超链接未访问时的状态

2）visited: 超链接访问过后的状态

3）hover: 鼠标悬停状态

4）active：激活状态，鼠标按下状态

爱恨法则：love hate

7. 伪元素选择器

before

after

## 选择器的组合

1. 并且
2. 后代元素 —— 空格
3. 子元素 —— >
4. 相邻兄弟元素 —— +
5. 后面出现的所有兄弟元素 —— ~

## 选择器的并列

多个选择器, 用逗号分隔

语法糖
##层叠（权重计算）
声明冲突：同一个样式，多次应用到同一个元素

层叠：解决声明冲突的过程，浏览器自动处理
###1.比较重要性
重要性从高到低：
1）作者样式表中的！important样式

2）作者样式表中的普通样式

3）浏览器默认样式表

###2.比较特殊性
看选择器

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个四位数（xxxx)

1.千位：如果是内联式，记作1，否则记作0；

2.百位：等于选择器中所有ID选择器的数量

3.十位：等于选择器中所有类选择器，属性选择器，伪选择器的数量

4.个位：等于选择器中所有元素选择器、伪元素选择器的数量

逢256进一
###3.比较源次序
代码书写靠后的

###应用
1.重置样式表

书写一些作者样式，覆盖浏览器的默认样式

重置样式表覆盖浏览器的默认样式

常见的重置样式：normalize.css、reset.css、meyer.css

2.爱根法则

link>visited>hover>active
##继承
子元素继承父元素某些CSS属性
通常，跟文字内容相关的元素会被继承。