前端开发介绍

为什么选择前端开发

为什么选择前端开发其实可以去了解一下这门技术就可以了

了解前端开发

• 是什么？
• 做什么？
• 带来什么？

前端开发是什么

• 前端开发是创建Web页面或者app等前端界面呈现给用户的过程
• 核心技术：HTML、CSS、JavaScript以及衍生出的各种技术、框架等

前端开发可以做什么

• 在此之前，我们要先进行一个对比
  • 在早期互联网产品中，我们最多接触的就是网页
    • 功能少
    • 速度慢
    • 不美观
  • 针对这些缺点，前端开发对其进行了很大程度的改变
    • 内容丰富
    • 功能强大
    • 用户体验更强
• 除了在网页方面带来的改变之后，前端开发在更多的领域，也可以去实现他的价值

前端开发应用场景

• PC
• 移动APP
• 小程序
• 游戏
• 服务端
• 随着前端技术的不断更新，不断增加，我们能够使用到的应用场景会越来越多，功能越来越强大

前端开发带来什么

• 增加了我们的就业机会
  • 早期我们只能从事一些网页制作的工作，但是随着前端开发的不断发展，我们能从事的工作变得更加多种多样，比如说：
    • web前端开发工程师
    • 小程序开发工程师
    • 移动web开发工程师
    • 前端架构师 / 前端专家
• 随着工作年限与技术的增加，可以提高我们的薪酬

前端学习路线

前端涵盖的技术有很多，需要合理的安排学习路线

• 前置知识
  • 计算机基本认识
  • 应用的概念
  • 前端和后端
• 入门阶段 — 正式学习前端相关技能
  • HTML
    • HTML语法
    • HTML语义化
    • SEO基础
  • CSS
    • CSS语法
    • 页面布局
    • 媒体查询
    • CSS 3
• JavaScript进阶 — 重点！学完之后才算真正的前端入门
  • JavaScript语法
  • 基础的数据结构
  • Web APIs
  • ES6+
  • 模块化
  • TypeScript
• 包管理阶段 — 入门之后要有一个很困难的转变期，在此之前要现在此阶段过渡，对后期学习做铺垫
  • npm
  • yarn
• CSS进阶 — 进阶阶段，CSS的编写也会越来越不一样
  • CSS预处理器
    • SASS
    • LESS
    • PostCSS
    • …
  • CSS框架
    • Bootstrap
    • table
    • Semantic UI
    • Materialize CSS
    • …
  • CSS架构规范
    • OOCSS
    • BEM
    • SMACSS
• 构建工具 — 让我们的代码变得更加高效规范，更符合项目编写
  • 代码校验工具
    • ESLint
    • StyleLint
    • MarkdownLint
  • 模块打包工具
    • Webpack
    • Parcel
    • Rollup
  • 任务运行器
    • npm script
    • Makefile
    • Gulp
    • Grunt
    • Broccoli
• 流行的框架 — 真正工作中会去使用的框架，此阶段之后前端能力会有一个质的提升，也能够得到一个很好的工作机会
  • VUE.js
    • VueX
    • Element UI
  • React.js
    • Redux
    • AntDesign
    • Mobx
    • CSS in JS
  • Angular
    • RxJS
    • ngrx
• 持续学习 — 学完框架并不算结束，我们可以继续学习，增加我们的技术水平，这个部分我们可以掌握更多的技能，不要把自己局限在我们当前的这个水平之上，这会对我们之后的职业发展和技术提升都有很大的帮助
  • Node.js
  • 渐进式Web应用
  • 服务端渲染
  • 静态站点生成器
  • 桌面应用
  • 移动应用
  • 桌面应用
  • …

HTML概述

• 认识网页 — 网页与我们的HTML是息息相关的
• 网页的本质
  • 在此我们需要做一个对比
    • 用户眼中的网页
      • 很多的文字与图片，并且按照一定的格式去排版
    • 程序员中的网页
      • 代码
• 程序员如何制作网页
  • HTML就是用来制作网页文件的
  • 浏览器查看的网页都是.html或者.htm文件
  • HTML叫做超文本标记语言（Hypertext Markup Language）用于搭建网页的结构
• 网页的组成（一）
  • 前端三层：
    • HTML（结构层 — 用来搭建网页的整个结构骨架）
    • CSS（样式层 — 美化网页结构）
    • JavaScript（行为层 — 只做网页中的交互效果：点击、切换等）
• 举例说明：HTML就像我们的人体一样，有了整体架构，但是只有架构是不够美观的，需要一些衣服和其他配饰来美化，这就是CSS的作用，然后我们需要有一些行为能力，比如：走路、吃饭、唱歌、跳舞，这就是JavaScrip来完成的
• 网页的组成（二）
  • 其他多媒体内容：图片、视频、音频、超级链接等
  • 这些东西包括我们之前的前端三层，都是我们要去制作的具体存在的文件，这些文件在我们的网络中都是真是的物理存在的文件，类似于我们在本地的计算机里边，存储一张图片是真实的存储在我们的计算机中，而互联网中的网页是真实存在于互联网上的，至于存在在哪里，也就是我们现在要思考的一个问题
