美文网首页
HTML标签

HTML标签

作者: 只敲代码不偷桃 | 来源:发表于2016-11-03 18:12 被阅读27次

计算机要从娃娃抓起

很显然,这是一位找片未遂的中年男子万般无奈之下发出的感慨:当时技术落后,找片的时间远大于看片的时间,可以理解!但这可害苦了成千上万的少年前仆后继的进军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                           输出模板

相关文章

  • Html 学习笔记

    HTML基础 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag) HTML 标签通...

  • HTML常用标签

    HTML标签:标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML最重...

  • 2018-06-04——HTML简介

    HTML 简介 HTML 标签 ·HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 ·HTML...

  • 02.html

    Html结构标准 Html标签分类 单标签 双标签 Html标签关系分类 包...

  • HTML 常用的标签

    什么是 HTML 标签 HTML 文档和 HTML 元素是通过 HTML 标签进行标记的 HTML 标签由开始标签...

  • HTML笔记

    html标签与html元素 html标签: 由开始标签和结束标签组成的一对标签。 html元素: 从开始标签到结束...

  • HTML

    HTML简介 HTML的基本结构 HTML标签 基本标签 布局标签

  • HTML常用标签介绍

    HTML标签:通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML最重要的组成...

  • HTML标签类型

    /*HTML标签类型 html /*HTML标签类型 1.块级标签:*1....

  • html标签

    html标签 超文本标记语言(外国语简称:HTML)标记标签通常被称为HTML标签,HTML标签是HTML语言中最...

网友评论

      本文标题:HTML标签

      本文链接:https://www.haomeiwen.com/subject/hdzbuttx.html