1. `<!-- 什么是HTML  超文本标记语言  由标签(属性和实体组成)和内容组成 -->
  2. <!-- 定义文档类型 -->
  3. <!DOCTYPE html>
  4. <!-- html开始 -->
  5. <html>
  6. <!-- 头部开始 -->
  7.     <head>
  8.     <!-- 设置浏览器的阅读编码 -->
  9.         <meta charset="utf-8">
  10.         <!-- 定义标题  title是搜索优化的必要方式,有利于搜索时排名靠前,增加访问量 -->
  11.         <title>H5</title>
  12.         <!-- 信息标签 描述网页文档的属性,提供页面信息 比如针对搜索引擎和更新频度的描述的关键字 -->
  13.  
  14.         <!-- keywords,它为文档定义了一组关键字 搜索引擎会根据这些关键字对文档进行分类 -->
  15.         <meta name="keywords" content="html,css,js,php,c">
  16.         <meta name="description" content="万事开头难,只要肯攀登.">
  17.     </head>
  18.     <!-- 头部结束 -->
  19.     <!-- 实体开始 -->
  20.     <body>
  21.  
  22.       <!-- 实体 -->
  23.       <!-- <h1>&lt;我是小于号</h1> -->
  24.       <!-- <h1>&gt;我是大于号</h1> -->
  25.       <!-- <h1>&amp;我是&符</h1> -->
  26.       <!-- <h1>&nbsp;我是空格</h1> -->
  27.       <!-- <h1>&laquo;我是<<</h1> -->
  28.       <!-- <h1>&raquo;我是>></h1> -->
  29.       <!-- <h1>&times;我是x</h1> -->
  30.  
  31.       <!-- 颜色 -->
  32.       <!-- 1.十进制 -->
  33.       <!-- rgb(255,0,255); -->
  34.       <!-- 2.十六进制 -->
  35.       <!-- #ff0000 -->
  36.       <!-- 3.带有透明度 -->
  37.       <!-- rgba(255,0,0,0.5); -->
  38.       <!-- 4.英文 -->
  39.       <!-- red,blue -->
  40.  
  41.       <!-- 格式标签 -->
  42.       <!-- br 换行,单标签 适用于行标签-->
  43.       <!-- hr 导航线,单标签 适用于行标签-->
  44.       <!-- nobr 不换行,双标签  强制不换行 -->
  45.       <!-- p 段落标签 双标签 align属性 水平对齐方式 left right center -->
  46.       <!-- center 居中标签 双标签  -->
  47.       <!-- pre 显示源代码 双标签 -->
  48.       <!-- ul 无序列表 双标签 -->
  49.       <!-- ol 有序列表 双标签 -->
  50.       <!-- li 列表项 双标签 -->
  51.       <!-- dl 自定义列表 双标签 -->
  52.       <!-- dt 自定义标题 双标签 -->
  53.       <!-- dd 自定义内容 双标签 -->
  54.       <!-- 100<sup>10</sup>  文字上标标签 双标签 -->
  55.       <!-- 100<sub>10</sub>  文字上标标签 双标签 -->
  56.       <!-- 标签分类: -->
  57.       <!-- 1.块标签 独占一行,自动换行 -->
  58.       <!-- 2.行标签 自己有多宽占多宽 -->
  59.       <!-- 文本标签 -->
  60.       <!-- p h i u fout -->
  61.       <!-- h1 到 h6 加粗字体 -->
  62.       <!-- b 粗体 -->
  63.       <!-- i 斜体 -->
  64.       <!-- <em>强调斜体</em>> -->
  65.       <!-- u 下划线 -->
  66.       <!-- del 删除线 双标签 -->
  67.       <!--<small>我是小写的</small>-->
  68.       <!--<mark>我是记号</mark>-->
  69.       <!--<strong>我是着重的</strong>-->
  70.       <!-- 图片标签 -->
  71.       <!-- <img src="./dog.jpg" alt="图片不在了" title="我是图片" width="100px" height="100px"> -->
  72.  
  73.       <!-- 超链接  target 打开链接的方式-->
  74.       <!-- <a href="http://www.baidu.com" target="_blank">百度一下<img src="./dog.jpg"></a> -->
  75.       <!-- <style>a{text-decoration:none}</style> 去除a链接的下划线 -->
  76.  
  77.       <!-- url  统一资源定位符-->
  78.       <!-- protocol(协议)://hostname(主机名/域名)[:port(端口号)]/path(资源文件)/[;parameters(参数)][?query(查询)]#fragment(信息片段) -->
  79.       <!-- 相对路径:从当前路径开始的路径 ./   ../上一级目录 -->
  80.       <!-- 绝对路径:从根目录开始的路径   / 根目录 -->
  81.  
  82.       <!-- 锚点 定位网页内部的链接 -->
  83.       <!-- <a name="#one"></a>    <a name="one"></a>    <a name="index#one"></a>  # 返回 -->
  84.  
  85.       <!-- 表格 -->
  86.       <!--表格字体居中 table{text-align:center}-->
  87.       <!-- <table border="1px" cellspacing="0px" width="300px"> -->
  88.       <!-- <caption>用户名</caption> -->
  89.           <!-- <tr> -->
  90.               <!-- <th>id</th> -->
  91.               <!-- <th>用户名</th> -->
  92.               <!-- <th>性别</th> -->
  93.           <!-- </tr> -->
  94.           <!-- <tr> -->
  95.               <!-- <td colspan="3">1</td> -->
  96.               <!-- <td>yhq</td> -->
  97.               <!-- <td>1</td> -->
  98.           <!-- </tr> -->
  99.           <!-- <tr> -->
  100.               <!-- <td rowspan="2">2</td> -->
  101.               <!-- <td>qhh</td> -->
  102.               <!-- <td>2</td> -->
  103.           <!-- </tr> -->
  104.           <!-- <tr> -->
  105.               <!-- <td>3</td> -->
  106.               <!-- <td>xyg</td> -->
  107.               <!-- <td>1</td> -->
  108.           <!-- </tr> -->
  109.       <!-- </table> -->
  110.  
  111.       <!-- 表单 get 会覆盖  可以 get + post -->
  112.       <!-- enctype:将数据发送到服务器时浏览器使用的编码类型  -->
  113.  
  114.       <!-- type:代表输入域的显示方式 -->
  115.       <!-- name:此表单项名称 -->
  116.       <!-- value:输入域的值 -->
  117.       <!-- size:输入域的长度 -->
  118.       <!-- maxlength:输入域最多输入文字长度 -->
  119.       <!-- readonly:只读 值可以带过去   -->
  120.       <!-- disabled:只读 不能带值 无法获取焦点 -->
  121.  
  122.       <!-- text:文字输入域(输入型) -->
  123.       <!-- password:密码域(输入型) -->
  124.       <!-- file:输入文件路径(输入型) -->
  125.       <!-- radio:单选框 选择一个且必须一个(选择型) -->
  126.       <!-- checkbox:复选框 零到多个(选择型) -->
  127.       <!-- hidden:隐藏域 -->
  128.       <!-- image:使用图片显示按钮 作用等于submit -->
  129.  
  130.       <form action="" method="post" target="_blank" enctype="multipart/form-data">
  131.               <p>
  132.                  <span>用户名:</span>
  133.                  <input type="text" name="username" maxlength="6" disabled value="杨洪全"></input>
  134.               </p>
  135.               <p>
  136.                   <span>密&nbsp;码:</span>
  137.                   <input type="password" name="password"></input>
  138.               </p>
  139.               <p>
  140.                   <span>选择性别:</span>
  141.                   <label><input type="radio" value="0" checked name="sex">男</input></label>
  142.                   <label><input type="radio" value="1" name="sex">女</input></label>
  143.               </p>
  144.               <p>
  145.                   <span>选择颜色:</span>
  146.                   <label><input type="checkbox" name="love[]" checked value="red">红色</input></label>
  147.                   <label><input type="checkbox" name="love[]" value="blue">蓝色</input></label>
  148.                   <label><input type="checkbox" name="love[]" value="yellow">黄色</input></label>
  149.               </p>
  150.               <span style="resize: none;vertical-align:top">请选择城市:</span>
  151.               <!-- multiple:多选 -->
  152.               <select name="city" multiple>
  153.                   <option value="0">北京</option>
  154.                   <option value="1" selected>上海</option>
  155.                   <option value="2">广州</option>
  156.               </select>
  157.               <p>
  158.                   <span>文件上传:</span>
  159.                   <input type="file"></input>
  160.               </p>
  161.               <p>
  162.                   <span>留言板:</span>
  163.                   <textarea name="content" style="resize: none;vertical-align:top"></textarea>
  164.               </p>
  165.               <P>
  166.                   <input type="submit" value="注册"></input>
  167.                   <input type="reset" value="取消"></input>
  168.  
  169.               </P>
  170.       </form>
  171.  
  172.        <!-- 标签定义嵌入的内容,比如插件 -->
  173.       <!-- <embed src="" type=""></embed> -->
  174.  
  175.       <!-- 视频标签 定义视频  DOM play() 开始播放 pause() 暂停-->
  176.       <!-- autoplay:如果出现该属性,则视频在就绪后马上播放       -->
  177.       <!-- controls:如果出现该属性,则向用户显示控件 -->
  178.       <!-- loop:如果出现该属性,则当媒介文件完成播放后再次开始播放 循环播放 可以给数字 ="3" -->
  179.       <!-- <video autoplay="autoplay" controls="controls" loop="loop" src="url"></video> -->
  180.  
  181.       <!-- 音频标签 标签定义声音-->
  182.       <!-- autoplay:如果出现该属性,则视频在就绪后马上播放       -->
  183.       <!-- controls:如果出现该属性,则向用户显示控件 -->
  184.       <!-- <audio autoplay="autoplay" controls="controls" src=""></audio> -->
  185.  
  186. <!--       <audio controls>
  187.          <source src="./see.mp3">
  188.          <source src="./see.wav">
  189.          <source src="./see.ogg">
  190.          您的浏览器不支持
  191.       </audio> -->
  192.  
  193.     </body>
  194.     <!-- 实体结束 -->
  195.     <!-- html结束 -->
  196. </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. MQ选型对比RabbitMQ RocketMQ ActiveMQ Kafka（外加redis对比及其实现）

    rocketmq 4.3开始支持事务https://www.cnblogs.com/hzmark/p/rocket_txn.html 参考:rabbitMQ.activeMQ.zeroMQ.Kafka ...

  2. NPM安装步骤

    一.使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资 ...

  3. oracle12c的日志查看

    查看GI日志:切换到grid用户 查看DB日志:切换到oracle的目录下 执行[oracle@swnode1 ~]$ adrci [oracle@swnode1 ~]$ adrci ADRCI: R ...

  4. opencv学习之路（14）、形态学之膨胀腐蚀

    一.膨胀腐蚀概述(对高亮部分进行操作) 二.膨胀 三.腐蚀 四.代码 1.查看结构元素 #include<opencv2/opencv.hpp> #include<iostream& ...

  5. jsxyhelu的GitHub使用方法

    如果只是使用Clone不能称得上是完全使用了GitHub,必须完成PullRequest,而且最好是对大型.带自动构建项目进行PR(比如OpenCV),这样才叫完全掌握GitHub的使用方法,这里分享 ...

  6. 20145325张梓靖 《网络对抗技术》 Web安全基础实践

    20145325张梓靖 <网络对抗技术> Web安全基础实践 实验内容 使用webgoat进行XSS攻击.CSRF攻击.SQL注入 XSS攻击:Stored XSS Attacks.Ref ...

  7. OO第三次博客作业---透过代码看设计

    不得不说的JSF 经过前几次作业的煎熬.出租车的代码量不断地增多.而出租车问题在不断的完善,这也就牵涉到一个问题,那就是最初出租车程序的设计问题,如果一开始设计的就有问题的话,那么在后来的过程中就会遇 ...

  8. ubuntu上解决访问github慢的方法

    1.进入终端命令行模式,输入sudo vi /etc/hosts 2.输入i进入编辑命令,英文输入法输入G,vim编辑器跳到hosts文件的最后一行 3.用浏览器访问 IPAddress.com 使用 ...

  9. Click()与Submit()

    <input type="button" /> 定义可点击的按钮,但没有任何行为.如果你不写javascript 的话,按下去什么也不会发生. button 类型常用于 ...

  10. [转]抓取当前登录用户登录密码的工具：mimipenguin

    Github项目地址 前有Mimikatz,今有mimipenguin,近日国外安全研究员huntergregal发布了工具mimipenguin,一款Linux下的密码抓取神器,可以说弥补了Linu ...