• 这些网页文件是如何通过互联网提供用户观看使用的？（这其实是一个很复杂的过程，但是只是为了大家理解所以只是简单说明）
  • 互联网运行过程：
    程序员将网页源文件上传到服务器进行存储，用户后期通过客户端（如浏览器软件）发送HTTP请求到服务器，服务器接收请求后进行相应，将存储的相关文件通过HTTP响应回传到用户本地客户端，最终通过客户端将网页文件进行渲染，显示出最终用户看到的网页效果
    • 通过一系列浏览器软件查看网页，查看的过程中要去请求服务器上的网页文件，请求过程中会用到一个HTTP协议，客户端通过输入网址等方式去发送一个HTTP请求到服务器，服务器已经存储了程序员上传上来的文件，一旦接受到这个请求，他回去将我们所有的相关的网页文件回传给客户端，回传的过程中是通过一个HTTP响应进行回传，那么我们客户端接受到这个HTML文件之后，他回去根据相关的语法对HTML语言进行一个解读，并且把配套的所有文件再去请求响应过来，最终加载为我们用户看到的效果
    • 所以这个过程实际上就是一个我们在客户端和服务器之间进行一个传输的过程，传输过程中需要用到的就是一个HTTP协议的工具

互联网原理

• 解析互联网运行过程
  • 程序员将网页源文件上传到服务器进行存储，用户后期通过客户端（如浏览器软件）发送HTTP请求到服务器，服务器接收请求后进行相应，将存储的相关文件通过HTTP响应回传到用户本地客户端，最终通过客户端将网页文件进行渲染，显示出最终用户看到的网页效果

服务器

• 服务器（server）就是一种特殊的计算机，也包括处理器、硬盘、内存、系统总线等，但是由于需要提供更可靠的服务，因此在处理能力、稳定性、可靠性、安全性等方面要求较高。
• 作用：
  • 对于WEB来说，用于存储开发人员上传的网页数据，且需要响应服务请求，并进行处理。
• 要求：
  • 对于网站服务器来说，为了让用户随时进行访问，必须24小时不间断工作

云服务器

• 目前绝大多数网站都采用的是云服务器（Elastic Compute Service, ECS）云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件，即可迅速创建或释放任意多台云服务器

客户端

• 客户端（Client）也叫用户端，指的是普通用户使用的终端，客户端有多种形式，比如最常用的就是浏览器、app等，而web开发最主要的客户端形式还是浏览器。

• 浏览器（Browser）

  • 是一种用户上网搜索、查看信息资源的应用程序。

• 功能：

  • 用于发送HTTP请求到服务器
  • 接收服务器发挥的HTTP响应
  • 渲染HTML网页

• 主流浏览器

  • 微软的IE和Micrisift Edge
  • Mozilla的Firefox
  • 苹果公司的safari
  • Google的Chrome
  • Opera软件公司的Opera

• 区别：主流浏览器内核不容

  • 因为不同浏览器使用的内核及所支持的HTML等网页语言标准不同，对网页的渲染效果会有差异

  浏览器	渲染引擎（内核）	说明
  IE/Edge	Trident	IE内核
  FireFox	Gecko	FireFox内核
  Safari	Webkit
  Chrome	Webkit > Blink	统称为Chromium内核或Chrome内核
  Opera	Presto > Webkit > Blink

• 推荐：使用Chrome浏览器（渲染效果好，市场占有率高，自带开发者调试工具）

浏览器功能

• 作用1：发送HTTP请求，发送的方式是在浏览器地址栏输入对应的网址，或者点击超级链接
• 作用2：接收服务器发回的HTTP响应，服务器会发回一个HTML给浏览器
• 作用3：将接收到的HTML进行解析并显示

HTTP协议

Hypertext Transfer Protocol：超文本传输协议。是客户端浏览器或其他程序与WEB服务器之间的应用层通信协议

HTTP请求

• request，浏览器根据网址向对应的服务器发送请求
• 发送请求的方法：在浏览器地址中输入网址，或者点击网址链接
• HTML页面解析过程中，会发出多个http请求，包含网页的图片、视频、音频等文件请求

HTTP响应

• response，服务器根据请求响应一个HTML文件，将HTML传输给客户端，在浏览器中进行HTML网页的渲染

HTML概念

认识纯文本格式

• 纯文本格式，就是没有任何文本修饰的，没有任何粗体，下划线，斜体，图形，符号或特殊字符及特殊打印格式的文本，只保存文本，不保存其格式设置

格式对比

• 纯文本格式
  • 最常见的是.txt文件，在存储和传输过程中，只能保存文字，不能保存格式。
• 富文本格式
  • 与纯文本对应，最常见的是.rtf文件，类似.doc文件，内部可以保存文本的样式、图片等

纯文本文件特点

1. 文件只能保存文本，不保存其他的格式或非文本内容，有利于网络传输
2. 所有的纯文本格式文件，可以通过直接更改扩展名的方式更改保存格式
3. 纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑

了解纯文本文件只是为了引出后边的知识点，因为html、css、js文件都是纯文本格式文件，内部都是只能去使用文字进行编辑，不能直接在编辑过程中插入图片等内容

HTML概念

• Hypertext Transfer Protocol：超文本标记语言。是用来制作网页的一种标记语言。
• HTML是一种纯文本格式的文件，内部只能书写文字内容，不能添加图片、音频、视频等，但是在网页中给用户呈现的效果却包含了文字以外的内容，这种效果就是HTML语言区别于其他文件的不同之处。

HTML的重要概念

• 超文本
  • 是超级文本的缩写，简单来说超文本就是用于链接另一个文本或多媒体内容的文本，比如链接到图片、链接、音频、视频、程序等
• 标记
  • 又叫做标签（HTML tag）有特殊的书写规范，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容。在编辑器中可以编辑和查看，在浏览器中不显示

