前端概述

前端

⼀、什么是前端

前端即⽹站前台部分，运⾏在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 html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" >
    <title>Document</title>
</head>
<body>
    
</body>
</html>

二.模板解读

DOCTYPE：指定⽂档类型，规定html标签语法 html：⽂档根标签，标注着⽂档(⻚⾯)的开始与结束 head：⽂档头标签，可以引⽤脚步⽂件、指定样式表、书写代码逻辑块、提供元信息 body：⽂档主体标签，包含⽂档所有⽂本与超⽂本内容 title：⽂档tag标题标签，设置⽂档tag的标题内容

三、其他核心模板标签

1、meta（元标签）

字符编码
<meta 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,minimumscale=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、常用的语义标签

<h1>标题</h1> 
...........
<h6>标题</h6> 
标题标签一共有6个分别是<h1/>~<h6/>
<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> ⼩号字体

标签分类

1、单|双标签

单标签：单标签在⾃身标签标识结束（自身的结束标志可以省略如<hr><br>），主要应⽤场景为功能性标签双标签：双标签有成对的结束标识，主要应⽤场景为内容性标签

2、⾏|块标签

⾏标签：⼜名内联标签，内联标签⾃身不具备宽⾼，通常同⾏显示块标签：⼜名块级标签，块标签拥有⾃身宽⾼，通常独⾃占据⼀⾏

3、单⼀|组合标签

单⼀标签：单独出现，表示具体的功能或展示具体的内容组合标签：配合使⽤，才能产⽣相应的内容与效果