这是我参与「第四届青训营」笔记创作活动的第4天在字节跳动青训营里，跟随老师，学习到了一些web前端相关的知识，做此笔记记录

web开发基础知识学习

一、网页开发三剑客我们看到的网页通过代码来实现的，这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果。这个浏览器就相当于Python的解释器，专门负责解释和执行(渲染）网页代码。写网页的代码是专门的语言，主要分为Hmtl \ CSS \ JavaScript, 被称为网页开发三剑客，分别作用如下：

Html：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。主要负责编写页面架构，有点像建房子时，造的毛坯房。 CSS： (Cascading Style Sheets) 用于渲染HTML元素标签的样式。让你的网页样式变的丰富多彩起来，可以改变字体、颜色、排列方式、背景颜色等相当于给你的毛坯房做装修。 JavaScript：网页脚本语言，可以让你的网页动起来，比如一张图片鼠标放上去自动变大、一个按钮自动变色、提交表单时少填或填错了字段会提示报错等，都是JavaScript实现的。

以上三个组件是做网站必须掌握的技能

二、HTML

QQ图片20220824202740.png

声明为 HTML5 文档元素是 HTML 页面的根元素标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。元素包含文档的元数据，如定义网页编码格式为 utf-8、关键词啥的元素里描述了文档的标题 <body>元素包含了可见的页面内容 <h1>元素定义一个大标题 <p>元素定义一个段落什么是html HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和 ,标签对中的第一个标签是开始标签，第二个标签是结束标签
3.html网页结构

1. 注意：只有<body>区域的内容（白色部分）才会显示

常用元素入门

QQ图片20220824203058.png
5.div和span元素

大多数html元素别定义为块级元素或内联元素

块级元素：

块级元素在浏览器显示时候，通常会以新行开始（结束），比如

,
,
,

元素是块级元素，它可用于组合其他html元素的容器：没有特定的含义，如果与css一起使用，可用于对大的内容块设置样式属性
元素的另一个常见用途就是对文档布局。
html内联元素

通常显示时候不会以新行开始，比如,
,

元素也没有特定含义，是内联元素可做部分文本的容器，与css一同使用，可为部分文本设置样式属性

css样式初识

CSS（cascading style sheets）用于渲染html元素标签的样式

CSS可以通过以下三种方式添加到html中

内联样式：在html元素中是用style属性

内部样式表-在html头部区域使用

三、css样式基础选择器 id选择器

id就像一个元素的身份证号，可以在网页里唯一代表某个元素，可以通过这个id快速找到它对应的元素对象

class选择器：为多个元素设置同一个样式可以使用类选择器

- 直接通过元素名设置样式：为页面所有的`<p>`或`<input>`标签加上同样的样式，可以直接通过元素名批量设置

web基础

二、HTML