HTML功能

利用标记给普通的文本添加语义、描述超文本内容，搭建网页的基本结构

HTML语义化

HTML文件中，如果没有使用特殊语义的标记，也可以实现网页显示效果，但是利用标记给普通的文字添加了不同的语义，能够让网站的结构划分更加清晰

语义化网页的优势

1. 方便代码的阅读和后期的维护
2. 便于浏览器或是网络爬虫更好的解析网站内容
3. 使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名

HTML基本语法

HTML规范版本

• W3C：world wide web consortium,万维网联盟。专门发布和维护互联网的规范和标准

版本	发布时间	备注
HTML1.0	1993.06	互联网工程小组（IETF）发布的工作草案
HTML2.0	1995.01	2000年6月发布之后被宣布已经过时
HTML3.2	1997.01.14	W3C推荐标准
HTML4.0	1999.12.18	W3C推荐标准，引入了样式表CSS，是吸纳了结构和样式分离
HTML4.01	1999.12.24	W3C推荐标准，修复了HTML4.0中的漏洞
XHTML1.0	2000.01.20	在HTML4.01基础上进行的升级扩展和严格化
HTML5	2008.1.22	HTML5在2012年已经形成了稳定的版本

HTML标签

HTML标记通常被称为HTML标签（HTML tag）标签在书写和使用过程中，必须遵循特定的语法

HTML标签语法

1. 标签名必须书写在一堆尖括号内部

<html></html>

2. 标签分为单标签和双标签，双标签必须成对出现

<p></p> 双标签
<br/>   单标签

3. 双标签包含开始标签和结束标签，结束标签必须书写关闭符号/，单标签也需要进行自封闭书写。在HTML5中，单标签可以不写关闭符号。

HTML元素

• HTML元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签。
• 例如：双标签内部包含的纯文本内容，就是元素内容

元素内容

1. 元素内容可以使纯文本，也可以是其他的HTML元素。这种元素内容包含其他HTML元素的情况，我们可以称为嵌套，也就是div标签元素内部嵌套了p标签元素。

<div><p>div元素内部嵌套p元素</p>
</div>

2. 一个HTML元素div的内容可能是多个其他元素组成，例如p和h1，此时我们习惯称div是p和h1的父级元素，p和h1是div的自己元素，而p和h1属于统计元素，这种嵌套关系可以有多层

<div><p>div元素内部嵌套p元素</p><h1>div元素内部嵌套h1元素</h1>
</div>

3. 但标签是不能添加元素内容的，可以称为空元素

标签级别

• 根据标签内部可以存放的元素内容不同，可以将双标签划分为两个级别
  • 容器级：标签内部可以存放任意内容，包含容器级标签。比如：h1,div等
  • 文本级：标签内部只能存放文字或类似文字的内容，比如存放图片、标签元素等。比如p等。

HTML元素的特性

1. 元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系。

<p>段落内容</><p>段落内容</><p>段落内容</><p>段落内容</><p>段落内容</>等价于<p>段落内容</>
<p>段落内容</>
<p>段落内容</>
<p>段落内容</>
<p>段落内容</>

2. 空白折叠现象：元素内容如果是文本，所有文字（类似文字内容）之间如果有空格、换号、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象。

<p>段落               内容</>等价于<p>段落 内容</>

HTML属性

HTML标签可以添加属性，属性可以提供关于HTML元素的更多信息

HTML属性规范

1. 书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔
2. 属性包含：属性名（key）属性值（value）属性名与属性值之间的写法通常称做键值对写法，HTML标签属性的键值对写法是k=“v”。XHTML要求属性值必须在双引号内部
3. 一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分隔，每个属性的键值对写法都是k=“v”
4. 部分标签属性k可以设置多个属性值v，所有属性值v都必须卸载同一对双引号内，值与值之间需要使用空格分隔

<div class="d1 d2 d3" id="ip1">我是一个div</div>
<div class="d2">我是一个div</div>
<div class="d3">我是一个div</div>

编辑器

• 为什么要用？
  • 如果用普通的记事本打开一个HTML文件进行编程时，我们在编写HTML标签时需要写开始与结束这个过程需要耗费一些时间，假如我要完成一个比较大的项目时，会耽误我的工作进程
• 纯文本编辑器
  • 所有纯文本编辑器都能编辑HTML文件。例如记事本、Editplus、notepad等。
  • 专门制作网页的软件有
    • sublime
    • webStorm
    • HBuilder
    • Visual Studio Code
• VS code
  • 学习期间使用 VS Code软件，他是微软公司研发的一款非常方便使用的编辑器。
  • VS Code 拥有超级丰富的插件扩展，你可以根据自己的需求使用不同的插件，对于开发者来说更加友好。
• 插件扩展

插件名	作用
Chinese (Simplified) Language Pack for Visual Studio Code	使用中文界面
Auto Rename Tag	修改html标签，自动完成尾部闭合标签的同步修改
open in browser	右键设置在默认浏览器打开网页
open in browser	快速编写工具，已经集成在VS code中，可以不必安装

VS code使用步骤

1. 新建文件，ctrl + N
2. 保存对应的文件格式 ctrl + S，例如.html、.css、.js等文件
3. 使用对应的快捷键快速编写程序

常用快捷键

