前端学习
IDE 集成开发环境/高级代码编辑器
代码编辑、关键词高亮、智能感应、智能纠错、格式美化、版本管理
HTML（Hyper Text Markup Language 超文本标记语言）
一、HTML5特性
1、空白折叠现象
文字与文字间的多个空格、换行会被折叠成一个空格
标签内壁和文字之间的空格会被忽略
2、转义字符
常见转义字符：
| 转义字符 | 意义 |
| :------: | :----------------: |
| < | 小于号 |
| > | 大于号 |
| | 空格（不会被折叠） |
| © | 版权符号 |
二、HTML的文档类型声明
HTML文件第一行必须是DTD（文档类型声明）
不写会引发浏览器兼容问题
html5 <!document html>
1、HTML注释
``注释语法
快捷键Crtl + /
三、HTML标签对
<head>标签是对网页的配置信息
<body>标签是网页内容
1、meta标签
<meta>元标签 单标签 表示网页基础配置
1）字符集
charset='UTF-8'
字符集UTF-8包含所有字符，一个汉字占3字节
字符集gb2312(gbk)只有汉字英文,一个汉字占2字节
2）网页关键词和页面描述
name 表示设置描述的名字
content 设置网页关键词或者页面描述，也是搜索引擎显示的简介词语
name='Keywords'表示网页关键词
name='Description'表示页面描述
可以设置多个name content 但一个meta标签只能设置一组
2、title标签
<title> </title>表示网页名称
3、标题标签
h1~h6
h1标签一般只能放一个
4、段落标签
p标签
只有在p标签中显示内容才能换行
p标签中不能嵌套p标签或者h标签，h标签也不能嵌套p标签
5、div标签
用来将相关内容组合到一起，以与其他内容分割。
结合CSS使用实现网页布局。
容器/盒子 可嵌套
可添加class属性表示类名，类名服务于CSS
| 区域 | 类名 |
| :----: | :-----: |
| 页头 | header |
| logo | logo |
| 导航条 | nav |
| 横幅 | banner |
| 内容 | content |
| 页脚 | footer |
6、列表标签
1）无序列表
适合导航栏，新闻栏之类
<ul> </ul> 和<li> </li>配合使用，要注意缩进
<li>不能单独使用
<ul>的子标签只能是<li>
<li>标签是容器，内部可以放其余标签
<ul>
<li>面包
<p>
面包真不错
</p>
</li>
<li>牛奶</li>
</ul>
type属性 circle-空心圆 disc-实心圆（默认） square-实心方块
但是在HTML5中已经废弃，建议使用CSS代替。
2）有序标签
适合排行榜
<ol></ol>和<li> </li>标签配合使用
使用和<ul>类似
type属性
| 属性值 | 意义 |
| :----: | :----------------: |
| a | 小写英文字母编号 |
| A | 大写英文字母编号 |
| i | 小写罗马数字编号 |
| I | 大写罗马数字编号 |
| 1 | 表数字标号（默认） |
start属性 必须是一个整数（不管编号类型），表示列表编号起始
reversed属性指定列表的条目是否倒叙排列。该属性不需要值只需要写该单词即可。<ol reversed> </ol>
3）定义列表
适合构成定义关系的文字
<dl> </dl>是定义列表标签，内容交替出现<dt> </dt> 、<dd> </dd>标签。
dd是解释dt的内容的标签。
dt,dd是同级标签，必须放在dl中使用
也允许dt，dd不交替出现而是处于不同的定义列表标签dl中
<dl>
<dt>HTTML</dt>
<dd>超文本标记语言</dd>
</dl>
7、img标签
单标签
用来在网页中引入图片，图片必须在项目文件夹中，一般存在images子文件夹中
src属性（source）：图片存储目录和完整文件名
相对路径、绝对路径
../ 表示上一文件夹 ./ 表示同级文件夹，可省略
alt属性（alternate）：对图像的文本描述，用于在无法加载图形的情况下，浏览器会在页面上显示alt属性中的备用文本，网页朗读器也会朗读alt中文本。
width、height属性：设置宽度高度，单位是像素，<u>但不用写单位</u>，若只设置了一个属性，则表示按原始比例缩放图片。
8、a标签
<a>标签制作超级链接
超级链接是将网页和网页连接在一起的方法
<a href='www.baidu.com' title='哈哈哈哈' targer='blank'>百度</a>
href属性 支持相对路径和绝对路径
title属性 用于设置鼠标的悬停文本
target属性 规定在何处打开网页 设置为blank，即可在新标签页中打开网页(HTML4代，blank之前有一个下划线)
<u>图片也可以变为超级链接</u>
<a href='www.baidu.com'>
<img src='...'>
</a>
<u>页面内锚点</u>
在a标签上设置id属性后，在设置href属性中的网址后加#id即可直接跳转到该锚点部分（无网址只有#id则是该页面中的锚点）
<u>下载链接</u>
指向exe、zip、rar等文件格式的链接，自动成为下载链接
<u>邮件链接、电话链接</u>
有mailto:前缀的链接是邮件链接，系统将自动打开Email相关软件
有tel：前缀的链接是电话链接，系统自动打开拨号盘
9、audio标签
在浏览器中加入音频 兼容到IE9
<audio controls autoplay loop src='音频地址'>audio标签</audio>
controls属性 没有值 加上controls表示显示播放控件
src属性 音频地址
autoplay属性 没有值 声明后音频会自动播放，但常用浏览器为了不打扰用户，可能不允许自动播放，必须用户点击后播放
loop属性 声明后将循环播放音频
常用音频格式：mp3、ogg、wav格式
10、video标签
在浏览器中加入视频 兼容到IE9
<video controls autoplay loop src='视频链接' width='300'>video标签</video>
常见格式：mp4、ogv、webm、avi等格式
controls、autoplay、loop属性跟audio标签一致
11、HTML5区块标签
| 区块标签 | 说明 |
| :---------: | :----------------------------------: |
| <section> | 文档区域，语义比div大 |
| <article> | 文档的核心文章内容，会被搜索引擎抓取 |
| <aside> | 文档的非必要相关内容，如广告 |
| <nav> | 导航条 |
| <header> | 页头 |
| <main> | 网页核心部分 |
| <footer> | 页脚 |
| <address> | 地址 |
12、span标签
包裹文本，用于CSS设置
不会换行
13、<b> <u> <i>标签
| 标签 | 说明 |
| :---: | :----: |
| <b> | 加粗 |
| <u> | 下划线 |
| <i> | 倾斜 |
14、<strong> <em> <mark>标签
| 标签 | 说明 |
| :---------------: | :----------------: |
| <strong> | 代表特别重要的文字 |
| <em> | 代表强调的文字 |
| <mark>（HTML5） | 代表一段高亮的文字 |
15、<figure> <figcaption> 标签
<figure>标签代表一段独立内容，与说明<figcaption>配合使用，他是一个独立的引用单元
16、<form>标签
所有HTML表单都以一个<form>元素开始。
action属性表示表单要提交到的后台程序的网址
method属性表示表单提交方式，有get或者post(大小写都可)
<form action="",method="POST">
</form>
1）单行文本框
使用type属性为text的<input>元素可以创建单行文本框，他是一个单标签。
value属性表示已经写好的值
placeholder属性表示提示文本，将以浅色文字卸载文本框中，并不是文本框中值。
disabled属性 不用值 表示用户不能与该文本框交互，即“锁死”
<input type="text" value="123" placeholder="请输入姓名" disabled>
2）单选按钮
使用type属性被设置为radio的<input>元素可以创建单选按钮，互斥的单选按钮应该设置name属性相同
value属性，向服务器提交的就是value值
checked属性 单选按钮有checked属性表示默认选中
<p>
性别：
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</p>
3）label标签
label标签用来绑定文字和单选按钮，用户单击文字时也视为点了单选按钮。
<form>
<P>
性别：
</P>
<label>
<input type="radio" name="sex" value="男" checked>男
</label>
<label>
<input type="radio" name="sex" value="女">女
</label>
</form>
HTML4时代，label是通过for属性和单选按钮进行绑定的，即label标签不能包裹单选按钮
<input type="radio" id="nan">
<label for="nan">男</label>
4）复选框
使用type属性为checkbox的<input>元素可以创建复选框，同组复选框的name为相同值。
value属性 向服务器提交的就是value属性
<form>
<P>
请选择爱好：
</P>
<label>
<input type="checkbox" name="hobby" value="足球">足球
</label>
<label>
<input type="checkbox" name="hobby" value="篮球">篮球
</label>
<label>
<input type="checkbox" name="hobby" value="游泳">游泳
</label>
</form>
5）密码框
使用type属性设置为password的<input>元素可以创建密码框
<form>
<p>
请输入密码：
<input type="password">
</p>
</form>
6）下拉菜单
<select>标签表示下拉菜单，<option>是内部选项
下拉菜单默认选中是为<option>标签中添加selected属性
<select>
<option value="alipay" selected>支付宝</option>
<option value="wx">微信</option>
<option value="bank">网银</option>
</select>
<option>不能单独放置，<select>中只能用<option>
7）多行文本框
<textarea> </textarea>表示多行文本框
row和cols属性，用于定义多行文本框的行数列数
8）三种按钮
表单中常见的三种按钮，也都是input标签，type属性值不同
value值是按钮上的值。
用<button>时按钮上的值在 <button>按钮上的值</button>
当<button>设置了type属性后，<button>就不具备提交功能了
<button>起始标签和闭合标签之间不仅可以写文字，还可以写其他内容，比如设置一张图片。
<button><img src="" alt=""></button>
而<input>的两个标签则无法实现。
<button>和<input type="submit">按钮点击后，在谷歌浏览器上，浏览器顶部的刷新按钮会转一下，而<input type="button">则没有这个效果。
| type属性值 | 按钮种类 |
| :--------: | :---------------------------------------: |
| button | 普通按钮，可以简写为<button>``</button> |
| submit | 提交按钮 |
| reset | 重置按钮 |
9）HTML5中新增的<input>种类
| type属性 | 控件 |
| :----------: | :----------------: |
| color | 颜色选择控件 |
| data、time | 日期、时间选择控件 |
| email | 电子邮件输入控件 |
| file | 文件选择控件 |
| number | 数字输入控件 |
| range | 拖拽条 |
| search | 搜索框 |
| url | 网址输入控件 |
required属性 设置必填
type为 number、range时可设置的min和max属性，表示上下限
type为search时，并不能直接实现搜索功能，需要后台实现，与文本框的区别在于，输入内容后会出现 **× ** 来直接清除内容
type为email、url时，点击提交表单会检查这两者格式规范
10）<datalist>控件
<datalist>为输入框提供备用选项，当用户内容与备选文字相同时，会智能感应显示
<input type="text" list="province-list">
<datalsit id="province-list">
<option value="山东">山东</option>
<option value="陕西">陕西</option>
<option value="上海">
<option value="山西">
</datalsit>
17、表格标签
<table> 表格标签，用来包裹 <tr> <td>
<tr> 即table row表格行
<td>即table data表格数据
<th>表示表格的标题小格，和<td>同一层级
border属性，表示表格边框粗细，要设置在<table>才会生效
width属性，调整表格宽度，不设置时宽度由内容撑开，<table>、<td>标签可以设置该属性，而<tr>标签设置时无效
height属性，通常用于<table>、<tr>标签来调整高度
width 和 height属性单位默认px可省略；
width和height`属性只有设置的比默认宽度、高度大时才会生效
align属性可以调整table整体水平位置，属性值分别为：left、center、right代表水平居左、居中、居右显示
给<tr>设置align属性可以设置该行所有<td>中的内容的水平对齐方式
caption属性是表格的标题，他常常作为<table>的第一个子元素出现
<!-- 如图即为三行三列表格,边框宽度为1像素，表格总宽度为100像素，且第一行为标题 -->
<table border="1" width="100">
<caption>表格标题</caption>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td>B</td>
<td>B</td>
</tr>
</table>
1）单元格合并
<colspan>属性用来设置<td>或者<th>的列跨度
colspan="2"代表该小格占两个列跨度
colspan="3"代表该小格占三个列跨度
<table border="1" width="100">
<caption>表格标题</caption>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
<tr>
<td colspan="2">A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td colspan="3">B</td>
</tr>
<tr>
<td>D</td>
<td>D</td>
<td>D</td>
<td>D</td>
</tr>
</table>
<rowspan>属性用来设置<td>或者<th>的行跨度
rowspan="2"代表该小格占两个行跨度
rowspan="3"代表该小格占三个行跨度
<rowspan> <colspan>可以同时存在
2）表格其他特性
<thead>标签定义表头
<tbody>标签定义表核心内容
<tfoot>标签定义表脚，通常是汇总行
表格可以嵌套，嵌套的表格要写在<td>中
