HTML、XML、XHTML 有什么区别
- HTML 指超文本标签语言。是语法较为松散的、不严格的Web语言
- XML,可扩展标记语言,主要用于存储数据和结构
- XHTML,可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格
怎样理解 HTML 语义化
语义化HTML是一种编写HTML的方式
选择合适的标签、使用合理的代码结构,便于开发者阅读,同时让浏览器的爬虫和机器很好地解析。
为什么要HTML语义化
- 去掉或样式丢失的时候能让页面呈现清晰的结构
- 屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页
- 手机等设备可能无法像普通电脑的浏览器一样来渲染网页
- 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
- 你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
- 便于团队开发和维护
怎样理解内容与样式分离的原则
html(结构)css(样式)js(行为)三者分离
- 写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上,让 HTML 能体现页面结构或者内容。之后再去写样式。
- 写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化
- HTML 内不允许出现属性样式,尽量不要出现行内样式
代码美观清晰易懂,方便别人二次修改,同时,当需要修改CSS代码时可以统一在CSS文件里修改就可以,而不需要去找到每一个要改到的HTML文件,便于后期维护
有哪些常见的meta标签
- meta charset="utf-8"
HTML5设定网页字符集的方式页面保存为什么编码方式就填写什么方式,utf-8为目前最为常用 - meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/
指定IE和Chrome使用最新版本渲染当前页面 - meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
使页面内容在移动端窗口展示比较合理 - meta name="keywords" content="前端 饥人谷"
用于告诉搜索引擎网页的关键字,如“前端 饥人谷” - meta name="description" content="最有爱的前端学习社区"
用于告诉搜索引擎网站的主要内容,如“最有爱的前端学习社区” - meta name="robots" content="none"
robots用来告诉爬虫哪些页面需要索引,哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。
文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
- <!DOCTYPE>告诉浏览器以哪个版本的HTML(或XML)来解析文档。Doctype属于声明,不是一个HTML标签,也可以叫做DTD(Document type declaration)。
- 添加了文档类型声明之后,浏览器使用的就是严格模式(standard mode)。没有文档声明浏览器则会切换到混杂模式。这种模式下浏览器会以老版本浏览器所使用的规则来渲染页面,并且不同浏览器的混杂模式还是不一样的。
- <!doctype html>告诉浏览器以HTML5来解析文档。
浏览器乱码的原因是什么?如何解决
网页没有设置meta charset编码或者编码错误,最常用为utf-8
常见的浏览器有哪些,什么内核
- webkit内核 chrome和safari浏览器
- Trident内核 IE浏览器
- Gecko内核 火狐浏览器
- Presto内核 opera7以上浏览器
注:国内浏览器目前暂无自身内核,不做介绍
列出常见的标签,并简单介绍这些标签用在什么场景
- p段落标签
- h1~h6标题标签(由一级到六级)
- ul无序列表
- ol有序列表
- dl自定义列表
- <div>本身无语义,用于包裹其他一些标签,制作一个容器或常用于页面布局
- <table>表格
- <title>在<head>中表示网站标题
- <form>表单
- blockquote大段引用,块元素
- q行内引用,行内元素
- strong着重强调,页面表现为粗体
- em普通强调,页面表现为斜体
- span本身无语义,配合css方便定义标签内的内容样式
- img插入图片
- hr分隔线
- br换行
- button按钮