HTML标签

计算机要从娃娃抓起

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

一、H5标签

img

对不起, 你需要查看的图片不见了

  • 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标签的格式: 需要展现给用户查看的内容

  • target:这个属性的作用就是专门用于控制如何跳转:
    1. _self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self
    2. _blank: 用于在新的选项卡中跳转, 也就是新建界面跳转
base
  • 作用:base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开
  • 注意点:
    1. base标签必须写在head标签的开始标签和结束标签之间
    2. 如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行
锚点

要想实现通过a标签跳转到指定的位置分为两步:
跳转到中部

我是中部

  1. 给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
  2. 告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
无序列表(ul、li)
  • 应用场景:导航条、新闻列表、商品列表
    在webstorm中如何快速编写一个ul的格式:
    ul>li: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签
    ul>li3*:生成一对ul标签, 然后在这对ul标签中再生成3对li标签
定义列表(dl、dt)
  • 应用场景:做网站尾部的相关信息、做图文混排
    相关用法基本上和无序列表一样

form(表单)

<表单元素>(常见的表单元素有)
``` ###### input * 明文输入框:(默认值为lzy) `账号:` * 暗文输入框: ` 密码:` * 单选框: `男` * 多选框: `篮球` * 单选框注意点: >1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值 2.要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性 3.在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐大家不要省略取值 ![input](http://upload-images.jianshu.io/upload_images/1480477-f5b05b8e4e28df86.gif?imageMogr2/auto-orient/strip) * 按钮 * 普通按钮: `` * 图片按钮 `` * 重置按钮 `` 作用:用于清空表单中已经填写好的数据 * 提交按钮 `` 作用:将表单中已经填写好的数据, 提交到远程服务器 * 隐藏域 `` 作用 : 配合提交按钮将一些数据默默的悄悄咪咪的提交到服务器 ![按钮.gif](http://upload-images.jianshu.io/upload_images/1480477-bacda40756130fe2.gif?imageMogr2/auto-orient/strip) ###### Label * 作用:默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定 * 格式: 1. 将文字利用label标签包裹起来 2. 给输入框添加一个id属性 3. 在label标签中通过for属性和输入框中的id进行绑定即可 ` ` ![Label.gif](http://upload-images.jianshu.io/upload_images/1480477-17ae8681b5a78007.gif?imageMogr2/auto-orient/strip) ###### datalist * 作用:给输入框绑定待选项 * 如何给输入框绑定待选列表 1. 搞一个输入框 2. 搞一个datalist列表 3. 给datalist列表标签添加一个id 4. 给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

请输入你的喜好:




```

HTML标签_第1张图片
datalist.gif

表单标签-H5
  • 邮箱:
    可以自动校验输入的内容是否符合邮箱的格式
  • 域名:
    可以自动校验输入的内容是否是URL地址
  • 电话:
    输入框中只能输入数字
  • 时间:
    可以通过日历来选择时间
  • 颜色:
    可以通过取色板来选择颜色
HTML标签_第2张图片
表单标签-H5.gif
select
  • 作用:用于定义下拉列表
  • 格式:
```
* 注意点
> 1. 下拉列表不能输入内容, 但是可以直接在列表中选择内容
 2. 可以通过给option标签添加一个selected属性来指定列表的默认值
 3. 可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

![select.gif](http://upload-images.jianshu.io/upload_images/1480477-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标签来描述详情信息默认情况下是折叠展示, 想看见详情必须点击
* 格式:


概要信息
详情信息....
```

HTML标签_第3张图片
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                           输出模板

你可能感兴趣的:(HTML标签)