换行符：<br/>
首部:
<!DOCTYPE>: 说明html文档使用的标准, 在HTML5中仅为 <!DOCTYPE html>
1、头标签

  • <head></head>：在head里使用的标签为头标签

    • <title></title>:在标签上显示的内容　　
    • <meta>:设置页面的一些相关内容　　
      • 实现页面定时跳转：<meta http-equiv="refresh" content="秒数;url=路径" />　　　　
    • <base />:设置超链接的一些内容　　
    • <link />:引入外部文件　　
      • 属性：　　　　

        • rel:当前文档与被链接文档之间的关系　　　　　　
        • type：被链接文档的 MIME 类型　　　　　　
        • href：文件路径　　　　　　
      • 引入css文件:<link rel="stylesheet" type="text/css" href="文件路径" />　　　　
    • <style></style>:定义样式信息，与css文件相同　　

2、文字标签和注释标签

  • 文字标签：修改文字样式

    • <font></font>　　
    • 属性：　　
      • size:文字的大小，取值范围1-7，超出7，默认是7　　　　
      • color:文字颜色　　　　
        • 两种表示方式：　　　　　　

          • 英文单词：red green ......　　　　　　　　
          • 使用十六进制数表示 #ffffff　　　　　　　　
    • <b></b>:加粗　　
    • <s></s>:删除线　　
    • <u></u>:下划线　　
    • <i></i>:斜体　　
    • <pre></pre>:原样输出　　
    • <sub></sub>:上角标　　
    • <sup></sup>:下角标　　
    • <p></p>:段落标签，比br标签多一行　　
  • 注释标签
    • <!-- html的注释 -->　　

3、标题标签、水平线标签和特殊字符

  • 标题标签

    • <h1></h1> <h2></h2> ......<h6></h6>　　
    • 从h1到h6，大小依次变小，同时自动换行　　
  • 水平线标签
    • <hr/>　　
    • 属性：　　
      • size:水平线的粗细，取值范围1-7　　　　
      • color:颜色　　　　
  • 特殊字符
    • < &lt;　　
    • > &gt;　　
    • 空格 &nbsp;　　
    • & &amp;　　

4、列表标签

  • <dl> </dl>:表示列表的范围

    • 在dl里面 <dt> </dt>:上层内容　　
    • 在dl里面 <dd> </dd>:下层内容　　
  • <ol> </ol>:有序列表的范围
    • 属性：type 设置排序方式 1 a i　　
    • 在ol里面 <li> 具体内容 </li>　　
  • <ul> </ul>:无序列表的范围
    • 属性：type 空心圆 circle 实心圆 disc 实心方块 square 默认 disc　　
    • 在ul里面 <li> </li>　　

5、图像标签

  • <figure>

    • 一般用于图片的布局　　
  • <img />
    • 属性：　　

      • src：图片路径　　　　
      • width：图片宽度　　　　
      • height：图片高度　　　　
      • title: 当鼠标放上去时显示的文字　　　　
      • alt：图片读取异常时显示文字（图片上显示文字（兼容性差））　　　　

