`<!-- 什么是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. JavaScript中冒泡与事件委托

    冒泡 事件触发后事件流的三个阶段按顺序依次是: 1.捕获阶段 2.目标阶段 3.冒泡阶段 大盒子包裹小盒子,两个盒子都分别添加点击事件,当点击小盒子,两个盒子的事件都会触发. 事件委托 下级元素委托上 ...

  2. NetworkExtension

    一, 按照网上的方法: iOS 无法获取 WiFi 列表?一定是因为你不知道这个框架 提交了申请.两个小时候后苹果回应邮件.意思就是如果只是使用 App Proxy, Content Filter, ...

  3. Android灯光系统框架分析【转】

    本文转载自: 首先别人的APP要能直接访问到你写的硬件或者不经过任何修改的APP能直接使用你的驱动,就需要使用系统自带的JNI,所以我们需要写出符合系统自带JNI文件的HAL文件和驱动程序,下面具体分 ...

  4. Nginx 配置 Jenkins 反向代理

    安装 Nginx 参考之前的一篇文章 Nginx 安装配置 安装 Jenkins 参考之前的一篇文章 Linux 搭建 Jenkins Nginx 配置 Jenkins 的反向代理 # /etc/ng ...

  5. POJ 3903 Stock Exchange（LIS || 线段树）题解

    题意:求最大上升子序列 思路:才发现自己不会LIS,用线段树写的,也没说数据范围就写了个离散化,每次查找以1~a[i]-1结尾的最大序列答案,然后更新,这样遍历一遍就行了.最近代码总是写残啊... 刚 ...

  6. FileAttributes Enum

    https://docs.microsoft.com/en-us/dotnet/api/system.io.fileattributes?view=netframework-4.7.2 读取FileA ...

  7. Tutorial: Generate BBox or Rectangle to locate the target obejct

    Tutorial: Generate BBox or Rectangle to locate the target obejct clc;close all;clear all; Img=imread ...

  8. 多线程tips（面试常用）

    描述线程和进程的区别? 我们运行一个exe,就是一个进程实例,系统中有很多个进程.每一个进程都有自己的内存地址空间,每个地址相当于一个独立的边界,有自己独占的资源,进程之间不能共享代码和数据空间.(可 ...

  9. java.lang.ClassNotFoundException但是项目里明明已经存在

    本文为博主原创,转载需注明出处: 在开始新的项目的时候,启动报 java.lang.ClassNotFoundException,但在项目中是可以定位到缺少的类:异常为: Caused by: jav ...

  10. mybatis动态传入表名、列名

    原文:http://luoyu-ds.iteye.com/blog/1517607 要实现动态传入表名.列名,需要做如下修改 添加属性statementType=”STATEMENT” (可省略) 同 ...