学习了一阵http://www.w3school.com.cn网站上的html教程，发现各个知识点比较分散，个人比较倾向于用一页html文档就把所有涉及的基本html标签元素知识点都展示出来的形式。个人感觉这样比较方便加深印象和查询，故拙拟了下面这张html页面，展示各个基础的html的同时在注释里面附上相关的介绍。初学之作，还望各位不吝赐教。

（以下html代码可直接粘贴到一个以.html结尾的文本文件并用浏览器打开查看实际效果）

  1. <html><!--html的语法由标签（形式为<keyword>），标签的属性（keword右边的键="值"对），标签之间的内容组成，每个标签定义了一个元素，
    属性则影响了该元素的视觉表现和逻辑上的动作响应等,-->
  2. <!--位于<!...中的为html的注释语句-->
  3. <head ><!--head标签用于定义文档的头部，它是所有头部元素的容器,其中元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。-->
  4. <title>Html</title><!--title标签定义了在浏览器上显示的页面标题,是head中唯一必须的元素-->
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--meta可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
    注：字符集属性charset应在一开始给出（应与你编辑器保存该html时使用的字符集一致，否则在它之前的中文显示可能不正确-->
  6. <meta name="author" content="yhavi" >
  7. <meta name="keywords"
  8. content="HTML, DHTML, CSS, XML, XHTML, JavaScript">
  9. <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /><!--这里实现5秒后重定向到url指出的位置。要使其失效请注释掉它。
  10. 注：当使用绝对寻址时需要添加http://于签名-->
  11. <script type="text/javascript">
  12. document.write("5秒钟后跳转！")
  13. </script><!--script用于加入脚本语言片段如javascript 可使用src属性引用代码或直接在标签内容里用纯文本写代码-->
  14. <base href=""  target="_blank"> </base><!--base的href属性重新定义了整个html中URL寻址的相对起点（不定义base时使用该页面的URL为起点）
    位于bass标签中的target属性定义了整个页面中点击超链接时打开链接的位置，_blank示意在新窗口中打开-->
  15. <link><!--link一般用于使用外联的css样式表,详见http://www.w3school.com.cn/tags/tag_link.asp-->
  16. </head>
  17. <body><!--body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）-->
  18. <h1 name="fortarget"><!--h1到h6标签定义了标题并分别对应不同的标题大小.另,html中每个元素都可定义name或id属性用于标识该标签-->
  19. 正文主题
  20. </h1>
  21. <p><!--p定义了段落，段落与段落间会自动换行，浏览器同时会在相邻的段落之间插入一些垂直的间距。但注意，
  22. 浏览器忽略了源代码中的排版（省略了多余的空格和换行）故应使用<br/>标签实现换行。
    另，<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。-->
  23. 感谢阅读
  24. 欢迎指正
  25. 换<br/>
  26. 行
  27. </p>
  28. <hr/><!--hr水平分隔线-->
  29. <pre>
  30.   <strong> 你</strong>
  31. 们 好
  32. </pre><!--pre标签内的内容允许保留空格和换行等，可用于呈现代码(当然更好的是用<code>方便浏览器做出处理)。
    其中不可嵌套会使段落断开的标签，仅允许物理样式和基于内容的样式变化（如上面的<strong>标签），还有链接、图像和水平分隔线-->
  33. <!--pre内的符号也会被转换，&lt;：< ; &gt; : > ; &quot; : " ;  &nbsp; : 不间断空格； &amp; : & 
    更多请参考http://www.w3school.com.cn/html/html_entities.asp-->
  34. <!--<strong>等特殊样式定义标签见http://www.w3school.com.cn/tags/tag_phrase_elements.asp-->
  35. <ul><!--无序列表-->
  36. <li>第一项</li>
  37. <li>第二项</li>
  38. </ul>
  39. <ol><!--有序列表-->
  40. <li>第一项</li>
  41. <li>第二项</li>
  42. </ol>
  43. <dl><!--自定义列表-->
  44. <dt>First term</dt><!--定义项名-->
  45. <dd>Definition</dd><!--定义项的内容-->
  46. <dt>Next term</dt>
  47. <dd>Definition</dd>
  48. </dl>
  49. <table border="1"><!--table定义了表格，其可见程度和大小等视觉效果属性可控 详见http://www.w3school.com.cn/tags/tag_table.asp-->
  50.   <tr><!--tr定义表的行-->
  51.     <th>Month</th><!--th定义表中该行的标题项-->
  52.     <th>Savings</th>
  53.   </tr>
  54.   <tr>
  55.     <td>January</td><!--td定义与前面tr定义的标题对应的项-->
  56.     <td>$100</td>
  57.   </tr>
  58. </table>
  59. <form action="http://www.example.com/test.asp" method="post/get"><!--form定义了表单，用于向服务器发送用户输入 
    action属性表明目标URL（这里随便写了个所有下面的提交可能不会有效果）,
  60. method表明http请求方法的类型 对应不同的数据发送方式（这会影响web后端服务器的处理）但仅限GET和POST
    （可参考http://baike.baidu.com/view/1628025.htm?from_id=243074&type=syn&fromtitle=http&fr=aladdin#5）-->
  61. <input type="text" name="lastname"
  62. value="Nixon" size="30" maxlength="50"><!--表单中的输入元素均使用input标签，通过type属性选择不同的元素。text为文本域-->
  63. <input type="password"><!--password为密码输入框（输入的字符以非明文方式显示）-->
  64. <input type="checkbox" checked="checked"><!--checkbox为复选框-->
  65. <input type="radio" checked="checked"><!--radio为单选框-->
  66. <input type="submit"><!--submit为按钮，点击此处同时将本页中各个表单的内容发送到各表单URL所处服务器。
  67. 注：type为button的也是一种按钮，但它不触发数据的发送和跳转，一般用于和avascript脚本关联触发脚本程序的运行-->
  68. <input type="reset"><!--reset为重置按钮。重置按钮会清除表单中的所有数据。-->
  69. <input type="hidden" value="hiddenmessage"><!--hidden定义隐藏的输入字段。用户不可见但发送数据时其value属性的值仍会发送。
  70. 注：表单中输入的文本或做出的选择实际上最后改变了对应元素的value属性，
    在提交表单时这些value属性的值会根据form标签中methon属性标明的方式以一定格式发送到URL所指示的服务器-->
  71. <input type="file" /><!--file用于文件上传-->
  72. <select><!--select下拉单选框,带有selected的option选项会被预选 select更多修饰性属性（如规定必选）见http://www.w3school.com.cn/tags/tag_select.asp-->
  73. <option>Apples
  74. <option selected>Bananas
  75. <option>Cherries
  76. </select>
  77. <textarea name="Comment" rows="10"
  78. cols="20"></textarea><!--textarea是比文本域更大的文本输入框-->
  79. </form>
  80. <!--frameset用于定义框架集（即在一个窗口中打开一个或多个html页面，可用于实现导航（一个页面存放书签列表另一个用于显示书签指向的页面））
  81. 在此由于不方便展示 感兴趣可参考http://www.w3school.com.cn/html/html_frames.asp-->
  82. <a href="http://www.w3school.com.cn">超链接</a><!--a标签表示超链接，在href属性中给出链接的目标URL.注，a也有target属性用于定义在哪里打开链接-->
  83. <br/>
  84. <a href="http://www.w3school.com.cn"><img src="http://www.w3school.com.cn/i/site_photoref.jpg" alt="图片超链接"></a>
  85. <!--图片也可以用于承载超链接，alt属性存放当图片无法正常显示时显示的替代字符串。
  86. 更复杂的用于控制图片中响应点击位置的<map>标签见http://www.w3school.com.cn/tags/tag_map.asp-->
  87. <a href="#fortarget">跳转到前面</a><!--使用href=”#itemname“的形式可调转到URL#itemname所在的位置（相当于滚轮自动转到该元素显示处），
    注意，仍然遵循相对寻址，故应注意前面的base给出的起点会影响此处的效果
  88. 该方法可用于创建页内导航书签或跨页导航书签（跳转到另一页面的特定某处）-->
  89. </body>
  90. </html>

