前端语言串讲|豆包MarsCode AI 刷题

前端语言能力

前端三件套：HTML,CSS,Javascript.

1. HTML（Hypertext MarKup Language）:搭建网页结构，是网页的整体骨架。
2. CSS（Cascading Style Sheet）:为网页元素添加样式，专注于视觉效果和交互体验。
3. javascript:增强用户体验，处理一些函数。具有丰富的组件和库。 三者结合使用即可构建一个完整的网页体系。

HTML

使用一些标签来搭建网页骨架。h1-h6标题标签,p段落标签，img图片标签，a超链接，button按钮等等很多标签，可以定义文本，图像，视频，音频，链接及其他页面元素。

CSS

css选择器

1.id选择器（这里box为某个标签的id）

#box{
    width:100px;
}

2.类选择器（nav为标签的类名）

.nav{
    background:black;
}

3.标签选择器

p{
    font-size:12px;
}

4.后代选择器（ul无序列表里面的li标签）

ul li{
    color:red:
}

5.相邻兄弟选择器(与h1标签相邻的下一个p标签的字体粗细为300px）

h1+p{
    font-weigth:300px;
}

6.属性选择器（input密码框在选中时出现橙色）

input[type="password"]{
    color:orange;
}

7.伪类选择器（当鼠标经过时变为橙色）

a::hover{
    color:orange;
}

css还有很多类型的选择器，可以阅读文档去学习。

1. [developer.mozilla.org/zh-CN/docs/…]
2. [developer.mozilla.org/zh-CN/]

Javascript

发展历程

7种类型

1. String "Any"
2. Number 1
3. Boolean true or false
4. Null null
5. Undefined undefined
6. Symbol Symbol('somthing')
7. Object

基本语法

var a = 7 + "2"

1. var是关键字，用来定义变量
2. a为变量名
3. = + 为操作符

前端语言协作配合

发展

css在html

三种方式：

1. inline css
2. internal css
3. external css(比较常用)

javascript在html

三种方式：

1. 行内式 <button onclick="alert('Click me!')">Click me</button>
2. 内嵌式 <script> alert("Hello, world!");</script>
3. 外联式 <script src="script.js"></script>

你不知道的HTML

全部标签分类

head标签

body标签

html5

html5新增语义化标签

比如:header(头部),nav(导航),aside(侧边栏),address(地址),footer(底部)等等。语义化标签更方便我们去明白代码的功能及位置。建议：用比不用好，不用比用错好！

视频和音频

1. 视频 也可以直接用video标签
2. 音频

可以直接用audio标签

h5存储

引入两种新的存储方式,web存储和indexdDB

web存储

可以保存到浏览器，不需要每次都向服务器请求数据，提高了网页加载数据。只能存储字符串类型的数据。

indexdDB

可以存储非字符串类型的数据。 ！！两种存储方式都是针对于客户端，不适宜存储密码等敏感信息。

回顾总结

1. web风靡

• 对用户友好
• 对开发者友好------有丰富的组件库和api，，可以跨平台开发
• 领域成熟度较高
• 未来方向--------三维可视化、低（无）代码、服务端容器化、大前端的统一

2. MVC & MVVM & MVP

3. 课程总结