`<!-- 什么是HTML  超文本标记语言  由标签(属性和实体组成)和内容组成 -->

<!-- 定义文档类型 -->

<!DOCTYPE html>

<!-- html开始 -->

<html>

<!-- 头部开始 -->

    <head>

    <!-- 设置浏览器的阅读编码 -->

        <meta charset="utf-8">

        <!-- 定义标题  title是搜索优化的必要方式,有利于搜索时排名靠前,增加访问量 -->

        <title>H5</title>

        <!-- 信息标签 描述网页文档的属性,提供页面信息 比如针对搜索引擎和更新频度的描述的关键字 -->

        <!-- keywords,它为文档定义了一组关键字 搜索引擎会根据这些关键字对文档进行分类 -->

        <meta name="keywords" content="html,css,js,php,c">

        <meta name="description" content="万事开头难,只要肯攀登.">

    </head>

    <!-- 头部结束 -->

    <!-- 实体开始 -->

    <body>

      <!-- 实体 -->

      <!-- <h1>&lt;我是小于号</h1> -->

      <!-- <h1>&gt;我是大于号</h1> -->

      <!-- <h1>&amp;我是&符</h1> -->

      <!-- <h1>&nbsp;我是空格</h1> -->

      <!-- <h1>&laquo;我是<<</h1> -->

      <!-- <h1>&raquo;我是>></h1> -->

      <!-- <h1>&times;我是x</h1> -->

      <!-- 颜色 -->

      <!-- 1.十进制 -->

      <!-- rgb(255,0,255); -->

      <!-- 2.十六进制 -->

      <!-- #ff0000 -->

      <!-- 3.带有透明度 -->

      <!-- rgba(255,0,0,0.5); -->

      <!-- 4.英文 -->

      <!-- red,blue -->

      <!-- 格式标签 -->

      <!-- br 换行,单标签 适用于行标签-->

      <!-- hr 导航线,单标签 适用于行标签-->

      <!-- nobr 不换行,双标签  强制不换行 -->

      <!-- p 段落标签 双标签 align属性 水平对齐方式 left right center -->

      <!-- center 居中标签 双标签  -->

      <!-- pre 显示源代码 双标签 -->

      <!-- ul 无序列表 双标签 -->

      <!-- ol 有序列表 双标签 -->

      <!-- li 列表项 双标签 -->

      <!-- dl 自定义列表 双标签 -->

      <!-- dt 自定义标题 双标签 -->

      <!-- dd 自定义内容 双标签 -->

      <!-- 100<sup>10</sup>  文字上标标签 双标签 -->

      <!-- 100<sub>10</sub>  文字上标标签 双标签 -->

      <!-- 标签分类: -->

      <!-- 1.块标签 独占一行,自动换行 -->

      <!-- 2.行标签 自己有多宽占多宽 -->

      <!-- 文本标签 -->

      <!-- p h i u fout -->

      <!-- h1 到 h6 加粗字体 -->

      <!-- b 粗体 -->

      <!-- i 斜体 -->

      <!-- <em>强调斜体</em>> -->

      <!-- u 下划线 -->

      <!-- del 删除线 双标签 -->

      <!--<small>我是小写的</small>-->

      <!--<mark>我是记号</mark>-->

      <!--<strong>我是着重的</strong>-->

      <!-- 图片标签 -->

      <!-- <img src="./dog.jpg" alt="图片不在了" title="我是图片" width="100px" height="100px"> -->

      <!-- 超链接  target 打开链接的方式-->

      <!-- <a href="http://www.baidu.com" target="_blank">百度一下<img src="./dog.jpg"></a> -->

      <!-- <style>a{text-decoration:none}</style> 去除a链接的下划线 -->

      <!-- url  统一资源定位符-->

      <!-- protocol(协议)://hostname(主机名/域名)[:port(端口号)]/path(资源文件)/[;parameters(参数)][?query(查询)]#fragment(信息片段) -->

      <!-- 相对路径:从当前路径开始的路径 ./   ../上一级目录 -->

      <!-- 绝对路径:从根目录开始的路径   / 根目录 -->

      <!-- 锚点 定位网页内部的链接 -->

      <!-- <a name="#one"></a>    <a name="one"></a>    <a name="index#one"></a>  # 返回 -->

      <!-- 表格 -->

      <!--表格字体居中 table{text-align:center}-->

      <!-- <table border="1px" cellspacing="0px" width="300px"> -->

      <!-- <caption>用户名</caption> -->

          <!-- <tr> -->

              <!-- <th>id</th> -->

              <!-- <th>用户名</th> -->

              <!-- <th>性别</th> -->

          <!-- </tr> -->

          <!-- <tr> -->

              <!-- <td colspan="3">1</td> -->

              <!-- <td>yhq</td> -->

              <!-- <td>1</td> -->

          <!-- </tr> -->

          <!-- <tr> -->

              <!-- <td rowspan="2">2</td> -->

              <!-- <td>qhh</td> -->

              <!-- <td>2</td> -->

          <!-- </tr> -->

          <!-- <tr> -->

              <!-- <td>3</td> -->

              <!-- <td>xyg</td> -->

              <!-- <td>1</td> -->

          <!-- </tr> -->

      <!-- </table> -->

      <!-- 表单 get 会覆盖  可以 get + post -->

      <!-- enctype:将数据发送到服务器时浏览器使用的编码类型  -->

      <!-- type:代表输入域的显示方式 -->

      <!-- name:此表单项名称 -->

      <!-- value:输入域的值 -->

      <!-- size:输入域的长度 -->

      <!-- maxlength:输入域最多输入文字长度 -->

      <!-- readonly:只读 值可以带过去   -->

      <!-- disabled:只读 不能带值 无法获取焦点 -->

      <!-- text:文字输入域(输入型) -->

      <!-- password:密码域(输入型) -->

      <!-- file:输入文件路径(输入型) -->

      <!-- radio:单选框 选择一个且必须一个(选择型) -->

      <!-- checkbox:复选框 零到多个(选择型) -->

      <!-- hidden:隐藏域 -->

      <!-- image:使用图片显示按钮 作用等于submit -->

      <form action="" method="post" target="_blank" enctype="multipart/form-data">

              <p>

                 <span>用户名:</span>

                 <input type="text" name="username" maxlength="6" disabled value="杨洪全"></input>

              </p>

              <p>

                  <span>密&nbsp;码:</span>

                  <input type="password" name="password"></input>

              </p>

              <p>

                  <span>选择性别:</span>

                  <label><input type="radio" value="0" checked name="sex">男</input></label>

                  <label><input type="radio" value="1" name="sex">女</input></label>

              </p>

              <p>

                  <span>选择颜色:</span>

                  <label><input type="checkbox" name="love[]" checked value="red">红色</input></label>

                  <label><input type="checkbox" name="love[]" value="blue">蓝色</input></label>

                  <label><input type="checkbox" name="love[]" value="yellow">黄色</input></label>

              </p>

              <span style="resize: none;vertical-align:top">请选择城市:</span>

              <!-- multiple:多选 -->

              <select name="city" multiple>

                  <option value="0">北京</option>

                  <option value="1" selected>上海</option>

                  <option value="2">广州</option>

              </select>

              <p>

                  <span>文件上传:</span>

                  <input type="file"></input>

              </p>

              <p>

                  <span>留言板:</span>

                  <textarea name="content" style="resize: none;vertical-align:top"></textarea>

              </p>

              <P>

                  <input type="submit" value="注册"></input>

                  <input type="reset" value="取消"></input>

              </P>

      </form>

       <!-- 标签定义嵌入的内容,比如插件 -->

      <!-- <embed src="" type=""></embed> -->

      <!-- 视频标签 定义视频  DOM play() 开始播放 pause() 暂停-->

      <!-- autoplay:如果出现该属性,则视频在就绪后马上播放       -->

      <!-- controls:如果出现该属性,则向用户显示控件 -->

      <!-- loop:如果出现该属性,则当媒介文件完成播放后再次开始播放 循环播放 可以给数字 ="3" -->

      <!-- <video autoplay="autoplay" controls="controls" loop="loop" src="url"></video> -->

      <!-- 音频标签 标签定义声音-->

      <!-- autoplay:如果出现该属性,则视频在就绪后马上播放       -->

      <!-- controls:如果出现该属性,则向用户显示控件 -->

      <!-- <audio autoplay="autoplay" controls="controls" src=""></audio> -->

<!--       <audio controls>

         <source src="./see.mp3">

         <source src="./see.wav">

         <source src="./see.ogg">

         您的浏览器不支持

      </audio> -->

    </body>

    <!-- 实体结束 -->

    <!-- html结束 -->

</html>

HTML标签使用的更多相关文章

  1. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  2. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  7. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  9. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  10. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. Nginx：论高并发，在座各位都是渣渣

    NGINX 在网络应用中表现超群,在于其独特的设计.许多网络或应用服务器大都是基于线程或者进程的简单框架,NGINX突出的地方就在于其成熟的事件驱动框架,它能应对现代硬件上成千上万的并发连接. NGI ...

  2. PHP命名空间(Namespace)的使用简介

    原文链接:https://www.cnblogs.com/zhouguowei/p/5200878.html 可以导入命名空间也可以导入命名空间的类 <?php namespace Blog\A ...

  3. NOIP 2017 游(划水)记

    Day 0 上午,大概做了一套(大)信(水)心题. 让我想想我题目都是些什么鬼.. T1:大水题.什么sort一下就过了.据说lemon上用map不会被卡常(lemon上评测,程序跑得蜜汁快). T2 ...

  4. HihoCoder 1236 Scores - bitset - 分块

    Kyle is a student of Programming Monkey Elementary School. Just as others, he is deeply concerned wi ...

  5. centos6配置网络常见问题

    1. 启用网卡 查看网卡模块: lsmod 移除网卡:modprobe -r e1000 装载网卡: modprobe e1000 2. 配置网络 vim /etc/sysconfig/network ...

  6. Docker 配置阿里云镜像加速器

    由于国内访问直接访问docker hub网速比较慢,拉取镜像的时间就会比较长.一般我们会使用镜像加速或者直接从国内的一些平台镜像仓库上拉取. 根据网上提供的方案,有网易,daocloud,ustc等解 ...

  7. vue的全局方法和局部方法

    var infiniteScroll = require('vue-infinite-scroll') 等价写法 import infiniteScroll from 'vue-infinite-sc ...

  8. [easyui] - 在easyui的table中展示提示框

    因为在easyui的table中字段过多,而无法展示全时,被迫只能使用这个方法. 使用方式: 在 $('#dg').datagrid({ 后的 queryParams: form2Json('sear ...

  9. TIM定时器的应用

    TIM定时器的应用   ①输入捕获的应用: 上一节,我已阐述TIM的输入捕获具体作用有两个(如下图):     对输入信号的测量:                                    ...

  10. Docker7之Docker overview

    Docker is an open platform for developing, shipping, and running applications. Docker enables you to ...