HTML基础单页面总结（基于w3school教程）的更多相关文章

  1. 基于angular的route实现单页面cnodejs

    Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...

  2. 基于laravel5.4 vue 和vue-element搭建的单页面后台CMS

    介绍 该项目后台是基于vue和laravel搭建的单页面CMS系统,包含了文章管理,权限管理,用户管理等基本模块. 前台使用了传统web技术,laravel渲染搭建了个博客系统 github地址:ht ...

  3. webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

    本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...

  4. 基于AngularJs的单页面程序

    基于AngularJs的单页面程序 在Abpzero的后台管理系统是一个AngularJs的单页面程序.当你登陆后,系统会跳转到"ApplicationController",然后 ...

  5. 基于react hooks,zarm组件库配置开发h5表单页面

    最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...

  6. Kendo UI开发教程(23): 单页面应用(一)概述

    Kendo单页面应用(Single-Page Application,缩写为SPA)定义了一组类用于简化Web应用(Rich Client)开发,最常见的单页面应用为Gmail应用,使用单页面可以给用 ...

  7. 基于angularJs的单页面应用seo优化及可抓取方案原理分析

    公司使用angularJs(以下都是指ng1)框架做了互联网应用,之前没接触过seo,突然一天运营那边传来任务:要给网站做搜索引擎优化,需要研发支持.搜了下发现单页面应用做seo比较费劲,国内相关实践 ...

  8. 基于Vue的单页面应用的Markdown渲染

    之前渲染 Markdown 的时候, 笔者使用的是 mavonEditor 的预览模式, 使用起来比较爽, 只需要引入组件即可, 但是在最近的开发中, 遇到了困难. 主要问题在于作为单页面应用, 站内 ...

  9. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

