尚硅谷js基础

最新推荐文章于 2024-09-16 08:47:17 发布

m0_73818810

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量99

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_73818810/article/details/129481639

版权

文章目录

1.简介

客户端：用户使用，本地

服务器：远程处理业务

服务员和厨师
客户端

文字

图形cs架构

网页bs架构
网页：不需安装，不需更新，跨平台
W3C网页开发标准
结构：HTML描述结构

表现：CSS控制样式

行为：JS相应用户操作

2.HTML

超文本指超链接
注释快捷键 CTRL+/
属性是一个名值对结构（x=y），属性名和标签名或其他属性应该用空格隔开，属性如果有属性值，属性值应该用引号引起来

<!DOCTYPE html>  //文档声明h5版本

编码：字符转换为二进制码

解码：二进制码转换为字符

字符集：规则

编码和解码的字符集不同会出现乱码

开发时用UTF-8
```
<meta charset="UTF-8">
```
元素就是标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IrClFKeE-1678628095680)(null)]
zeal等网速好的时候下载
网页中多个空格解析为一个空格

有些特殊符号要使用转义字符

<meta http-equiv="refresh" content="3,url=https://developer.mozilla.org/zh-CN/docs/Web/API/URL">

语义化标签

h标签有6类

独占一行的元素叫块标签（title h p）

不独占一行的元素叫行内标签（em）

p标签表示一个段落

hgroup 一组相关的标题放在一起

em标签表示语音语调加重

strong表示强调重要

blockquote表示长引用（独占一行）

q表示短引用（行内）

header头部，可以有好几个

main主要部分，只能有一个

footer底部

nav 导航

aside 和主题相关的东西（侧边栏—）

article

section

div 没有语义，表示一个块

span 行内元素没有语意网页内选中文字
块元素用来布局

行内元素包裹文字

块元素放行内

行内一般不放块元素

列表

有序，无序，定义

<ul>
            <li>结构</li>
            <li>表现</li>
            <li>行为</li>
        </ul>
        <ol>
            <li>结构</li>
            <li>表现</li>
            <li>行为</li>
        </ol>
        <dl>
            <dt>结构</dt>
            <dd>具体解释</dd>
            <dd>多写几个也行</dd>
        </dl>

列表也可以嵌套

超链接

行内标签

可以嵌套任何标签（除了超链接标签自身）

<a href="www.baidu.com">超链接</a>
<a href="07.列表.html">超链接</a>
//可以跳转到同一个目录下的内部页面

相对路径以./ 和…/开头

./可以省略

./表示当前文件所在的目录（所在文件夹）

…/表示当前文件所在的目录的上一级
target属性用于指定超链接打开的位置

_self 默认值在当前页面打开超链接

_blank 在新的页面打开超链接

超链接特殊用法

//默认形式去顶部
<a href="#">去顶部</a>

//通过添加id可以去指定位置
<a id="bottom" href="#">top</a>
<a href="#bottom">去底部</a>

//超链接占位符
<a href="javascript:;">这是超链接的占位符</a>

id属性，每个标签可以添加一个id属性，是元素的唯一标识，同一页面不能出现重复的id属性

图片标签

<img width="100" src="./C.png" alt="Java">
//alt大多数情况不会显示
//有些浏览器在加载不出来时会显示
//宽度和高度如果只修改一个另一个会修改
//pc端建议不要修改图片大小

属于替换元素在块和行内元素之间，有两种特性

图片格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SZmZKlEF-1678628095860)(null)]

内联框架（引用别的网页）

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
//frameborder用于设定边框

音视频

<audio src="./audio/mp3" controls autoplay loop></audio>
//autoplay不一定有效


<audio controls>
    对不起请升级浏览器
    //优先第一个执行成功后不再执行第二个
    <source src="./audio/mp3">
    <embed src="./audio/mp3" type="">
</audio>

//针对老浏览器
<embed src="./audio/mp3" type="">

//视频和音频差不多

3.CSS

网页是一层一层的，我们看到的是最上一层

内联样式

只能对一个标签生效

开发时不要使用

<!-- 行内样式 -->
<p style="color: rgb(164, 111, 111); font-size: 30px;">爆竹声中一岁除，春风送暖入屠苏。</p>

内部样式表

只能对一个网页起作用

<!-- 行内样式 -->
<p style="color: rgb(164, 111, 111); font-size: 30px;">爆竹声中一岁除，春风送暖入屠苏。</p>

外部样式表

<link rel="stylesheet" href="./09.相对路径.html">

style内部不能写html只能写css

/**/是注释
基本语法

