计算机要从娃娃抓起
很显然,这是一位找片未遂的中年男子万般无奈之下发出的感慨:当时技术落后,找片的时间远大于看片的时间,可以理解!但这可害苦了成千上万的少年前仆后继的进军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:这个属性的作用就是专门用于控制如何跳转:
- _self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self
- _blank: 用于在新的选项卡中跳转, 也就是新建界面跳转
base
- 作用:base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开
- 注意点:
- base标签必须写在head标签的开始标签和结束标签之间
- 如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行
锚点
要想实现通过a标签跳转到指定的位置分为两步:
<a href="#center">跳转到中部</a><h2 id="center">我是中部</h2>
- 给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
- 告诉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>```
表单标签-H5
- 邮箱:
<input type="email">
可以自动校验输入的内容是否符合邮箱的格式 - 域名:
<input type="url">
可以自动校验输入的内容是否是URL地址 - 电话:
<input type="number">
输入框中只能输入数字 - 时间:
<input type="date">
可以通过日历来选择时间 - 颜色:
<input type="color">
可以通过取色板来选择颜色
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>```
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 输出模板
网友评论