随机推荐

  1. Linux系统下/tmp目录文件重启后自动删除，不重启自动删除10天前的/TMP的文件（转）

    /tmp目录文件重启后自动删除现在知道有ubuntu和solaris系统source:http://blog.chinaunix.net/uid-26212859-id-3567875.html经常会 ...

  2. python数字转换为字符串的两种方式

    主要包括两种形式进行转换: 第一种是str(),将值转换为用户便于阅读的形式: 另一种是repr(),将值转换为合法的python表达式. >>> print repr(" ...

  3. NodeJS 笔记 path模块

    path 模块,本模块包含一系列处理和转换文件路径的工具集. path.normalize(path)   normalize函数将不符合规范的路径经过格式化转换为标准路径,解析路径中的.与..外,还 ...

  4. 函数和常用模块【day04】：内置函数分类总结（十一）

    重点掌握 字符串格式化format() 字符串格式化百分号 判断 转换 数据类型 帮助信息 map和filter()函数 局部变量全局变量 计算内置函数 常用内置函数(其他) 后续会讲 不常用

  5. ThinkPHP框架学习（二）

    在上一节中,我主要讲到了如何获取ThinkPHP框架,以及虚拟目录和虚拟主机的配置.准备工作完成之后,就可以利用ThinkPHP去部署项目了. 先在工作目录(D:/zend/workspace)下新建 ...

  6. Codeforces #55D-Beautiful numbers （数位dp）

    D. Beautiful numbers time limit per test 4 seconds memory limit per test 256 megabytes input standar ...

  7. Dubbo学习笔记11：使用Dubbo中需要注意的一些事情

    指定方法异步调用 前面我们讲解了通过设置ReferenceConfig的setAsync()方法来让整个接口里的所有方法变为异步调用,那么如何指定某些方法为异步调用呢?下面讲解下如何正确地设置默写方法 ...

  8. 【原创】when.js2.7.1源码解析

    现在,用回调处理一些复杂的逻辑,显得代码臃肿,难于阅读,特别是异步,嵌套. 解决这样的问题,可以是之前所说的Backbone.Events的pubsub,或者是今天要说的when.js所实现的prom ...

  9. GDB命令

    recursiveDescription 打印view层次结构

  10. Spring4总结

    1. 明确Spring的主要作用就是为代码“解耦”,降低代码间的耦合度.使用IoC使得主业务在相互调用过程中,不用再自己维护关系了,即不用再自己创建要使用的对象了,而是由Spring容器统一管理,自动 ...