前端开发是什么？
- 前端开发是创建web页面或app等前端界面呈现给用户的过程
- 核心技术：HTML、CSS、JavaScript以及衍生出的各种技术、框架
网页的本质
- HTML就是用来制作网页文件的
- 浏览器查看的网页都是.html或.htm文件
- HTML叫超文本标记语言，用于搭建网页的结构
网页的组成<一>
- 前端三层：HTML（结构层）、CSS（样式层）、JavaScript（行为层）
网页的组成<二>
- 其他多媒体内容：图片、视频、音频、超链接等
- 所有网页文件都是真实、物理存在的文件
互联网原理
互联网运行过程
- 程序员将网页源文件上传到服务器进行存储，用户后期通过客户端（如浏览器软件）发送HTTP请求到服务器，服务器接收请求后进行响应，将存储的相关文件通过HTTP响应回传到用户本地客户端，最终通过客户端将网页文件进行渲染，显示最终用户看到的网页效果
服务器
- 服务器，就是一种特殊的计算机，也包括处理器、硬盘、内存、系统总线等，但是由于需要提供可靠的服务，因此在处理能力、稳定性、可靠性、安全性等方面要求较高
- 作用：对于web来讲，用于存储开发人员上传的网页数据，且需要响应服务请求，并进行处理
- 要求：对于网站服务器来说，为了让用户随时进行访问，必须24小时不间断工作
云服务器
- 目前绝大多数网站都采用的是云服务器，云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务，其管理方式比物理服务器简单高效。用户无需提前购买硬件，即可迅速创建或释放任意堕胎云服务器
客户端
- 客户端也叫用户端，指的是普通用户使用的终端，客户端有多种形式，浏览器、app等，而web开发最主要的客户端形式还是浏览器
- 浏览器，是一种用户上网搜索、查看信息资源的应用程序
- 功能：用于发送HTTP请求到服务器，接收服务器发回的HTTP响应，渲染网页
主流浏览器
- 微软的IE和Microsoft Edge、Mozilla的Firefox、苹果公司的Safari、Google的Chrome及Opera软件公司的Opera
主流浏览器内核
- 因为不同浏览器使用内核及所支持的HTML等网页语言标准不同，对网页的渲染效果也会有差异
| 浏览器 | 渲染引擎（内核 ） |
|---|---|
| IE /Edge | Trident |
| Firefox | Gecko |
| Safari | Webkit |
| Chrome | Webkit ->Blink |
| Opera | Presto->Webkit ->Blink |
推荐：使用Chrome浏览器。（渲染效果好、市场占有率高、自带开发者调试工具）
浏览器功能
- 发送HTTP请求，发送的方式是在浏览器地址栏输入对应的网址，或者点击超链接
- 接收服务器发回的HTTP响应，服务器会发回一个HTML给浏览器
- 将接收到的HTML进行解析并显示
HTTP协议
- 超文本传输协议，是浏览器或其他程序与web服务器之间的应用层通信协议
HTTP请求
- request，浏览器根据网址项向对应的服务器发送请求
- 发起请求的方法：在浏览器地址栏输入网址，或点击超链接
- HTML页面解析过程中，会发出多个HTTP请求，包含网页的图片、视频、音频等文件请求
HTTP响应
- response，服务器根据请求响应一个HTML文件，将HTML文件传输给客户端，在浏览器中进行HTML网页的渲染
HTML概念
纯文本格式
- 纯文本格式，就是没有任何文本修饰，没有任何粗体、下划线、斜体、图形、符号或特殊字符等，只保存文本，不包括其格式设置
格式对比
- 纯文本格式：最常见的是.txt文件，在存储和传输过程中，值保存文字，不能保存格式
- 富文本格式：与纯文本对应，最常见的是.rtl文件，类似.doc文件，内部保存文本的样式、图片等
纯文本文件特点：
- 只能保存文本，不保存格式或非文本内容，文件小，易于传输
- 可直接更改扩展名来更改保存格式
- 可以使用任意的纯文本编辑器进行查看和编辑
HTML、CSS、Javascript都是纯文本格式文件
HTML
- 超文本标记语言，用来制作网页的一种标记语言
- 是一种纯文本格式的文件，内部只能书写文字内容，不能添加非文本内容，但可以在网页中给用户呈现非文本内容，这就是html文件和其他文件的不同之处
超文本：是超级文本的缩写，用于链接另一个文本或多媒体内容的文本
标记：又叫标签，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容，在编辑器中可以编辑和查看，在浏览器中不显示
HTML的功能
- 利用标签给普通文本添加语义、描述超文本内容，搭建网页的基本结构
HTML的语义化
- HTML中如果没有使用特殊语义的标记，也可以实现网页显示效果，但是利用标签给普通文字添加不同的语义，可以让网站的机构更加清晰
语义化网页的优势
- 方便代码的阅读和后期维护
- 便于浏览器或者网络爬虫更好的解析网站内容
- 使用语义化标签有利于SEO搜索引擎化，提高网站的搜索排名
HTML基本语法
- HTML标签：在书写和使用中，必须遵循特定的语法
HTML标签语法
- 标签名必须写在一对<>内
<html></html>
- 标签分为单标签和双标签，双标签必须成对出现
<p></p> 双标签
<br /> 单标签
- 双标签包含开始标签和结束标签，结束标签必须书写关闭符号/，但标签也需要进行自封闭书写，在HTML5中，单标签可以不书写关闭符号
HTML元素
- 包含从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签
元素内容
- 元素内容可以是纯文本、也可以是其他的HTML元素，这种元素内容包含HTML元素的情况，我们称之为嵌套
- 一个HTML元素div的内容可以是多个其他元素，例如p和h1，我们成div是p和h1的父级元素，而p和h1属于同级元素
<div>
<h1>一级标题</h1>
<p>段落</p>
</div>
- 单标签不可以添加元素内容，可以称之为空元素
标签级别
- 根据标签内部可存放的元素内容，可以将双标签分为两个级别
- 容器级：可以存放任意内容，包含容器级标签
- 文本级：只能存放文字或类似文字的内容，比如存放图片，表单内容
HTML元素的特性
- 元素对空格、换行、缩进形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响
- 空白折叠：元素内容如果是文本，所有文字之间如果有空格、换行、缩进，在浏览器加载时，连接在一起的空白会折叠成一个空格显示
HTML属性规范
- 书写位置：必须写在开始或单标签之内，与标签名之间用空格进行分隔
- 属性包含：属性名（key）、属性值（value），HTML标签属性的键值对写法：
- 一个标签可以设置多个不同的属性，属性与属性之间用空格进行分隔：
- 部分标签属性k可以设置多个属性v，所有属性值v都必须写在同一对双引号内，值与值之间必须使用空格隔开：<p k1="v1 v2“>
HTML基本结构
基本骨架
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体内容
</body>
</html>
html标签
- 作用：定义html文件的根元素，表示整个的html文档，所有的标签要书写在标签内部
head标签
- 作用：用于存储title、meta、base、stylel、script、link，内部用于对网页的设置，除了title内部的文字，其他标签都不显示在浏览器上
- 在head标签中我们必须先要设置的标签时title
title标签
- 让页面拥有一个属于自己的标题
- title中的关键字可以作为引擎住区的关键字，提高SEO搜索引擎优化
- 内部的内容会显示在搜索结果的标题部分
- 作为浏览器收藏默认的网页标题
- 建议网页必须添加标签内部内容，内容尽量精简，提取网页的关键字
body标签
- 定义网页的主体部分，用于存放所有的html显示内容的标签
- body内部的元素内容会显示在浏览器的窗口中
DTD
- 完整的HTML文件的第一行内容叫做文档定义类型，也称文档声明类型
- 作用：告知浏览器该网页使用的是哪个版本的html规范，让浏览器按照对应版本的html语法进行解析页面
命名空间xmlns
- html元素的命名空间规定了在不同用户的浏览器证功标签语义遵循的同意标准，避免出现标签名冲突
语言
- lang=“en” 表示所有的标签元素内容的语言都是英文
- lang="zh-cn"表示中文
字符集
- HTML5版本
<meta charset="UTF-8">
常用字符集编码
- UTF-8：以字节为单位对Unicode万国码进行编码，涵盖了所有人类的语言文字，一个汉字为3个字节大小
- gb2312：收入汉字及拉丁字母等
- gbk：是gb2312的扩展，增加了繁体字，一个汉字为2个字节大小
字符集常见问题
- 如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8
- 如果含有大量的中文汉字的网站，而且要求加载速度快，使用gbk
- meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会u出现两个字库不匹配，浏览器加载时出现乱码
HTML常用标签
注释语法
<!--书写注释-->
快捷键：ctrl+/
注释的特点
- 旨在源代码中可见，在浏览器窗口是不显示的
用途
- 在源代码中添加描述性的提示信息，便于我们阅读代码
- 对于html纠错也有很大帮助，可以通过注释某一行的html代码，以便检索错误的位置
- 暂时注释掉一部分不用的代码，便于后期回复代码
标题标签
- 标题，通过h1~h6来对六个级别的标题进行定义
- h1~h6都是容器级标签
标题标签的作用
- 给标签内部的元素内容添加对应级别的语义
标签级别
- 不能互相嵌套，下一级标题与上一级标题是同级关系，下一级标题解释说明距离最近的上一级标题
权重
- h1最重要，h2次之，以此类推
- h1在html文件中的权重非常高，内部应该防止html中最重要的内容，例如logo
- h1标签内部的文字对于搜索引擎排名也非常重要
段落标签
- p标签的作用是给标签内部的内容添加一个完整段落的语义
换行标签
- br标签是html中一个简单的换行符，不会建立新的段落，只是简单的进行强制换行
文本格式化标签
| 标签 | 描述 |
|---|---|
| b | 定义粗体文字，bold |
| big | 定义大号字 |
| em | 定义着重文字，自带斜体效果 |
| i | 定义斜体字 |
| small | 定义小号字 |
| strong | 定义加重语气，自带加粗效果 |
| sub | 定义下标字 |
| sup | 定义上标字 |
| ins | 定义插入字，自带下划线效果 |
| del | 定义删除线 |
图像标签
- 由img标签进行定义
- img是单标签，本身相当于一个特殊的文本
- img标签的作用是在指定的位置插入一张图
- 在html文件中，常用的插入图片类型：jpg、png、gif
标签属性
| 属性名 | 描述 |
|---|---|
| src | 表示图片的路径 |
| width | 表示图片的宽度，单位px |
| height | 表示图片的高度，单位px |
| border | 边框属性；可设置边框的宽度 |
| title | 设置鼠标悬停时的提示文本 |
| alt | 图像没有找到时的替换文本，若能正常找到，替换文本不显示，有利于SEO搜索引擎优化 |
绝对路径
- 从盘符出发的绝对路径的缺点：
- a.盘符除法的路径不可以移植，不可移动
- b.反复出发的路径容易出现中文字符，中文的路径容易出现错误
路径实际应用
- 建议多使用相对路径，可以适当使用网址的绝对路径
- 使用相对路径必须将图片或文件与html文件同时上传，而且需要下相对位置不变
宽度和高度
- 如果不设置两个属性，会以图片的原始尺寸加载
- 如果只设置了一个，另一个会等比例变换
- 如果两个都设置，按照设置值加载
音频标签
- 使用audio标签进行定义
- 是双标签
- 需要使用src设置查找音频的路径
- 音频文件支持的格式：mp3、ogg、wav
<audio src="audio.mp3"></audio>
音频控制条属性
- 音频加载不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是controls
<audio src="audio.mp3" controls=”controls></audio>
视频标签
- 视频也需要使用controls属性设置控制条，属性值也是controls
<video src="video.mp4" controls=”controls></video>
超级连接标签
- 在HTML中使用a标签可以创建超链接
- a全称anchor，锚的意思
- a为双标签
- 作用：在指定位置添加超级连接，提供用户点击和跳转
- a标签可以实现两种跳转：跨页跳转、页面内跳转，实现跳转的方式需要用到一些标签的属性
href属性
- href全称hypertext reference，超文本引用，用于规定连接的目标地址
- 属性值：连接目标的路径地址，可以使用相对路径或网址形式的绝对路径
- a标签想要实现跳转，必须设置该属性，有这个属性时，鼠标经过时才会出现一个小手指
<a href="目标地址">链接内容</a>
target属性
- 使用该属性们可以定义被链接的文档在何处跳转显示
- 属性值有两种
- _self：默认值，表示跳转页面在当前页面打开
- _blank：空白的，表示跳转页面在新窗口打开
<a href="目标地址" target="_blank">链接内容</a>
title属性
- 设置鼠标悬浮时的提示文本，与img标签类似
- 属性值：自定义文本内容
- 用于给用户进行提示，提高用户体验
<a href="目标地址" target="_blank" title="点击查看源网页"><img src="smile02.png" /></a>
页面内锚点跳转
- 是从某个位置跳转到当前页面的某个位置
- 制作方法分两步：设置锚点、添加链接
设置锚点
- 设置锚点，即设置跳转目标位置，有两种设置方式
- 1-在目标位置查到任意一个标签，给它添加id属性，id的属性值必须是唯一的，id属性值定义规则：必须以字母开头、后面可以有字母、数字、下划线和横线，区分大小写
<h2 id="mubiao">目标位置</h2>
- 2-在目标位置添加一个空的a标签，值设置一个name属性，那么属性值设置方式与id相同，也必须是唯一的
<a name="mubiao"></a>
添加链接
- 链接到锚点，在需要点击的位置设置a标签，给a的href属性设置属性值为#id属性值或者#name属性值
<a href="mubiao"></a>
跨页面跳转锚点
- 这种跳转方式综合了跨页面跳转和锚点跳转
- 制作方法分两步：设置锚点、添加链接
- 设置锚点，方式与页面内锚点跳转一致，在目标网页的指定位置设置id或name属性
- 链接到锚点，添加超级链接时href属性值需要更改为页面的路径#id/name
<a href="demo.html#id"></a>
无序列表标签
注意：
- ul内部只能嵌套li，li标签不能脱离ul标签单独书写
- li标签是一个典型的容器级标签，内部可以放任意内容，甚至可以放一个组ul>li无序列表结构
- ul中的li没有顺序的先后之分，它们的重要程度是相同的
- 作用：搭建列表结构，没有添加样式前缀的功能，样式是css负责的
有序列表标签
注意：
- ol内部只能嵌套li，li标签不能脱离ol标签单独书写
- li标签是一个典型的容器级标签，内部可以放任意内容，甚至可以放一个组ol>li有序列表结构
- ol中的li存在顺序的先后之分，根据内容的重要程度调整先后顺序
- 作用：搭建有顺序的列表结构，没有添加数字排序样式的功能，样式是css负责的
定义列表标签
- 由3个标签组成，dl、dt、dd
- dl：表示定义一个自定义列表的大结构
- dt：表示自定义列表中一个主题或术语
- 定义解释项，描述或解释前面定义的主题或术语
注意：
- dl内部只能嵌套dt和dd，dt和dd标签不能脱离dl标签单独书写
- dl内部可以放多组dt和dd，每个dd解释说明前面距离最近的一个dt
- 每个dt后面可以由0到多个解释项dd
- dt和dd都是容器级标签，内部可以放任意内容
- 定义列表中的样式是css负责的，标签只负责搭建语义结构
- 配合css布局效果，最好每个dl中织田家一组dt和dd，便于后期管理
常用布局标签div和span
布局标签div
- div和span标签常用作布局工具，我们称为盒子
- div是双标签，是最经典的容器级标签，内部可以放置任意内容
- 作用：多用于划分网页区域，进行结构布局，一般将相关的内容使用div包裹起来
布局标签span
- 也是双标签，容器级标签
- 作用：在不改变整体效果的情况下，可以辅助进行局部调整
表格制作
表格基础
- 创建一个表格至少有三个标签组成：table、tr、td
table的属性
<table border="1" style="border-collapse: collapse;"> border：边框 collapse:解决双线边框
表头单元格
- 如果绘制表头，使用标签th，表头单元格
- th自带默认的css样式效果，文字显示粗体居中
合并单元格
- rowspan：跨行合并
- colspan：跨列合并
制作方法
- 先列出所有行，以最小单元格为标准
- 再添加每一行的td或th
- 划分单元格所在行时，顶边对齐属于同一行
- 将所有行和列写完后，再看哪个单元格有跨行或跨列，属性值的个数参考最小单元格
表格分区
一个完整的表格分为四个区域：标题、表头、主体、页脚
- caption：表格的标题
- thead：表头
- tbody：主体
- tfoot：页脚
- 不论书写顺序如何颠倒，浏览器的加载顺序都是自动按照：caption、thead、tbody、tfoot
表单标签
表单的组成
- 用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件
- 在HTML中，一个完整的表单通常由表单域、表单控件、提示信息组成
功能
- 表单域：相当于一个容器，用来容纳所有的表单元素及提示信息，可以通过他定义处理表单数据所用程序的url地址，一级数据提交到服务器的方法，如果不定义表单域，表单中的数据就无法传递到后台服务器
- 提示信息：一个表单中还需要包含一些说明性文字，提示用户进行填写和操作
- 表单控件：包含了具体的表单功能，如：单行文本输入框、密码输入框、提交按钮、重置按钮
表单域标签
- 使用form标签进行定义
- form标签是一个功能性标签，填写的表单信息想要正确的提交到后台服务器，必须放在一个form标签内
- form标签为双标签、容器级标签
表单域标签属性
- action=“url”：指定接收表单数据的服务器程序的url地址
- method=“get/post”:用于设置表单数据提交方法
- name=“自定义名称”：指定表单的名称
input标签
- input是最重要的一个表单标签
- input是单标签，本身相当于一个特殊的文本
- input标签通过属性实现各种功能
| 属性名 | 属性值 | 描述 |
|---|---|---|
| type | text | 单文本输入框，不能输入多行文字 |
| type | password | 密码输入框，输入框中的字符会被做掩码处理 |
| type | radio | 单选框 |
| type | checkbook | 复选框 |
| type | button | 普通按钮 |
| type | reset | 重置按钮 |
| type | submit | 提交按钮 |
| type | image | 图像形式的按钮 |
| type | file | 定义输入字段和“浏览”按钮，供文件上传 |
| type | hidden | 定义隐藏的输入字段 |
| name | 自定义 | 定义控件的名称 |
| value | 自定义 | 定义控件的默认文本值 |
| size | 数字 | 定义控件的宽度 |
| checked | checked | 定义选框控件的默认被选中项 |
| maxlength | 数字 | 定义允许输入的最多字符数 |
- 其中type属性的不同，决定了input标签的表现形式不同
单选框：radio
- 单选框一般都是成组出现的，多个单选框组成一组选择，同一组单选框之间必须是互斥的关系，通过给同一组单选框设置相同的name值实现
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
复选框
- 复选框允许用户在有限数量的选项中选择0或多个选项，同一组复选框最好也设置相同的name属性
<input type="checkbox" name="hobby"> 唱
<input type="checkbox" name="hobby"> 跳
<input type="checkbox" name="hobby"> rap
默认选中设置
- 单选框和复选框可通过checked属性，设置默认选中项
<input type="radio" name="sex" checked> 男
<input type="checkbox" name="hobby" checked> 唱
按钮
- button：普通按钮，没有任何特殊功能
- reset：重置按钮，将同一个form表单中填写的内容清空，恢复成默认值
- submit：提交按钮，将填写的数据提交到form中指定的后台服务器，并重置清空form中填写的信息
-image：图片按钮，默认与提交按钮的效果相同，使用的图片需要利用src属性查找路径
文件上传：file
- 定义文件上传按钮，可以供用户选择本地文件进行上传服务器
- 使用input的multiple属性，可以决定是否上传多个文件
<input type="file">
<input type="file" multiple>
文本域
- 文本域使用textarea标签定义，制作可以输入多行文本的区域
- textarea为双标签，本身相当于一个特殊的文本
- 文本域可以设置默认输入的文字，在双标签之间书写默认文字
textarea属性
- rows：行，属性值为数字，表示文本框显示的最大行数，超过了行数，会被隐藏并出现滚动条
- cols：列，属性值为数字，表示在出现滚动条后，每一行显示的最大字节数（一个汉字按2个字节计算）
<textarea id="" cols="30" rows="10">默认输入文字</textarea>
下拉菜单标签
- select：选择，表示定义下拉菜单整体结构
- option：选项，表示定义下拉菜单的每一项
- 两个标签都是双标签，文本级标签
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
默认选中项
- 默认情况下选中的是第一项
- 下拉菜单可以通过给option标签设置selected属性，属性值为selected，更改默认选中项
<option selected>北京</option>
分组管理
- 可以使用optgroup标签对选项进行分组，optgroup是一个双标签
- optgroup可以设置一个label属性，表示这一组选项的分组标签名，分组标签optgroup是不能被点击选择的
<select>
<optgroup label="国内">
<option>上海</option>
<option>广州</option>
</optgroup>
<optgroup label="国外">
<option>伦敦</option>
<option>纽约</option>
</optgroup>
</select>
label标签
- 可以扩大触发点击范围
- label标签的作用是帮表单元素定义标注（标记）
- 如果表单控件与提示内容使用label进行半丁，当用户鼠标点击label内的提示内容时，浏览器会自动将讲点转到和标签相关的控件上
绑定方法一
- 给表单元素设置id属性
- 及那个需要绑定的其他内容用label标签包裹
- 给label标签设置for属性，属性值为绑定的表单元素的id属性
<input type="radio" name="sex" id="girl">
<label for="girl">女</label>
绑定方法二
- 如果绑定的内容和表单元素写在一起，可以简化绑定方法
- 直接使用label标签将绑定内容与表单元素一起进行嵌套
<label><input type="checkbox" name="hobby"> 跳</label>
字符实体
- 在普通文字书写时，由一些特殊字符不能直接书写，例如：连续的空格，或者符号有特殊的功能不能直接书写，可以使用html提前预留的替换字符进行书写，这些替换字符叫做字符实体
- 所有字符实体和实体编号都是以&开头，以;结尾的
- 实体名称对大小写敏感
- 浏览器对实体数字的支持较好
2646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
