一文了解web开发基础知识【HTML、CSS、JavaScript】

文章目录

1 前言
- 1.1 HTML
- 1.2 CSS
- 1.3 JavaScript
- 1.4 理解HTML、CSS、JavaScript之间的关系
2 HTML
- 2.1 什么是网页
- 2.2 什么是HTML
- - 2.2.1 文本内容
  - - 2.2.1.1 标题
  - 2.2.2 图像
  - 2.2.3 链接
  - 2.2.4 列表
  - 2.2.5 表格
  - 2.2.6 HTML代码注释
- 2.3 第一个HTML文件
- - 2.3.1 示例
  - 2.3.2 补充
  - - 2.3.2.1 < lang >
    - 2.3.2.2 字符集
    - 2.3.2.2 更多详细内容
3 CSS
- 3.1 CSS的优点和作用
- - 3.1.1 优点
  - 3.1.2 作用
- 3.2 CSS的基本用法
- - 3.2.1 CSS语法
  - 3.2.2 CSS应用方式
  - - 3.2.2.1 内部样式
    - 3.2.2.2 行内样式
    - 3.2.2.3 外部样式
    - 3.2.2.4 示例
- 3.3 CSS的其他知识点
4 JavaScript
参考

1 前言

web前端开发是从网页制作演变而来，名称上有很明显的时代特征。我们看到的网页通过代码来实现的，这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果。学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。
在这里插入图片描述

1.1 HTML

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

1.2 CSS

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

1.3 JavaScript

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单或鼠标滑过表格的背景颜色改变。可以理解为有动画的，有交互的一般都是用JavaScript来实现。

1.4 理解HTML、CSS、JavaScript之间的关系

对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript定义网页的行为，打个比喻，HTML就像一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上JavaScript这个植物人就可以对外界刺激做出反应，可以思考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人；如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有JavaScript,HTML+CSS是植物人，没有JavaScript和CSS是个毁容的植物人；如果说HTML是建筑师，CSS就是干装修的，JavaScript是魔术师。

2 HTML

2.1 什么是网页

网页是指在互联网上以HTML、CSS、JavaScript等标记语言和技术编写的文档，通过网络浏览器来查看。网页可以包含各种内容，如文本、图像、音频、视频、链接等。它们通常用于展示信息、提供服务、进行交互等目的。网页可以通过超链接相互连接，形成一个网络，用户可以通过浏览器在不同的网页之间导航。

2.2 什么是HTML

HTML（Hypertext Markup Language）是一种用于创建和设计网页结构的标记语言。HTML是一种基础的技术，用于定义和组织网页的内容。它使用一系列的标签（tag）来描述网页上的各个元素，如文本、图像、链接、表格等。这些标签通过尖括号（<>）来定义，其中包括开始标签、结束标签和标签之间的内容。

HTML的基本结构包括以下元素：

2.2.1 文本内容

通过标签来定义文本，例如 < p> 表示段落，< h1> 表示一级标题等。

<p>这是一个段落。</p>
<h1>这是一个一级标题。</h1>

2.2.1.1 标题

HTML 标题（Heading）是通过< h1 > - < h6 > 标签来定义

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body><h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6></body>
</html>

效果
在这里插入图片描述

2.2.2 图像

使用 < img > 标签来嵌入图像

<img src="图片地址" alt="图像描述">

HTML 图像是通过标签来定义的。
注意：图像的名称和尺寸是以属性的形式提供的
例：


<img src="test.jpg" width="640" height="640" />

2.2.3 链接

使用 < a > 标签来创建超链接

<a href="目标链接">链接文本</a>

2.2.4 列表

使用 < ul>、< ol> 和 < li> 标签创建无序列表和有序列表

<ul><li>第一项</li><li>第二项</li>
</ul><ol><li>第一项</li><li>第二项</li>
</ol>

2.2.5 表格

在HTML中，使用 < table>、< tr>（表格行）、 < td>（表格数据）、< th>（表头单元格）等标签来创建表格。下面是一个简单的HTML表格的示例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>HTML表格示例</title>
</head>
<body><h2>简单的HTML表格</h2><table border="1"><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr><tr><td>行1列1</td><td>行1列2</td><td>行1列3</td></tr><tr><td>行2列1</td><td>行2列2</td><td>行2列3</td></tr></table></body>
</html>

效果
在这里插入图片描述

2.2.6 HTML代码注释

语法

<!--  -->

快捷键：
Ctrl+/

2.3 第一个HTML文件

2.3.1 示例

新建一个test.html文件，内容如下

<!DOCTYPE html>
<!-- <!DOCTYPE html> 声明为 HTML5 文档 --><html>
<!-- <html> 元素是 HTML 页面的根元素,包含了整个 HTML 内容 --><head>
<!-- 包含了文档的元信息，如字符集声明、标题等 -->
<meta charset="utf-8">
<!-- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8） -->
<title>test</title>
<!-- <title> 元素描述了文档的标题 -->
</head><body>
<!-- <body> 元素包含了可见的页面内容 -->
<h1>我的第一个标题</h1>
<!-- <h1> 元素定义一个大标题 -->
<p>我的第一个段落。</p>
<!-- <p> 元素定义一个段落 -->
</body></html>

效果
在这里插入图片描述

2.3.2 补充

2.3.2.1 < lang >

在这里插入图片描述
< lang>是用来定义当前文档显示的语言
1.en定义语言为英语
2.zh-CN定义语言为中文

2.3.2.2 字符集

1.字符集是多个字符的集合，以便计算机能够识别和储存各种文字。
2.在< head>标签内，可以通过< meta>标签的charset属性来规定HTML文档应该使用那种字符编码。
3.charset常用的值有：GB2312，GBK和UTF-8，其中，UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。

2.3.2.2 更多详细内容

更多详细内容（追梦杰尼龟）

3 CSS

3.1 CSS的优点和作用

3.1.1 优点

实现内容与样式的分离，便于团队开发

样式复用，便于网站的后期维护

页面的精确控制，让页面更精美

3.1.2 作用

页面外观美化

布局和定位

3.2 CSS的基本用法

3.2.1 CSS语法

<head><style>选择器{属性名：属性值;属性名：属性值;}</style>
</head>

选择器：要修饰的对象（东西）
属性名：修饰对象的哪一个属性（样式）
属性值：样式的取值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>p{color:red;background: #cccccc;}h2{color:blue;}</style>
</head>
<body><p>CSS从入门到精通</p><h2>blue</h2>
</body>
</html>

示例
在这里插入图片描述

3.2.2 CSS应用方式

也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式

3.2.2.1 内部样式

也称为内嵌样式，在页面头部通过style标签定义

对当前页面中所有符合样式选择器的标签都起作用

3.2.2.2 行内样式

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

3.2.2.3 外部样式

使用单独的 .CSS 文件定义，然后在页面中使用 link标签或 @import指令引入

3.2.2.4 示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>/* 1.内部样式 */p{color:blue;}</style><!-- link链接外部样式文件 --><!-- <link rel="stylesheet" type="text/css" href="style/hello.css"> --><!-- 3.import导入外部样式文件 --><style>/* @import "style/hello.css" */@import url(style/hello.css);</style>
</head>
<body><p>welcome to CSS!</p><p>欢迎来到CSS课堂!</p><hr><h2 style="color:red;">WEB前段工程师</h2><h2>JAVA开发工程师</h2><hr><div>CSS</div>
</body>
</html>