选择器选中指定元素（id#，class.，通配*

声明块来指定样式，声明是名值对结构
class属性可以重复使用

一个标签可以有多个class
统配选择器*
交集选择器

class1.class2
并集选择器

用逗号
关系选择器

父子父元素>子元素

祖先后代祖先空格后代

兄弟前一个+后一个（选下一个兄弟

前一个~后一个（选后面所有兄弟

属性选择器

<p title="abc">11111</p>

p[title]{
            color: brown;
        }
p[title=abc]{
            color: brown;
        }
//以abc开头
p[title^=abc]{
            color: brown;
        }
//以abc结尾
p[title$=abc]{
            color: brown;
        }
//包含某些东西
p[title*=abc]{
            color: brown;
        }

伪类选择器

ul > li.first{

}

:not( )否定伪类
超链接的伪类

a:link表示没访问过的链接

a:visited表示访问过的链接（只能该颜色）

a:hover表示鼠标移入的状态

a:active表示鼠标的点击

伪元素

表示一些特殊并不存在的元素

用：：开头

p::first-letter
p::first-line
p::selection

div::before{
        content: 'abc';
        color: blueviolet;
       }
div::after{
        content: 'abc';
        color: blueviolet;
      }

继承

样式继承，样式会被后代继承

p标签中不能放块元素

背景，布局相关不能被继承
选择器权重

可以在样式后面加important，会变成优先级最高，但在开发中要慎用
长度单位：

像素

百分比（相对于父元素）

em

rem 和em类似只是它相对于根元素而言
rgb值

通过red green blue调配出

每种颜色在0-255之间

rgb（红值，绿值，蓝值）

rgba 增加不透明度

1完全不透明

还有16进制的rgb值
hsl值

色相饱和度亮度

4.CSS盒子模型

文档流

最底下一层是文档流

元素在文档流排列

元素有两种状态

-在文档流里

-不在文档流中

元素在文档流中有什么特点

-块元素

-块元素会在页面中独占一行

-默认宽度是父元素的全部

-默认高度是被内容（子元素）撑开

-行内元素

-不会只占一行

-自左向右排列

-如果一行放不下会换行

-默认高度和宽度是被内容撑开
任何元素都是矩形盒子
盒子组成

盒子可见框=内容区+边框+边距
1. 内容区
大小由内容区的宽度和高度
1. 内边距
  
  -内边距会影响盒子大小
  
  -背景颜色会延申到内边距
2. 边框
  
  至少设置三个样式
  
  宽度
  
  高度
  
  样式
  
  边框的宽度会影响盒子大小
  
  影响盒模型大小是：内容区、内边距、边框
  
  外边距不会影响到盒子的大小
  
  盒子尺寸=width+边框线
  
  border-width默认一般三个像素
  
  border-width：10px 20px 10px 20px
  
  或border-top-width
  
  border-color不指定会自动使用color的颜色值
  
  border属性也可以简写
  
  border-style
3. 外边距
  
  不会影响盒子大小
  
  影响盒子的位置
  
  margin
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AAo2Ict5-1678628095719)(null)]
盒子水平布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ou1EMNGg-1678628095796)(null)]
垂直方向

父元素会被内容撑开

通过overflow可以处理溢出子元素
相连垂直外边距的折叠

兄弟元素：二着都正会取二者中的最大值

-特殊一整一负取和

-特殊都负取二者绝对值较大的

父子元素：

-子元素会传递给父元素（上外边距）
行内元素的盒模型

行内元素不支持设置宽度和高度

行内元素可以设置padding border margin 但垂直方向不影响布局
浏览器的默认样式

pc端我们要想要去掉默认样式

引入默认样式表

]

[外链图片转存中…(img-Mi3fHY17-1678628093147)]

[外链图片转存中…(img-Xzb1PiiH-1678628093147)]

[外链图片转存中…(img-EyPUy0EX-1678628093147)]

垂直方向

父元素会被内容撑开

通过overflow可以处理溢出子元素

[外链图片转存中…(img-QdZOP984-1678628093148)]
相连垂直外边距的折叠

兄弟元素：二着都正会取二者中的最大值

-特殊一整一负取和

-特殊都负取二者绝对值较大的

父子元素：

-子元素会传递给父元素（上外边距）
行内元素的盒模型

行内元素不支持设置宽度和高度

行内元素可以设置padding border margin 但垂直方向不影响布局

[外链图片转存中…(img-yl8SFBmq-1678628093148)]
浏览器的默认样式

pc端我们要想要去掉默认样式

引入默认样式表