!或html:5 -> tab / ctrl + E	自动生成基本骨架
标签名 -> tab	自动生成标签
标签名*n -> tab	自动生成n个相同的标签
h$6 -> tab	自动生成h1到h6的标签
ctrl + shift + D	复制光标所在行、复制所选内容
ctrl + shift + K / ctrl + X	删除光标所在行、所选内容
ctrl + shift + ↑	将光标所在行上移一行
ctrl + shift + ↓	将光标所在行下移一行
按住鼠标滚轮拖动	同时选中多个光标，同时操作
ctrl + 滚轮	调整显示字号大小
ctrl + Z	无限后退一步
ctrl + shift + D	无限还原一步

HTML基本结构

基本骨架

• HTML文件最基本的四个标签组成了网页的基本骨架

<html><head><title>网页的标题</title></head><body>网页的主体</body>
</html>

• <html> 标签 — 定义html文件的根元素，表示整个html文档，所有的标签要书写在<html>标签内部
• <head> 标签 — 用于存放<title>,<meta>,<base>,<style>,<script>,<link>。内部用于对网页的设置，除了<title>内部的文字，其他标签都不显示在浏览器上
  • 注意在<head>标签中我们必须要设置的标签时title
• <title> 标签
  • 让页面拥有一个属于自己的标题
  • title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化
  • 内部的内容会显示在搜索结果的标题部分
  • 作为浏览器收藏夹磨人的网页标题
  • 建议网页必须添加title标签内部内容，内容尽量精简，提取网页的关键字
• <body> 标签
  • 定义网页的主体部分，用于存放所有的HTML显示内容的标签<p>,<h1>,<a>,<div>
  • <body>内部的元素内容会显示在浏览器的窗口中

DTD

• 完整的HTML文件的第一行内容叫做文档定义类型，英文DocType Definition，简称DTD。也称为文档声明类型，DocType Declaration
• 作用：
  • 告知浏览器该网页使用的时那个版本的HTML规范，让浏览器按照对应版本的HTML语法进行解析页面
• 不同版本的DTD

<!-- XHTML1.0版本 -->
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd"><!-- HTML5版本 -->
<!DOCTYPE html>

命名空间

• <html>元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性

<!-- XHTML1.0版本 -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></html><!-- HTML5版本 -->
<html lang="en"></html>

• xml：可扩展标记语言，使用在传输过程中的规范。被设计用来传输和存储数据，时html的补充
• xmlns：全称叫做XML NameSpace, NameSpace叫做命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容
  • <html>元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准，避免出现标签名冲突，这个标准使用的就是一个固定的网址http://www.w3.org/1999/xhtml中的规范
• xml:lang="en"和lang=“en” 表示所有的标签元素内容的语言都是英语，对搜索引擎和浏览器是有帮助的
  • lang="zh-cn"表示中文

字符集

• <head>标签内部的<meta>标签通过http-equiv属性定义了当前的网页所使用的字符编码
  • char：character，字符。set：集合
• XHTML1.0版本
  • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
• HTML5版本
  • <meta charset="UTF-8">

常用字符集编码

• 国际通用字库
  • UTF-8：以字节为单位对Unicode万国码进行编码，涵盖了所有人类的语言文字，一个汉字为三个字节大小。
• 中文国标字库
  • gb2312：共收入汉字6763个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的682个。
  • gbl：是gb2312的扩展，增加了繁体字，共收入21886个汉字和图形符号，其中汉字（包括部首和构件）21003个，图形符号883个，一个汉字为2个字节大小。

字符集常见问题

使用情况建议：

1. 如果没有网页加载速度要求，或者制作的是外文网站，使用UTF-8
2. 如果含有大量中文汉字的网站，而且要求网页加载速度很快，使用gbk

注意：如果meta标签声明的字库，必须和编译器软件默认编译字库相同，否则会出现两个字库不匹配，浏览器加载时出现乱码

HTML常用标签

• 在很多代码技术中都可以添加注释内容，我们也可以向HTML源码添加注释
• HTML注释语法
  • <!-- 书写注释内容 -->
• 快捷键
  • ctrl + /
• 特点
  • 注释只在源代码中可见，在浏览器窗口是不显示的
• 用途
  • 在源代码中添加一些描述性的提示信息，便于我们阅读代码
  • 对于HTML纠错也有很大的帮助，可以通过注视某一行HTML代码，以便检索错误的位置
  • 暂时注释掉一部分不用的代码，以便于后期恢复代码

HTML常用便签 — 标题

• 标题（Heading）是通过<h1>-<h6>六个标签分别来对六个级别的标题进行定义的
• <h1>定义最大的标题，<h6>定义最小的标题
• <h1>-<h6>都是双标签，且都是容器级标签

标签级别

标题标签之间是不能互相嵌套的，下一级标题与上一级标题之间通过同级关系书写，下一级标题解释说明的是前面距离最近的上一标题

<!-- 正确写法 -->
<h1> 一级标题 </h1>
<h2> 二级标题 </h2><!-- 错误写法 -->
<h1><h2> 二级标题 </h2>
</h1>

权重

• 标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中<h1>标签最重要，<h2>标签次重要，以此类推
• <h1>在整个HTML中权重非常高，内部应该放置HTML中最重要的内容，比如logo
• <h1>由于非常重要，内部的汉字对于提高搜索引擎排名也非常重要，为了防止作弊，如果一个页面出现多个<h1>，反而降低权重。约定俗成的，一个页面中只会出现一个<h1>

HTML常用标签 — 段落和换行

段落

• 段落（paragraph）是通过<p>标签进行定义的
• <p>标签时双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的<font>标签等

