2018.12.4
一、什么是前端
前端即网站前台部分，运行在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
第一个页面
一、基础模板
# html三个组成部分
# 标签: <字母开头 + 合法字符(数字|-)> => (标签具有作用域,有头有尾)
# 指令: <!开头> => <!doctype> <!-- -->
# `: &; 包裹 => 特殊的字母 | #十六进制数
二、模板解读
-
DOCTYPE：指定文档类型，规定html标签语法
-
html：文档根标签，标注着文档(页面)的开始与结束
-
head：文档头标签，可以引用脚步文件、指定样式表、书写代码逻辑块、提供元信息
-
body：文档主体标签，包含文档所有文本与超文本内容
-
title：文档tag标题标签，设置文档tag的标题内容
v_hint：html标签的lang属性值 en | zh（zh-cn）
三、其他核心模板标签
1、meta（元标签）
字符编码
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
SEO
<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（脚本标签）
<script type="text/javascript"></script>
html常用标签
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>pinyin</rt>
</ruby> 中文注音，h5新增
4、其他标签
<section></section> 块
<small></small> 小号字体
四.基本标签
// 最基本
div => 搭页面架构
span => 搭文本架构
// 换行显示
h1~h6 => 标题, h1有且只有一个,作为页面总标题
p => 段落
// 同行显示
文本类标签
i,em => 斜体
b,strong => 加粗
del | ins | sup | sub
// 组合
table>tr>th+td
form>input
// 功能
img 图片 | a 超链接 | hr 分割线 | br 换行
标签分类
1、单|双标签
-
单标签：单标签在自身标签标识结束，主要应用场景为功能性标签
-
<hr/>,<br/>
-
双标签：双标签有成对的结束标识，主要应用场景为内容性标签
-
<div></div><span></span>
2、行|块标签
-
行标签：又名内联标签，内联标签自身不具备宽高，通常同行显示
-
<i></i> 斜体字<em></em> 斜体字，表示强调<b></b> 粗体字<strong></strong> 粗体字，表示强调(语气更强) <del></del> 删除的文本<ins></ins> 插入的文本<sub></sub> 下标字<sup></sup> 上标字
-
块标签：又名块级标签，块标签拥有自身宽高，通常独自占据一行
-
<p></p> 段落
3、单一|组合标签
-
单一标签：单独出现，表示具体的功能或展示具体的内容
-
组合标签：配合使用，才能产生相应的内容与效果
-
table>tr>th+tdform>input
v_test：熟悉标签的分类
今日基础标签汇总
  代表一个空格
< 代表<
> 代表>
<div ></div><!-- div: 最常用的标签,没有之一 (搭建页面架构) -->
<span></span> <!-- span: 文本最常用标签 (构建文本架构:可以直接包裹文本,
与可以包裹其他文本类(内联类型的)标签) -->
<!-- 标题标签: h1~h6 -->
<h1>一级标题</h1><!-- 一般一个页面会出现一次,作为该页面的总标题出现 -->
<h2>二级标题</h2>~<h6>六级标签</h6>
<p>xxxxx</p> 段落标签,段落和段落之间会自动有一行间隔
<pre></pre>里面写一些字符和空格会正常显示,有其他标签不会显示
<hr/>会产生分割线
<br />换行#可能会产生不可控的状况 一般会用样式来实现
<i>aa</i> 斜体字
<em>aa</em> 斜体字，表示强调
<b>aa</b> 粗体字
<strong>aa</strong> 粗体字，表示强调(语气更强)
<del>aa</del> 删除的文本
<ins>aa</ins> 插入的文本
<sub>aa</sub> 下标字
<sup>aa</sup> 上标字
<ruby>
拼音<rt>pinyin</rt>
</ruby> 中文注音，h5新增
<section></section> 块
<small></small> 小号字体
<!-- 链接标签 -->
<!-- href: 标签的全局属性, 超链接, 规定协议 -->
<!-- 不规定:做路径的拼接 -->
<!--target="_blank">_blank表示开一个新的连接开启网站,_self不开新连接直接开启网站
<a href="https://www.baidu.com" target="_blank">前往百度</a>
<!-- 图片标签 -->
<!-- src:数据源, 可以加载网络 | 本地 | 动态 图片 -->
<!-- alt:资源加载失败的文本提示 -->
<!-- title:鼠标悬浮产生的文本提示(任意标签都具有该全局属性) -->
<img src= "http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180712/5b9bdbe624bf412ba6e044f0caefb1cb.gif" alt="二哈" title="小二哈">
<!-- 表格 -->
<!-- table>(tr>th{标题}*2)+(tr>td{单元格}*2) -->
<table>
<tr>
<th>标题</th>
<th>标题</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
<!-- 表单 -->
input就是用户输入然后获取值
被form包裹的input内容可以提交给后台,单独使用的input内容只能在前台(js)使用 -->
<input type="text" value="abc" placeholder="请输入">
<form>
<input type="text">
<input type="password">
</form>
