前端学习

　　今天学习了前端的三种前台代码实现,包括基本的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>

　　　　　　<head>

　　　　　　　　<title>第一个页面</title>　　　　　　

　　　　　　</head>

　　　　　　<body>

.　　　　　　</body>

　　　　</html>

　　　　2.模板解读

　　　　doctype: 指定文档类型，规定html标签语法

　　　　html：文档根标签，标注着文档(页面)的开始与结束

　　　　head：文档头标签，可以引用脚本文件、指定样式表、书写代码逻辑快、提供元信息

　　　　body：文档主体标签，包含文档所有文本与超文本内容

　　　　title：文档tag标题标签，设置文档tag的标题内容

　　四、html常用标签

　　　　1、无语义标签

　　　　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>小号字体