HTML学习笔记

时间：2023-03-08 15:20:20
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的

    HTML学习笔记

  11. 锚点

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

  12. li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。

    li是一个容器级标签，li里面什么都能放

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

相关文章