HTML教程学习笔记

一直认为自己已经掌握了HTML/CSS/JavaScript三剑客，但孔子说：

温故而知新

最近温故了一下三剑客，在此将HTML的温故笔记做个记录。

• 关于img和行内元素和块级元素
  教程里介绍HTML图像时，实例代码如下：

<img src="/images/logo.png" width="258" height="39" />

脑海立马浮现一个问题：img是块级元素吗？
（印象中可以设置宽高的元素都是块级元素，不能设置的就是行内元素）
于是搜索之，发现一个以前不知道的概念：
行内替换元素和行内非替换元素。
img属于行内替换元素，是可以设置宽高的，我这个理解比较肤浅了，可以看看参考文章：
css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
为什么 input 元素能用 width 属性？这个问题前面四个人的回答都是非常赞的。
通过这个问题以及相关知识点的了解可以发现，根据元素本身可以知道这个元素是替换元素还是非替换元素，但是要判断一个元素是行内元素还是块级元素要根据这个元素的CSS样式去判断，因为HTML规范本身并没有规定哪个元素是行内的，哪个元素是块级的。

小Tip：HTML文件的后缀有些时候是html，有些时候是htm，本质上没有区别，之所以会有htm的后缀是历史问题，因为早期DOS系统中的文件后缀最多只能是3位，为了兼容DOS系统的显示才出现了htm的后缀的。

• 还是跟img相关的<area>和<map>标签
  因为<area>和<map>标签之前都没有用过，所以搜了一下，看到张鑫旭大神的文章：HTML <area><map>标签及在实际开发中的应用。感觉掌握了这一篇也就差不多了吧。

• 有序列表和无序列表
  <ul>是无序列表
  <ol>是有序列表，默认是阿拉伯数字的排序，但是你可以给<ol>标签添加type属性，例如：

<ol type="A">
    <li>Cat</li>
    <li>Dog</li>
    <li>Pig</li>
</ol>

效果：

效果图

• URL编码
  URL只能通过ASCII字符集进行发送，但URL中通常都会包含ASCII字符集以外的字符，因此需要将URL进行编码。
  印象中关于URL编码比较深刻的两个问题是：
  （1）URL中的+号，在后台使用Request.QueryString接收的时候变成了空格。
  例如：url为：www.baidu.com?key=a+b+c
  后台用Request.QueryString[key]得到的值是a b c
  解决此问题的方法有两种：一是将URL用Server.UrlEncode()编码一下；
  二是用其他符号去连接不同的key。
  （2）请求参数里含有HTML字符，会报错，说含有非法字符。
  这个问题也只需编码一下即可。
  当然最好的方式是不论URL是什么都先编码一下，后台再解码一下就好啦。

• HTML5的拖拽
  我能想到的最常见的拖拽场景：
  （1）拖拽上传
  （2）拖拽排序
  有空做两个相关的demo
  相关文章：
  HTML5--拖拽API(含超经典例子)
  HTML Drag and Drop API

• HTML5服务器发送事件（Server-Sent Events）
  感觉Server-Sent Events和Notification API 有点儿像，但又感觉不一样，有点儿说不清道不明(明明就是我研究不够深入)
  简单了解HTML5中的Web Notification桌面通知

• HTML插件
  第一次知道原来HTML也有插件！
  其实就是两个元素<object>和<embed>
  这两个元素可以用于插入html文件或者图片等，需要注意的是<embed>元素没有关闭标签。