段落标签的作用

<p>标签的作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式。
换行的效果是由CSS决定的

换行标签

• <br/>（breaking）标签时HTML中一个简单的换行符
• <br/>标签是一个单标签
• 在需要换行的位置可以使用<br/>标签书写，但是<br/>与

  不同，<br/>没有建立新的段落的语义，只是简单的进行强制换行

常规用法

每一对

标签内部的元素内容为一个完整的段落，如果有多个段落，需要分别适用不同的

标签进行定义

<!-- 正确写法 -->
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<p>这是第三个段落</p><!-- 错误写法 -->
<p>这是第一个段落<br/>这是第二个段落<br/>这是第三个段落
</p>

文本格式化

• HTML中有部分标签是用来对文字进行格式化显示设置的，比如粗体和斜体等。
  • 但是在HTML4.0版本规范后，结构和样式进行了分离，HTML只负责搭建结构，CSS负责格式化样式，所以大部分文本格式化标签被弃用，但是在HTML4.01和XHTML1.0transitional版本中依旧可以使用

标签

文本格式化的标签均为双标签，且为文本及标签，内部只能书写文字

标签	描述
b	定义粗体文本，bold
i	定义斜体字，italic
u	定义下划线，不赞成使用，使用css中样式代替，underline

HTML常用标签 — 图像

• 图像（image）由<img>标签进行定义
• <img>标签是单标签，本身相当于一个特殊的文本
• <img>标签的作用是在指定的位置插入一张图片
• 在HTML文件中，常用的插入图片类型有：jpg、png、gif

标签属性

由于<img>标签为单标签，所以他只能通过属性进行相关的图像设置
<img>常用属性展示：

属性名	描述
src	图片的路径
width	图片的宽度
height	图片的高度
border	边框属性；他的值可以设置边框的厚度
title	设置提示文本
alt	设置图像没找时的替换文本

• src属性和路径
  • 如果需要插入一张图片到HTML中，<img>标签必须设置src属性
    • src：全称source资源，属性值时图片查找的路径
    • 路径：指的是寻找文件时所经历的线路，在HTML中有特殊的书写语法
      • 路径分为相对路径和绝对路径，不同的查找方式出发点和参考位置不同

<img src="xl.jpg" />

HTML常用标签 — 相对路径

相对路径查找文件时，需要从HTML文件本身触发，根据相对的位置进行查找，包含三种方向

• 同级查找：指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式；

  <img src="xl.jpg" />
  

• 子级查找：指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭符号 / 进入文件夹查找里面的文件；如果有多层文件夹，需要 / 进入多层

  <img src="images/xl.jpg" />
  <img src="images/tupian/xl.jpg" />
  

• 上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法利用 …/ 表示跳出一级，如果跳出多级书写多次 …/ 直到找到文件

  <img src="../../xl.jpg" />
  <img src="../images/xl.jpg" />
  

HTML常用标签 — 绝对路径

绝对路径查找文件时，不需要从HTML文件触发，而是直接从电脑的盘符触发进行查找，或者实用网址形式查找

• 盘符查找：例如从c盘或者d盘出发查找图片，书写时以 c:/开头，后续类似子级查找写法直至找到目标文件

  <img src="C:/Users/images/xl.jpg" />
  

• 网址查找：要查找的文件是来自网络资源，路径写法以http://开头

  <img src="http://img3.com/it/u=1231245132543.jpg" />
  

绝对路径的问题

• 从盘符出发的绝对路径的缺点：
  • 盘符出发的路径不可移植，不可移动
  • 盘符出发的路径容易出现中文字符，中文的路径容易出现错误

路径实际应用

• 建议多使用相对路径，可以适当使用网址形式的绝对路径
• 使用相对路径必须将图片或者文件与HTML文件同时上传，而且需要保持相对位置不变

HTML常用标签 — 图像其他属性

宽度和高度

• width：图片的宽度
• height：图片的高度
• 属性值：以px为单位的数值，或者省略px不写
• 如果不设置两个属性，会以图片的原始尺寸加载
• 如果设置属性，只设置了其中一个，另一个会等比例变换，如果两个都设置，按照设置值加载

<img src="xl.jpg" width="200px" />
<img src="xl.jpg" height="300px" />
<img src="xl.jpg" width="200" height="300"/>

边框border

• border：设置图片的边框
• 属性值：数值，数值是几表示边框宽度为几像素

<img src="xl.jpg" width="200px" border="20" />

• 注意：border属性可以使用css进行设置，css中的边框有更多的设置效果

提示文本title

• title：设置的是鼠标悬停时的提示文本
• 属性值：自定义的提示文字内容

<img src="xl.jpg" title="点击查看原图" />

替换文本alt

• alt：设置的是图片查找错误时，出现的替换文本
  • 如果能正常找到图片，替换文本是不显示的
• 属性值：自定义的替换内容

<img src="xl.jpg" alt="图片404" />

总结

<img>标签最为重要的属性为src，尽量使用alt属性对图片进行说明，添加相对关键词可以有利于SEO搜索引擎优化。其他属性可以根据需求进行设置

HTML标签 — 音频和视频

• 网页中的多媒体内容除了图片，还有音频、视频等，HTML也提供的特定的标签用于添加音频和视频

音频标签

• 音频标签使用<audio>标签进行定义
• <audio>是双标签
• 同图片一样，需要使用src属性设置音频查找的路径
• 音频文件支持的格式：.mp3、.ogg、.wav

