计算机要从娃娃抓起

很显然，这是一位找片未遂的中年男子万般无奈之下发出的感慨：当时技术落后，找片的时间远大于看片的时间，可以理解！但这可害苦了成千上万的少年前仆后继的进军IT！哎.....年纪小、不懂事，坑你没商量！

一、H5标签

img

<img src="**/**.jpg" width="100" title="这个是江哥的微信二维码图片" alt="对不起, 你需要查看的图片不见了">

• title：用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容
• alt：英文alternate的缩写, 它的作用就是用于告诉浏览器, 当需要显示的图片找不到时显示什么内容
  注意：和H系列标签/p标签还有Hr标签不一样, img标签不会独占一行
• 路径(给src属性赋值)：

a. 同级同级就是"图片"和".html文件"存储在同一个文件夹中格式: src="QRCode.jpg"含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片
b. 下级下级就是"存储图片的文件夹"和".html文件"在同一个文件夹中格式: src="images/QRCode.jpg"含义: 在.html文件所在的文件夹中找到名称叫做images的文件夹然后再在images文件夹中找到名称叫做QRCode.jpg的图片
c. 上级上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中格式: src="../QRCode.jpg"含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫做QRCode.jpg其中../代表找到当前文件夹的上一级文件夹

a

a标签的格式: <a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>

• target：这个属性的作用就是专门用于控制如何跳转：
  1. _self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self
  2. _blank: 用于在新的选项卡中跳转, 也就是新建界面跳转

base

• 作用：base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开
• 注意点：
  1. base标签必须写在head标签的开始标签和结束标签之间
  2. 如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行

锚点

要想实现通过a标签跳转到指定的位置分为两步：
<a href="#center">跳转到中部</a><h2 id="center">我是中部</h2>

1. 给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
2. 告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少

无序列表(ul、li)

• 应用场景：导航条、新闻列表、商品列表
  在webstorm中如何快速编写一个ul的格式：
  ul>li： 生成一对ul标签, 然后在这对ul标签中再生成一对li标签
  ul>li3*：生成一对ul标签, 然后在这对ul标签中再生成3对li标签

定义列表(dl、dt)

• 应用场景：做网站尾部的相关信息、做图文混排
  相关用法基本上和无序列表一样

form(表单)

<form action="http://www.baidu.com">
  <表单元素>(常见的表单元素有<input>)
</form>```
###### input
* 明文输入框：(默认值为lzy)
  `账号:<input type="text" value="lzy">`
* 暗文输入框：
 ` 密码:<input type="password">`
* 单选框：
  `<input type="radio" name="xx" checked="checked">男`
* 多选框：
  `<input type="checkbox">篮球`
* 单选框注意点:
>1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值
  2.要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性
  3.在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐大家不要省略取值


![input](https://img.haomeiwen.com/i1480477/f5b05b8e4e28df86.gif?imageMogr2/auto-orient/strip)

* 按钮
  * 普通按钮：
    `<input type="button" value="我是按钮">`
  * 图片按钮
    `<input type="image" src="images/register.jpg">`
  * 重置按钮
    `<input type="reset" value="清空">`
    作用：用于清空表单中已经填写好的数据
  * 提交按钮
    `<input type="submit">`
    作用：将表单中已经填写好的数据, 提交到远程服务器
  * 隐藏域
    `<input type="hidden" name="cc" value="kukuku">`
    作用 : 配合提交按钮将一些数据默默的悄悄咪咪的提交到服务器

![按钮.gif](https://img.haomeiwen.com/i1480477/bacda40756130fe2.gif?imageMogr2/auto-orient/strip)
###### Label
* 作用：默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
* 格式：
  1. 将文字利用label标签包裹起来
  2. 给输入框添加一个id属性
  3. 在label标签中通过for属性和输入框中的id进行绑定即可
  ` <label for="account">账号:</label><input type="text" id="account">`

![Label.gif](https://img.haomeiwen.com/i1480477/17ae8681b5a78007.gif?imageMogr2/auto-orient/strip)

###### datalist
* 作用：给输入框绑定待选项
* 如何给输入框绑定待选列表
  1. 搞一个输入框
  2. 搞一个datalist列表
  3. 给datalist列表标签添加一个id
  4. 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

请输入你的喜好: <input type="text" list="love">
<datalist id="love">
<option>抽烟</option>
<option>喝酒</option>
<option>烫头</option>
</datalist>```

datalist.gif

表单标签-H5

• 邮箱：
  <input type="email"> 可以自动校验输入的内容是否符合邮箱的格式
• 域名:
  <input type="url"> 可以自动校验输入的内容是否是URL地址
• 电话:
  <input type="number"> 输入框中只能输入数字
• 时间:
  <input type="date"> 可以通过日历来选择时间
• 颜色:
  <input type="color"> 可以通过取色板来选择颜色

表单标签-H5.gif

select

• 作用：用于定义下拉列表
• 格式:

<select>  
    <optgroup label="分组名称">    
        <option>列表数据</option>  
    </optgroup>
</select>```
* 注意点
> 1. 下拉列表不能输入内容, 但是可以直接在列表中选择内容
 2. 可以通过给option标签添加一个selected属性来指定列表的默认值
 3. 可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

![select.gif](https://img.haomeiwen.com/i1480477/8b2885c0875ce308.gif?imageMogr2/auto-orient/strip)
###### video
* 作用: 播放视频
* video标签属性：
  * src: 用于告诉video标签需要播放的视频地址
  * autoplay: 用于告诉video标签是否需要自动播放视频
  * controls: 用于告诉video标签是否需要显示控制条
  * poster: 用于告诉video标签视频没有播放之前显示的占位图片
  * loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
  * preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
  * muted:静音

###### audio
* 作用: 播放音频
* 注意点:
  * audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
  * 只不过有3个属性不能用, height/width/poster

###### 详情(details)和概要(summary)
* 作用：利用summary标签来描述概要信息, 利用details标签来描述详情信息默认情况下是折叠展示, 想看见详情必须点击
* 格式:

<details>
<summary>概要信息</summary>
详情信息....
</details>```

summary.gif

marquee(跑马灯)

• 属性:
  • direction: 设置滚动方向 left/right/up/down
  • scrollamount: 设置滚动速度, 值越大就越快
  • loop: 设置滚动次数, 默认是-1, 也就是无限滚动
  • behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
• 注意点:

marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好

字符实体

• 空格, 一个 就是一个空格, 有多少个 就有多少个空格
• < 小于符号 <
• > 大于符号 >
• © 版权符号

WebStorm快捷键总结（后续更新....）

 shift  + Enter                     软回车 ,无论在前一行代码的什么位置,都能定位到下一行
 command + option + l      代码格式化
 command + d                 直接粘贴当前行的内容
 command + delete                 直接删除当前行的内容
 command + x                           剪切行
 command + j                           输出模板