6、超链接标签

  • 链接资源

    • <a> </a>　　

      • 属性：　　　　

        • href:链接的资源地址　　　　　　
        • target：设置打开方式　　　　　　
          • _blank: 在新窗口打开　　　　　　　　
          • _self: 在当前页打开(默认)　　　　　　　　
          • framesetName: 在指定名称的框架中打开　　　　　　　　
  • 定位资源
    • 定义位置　　

      • <a> </a>　　　　

        • 属性：　　　　　　

          • name: 位置名称，定义一个位置　　　　　　　　
          • href: 定位到指定名称的位置处( this.html#name)　　　　　　　　

7、表格标签

  • <table> </table>: 表示表格的范围

    • <thead>和<tbody> 定义表格的标题与主题,标识作用　　
    • 在table里面 <caption> </caption>:设置标题　　
    • 在table里面 <tr> </tr>:表示行　　
      • 在tr里面 <td> </td>:表示列　　　　
      • 在tr里面 <th> </th>:相当于td的基础上做了居中和加粗的操作　　　　
    • table属性：　　
      • border：设置表格边框的宽度　　　　
      • bordercolor：设置表格边框颜色　　　　
      • cellspacing：设置单元格之间的距离　　　　
      • width：表格宽　　　　
      • height：表格高　　　　
    • tr属性：　　
      • align：设置显示方式 居左(left),居中(center),居右(right)　　　　
    • td属性：　　
      • align：设置显示方式 居左(left),居中(center),居右(right)　　　　
      • rowspan：跨行的数量　　　　
      • colspan:跨列的数量　　　　

8、表单标签(注册)

  • <form> </form>: 定义一个表单的范围

    • 属性：　　

      • action：数据提交地址，默认当前路径　　　　
      • method：表单提交方式，有get(默认) post　　　　
  • <input />:输入项
    • input属性：　　

      • type：输入项的类型　　　　

        • text：普通输入项　　　　　　
        • number: 数字项　　　　　　
        • password：密码输入项　　　　　　
        • radio: 单选输入项　　　　　　
        • checkbox：复选输入项　　　　　　
        • file：文件输入项(为表单添加 enctype="multipart/form-data" 属性, 且method="post")　　　　　　
          • accept: 指定上传文件格式　　　　　　　　
        • hidden：隐藏项　　　　　　
        • submin：提交按钮　　　　　　
        • image：图片形式提交按钮，src指定路径　　　　　　
        • reset：重置按钮　　　　　　
        • button：普通按钮　　　　　　
        • placeholder: 提示信息(HTML5)　　　　　　
        • name：元素名称　　　　　　
        • value: 元素值　　　　　　
        • checked：预先选定复选框或单选按钮　　　　　　
        • readonly: 指定输入框为只读,不可编辑(布尔值)　　　　　　
        • disabled: 禁用输入(布尔值), 不可与 type 为 hidden 的同时出现　　　　　　
        • required: 该项必须填写　　　　　　
        • pattern: 指定正则表达式, 与该表达式匹配才可以提交　　　　　　
        • autofocus: 自动聚焦　　　　　　
        • maxlength: 限制最大输入长度　　　　　　
  • <label></label>: 绑定表单控件　　
    • for: 控件id, 当点击其中文字时, 焦点到该控件上　　
  • <textarea> </textarea>:文本域　　
    • textarea属性：　　

      • cols:列的数量　　　　
      • rows:行的数量　　　　
  • <select> </select>:下拉的输入项
    • <option> </option>：选择列表　　
  • select 属性：
    • name　　
  • option 属性：
    • value：元素值　　
    • selected: 预选值　　

9、框架标签

  • <frameset></frameset>:定义框架集

    • 在frameset里面 <frame></frame>:frameset 中的一个特定的窗口　　
  • frameset属性：
    • rows：按照行进行划分，*代表剩下所有(200px, *)　　
    • cols：按照列进行划分，*代表剩下所有(200px, *)　　
  • <noscript></noscript>: 其中的内容只有在浏览器不支持js或禁用了js时执行

10、内容标签

  • 无意义标签(用来布局):

    • <div></div>:自动换行　　
    • <span></span>:在一行显示　　
    • <nav>: 导航块(HTML5)　　
    • <header>: 头部(HTML5)　　
    • <footer>: 在页面尾部显示(HTML5)　　
    • <section>: 表示页面一个内容区块,如章节,页眉等(HTML5)　　
    • <article>: 表示独立的内容,如文章等(HTML5)　　
    • <aside>: 表示 article 的辅助信息(HTML5)　　
    • <bgroup>: 页面中的标题(HTML5)　　

11. 影音标签

  • <video></video>: 视频标签(HTML5)
  • <audio></audio>: 音频标签(HTML5)

HTML标签笔记的更多相关文章

  1. django 模版标签笔记

    一.模板变量笔记:1.在模版中使用变量,需要将变量放到‘{{}}’中.'{{ 变量 }}'2.如果想访问对象的属性,可以通过'对象.属性名'的方式访问3.如果想要访问一个字典的key对应的value, ...

  2. 看Web视频整理标签笔记

    原来观看web视频,初学html的时候发现记忆不太深刻,所以自己整理了一些笔记,加深记忆且方便忘记时查看.html的规范(遵循)1.一个html文件开始标签和结束标签<html></ ...

  3. OpenERP QWeb模板标签笔记

    在OpenERP中,通过QWeb来对模板进行渲染后加载到浏览器中,而模板中有许多的标签来定制各种需求变化,在这里记录学习过程中碰到的标签定义,以方便查询. 模板中的标签统一都是以"t-&qu ...

  4. 移动端 meta 标签笔记

    (转自http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html,版权归原作者所有!) 移动平台对 meta 标签的定义 一.meta 标签分 ...

  5. html》meta标签笔记

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  6. html 标签笔记

    <一.HTML 基础结构> <html>________________________________<head><title>无标题文档</t ...

  7. 使用select多选标签笔记

    之前一直用checkbox做多选,其实 select也可以多选,只要多给一个属性即可.标签属性 http://www.w3school.com.cn/tags/att_select_multiple. ...

  8. DEDECMS标签笔记

    注意点: 1.dede的标签不可以嵌套(除了channelartlist里面可以嵌套指定的标签),那么当需要使用{dede:global.cfg_webname/}dede标签的时候我们需要转换成[f ...

  9. scope标签笔记

      scope的几个属性详解: 1.compile:默认值 他表示被依赖项目需要参与当前项目的编译,还有后续的测试,运行周期也参与其中,是一个比较强的依赖.打包的时候通常需要包含进去. 2.test: ...

随机推荐

  1. 剑指offer面试题15：链表中倒数第K个节点

    题目:输入一个链表,输出该链表的倒数第K个节点.为了符合大多数人的习惯,本题从1开始计数,即链表尾节点是倒数第一个节点. 解题思路: 解法一:一般情况下,单向链表无法从后一个节点获取到它前面的节点,可 ...

  2. 《Tornado介绍》—— 读后总结

  3. 吴恩达机器学习笔记51-初始值重建的压缩表示与选择主成分的数量K（Reconstruction from Compressed Representation & Choosing The Number K Of Principal Components）

    一.初始值重建的压缩表示 在PCA算法里我们可能需要把1000 维的数据压缩100 维特征,或具有三维数据压缩到一二维表示.所以,如果这是一个压缩算法,应该能回到这个压缩表示,回到原有的高维数据的一种 ...

  4. FTP服务器搭建

    FTP 服务器架设: 关闭防火墙 service iptables stop 关闭SELinux setenforce 0 安装所需依赖及编译工具 yum install -y gcc openssl ...

  5. 转：Python: 什么是*args和**kwargs

    今天看源码的时候发现一个是*args和**kwargs,一看就能知道args是神马,就是所有参数的数组,kwargs就不知道了,google一下,一个人的blog写的比较简单明了,秒懂了~~kwarg ...

  6. 用excel记录测试bug问题总结

    前几天与开发在讨论问题的时候,开发提了一个问题,说是已经解决的问题,能否用excel表格总结一下,问了一下原因,感觉想法很好,就总结了一下. 在上家公司的时候,提交bug用的是mantis,现在是禅道 ...

  7. 神经网络架构PYTORCH－前馈神经网络

    首先要熟悉一下怎么使用PyTorch来实现前馈神经网络吧．为了方便理解,我们这里只拿只有一个隐藏层的前馈神经网络来举例: 一个前馈神经网络的源码和注释如下:比较简单,这里就不多介绍了． class N ...

  8. Ubuntu 16.04下GDB调试

    在linux中还有一个更受大家欢迎的调试工具:GDB.GDB是一个由GNU开源组织发布的.UNIX/LINUX操作系统下的.基于命令行的.功能强大的程序调试工具.可以用来调试C,C++程序. GDB功 ...

  9. 访问iis出现500.21错误

    上图是错误的界面 刚开始接手了一个项目,然后想发布到iis上访问使用效果,结果出现了上面的问题,最开始以为是  .net Framework版本的问题,每个版本都试过了,结果问题并没有完全解决. 下面 ...

  10. ASP .NET CORE 根据环境变量支持多个 appsettings.json

    0.背景 在开发项目的过程当中,生产环境与调试环境的配置肯定是不一样的.拿个最简单的例子来说,比如连接字符串这种东西,调试环境肯定是不能连接生产数据库的.在之前的话,这种情况只能说是你 COPY 两个 ...