<audio src="沧海一声笑.mp3"></audio>    // 仅仅找到资源，还未显示到页面

音频控制条属性

音频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是controls

<audio src="xl.mp3" controls="controls"></audio>    

视频标签

• 视频标签的设置方法与音频非常类似
• 使用<video>标签进行定义
• <video>是双标签
• 使用src属性设置视频查找的路径
• 视频文件支持的格式包括：.mp4、.ogg、.webm

<video src="xl.mp4"></video>    // 仅仅找到资源，还不能播放

视频控制条属性

视频也需要使用controls属性设置控制条，属性值也是controls

<video src="xl.mp4" controls="controls"></video>    

HTML常用标签 — 超级链接

• HTML使用超级链接与网络上的另一个文档相连。
  • 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某一个部分

超级链接标签

• HTML中使用<a>标签可以创建链接
  • a全称anchor，锚的意思
• <a>为双标签
• 作用：
  • 在指定的位置上添加超级链接，提供用户进行点击和跳转
• <a>标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性。

href属性

• href全称hypertext reference，超文本引用，用于规定链接的目标地址
• 属性值：链接目标的路径地址。可以使用相对路径或者网址形式的绝对路径
• href属性非常重要，<a>标签想要实现点击跳转，必须设置该属性，拥有这个属性<a>标签在鼠标移上时才会显示一个小手指针状态

target属性

• 使用target属性，可以定义被链接的文档在何处跳转显示
• 属性值有两种：
  • _self：默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口
  • _blank：空白的，表示跳转的页面在新窗口打开

<a href="xl.html">去小鹿</a>
<a href="xl.html" target="_blank">继续去小鹿</a>

title属性

title设置的是鼠标悬停时的提示文本，与标签类似
属性值：自定义的文字内容
该属性用于给用户进行提示，该链接可以提高用户的体验

<a href="xl.html">去小鹿</a>
<a href="xl.html" target="_blank" title="点击在新窗口跳转">继续去小鹿</a>

HTML常用标签 — 锚点跳转

超链接的跳转效果不止包含跨页面的跳转，还包含锚点跳转的方式

页面内锚点跳转

• 这种跳转方式实现的是从某个位置跳转到同页面的另一个位置
• 制作方法为两个步骤：
  • 设置锚点
  • 添加链接

设置锚点

设置锚点，也就是设置跳转目标位置，有两种设置方式

1. 在目标位置找到任意标签，给他添加id属性，id的属性值必须是唯一的。
   • id属性值自定义规则：必须以字母开头，后面可以有字母、数字、下划线和横线，区分大小写

<h2 id="idxl">你好xl</h2>

2. 在目标位置添加一个空的<a>标签，只设置一个name属性，name属性值设置方式与id相同，也必须是唯一的

<a name="namexl"></a>

添加链接

• 链接到锚点，在需要点击的位置设置<a>标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值

  <a href="#idxl"></a>
  <a href="#namexl"></a>
  

跨页面锚点跳转

这种跳转方式综合了跨页面跳转和锚点跳转

• 制作方式也分为了两步，分别是设置锚点、添加链接
  • 第一步：设置锚点，方式和页面内锚点跳转一直，在目标网页的指定位置设置使用id或name属性
  • 第二步：链接到锚点，添加超级链接是href属性需要更改，属性值写为页面的路径#id

  <a href="xl.html#idxl"></a>
  

HTML常用标签 — 无序列表

列表

• 列表用于制作HTML中的一系列项目
• 通常会江内容相关、结构相似、样式相近的内容使用列表结构进行搭建
• 根据项目的内容不同，可以有三种语义的列表结构：无序列表、有序列表、定义列表

无序列表标签

• 无序列表需要两个标签参与，分别是<ul>和<li>
  • ul：unordered list，表示定义一个无序列表的大结构
  • li：list item，列表项，定义的是无序列表内的某一项
  • <ul>和<li>是嵌套关系，快捷键：ul>li
  • 一个列表中可以有任意多个列表项

  <ul><li>1</li><li>2</li><li>3</li>
  </ul>
  

• 注意事项
  • <ul>内部只能嵌套<li>，<li>标签不能脱离<ul>单独书写
  • <li>标签是一个经典的容器及标签，内部可以放置任意内容，甚至可以放一组ul>li无序列表结构
  • 无序列表之间的列表项<li>之间，没有顺序的先后之分，它们的重要程度是相同的
  • 无序列表的作用只是负责搭建列表结构，没有添加样式前缀的功能，样式是由css负责

HTML常用标签 — 有序列表

• 有序列表的语法与无序列表非常类似，只是在语义上有差异

• 有序列表由两个标签组成，分别是<ol>和<li>

  • ol：ordered list，表示定义一个有序的列表的大结构
  • li：list item，定义的是有序列表的每一项。<ol>和<li>是嵌套关系，快捷键：ol>li
  • 一个列表中可以有任意多个列表项

• 注意事项

  • <ol>内部只能嵌套<li>，<li>标签不能脱离<ol>单独书写
  • <li>标签是一个经典的容器及标签，内部可以放置任意内容，甚至可以放一组ol>li
  • 有序列表之间的列表项<li>之间，存在顺序的先后之分，根据内容的顺序需要合理调整书写位置
  • 有序列表的作用只是搭建有顺序的列表结构，前面的数字排序样式不是<ol>标签的作用，而是由css负责

定义列表标签

