文章目录
- 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>
3.3 CSS的其他知识点
发现了一个详细系统的CSS博客，引用一下
CSS入门学习笔记+案例
4 JavaScript
单纯的总结知识点没有意义，先引用几个很详细的笔记教程，回头实践过后进行整理
JavaScript入门学习笔记
一个JavaScript专栏
参考
新手理解HTML、CSS、javascript之间的关系-修订
web开发基础知识
web前端开发（一）—HTML基础
CSS入门学习笔记+案例
HTML（超详细）（图+文）
JavaScript入门学习笔记
