一.什么是前端
前端即网站前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript。
广义前端：用户可以直接看见并交互的界面
狭义前端：浏览器上运行的用户交互界面
二.前端三剑客
HTML：超文本标记语言 Hyper Text Markup Language，负责完成页面的结构（架构）。
CSS：级联样式表（标记语言）Cascading Style Sheet，负责页面的风格设计（布局）。
JavaScript：浏览器脚本语言，负责编写页面特效，从后端获取数据，调用浏览器的API，渲染页面等（逻辑）。
1.HTML：超文本标记语言
什么是html？
html指的是超文本标记语言，非编程语言，不具备编程语言所具备的程序逻辑
为什么学html？
为了完成页面结构的搭建（什么时候用什么标签）
''' 标签：被尖括号（<>）包裹，由字母开头包含合法字符（- | 数字）的，可以被浏览器解析的标记。如：系统标签，自定义标签 标签的功能：换行 | 设置页面字符编码集 | 控制文本字体颜色与大小 | 加载图片与视频 注：标签都有头有尾，用/来标识标签的结束 <meta charset="utf-8"> 指令：被尖括号（<>）包裹，由字！开头的标记。如：<!doctype html>, <!-- -->(注释) 转义字符：被&与；包裹的特殊字母组合或#开头的十进制数。如：< > '''
页面
<!-- html的注释：一个html页面有且只有一个页面模板 --> <!--设置文档类型：html => 该页面采用h5语法标准进行书写> <!doctype html> # 文档类型必须出现在最上方，html语法不区分大小写 <!--页面内容都被页面根标签（html）包裹--> <!--页面开始--> <html> <!--头：有内容 => 有开始有结束 head --> <head> <meta charset='utf-8'> # 字符编码 <title>页面</title> # 页面标签的标题
<!--内部或外部的css样式|js脚本|页面其他设置--> </head> <!--身体：有内容 => 有开始有结束 body --> <body> <!--存放展示给用户的内容：文本|图片|视频|超链接|表格|表单。。。--> 呵呵 </body> <!--页面结束> </html>
常用标签
学习的目的：使用标签的语义与功能 | 完成页面架构的搭建（div）
# 1.标题标签：h1 ~ h6(会自动换行) <h1 title='标题'>一级标题</h1> <h3 title='标题'>三级标题</h3> # 字体加粗且字体大小都是样式，均可以自定义 #h1标签：页面基本上都会出现，有且只有一个，用来标识整个页面的标题 # 2.段落标签（会自动换行） <p>文本内容</p> # 3.文本相关标签(不会自动换行) <span>文本标签</span> <i>斜体</i><em>斜体方式强调</em> <b>加粗</b><strong>加粗方式强调</strong> <sup>上角标</sup><sub>下角标</sub> # 4.<div></div> # 没有语义，也没有特殊功能，也没有特殊样式，随意使用，搭建架构 # 5.超链接标签 <a href='' target='' title=''> # href:链接的地址 # target: _self(当前页面跳转，打开地址)，_blank(跳转到另外一个空白页面，打开地址) # title:鼠标悬浮提示，可以给任意标签添加 # 锚点：快速定位到页面指定位置 <a name='top' id='top'></a> <div style='height: 2000px'></div> <a href='#top'>返回top</a> # 通过a的name或普通标签的id设置锚点，再通过另一个a的href属性，值为#加锚点名，跳转到设置的锚点位 # 6.图片标签 <img src='' alt='' title='' width=''> #src:数据源 #alt:资源加载失败的文字提示 #width/height：设置一个另一个会等比缩放（同时设置会导致图片失真） # 7.表格标签 <table border='10' width='500' height='300' cellsapcing='0' rules='all' cellpadding='20'> <caption>表格标题</caption> <thead> <tr> <th>标题</th> <th>标题</th> </tr> </thead> <tbody> <!--(tr>td{单元格}*3)*2--> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> <tfoot> <!--tr>td{单元格}*3--> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tfoot> </table> #table>( # caption{标题}+ # (thead>tr>th{标题}*3)+ # (tbody>(tr>td{单元格}*3)*2)+ # (tfoot>tr>td{单元格}*3) # ) # booder:表格边框宽度 # cellsapcing:单元格之间的距离 # rules：all(全部) | groups(组线) | rows(行线) | cols(列线) # cellpadding:内容距上距左的距离 # 8.分割线 <hr> # 9.原文本 <pre>呵 呵</pre> # 10.换行 <br> # 11.列表（常用） # 无序列表 <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> # 有序列表 <ol start="10" type="I"> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol>
<!DOCTYPE HTML>
<html>
<head>
<title>架构分析</title>
<meta charset="UTF-8">
</head>
<body>
<!--做一个页面, 前提准备-->
<!--分析页面结构 => div完成架构搭建 => 将页面解耦合 => 按区域完成整个页面 -->
<!--w3c网页-->
<div class="wrapper">
<!--头-->
<div class="header"></div>
<!--导航-->
<div class="nav"></div>
<!--主体-->
<div class="main">
<div class="main-left"></div>
<div class="main-center"></div>
<div class="main-right"></div>
</div>
<!--底部-->
<div class="footer">
<div class="footer-top"></div>
<div class="footer-bottom"></div>
</div>
</div>
<!--总结: 考虑两个问题点, 1.层级结构嵌套关系(层次) 2.结构的命名-->
<!--整体页面规划完毕, 每一个区域的细节内容-->
<!--考虑问题: 使用了哪些具体的语义标签(嵌套关系与命名)-->
<!--part1-->
<div>
<h2>领先的 Web 技术教程 - 全部免费</h2>
<p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p>
<p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
<h3>从左侧的菜单选择你需要的教程！</h3>
</div>
<!--part2-->
<div class="main-left">
<h3>标题 标题 标题</h3>
<ul>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
</ul>
<h3>标题 标题 标题</h3>
<ul>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
</ul>
</div>
<div class="main-right">
<div>
<h3>标题 标题 标题</h3>
<ul>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
</ul>
</div>
<div>
<h3>标题 标题 标题</h3>
<ul>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
<li>test test test</li>
</ul>
</div>
</div>
</body>
</html>
2.CSS：样式层级表
学习CSS的目的：完成页面布局（还原设计稿）
三大组成部分：
1.选择器：由标签、类、id单独或组合出现
2.作用域：一组大括号包含的区域
3.样式块：满足css连接语法的众多样式
选择器
什么是选择器？
用来将css与html建立关联的桥梁，称之为css选择器。本质就是页面标签的某种名字。
为什么用选择器？
将原来出现在标签内部的样式分离开来，可以用一个个选择器加以管理，达到页面与样式的解耦合目的，从而提高代码的复用性与开发效率。
CSS三种引入方式
1.行间式
''' 1.写在标签的style属性 2.属性与属性值之间用：赋值 3.属性与属性之间用；隔开 '''
2.内联式
''' 1.写在style标签中（style标签一般出现在head标签中） 2.用选择器与html建立连接 3.样式块书写在作用域内 '''
3.外联式
''' 1.css样式完全与html文件脱离，形成单独的.css文件，样式书写在.css文件中 2.用选择器与html建立连接 3.样式块书写在作用域内 4.要将.css文件与.html文件建立关联 <link rel='stylesheet' href='css文件的相对路径'> '''
总结：
开发：最常用的是外联式，内联式与行间辅助样式布局
测试：内联式，可读性最强，且解耦有复用性
行间的应用场景：最简单粗暴，js操作的样式都是行间式