自定义列表不仅仅是一列项目，而是项目及其主食的组合

• 由三个标签组成完整的结构，包含<dl>、<dt>、<dd>
  • dl：definition list，表示定义一个自定义列表的大结构
  • dt：definition term，表示定义自定义列表中的一个主题或者术语
  • dd：definition description，定义解释项，表示描述或解释前面的定义主题
• <dl>内部只能嵌套<dt>和<dd>，<dt>和<dd>是同级关系

<dl><dt>主题</dt><dd>解释项</dd>
</dl>

• 注意事项
  • <dl>内部只能嵌套<dt>和<dd>，<dt>和<dd>标签不能脱离<dl>单独书写
  • dl内部可以放多组dt和dd，每个dd解释说明的是前面的距离最近的一个dt
  • 每个dt后边可以有0到多个解释项的dd，每个dd解释的都是前面距离最近的一个dt
  • dt和dd标签也是容器级标签，内部可以放置任意内容
  • 定义列表中的首行缩进样式由CSS负责，标签只负责搭建语义结构
  • 配合css布局效果，最好每隔dl中只添加一组dt和dd，便于后期管理

列表总结

• 根据项目的内容不同，分别选择对应寓意的列表结构：无序、有序、定义列表

HTML标签 — 布局标签

常用布局标签 div 和 span

• div 和 span 标签常用作布局工具，我们俗称盒子，后期h5也增加了更多的布局标签
• div 和 span 都没有具体的语义

div标签

• div：全称division,分割、区域、跨度的意思。俗称大盒子。
• 作用：
  • 多用于划分网页区域，进行结构布局。一般将相关的内容使用div包裹起来，整体设置打的布局效果

span标签

• span：小区域、小跨度的意思、俗称小盒子。
• span 也是双标签，容器级标签
• 作用：
  • 在不改变整体效果的情况下，可以辅助进行局部调整

HTML基本语法 — 表格制作

• 表格基础
• 合并单元格
• 表哥区分

表格基础

• 创建一个简单的表格至少有三个标签组成，分别是 table、tr、td标签
  • table：表格，定义的是整个表格大结构
  • tr：table rows,表格的行，定义的是表格由多少行组成
  • td：table data，表格数据，夜交表格单元格，定义的是每一行内部的单元格
• 三者的关系：table > tr > td 一个表格中有多个行，每个行中有多个单元格

table 的属性

• table标签可以添加border边框属性
  • 属性值：数字，表示像素值
• 表格的单元格之间有默认的空隙，会导致双线边框
  • 解决方法：设置标签样式属性style
  • 属性值：border-collapse:collapse；表示边框塌陷

表头单元格

• 如果要绘制表头，使用标签 th ， table head data，表头单元格
• 子阿表哥中绘制的时候，替换的是 td 的位置
• th 标签中自带默认的css样式效果，文字显示粗体居中

HTML标签 — 合并单元格

常见的表格操作中，有一种叫做合并单元格，可以通过单元格属性进行设置

单元格属性

• 表格的单元格可以进行合并，通过 th 和 td 的两个属性可以进行合并设置
  • rowspan : 跨行合并。上下的合并
  • colspan：跨列的合并。左右的合并
  • 属性值：数字，数字是几表示跨级航或跨几列合并

制作技巧

1. 现列出所有行 tr 以最小单元格为标准
2. 再添加每一行的td或th单元格
3. 划分单元格所在行是，顶边对齐的属于同一行
4. 将所有行和列写完后，在查看那个单元格有跨行或者跨列，属性值的个数要参考最小的单元格

HTML标签 — 表格制作

一个完整的表格分为四个大区域：标题、头部、主题、页脚

分区标签

• table 内部最直接的子级包含四个分区标签，他们都是双标签
  • caption：表格的标题，内部书写标题文字
  • thead：table head，表格的头部。内部嵌套 tr > th
  • tbody: table body,表格的主体。内部嵌套 tr > td
  • tfoot: table foot,表格的页脚。内部嵌套 tr > td
• 四个分区可以选择性的进行组合
• 注意：不论书写顺序如何颠倒，浏览器中的加载顺序都按照caption、thead、tbody、tfoot执行的

制作技巧

1. 先书写大分区标签结构
2. 填充每个分区的内部内容
3. 如果有合并单元格内容，进行单元格合并

HTML标签 — 表单

• 什么是表单
  • 用来收集用户输入信息的
• 表单的组成
  • HTML表单用于搜集不同类型的用户输入，表单元素就是网页中提供给用户进行输入或点击的小控件
  • 在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个部分构成
• 功能
  • 表单域
    • 相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所有程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器
  • 提示信息
    • 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
  • 表单控件
    • 包含了具体的表单功能项，入单航文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

HTML标签 — 表单域

• HTML表单域使用 form 标签进行定义
• form 标签是一个功能性标签，填写的表单信息要想正确提交到后台服务器，必须放在一个form标签之内
• form 标签为双标签，容器级标签

表单域标签属性

• from标签通过对于属性规定提交数据的方法和提交位置
  | 属性名 | 属性值 | 描述 |
  |--------|------------|-------------------------|
  | action | url | 指定接受并处理表单数据的服务器程序的url地址 |
  | method | get / post | 用于于设置表单数据的提交方式 |
  | name | 自定义名称 | 规定表单的名称 |

<form action="data.php" method="get" name="first" ></form>

HTML标签 — 文本框、密码框

• input 标签
• 文本域 textarea
• 下拉菜单
• label 标签

