今天学习了前端的三种前台代码实现,包括基本的HTML和CSS以及JavaScript。
一、什么是前端
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。
前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript。
广义前端：所有用户可以直接看到并交互的界面
狭义前端：浏览器上运行的用户交互界面
二、前端开发技术栈
HTML
超文本标记语言 Hyper Text Markup Language
负责完成页面的结构
文件后缀：.html .htm
v_hint：“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
CSS
级联样式表 Cascading Style Sheet
负责页面的风格设计，样式、表现
文件后缀：.CSS
JavaScript
浏览器脚本语言，可以编写运行在浏览器上的程序
负责编写页面特效、调用浏览器的API(BOM)、操作改变页面内容(DOM)，从后段获取数据(Ajax)，渲染页面等
文件后缀：.js
三、第一个页面
1.基础模板
<!doctype html>
<html long = "zh">
<head>
<meta charset = "utf-8">
<title>第一个页面</title>
</head>
<body>
. </body>
</html>
2.模板解读
doctype: 指定文档类型，规定html标签语法
html：文档根标签，标注着文档(页面)的开始与结束
head：文档头标签，可以引用脚本文件、指定样式表、书写代码逻辑快、提供元信息
body：文档主体标签，包含文档所有文本与超文本内容
title：文档tag标题标签，设置文档tag的标题内容
四、html常用标签
1、无语义标签
<div></div>
<span></span>
2.常用语义标签
<hn></hn>标题
<p></p>段落
<pre></pre>原文本
<br /> 换行
<hr />分割线
五、标签分类
1.单|双标签
单标签：单标签在自身标签标志结束，主要应用场景为功能性标签
双标签：双标签有成对的结束标识，主要应用场景为内容性标签
2.行|块标签
行标签：又名内联标签，内联标签自身不具备宽高，通常同行显示
块标签：又名块级标签，块标签拥有自身宽高，通常独自占据一行
3.单一|组合标签
单一标签：单独出现，表示具体的功能或展示具体的内容
组合标签：配合使用，才能产生相应的内容与效果
3.文本标签
<i></i> 斜体字
<em></em>斜体字，表示强调
<b></b>粗体字
<strong></strong>粗体字，表示强调（语气更强）
<del></del>删除的文本
<ins></ins>插入的文本
<sub></sub>下标字
<sup></sup>上标字
<ruby>
拼音<rt>pinyin</rt>
</ruby> 中文注音，h5新增
4.其他标签
<section></section>块
<small></small>小号字体