一.前端
1.什么是前端
前端即网站前台部分,运行在PC端等浏览器上展现给用户浏览的网页.随着互联网技术的发展,
HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,
给用户带来极高的用户体验.
前端技术一般分为前端设计与前端开发,前端设计一般可以立即为网站的视觉设计,前端开发则
是网站的前提代码实现,包括基本的HTML和CSS以及JavaScript
广义前端:所有用户可以直接看见并交互的界面
狭义前端:浏览器上运行的用户交互界面
二.前端开发技术栈
HTML
超文本标记语言 Hyper Text Markup Language
复杂完成页面的结构
文件后缀: .html .htm
hint:"超文本"就是指页面内可以包含图片 连接 甚至音乐 程序等非文字元素
CSS
级联样式表:Casading Style Sheet
负责页面的风格设计,样式 美观
JaveScript
浏览器脚本语言,可以编写在浏览器的程序
负责编写页面特效 调用浏览器的API(BOM) 操作改变页面的内容(DOM)
,从后端获取数据(Ajax|),渲染页面等
文件后缀:.js
2 第一个页面
一.基础模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>第一个页面</title> </head> <body> </body> </html>
二.模板解读
DOCTYPE:指定文本类型,规定html标签语法
html:文本根标签,标签着问道(页面)的开始于结束
head:文档头标签,可以应用脚步文件、指定样式表、书写代码逻辑快、提供元信息
body：文档主题标签，包含文档所有文本与超文本内容
title:文档tag标题标签，设置文档tag的标签内容
hint:html标签lang属性值 en| zh(zh_cn)
三、其他核心模板标签
1、meta(元标签）
字符编码
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/
html;charset=utf-8"/>
<meta name="keywords" content="8-12个以英文逗号隔开的单词或词语">
<meta name="description" content="80字以内的一段话，与网站内容相关">
移动适配
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2、link(链接标签）
外联样式表
<link rel="stylesheet" type="text/css" href="style.css" />
文档tag图标
<link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />
3、style(样式标签）
内联样式表
<style></style>
4.script（脚本标签）
<scrip type="text/javascript"></script>
四 常用标签
1.无意义标签
<div></div> 单独行
<span></span>
2.常用语义标签
<hn></hn>标题
<p></p>段落
<pre></pre>原文本
<br/>换行
<hr />分割线
3.文本标签
<i></i> 斜体字
<em></em> 斜体字，表示强调
<b></b>粗体字
<strong></strong>粗体字，强调（语气更强）
<del></del>删除的文本
<ins></ins>插入的文本
<sub></sub>上标签
<sup></sup>下标签
<ruby>
拼音<rt>pingyin</rt>
4.其他标签
<section></section>块
<small></small>小号字体
五、标签分类
1、单|双标签
* 单标签：单标签在自身标签标识结束，主要应用场景为功能性标签
* 双标签：双标签有成对的结束标识，主要应用场景为内容性标签
2、行|块标签
* 行标签：又名内联标签，内联标签自身不具备宽高，通常同行显示
* 块标签：又名块级标签，块标签拥有自身宽高，通常独自占据一行
3、单一|组合标签
* 单一标签：单独出现，表示具体的功能或展示具体的内容
* 组合标签：配合使用，才能产生相应的内容与效果