input 标签

• 最重要的一个表单元素
• 单标签，本身相当于一个特殊的文本
• 需要通过标签属性实现各种功能

input标签常用属性

属性名	属性值	描述
	text	单行文本输入框
	password	密码输入框
	radio	单选框
	checkbox	复选框
	button	普通按钮
type	reset	重置按钮
	submit	提交按钮
	image	图像形式的按钮
	file	定义输入字段和“浏览”按钮，供文件上传
	hidden	定义隐藏的输入字段
name	自定义	定义控件的名称
value	自定义	定义控件的默认文本值
size	数字	定义控件的宽度
checked	checked	定义选框控件的默认被选中项
maxlength	数字	定义允许输入的最多字符数

type属性的值不同，决定了 input 标签的形态不同

• 单行文本输入框：text
  • input 标签的 type 属性值为 text
  • 定义提供用户输入的单行文本的输入框，不能输入多行文字
  • 常用value属性定义默认的输入文字
• 密码输入框：password
  • input 标签的 type 属性值为 password
  • 定义提供用户输入的密码框
  • password 字段中的字符会被做掩码处理（显示为星号或者实心圆）

HTML标签 — 单选框、复选框

• 单选框：radio
  • input 标签的 type 属性值为 radio
  • 定义提供用户点击选择的单选框
  • 单选框一般都是成组出现，多个单选框组成一组选择的情况
  • 同一组单选框之间必须是互斥的关系，通过给同一组单选框都设置相同的name属性值实现
• 复选框：checkbox
  • input 标签的 type 属性值为 checkbox
  • 定义提供用户点击选择的多选框
  • 复选框允许用户在有限数量的选项组选择0个或多个选项
  • 同一组复选框最好也设置相同的name属性
• 默认选中项
  • 单选框和复选框都可以提前设置默认选择项
  • input 标签有一个checked属性，如果不设置表示默认没有选中
  • 属性值如果设置为checked，表示该项默认被选中

HTML标签 — 按钮

input 标签的四种形式

type	名称	特点
button	普通按钮	没有任何特殊功能
reset	重置按钮	将同一个 form 中填写的表单内容清空，恢复成默认
submit	提交按钮	将填写数据提交到 form 中指定的后台服务器，并重置清空 form 中填写的信息
image	图片按钮	默认与提交按钮的效果相同，使用的图片需要理由src属性查找正确的路径

文件上传：file

• input 标签的 type 属性值为 file
  • 定义文件上传按钮，可以通过用户选择本地文件进行上传服务器
  • 使用 input 的 multiple 属性，可以决定是否可以选择多个文件

  <input type="file" multiple="multiple">
  

HTML标签 — 文本域

文本域使用 textarea 标签定义，制作可以输入多行文本的区域
textarea 标签为双标签，本身相当于一个特殊的文字
文本域可以设置默认输入的文字，在双标签之间书写默认文字

textarea属性

• textarea有两个标签属性，可以设置显示区域大小
  • rows：行，属性值是数字，数字是几表示文本框现实的最大行数，如果超过了行数，会被隐藏并且出现滚动条
  • cols：列，属性值是数字，数字是几，表示在出现滚动条之后，每一行现实的最大字节数（一个汉字按照2字节计算）

HTML标签 — 下拉菜单

• 下拉菜单需要至少两个标签完成结构
  • select：选择，表示定义下拉菜单整体结构
  • option：选项，表示定义下拉菜单的每一项
• 两个标签都是双标签，文本及标签
• 关系
  • select > option ， option可以有任意多个项
• 默认选中项
  • 默认情况下，选中的是第一项
  • 下拉菜单可以通过给option标签设置selected属性，属性值为selected，更改默认选中项
• 分组管理
  • 下拉菜单中如果选项变得复杂，可以将option进行分组管理
  • 可以使用 optgroup 标签对选项进行分组，optgroup是一个双标签
  • 关系
    • select > optgroup > option
  • optgroup可以设置一个label属性，表示给这一组选项添加一个分组标签名，分组标签optgroup是不能被点击选择的

HTML标签 — label标签

所有的表单元素都可以通过绑定其他内容去扩大触发点击范围，这时需要使用一个label标签

• label 标签的作用是帮表单元素定义标注
• 如果将表单控件与提示内容使用label进行绑定后，当用户鼠标点击label内的提示内容是，浏览器就会自动将焦点转到和标签相关的表单控件上
• 绑定方式一
  • 给表单元素设置id属性
  • 然后将需要绑定的其他内容用label标签包裹
  • 给label标签设置一个for属性，属性值为绑定的表单元素的id属性值
• 绑定方式二
  • 如果绑定内容和表单元素写在一起，可以化简绑定写法
  • 直接使用label标签将绑定内容与表单元素一起进行嵌套

HTML字符实体

• 在普通书写是，有一些特殊符号不能直接书写（例如连续的空格）或者符号具有特殊功能也不能直接书写（例如<>符号）
• 可以使用一些HTML提前预留好的替换字符进行书写，这写替换字符叫做字符实体
• 可以在W3C去查看所有字符实体
• 使用方法
  • 可以查询特殊字符的替换写法，包含实体名称以及实体编号
• 规则和建议
  • 规则：
    • 所有字符实体和实体编号都是以&开头，以;结尾的
    • 注意：实体名称对大小写敏感！
  • 建议：
    • 使用实体名称，好处是易于记忆，不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却是很好的）
    • 不需要强制记忆！！！