HTML学习笔记

---

HTML学习笔记

2016年12月15日整理

Chapter1

1. URL(scheme://host.domain:port/path/filename)
   1. scheme: 定义因特网服务的类型，常见的为http
   2. host: 定义域主机（http的默认主机是www）
   3. domain: 定义因特网域名
   4. port: 定义端口号，默认是端口80
   5. path: 网页在服务器上的路径
   6. filename: 文件名称
2. htm & html 文件名的区别：
   1. 之前的老版本系统只支持显示3位的文件名后缀，所以使用htm
   2. 现在统一使用html
3. 单标签 & 双标签：
   1. 单标签： <!--注释--> , <br /> , <hr /> , <img>
   2. 双标签：<p></p> , <h1><h1>-<h6><h6>...
4. 标签关系：
   1. 并列关系
   2. 嵌套关系
5. html中，除了语义，其他什么都没有

   1. HTML 超文本标记语言，从语义的角度描述页面结构

   2. CSS 层叠式样式表，从审美的角度负责页面样式

   3. JS JavaScript，从交互的角度描述页面行为

       标签有什么作用？
       1. 给文本增加主XXX的语义
       2. 。。。
      

Chapter2

1. form 的 method: get/post

   1. get: 通过地址栏的方式进行明文数据提交，将用户输入的信息拼接在地址栏最后
   2. post: 数据通过后台打包处理进行提交，不会将用户信息显示出来，安全性较高

2. form控件

    1. <input type="text" id="" name="" value="" maxlength="6" readonly="readonly" disabled="disabled">
    2. <input type="password">
    3. <input type="radio" name=""  checked="checked"> 实现单选效果一定要给控件设置相同的名称
    4. <input type="image" src="">
    5. <input type="checkbox" checked="checked">
    6. <input type="file">
    7. <input type="reset">
    8. <input type="submit">
    9. <input type="button">
    10. <select name="" id="" multiple="multiple">
    		<optgroup label="">
    			<option value=""></option>
    			<option value=""></option>
    			<option value=""></option>
    		</optgroup>
    	</select>
    11. <textarea cols="30" rows="10" style="resize: none;"></textarea>
    12. <fieldset>
    		<legend>...</legend>
    	</fieldset>
    **HTML5新增**
    13. <input type="url">
    14. <input type="email">
    15. <input type="date">
    16. <input type="time">
    17. <input type="number">
    18. <input type="range" max="100" step="5">
    19. 什么表单元素都有label
   

3. 标签语义化

   1. 尽可能少的使用无语义的标签div和span；
   2. 在语义不明显时，既可以使用div或者p时，尽量用有语义的标签；
   3. 不要使用纯样式标签，如：b、font、u等，改用css设置（做小挂件，精灵图除外）；
   4. 需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）。

4. 字库 UTF-8 和 gb2312

   1. UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语...
   2. gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。
   3. 字库规模： UTF-8（字全） > gb2312（只有汉字）
   4. 保存大小： UTF-8（更臃肿、加载更慢） >gb2312（更小巧，加载更快）
   5. UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。

5. SEO(search engine optimization) 搜索引擎优化

6. <meta name="Keywords" content=" " />

7. <meta name="Description" content=" " />

8. <h1></h1> 到 <h6></h6> 是容器级的标签，理论上里面可以放置p、ul，但在语义上，不要这么写。

9. 容器级 & 文本级

   1. 容器级的标签：里面可以放置任何东西
   2. 文本级的标签：里面只能放置文字、图片、表单元素，eg. <p></p>
   3. p 是一个文本级的标签，p 里面只能放文字、图片、表单元素

10. DTD：文档类型声明Doc Type Declaration。一共有7种DTD，3种HTML4.01的，3种XHTML1.0的，1种HTML5的
    
    

11. 锚点

    <a name="anchor"></a>
    <a id="anchor"></a>
    

12. li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
    
    li是一个容器级标签，li里面什么都能放

13. 根据语义来使用标签，而不是根据标签的表面效果