前端
- 前端主要使用HTML、CSS、JavaScript这三剑客来进行开发。
- 前端主要负责页面内容的呈现，页面效果的制作，以及各种交互效果的实现。
前端能做的不止是网页
随着现在前端技术的发展，各种跨平台方案的涌现，大前端的潮流已经是不可避免了。我们不仅能写网页，也可以用nodejs来做后端程序，还可以依赖一些跨平台方案去开发手机上的APP以及微信小程序等等
总而言之，你所能看到的一切皆为前端，前端能够做到的事情远远不止开发网页这一项。网页是由文字，图片，音频，视频，超链接等组成。
常见的五大内核：Trident，Gecko，Webkit ，Presto和Blink ：
| 内核 | 浏览器 | 备注 |
|---|---|---|
| Trident | IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器 | |
| Gecko | Mozilla、Firefox | 开源项目 |
| Webkit | Safari、Chrome | 开源项目 |
| Presto | Opera | Presto是由Opera Software开发的浏览器排版引擎，它也是世界上公认的渲染速度最快的引擎。 |
| Blink | 由Google和Opera Software开发的浏览器排版引擎 |
HTML
- 全名Hyper Text Markup Language简称超文本标记语言。
- HTML的骨架结构由四个标签组成
- html标签是网页的整体
- head标签是网页的头部
- body标签是网页的身体
- title标签是网页的标题
HTML的基础模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>：说明文档是类型，告诉浏览器的解析器使用哪种规范来解析页面。
<html>...</html>包裹所有代码，除了第一行。在它们之间是文档的头部和主体。
<head>...</head>是所有头部元素的容器。<head>中的元素可以引用脚本(scripts)、样式表(css)、各种meta信息等等。
<meta>描述了一些基本的元信息，这些数据不会在页面中显示，但会被浏览器解析。例如开发工具、作者、网页关键字、网页描述、页面定时刷新及跳转等一些东西。
注意：<meta>标签没有结束标签
<title>...</title>网页的名称
<link>定义了文档与外部资源的联系，最常用的就是外联css文件。
注意：link标签没有结束标签
<body>...</body>定义文档的主体,<body>与</body>标签之间的文本是要在浏览器中显示的页面内容,绝大多数html标签写在里面
HTML基础标签
HTML标签的构成
<开始标签>内容</结尾标签>
- 标签有
<、>、/、和英文单词或者字母组成，由<>包裹的英文单词或者字母叫做标签名 - 常见的标签由两部分组成，我们称之为
双标签，前部分叫做开始标签，后部分叫做结束标签，由这两部分包裹的为内容 - 少数的标签由一部分组成，我么称之为
单标签，无法包裹内容，一般在内部书写参数。
HTML标签的属性
开始标签或者单标签中可以包含一些属性，通过=指定属性值
<开始标签 属性名="属性值"></结尾标签>
<单标签 属性名=“属性值”>
HTML标签的关系
- 父子关系
<body>
<h1>我是一级标题</h1>
</body>
- 兄弟关系
<h1>我是一级标题</h1>
<p>我是段落</p>
HTML标签的内容
| 标签名 | 含义 |
|---|---|
| <div></div> | 块级标签，常与CSS属性配合进行网页布局 |
| <h1>–<h6> | 定义标题，<h1>为一级标题，<h2>为二级标题，以此类推，<h1>为最大的标题，<h6>为最小标题 |
| <p></p> | 定义段落,用于包裹一段文字 |
| <span></span> | 行内元素，为少量的文字单独设置样式。 |
| <a></a> | 超链接标签 |
| <img> | 引入图片 |
| <ul></ul> | 定义无序列表 |
| <ol></ol> | 定义有序列表 |
| <li></li> | 定义列表的项目 |
| <br> | 换行 |
| <hr> | 定义水平线 |
| <select></select> | 创建单选或多选菜单 |
| <option></option> | 定义下拉列表的其中一个选项，位于select元素内部 |
| <video></video> | 定义视频内容，支持的格式有MP4,Ogg等 |
| <audio></audio> | 定义一段音频，支持的三种格式为MP3，WAV，Ogg |
| 超链接属性名 | 属性值 | 备注 |
|---|---|---|
| href | 规定链接指向的页面的 url。 | （url：资源地址，指要链接到的网页或者文件的地址） |
| title | 用于指定指向链接时所显示的提示信息 | |
| target | 规定在何处打开链接文档。 | _blank：在新窗口打开，_self：在同一个窗口中打开，_parent:在上一级窗口中打开， _top:在浏览器的整个窗口中打开) |
| img属性名 | 属性值 | 备注 |
|---|---|---|
| src | 图片路径 | 可以是绝对或者相对路径 |
| alt | 替换文本 | 当图片加载失败时，才会显示alt的文本，图片加载成功时，不会显示alt的文本 |
| title | 提示文本 | 当鼠标悬停在图片上时，才会显示的文本 |
| width、height | 图片宽高 | 如果只设置了其中的一个，另一个会自动等比例的缩放，此时图片不会变形。如果同时设置，此时图片可能变形 |
| video属性名 | 属性值 | 备注 |
|---|---|---|
| src | 视频路径 | 可以相对、绝对路径 |
| controls | 显示播放的控件 | |
| autoplay | 自动播放 | chrome中需要muted实现静音播放 |
| loop | 循环播放 |
| audio属性名 | 属性值 | 备注 |
|---|---|---|
| src | 视频路径 | 可以相对、绝对路径 |
| controls | 显示播放的控件 | |
| autoplay | 自动播放 | 部分浏览器不支持 |
| loop | 循环播放 |
HTML的高级标签
input标签
在网页中显示手机用户信息的表单效果，如登录注册页面。可以通过type属性值的不同展示不同效果
| type属性值 | 说明 |
|---|---|
| text | 文本框，用于输入单行文本 |
| password | 密码框，用于密码输入 |
| radio | 单选框，实现多选一，checked指定默认选中选项 |
| checkbox | 多选框，实现多选一 |
| file | 文件选择，用于上传文件 |
| submit | 提交按钮，用于提交表单 |
| reset | 重置按钮，用于重置表单 |
| button | 普通按钮，默认无功能，通过js赋予功能 |
| placeholder | 输入类型时，显示在输入框的提示信息 |
<form>
<!-- 1、文本框：text（type属性的默认值） -->
昵称：<input type="text" placeholder="请输入您的昵称"><br><br>
<!-- 2、密码框：password -->
密码：<input type="password" placeholder="请输入您的密码"><br><br>
<!-- 3、单选框：radio -->
性别：<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女<br><br>
<!-- 4、多选框：checkbox -->
爱好：<input type="checkbox" checked>敲代码
<input type="checkbox" checked>熬夜
<input type="checkbox">掉头发<br><br>
<!-- 5、文件选择：file -->
<input type="file" multiple><br><br>
<!-- 按钮 -->
<!-- 1、submit：提交按钮 -->
<input type="submit">
<!-- 2、reset：重置按钮 -->
<input type="reset">
<!-- 3、button：普通按钮 -->
<input type="button" value="普通按钮">
昵称：<input type="text" placeholder="请输入您的昵称"><br><br>
<!-- 提交按钮 -->
<button type="submit">button提交按钮</button>
<!-- 重置按钮 -->
<button type="reset">button重置按钮</button>
<!-- 普通按钮 -->
<button type="button">button普通按钮</button>
</form>
button标签
在网页中显示用户点击的按钮，同上，只不过上面的是Input中type设置为button。这个标签就是button，本质是类似的，它是双标签。这个标签更便于包裹其他内容，比如图片和文字
select下拉菜单
在网页中提供多个选择项的下拉菜单表单控件，由select标签和option标签组成。selected属性表示下拉菜单的默认选中
<!-- 下拉菜单 -->
<!-- select：表示下拉菜单的整体 -->
<!-- option：表示下拉菜单的每一项 -->
所在城市：<select>
<option>上海</option>
<option selected>北京</option>
<option>广州</option>
<option>深圳</option>
</select>
textarea标签
在网页中提供可输入多行文本的表单控件 cols规定了文本域内可见宽度，rows规定了文本域内可见行数
label标签
常用与绑定内容与表单标签的关系，在后面的开发中会经常用到。有两种使用方法如下：
- 使用方法1
- 使用label标签把内容(如:文本)包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值使用方法
- 使用方法2
- 直接使用label标签把内容(如:文本)和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
HTML格式化
文本格式化标签
| 标签 | 描述 | 例子 |
|---|---|---|
| <b> | 定义粗体文本 | 文字 |
| <em> | 定义着重文字 | 文本 |
| <i> | 定义斜体字 | 文本 |
| <small> | 定义小号字 | 文本 |
| <strong> | 定义加重语气 | 文本 |
| <sub> | 定义下标字 | 文本文本 |
| <sup> | 定义上标字 | 文本文本 |
| <ins> | 定义插入字 | 插入 |
| <del> | 定义删除字 |
- HTML “计算机输出” 标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
- HTML 引文, 引用, 及标签定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目 |
语义化标签
在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
| 标签名 | 意义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| aside | 侧边栏 |
| main | 元素中的内容对于文档来说应当是唯一的、如侧栏、导航栏、版权信息、站点标志或搜索表单 |
| section | 区块 |
| article | 文章 |
| footer | 页尾 |
以上标签显示特点和div一致，但是比div多了不同的语义，语义化使网页结构更加清晰/使用更少的js、css，更加有利于SEO引擎优化。
字符实体
空格合并现象，如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
常见字符实体，前期仅作为了解即可。
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ’ | 撇号 | ' | (IE不支持)' |
| ￠ | 分（cent） | ¢ | ¢ |
| ￡ | 镑（pound） | £ | £ |
| ￥ | 元（yen） | ¥ | ¥ |
| � | 欧元（euro） | € | € |
| § | 小节 | § | § |
| ? | 版权（copyright） | © | © |
| ? | 注册商标 | ® | ® |
| \? | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
行内元素和块级元素
行内元素
一个行内元素只占据它对应标签的边框所包含的空间。只能容纳文本或者其他内联元素。
特点：
- 和其他元素都在同一行，不会自动换行，水平方向依次排列；
- 高，行高及外边距和内边距不可改变；
- 宽度就是它的文字和图片的宽度，不可改变；
- 内联元素只能容纳
文本或者其他内联元素。 - 举例：
a、b、br、i、span、small、big、sub、sup
一般行内元素不能设置宽高，但并不是所有的行内元素都不能设置宽高，替换元素就可以。
替换元素：浏览器根据元素的标签和属性来决定元素的的具体显示内容。HTML中的img、input、textarea、select、object都是替换元素
块级元素
块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素或者内联元素。
特点：
- 总是在新行上开始，可以自动换行，垂直方向依次排列；
- 高度、行高以及外边距和内边距都可控制；
- 宽度默认是它容器的
100%，除非设定一个宽度； - 他可以容纳
内联元素和其他块元素。 - 举例：
div、h1-h6、p、ol、ul、li