前端，又称Web前端。是指计算机Web应用程序（网站）的前台页面。
Web，网站或者网页的意思（网站包含网页，网页是用来展示内容）。
web由三部分组成，分别为结构层------HTML、表现层（样式层）------CSS、行为交互层------JS（javascript）。
创建站点（第一步）
什么是站点？
就是一个文件夹，用来存储当前网站所应用到的相关文件与素材，起到一个资源整合的作用
文件夹的命名
1、不能用中文命名
2、不能以数字开头
3、最好使用英文单词来命名（见名知意），如果有多个英文单词组成，可以使用驼峰式命名规则（firstPage），其中不能包含特殊符号（@#￥%……！等等）
4、网站首页命名必须用index.html
HTML中的标记（标签）
1、双标签
语法：<标签名 属性="属性值" 属性="属性值" 属性="属性值"></标签名>
特点：
双标签成对出现，有开始有结束
属性和属性值用等号连接
属性值放在引号内
属性可以有多组值
2、单标签
语法：<标签名 属性="属性值" 属性="属性值" 属性="属性值"/>
特点：
单标签单个独立出现
标签后面/可加可不加
属性和属性值用等号连接
属性值放在引号内
属性可以有多组值
常用标签：
双标签：
1、加粗标签
<b>文本内容</b>
<strong>文本内容</strong>
2、倾斜标签
<i>文本内容</i>
<em>文本内容</em>
3、删除线标签
<s>文本内容</s>
<del>文本内容</del>
4、下划线标签
<u>文本内容</u>
5、段落标签
<p>文本内容</p>
自己独占一行，自带间距
6、标题标签
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
标题标签自己独占一行，字体大小从h1~h6逐渐变小，字体有加粗效果，自带间距
<h1>通常常用来作为页面最大的标题或页面LOGO（通常一个页面中只出现一次）。
<h2><h3>通常用来实现页面中的副标题。
7、div标签
<div></div>
主要用来实现页面的排版布局，划分区域，自己独占一行
8、span标签
<span></span>
通常情况下，用来包裹一段文本内容，但是没有任何效果，如果想要看到效果，需要配合css一起使用，自己不独占一行，在一行内显示
9、超链接标签
<a href="跳转的地址" title="链接的标题" target="_blank"></a>
target:页面打开方式。属性值：_blank 在新窗口打开，_self 在当前窗口打开（默认值）。
实现页面跳转
a、跳转到具体网址要把具体的网址写全（例如：https://www.baidu.com/）
b、跳转到当前站点下的某一个页面
10、字体修饰标签
<font size="3" face="宋体" color="red">文本内容</font>
属性：
a、size：控制字体大小，取值为数值1-7，默认值是3
b、face：控制字体，宋体、微软雅黑
c、color：字体颜色
11、无序列表标签
<ul type=" ">
<li></li>
<li></li>
……
</ul>
12、有序列表标签
<ol>
<li></li>
<li></li>
……
</ol>
13、自定义列表
<dl>
<dt>名词</dt>
<dd>解释</dd>
</dl>
<dl>
<dt>名词</dt>
<dd>解释</dd>
</dl>
……
14、上标标签
<sup>文本内容</sup>
15、下标标签
<sub>文本内容</sub>
单标签：
1、图片标签
<img src="路径" alt="图片加载失败替换文本" title="鼠标悬停时显示的提示信息">
属性：
a、src：相对路径（图片文件在站点下面）（常用）
①当前文件与目标文件在同一级别，src="文件名+后缀名"
②当前文件与目标文件所在的文件夹是同一级别，src="文件夹名/文件名+后缀名"
③当前文件所在的文件夹与目标文件所在的文件夹是同一级别，src="../文件夹名/文件名+后缀名"
b、scr：绝对路径
①电脑上具体某一个盘符下的文件
②具体某一个网址上的文件
2、换行标签（强制换行标签）
<br/>
3、水平线标签
<hr width="500px" align="left" color="red" noshade>
属性：
a、width:宽度
b、align：调整hr对齐方式
取值：
left--------左对齐
right------右对齐
center------中间对齐（默认值）
c、size：高度
d、color：颜色
f、noshade：取消阴影
4、input标签
<input type="text">
属性：type
1、text--------文本框（输入框）
2、submit-------提交按钮
3、reset--------重置按钮
4、password--------密码框
5、button---------空按钮（普通按钮）
value（在不同type属性时value的作用不同）
1、在文本框中，value为值，value内的内容占位置且可提交
2、在按钮中，value可更改按钮内默认文字
Placeholder
文本框处于未输入状态时显示的提示信息，不占位置，不可提交