网站换空间多少钱关键词林俊杰免费听
前端是构建网页的一部分，负责用户在浏览器中看到和与之交互的内容。
网页是在浏览器中呈现内容的文档或页面。
通常，网页使用HTML、CSS、JavaScript(JS)组成。
HTML:定义了页面的结构和内容。包括文本、图像、链接等。
CSS：定义页面的样式和布局。
JS：用于添加交互性和动态功能作用。
---------------------------------------------------------------------------------------------------------------------------------
浏览器，建议使用谷歌浏览器，安装步骤：
使用电脑自带的浏览器，搜索“联想应用商店”--->选择安装第一个稳定版本。具体步骤可参考B站大佬 up主“葡萄数码笔记”。
---------------------------------------------------------------------------------------------------------------------------------
谷歌搜索，必须联网。
---------------------------------------------------------------------------------------------------------------------------------
前端开发环境：
安装VSCode，并安装中文插件。
HTML CSS Support:写CSS代码的快捷工具。
Live Server:可以在浏览器中实时预览页面的变化。
Auto Rename Tage:在修改HTML标签时，同步修改与之匹配的另一个标签。
前端环境搭建完毕！
---------------------------------------------------------------------------------------------------------------------------------
HTML标签：
HTML(超文本标记语言)，为网页提供结构。
HTML告诉浏览器哪些部分是标题，哪些部分是段落，哪些是列表等。
HTML标签可以通过属性来提供更多的信息。
标签通常是成对出现的，包括开始标签和结束标签。
<p>这是一个段落</p>
<h1>这是一个标题</h1>
<a href="#">这是一个超链接。</a>
单标签，如下：
<input type="text">
<br>
<hr>
注意：单标签用于没有内容的元素，双标签用于有内容的元素。
---------------------------------------------------------------------------------------------------------------------------------
HTML 文件结构
一个HTML文档，通常由以下几个部分组成：
<!DOCTYPE html> -----------------告诉浏览器这是一个HTML文件。
<html>
</html> -------------------------------HTML标签对，也是HTML文档的根元素。HTML文档起 始标志。也是文档的最外层容器。
<head>
</head>-------------------------------head标签对，包含文档的元信息，比如，文档的标题；
文档的编码格式；一些CSS、js文件。
<body>
</body>-------------------------------包含了，实际显示在浏览器中的页面内容。
---------------------------------------------------------------------------------------------------------------------------------
常用文本标签
1.标题标签。HTML中有6个标题标签，分别用 h1 到 h6 表示。
2.段落标签。<p> </p>
3.HTML的文本格式化标签。<b></b>;<i></i>;<u></u>;<s></s>
4.一个外部的<ul></ul>,包裹着几个<li></li>
5.一个外部的<ol></ol>,包裹着几个<li></li>
6.一个外部的<table></table>,行标签<tr></tr>,行标签中包裹着列标签<td></td>
7.表格列标题：<tr><th>此处为表格列标题</th></tr>
---------------------------------------------------------------------------------------------------------------------------------
举例：<p>更改文本样式：<b>字体加粗</b>,<i>斜体</i>、<u>下划线</u>,<s>删除线</s></p>
效果：更改文本样式：字体加粗,斜体、下划线,删除线
---------------------------------------------------------------------------------------------------------------------------------
举例：
<ul>
<li>无序列表元素1</li><li>无序列表元素2</li><li>无序列表元素3</li>
</ul>
效果：
- 无序列表元素1
- 无序列表元素2
- 无序列表元素3
---------------------------------------------------------------------------------------------------------------------------------
举例：
<ol>
<li>有序列表元素1</li><li>有序列表元素2</li><li>有序列表元素3</li>
</ol>
效果：
- 有序列表元素1
- 有序列表元素2
- 有序列表元素3
---------------------------------------------------------------------------------------------------------------------------------
举例：
<table>
<tr>
<th> 列标题1</th>
<th> 列标题2</th>
<th> 列标题3</th>
</tr>
<tr>
<td>元素1</td>
<td>元素2</td>
<td>元素3</td>
</tr>
</table>
效果：
列标题1列标题2列标题3
元素1元素2元素3
---------------------------------------------------------------------------------------------------------------------------------
后续内容见《Web前端基础知识（二）》