HTML、XML、XHTML的区别
- HTML(HyperText Markup Language)超文本标记语言:是语法较为松散的、不严格的Web语言。
- XML (eXtensible Markup Language)可扩展标记语言:主要用于存储数据和结构参考。
- XHTML (eXtensible HyperText Markup Language)可扩展超文本标记语言:基于XML,作用与HTML类似,但语法更严格参考。
HTML语义化
选择合适的标签、使用合理的代码结构,便于开发者阅读,同时让浏览器的爬虫和机器很好地解析。
内容与样式分离原则
我的理解是:
- HTML写结构,CSS写样式,JavaScript写事件动画等各种交互事件,三者相互分离,尽量不要把样式或者事件写到HTML里去,便于后期维护修改。
- 写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化。
meta标签
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
<meta>
元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta>
标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
常见<meta>
标签
- 告诉浏览器解码方式:
<meta charset="UTF-8">
- IE=edge告诉浏览器若是IE内核使用IE=edge最新的引擎渲染网页,chrome=1则可以激活Chrome Frame,采用谷歌浏览器内核去渲染页面:
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
- 告诉爬虫、搜索引擎关键字,你快来找我:
<meta name="keywords" content="前端学习">
<meta name="description" content="前端学习网站">
//搜索引擎:好的好的,我知道你是谁了。
- 告诉手机移动端页面正常的显示页面,别缩放啦,啥年代啦:
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">
文档声明
DOCTYPE是用来声明文档类型和DTD(document type definition,文档类型定义)规范的,一个主要的用途便是文件的合法性验证。 如果文件代码不合法,那么浏览器解析时便会出一些差错。 。
文档声明的作用就在于告诉浏览器你是用什么类型的文档,然后浏览器就能按照你的文档类型进行解析,不然浏览器就会用混杂模式解析文档,不同的浏览器显示的效果都不太一样。
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
严格模式和混杂模式
- 严格模式即标准模式,是指浏览器按照 W3C 标准解析代码。
- 混杂模式又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。
但是HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。( HTML5 没有严格和混杂之分)
关于浏览器乱码
浏览器乱码的原因很可能是在<meta>
里没有指定编码方式,或者编码方式指定错误,浏览器就解析时就会乱码。一般都以"UTF-8"方式编码。
常见浏览器内核
- Trident:IE内核
- Webkit:chrome、safari内核
- Gecko:firefox内核
- 关于移动端:大多都是Webkit内核
常见标签
- h1~h6
- h1代表页面最大的标题
- h2二级标题
- h3... 更弱的标题
- p 段落,表示大段文字
- a 链接,链到一个地址
- img 展示一张图片
- div 语义为“一大块”,用于给页面划分区块,让结构更清晰
- ul li 无序列表
- ol li有序列表
- button 按钮
- iframe 用于嵌入一个页面 注意跨域操作问题
- table 用于展示表格,不要用来做布局 thead tbody tfoot可省略,浏览器会自动添加 border-collapse: collapse;用于合并边框
网友评论