HTML学习笔记
2016年12月15日整理
Chapter1
URL(scheme://host.domain:port/path/filename)
- scheme: 定义因特网服务的类型,常见的为http
- host: 定义域主机(http的默认主机是www)
- domain: 定义因特网域名
- port: 定义端口号,默认是端口80
- path: 网页在服务器上的路径
- filename: 文件名称
- htm & html 文件名的区别:
- 之前的老版本系统只支持显示3位的文件名后缀,所以使用htm
- 现在统一使用html
- 单标签 & 双标签:
- 单标签:
<!--注释-->
,<br />
,<hr />
,<img>
- 双标签:
<p></p>
,<h1><h1>
-<h6><h6>
...
- 单标签:
- 标签关系:
- 并列关系
- 嵌套关系
- html中,除了语义,其他什么都没有
-
HTML 超文本标记语言,从语义的角度描述页面结构
-
CSS 层叠式样式表,从审美的角度负责页面样式
-
JS JavaScript,从交互的角度描述页面行为
标签有什么作用? 1. 给文本增加主XXX的语义 2. 。。。
-
Chapter2
-
form
的method: get/post
- get: 通过地址栏的方式进行明文数据提交,将用户输入的信息拼接在地址栏最后
- post: 数据通过后台打包处理进行提交,不会将用户信息显示出来,安全性较高
-
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
-
标签语义化
- 尽可能少的使用无语义的标签
div
和span
; - 在语义不明显时,既可以使用
div
或者p
时,尽量用有语义的标签; - 不要使用纯样式标签,如:
b
、font
、u
等,改用css设置(做小挂件,精灵图除外); - 需要强调的文本,可以包含在
strong
或者em
标签中strong
默认样式是加粗(不要用b
),em
是斜体(不用i
)。
- 尽可能少的使用无语义的标签
-
字库
UTF-8
和gb2312
UTF-8
是国际通用字库,里面涵盖了所有地球上所有人类的语言文字,比如阿拉伯文、汉语...gb2312
是国标,是中国的字库,里面仅涵盖了汉字和一些常用外文,比如日文片假名,和常见的符号。- 字库规模:
UTF-8
(字全) >gb2312
(只有汉字) - 保存大小:
UTF-8
(更臃肿、加载更慢) >gb2312
(更小巧,加载更快) UTF-8
里面存储一个汉字3个字节。而gb2312
中存储一个汉字2个字节。
-
SEO(search engine optimization) 搜索引擎优化
-
<meta name="Keywords" content=" " />
-
<meta name="Description" content=" " />
-
<h1></h1>
到<h6></h6
> 是容器级的标签,理论上里面可以放置p
、ul
,但在语义上,不要这么写。 -
容器级 & 文本级
- 容器级的标签:里面可以放置任何东西
- 文本级的标签:里面只能放置文字、图片、表单元素,eg.
<p></p>
p
是一个文本级的标签,p 里面只能放文字、图片、表单元素
-
DTD:文档类型声明Doc Type Declaration。一共有7种DTD,3种HTML4.01的,3种XHTML1.0的,1种HTML5的
-
锚点
<a name="anchor"></a> <a id="anchor"></a>
-
li
不能单独存在,必须包裹在ul
里面;反过来说,ul
的“儿子”不能是别的东西,只能有li
。
li
是一个容器级标签,li
里面什么都能放 -
根据语义来使用标签,而不是根据标签的表面效果