关于HTML一些琐碎知识
html vs xml vx xhtml
- HTML ,超文本标记语言,语法比较松散、不严格的Web语言。
- XML ,可拓展标记语言,主要用于存储数据和结构参考。(自定义标签)
- XHTML ,可拓展超文本标记语言,基于xml ,作用于html类似,但是语法更严格。
表现,样式,行为 分离
- 写html 的时候先不管样式,重点放在HTML的结构和语义化上,让html能体现页面结构或者内容。
- 写js的时候,尽量不要用js去直接操作样式,而是通过元素添加删除class来控制样式变化。
- html内尽量避免出现属性样式(行内)。
这样做的优势
- 有利于搜索引擎优化: 因为控制网页表现的样式代码和网站的内容剥离出来了,一般都是放在一个单独的样式表中,这样网页的内容就赤裸裸的暴漏在搜索引擎面前,这样有利于搜索引擎抓取网页的内容。
- 便于网站改版: 内容和表现分离后,非常便于网站的改版,只需要调整样式表代码即可,这样非常便于网站的维护,尤其是大型网站的维护。
语义化HTML
什么是HTML语义化
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
为什么要语义化
为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构。
用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
写HTML做到语义化需要注意些什么
尽可能少的使用无语义的标签div和span;
在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
不要使用纯样式标签,如:b、font、u等,改用css设置。
需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
有哪些常见的meta标签
通常所说的META标签,是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。
<meta name="keywords" content="">
//向搜索引擎说明你的网页的关键词<meta http-equiv="X-UA-Compatible" content="IE=Edge">
//通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。<meta name="description" content="">
//告诉搜索引擎你的站点的主要内容<meta name="author" content="你的姓名">
//告诉搜索引擎你的站点的制作的作者<meta http-equiv="Content-Type" content="text/html";charset=utf-8">
//指定字符集<meta http-equiv="refresh" content="n;url=">
//定时让网页在指定的时间n内跳转
-
<meta http-equiv="pragma" content="no-cache">
//禁用缓存
关于html的小问题
文档声明的作用?
<!DOCTYPE>
声明不是HTML标签;它是指示 web 浏览器关于页面使用哪个 HTML版本进行编写的指令。文档声明能够确保在每个浏览器中拥有一致的展现。
<!doctype html>
的作用?
声明文档文档类型是HTML5
严格模式和混杂模式指什么?
- 在标准模式中,浏览器以其支持的最高标准呈现页面。
- 在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作
浏览器乱码的原因是什么?如何解决
原因 :
编辑和保存HTML文件时的编码格式与浏览器解析式所用的编码格式不匹配。有时英文以外的字符会产生乱码。
解决办法 :
通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式从而避免乱码(一般采用 UTF-8 编码)。
常见的浏览器有哪些,什么内核?
名称 | 内核 |
---|---|
IE | Trident(IE 1-11) |
Firefox | Gecko |
Safari | Webkit |
chrome | Chromium/Blink |
Opera | Presto |
补充:
IE从版本 11 开始,初步支持 WebGL 技术。IE8 的 JavaScript 引擎是 Jscript,IE9 开始用 Chakra,这两个版本区别很大,Chakra 无论是速度和标准化方面都很出色。Window10 发布后,IE 将其内置浏览器命名为 Edge,Edge 最显著的特点就是新内核 EdgeHTML。
chromium fork 自开源引擎 webkit,却把 WebKit 的代码梳理得可读性提高很多。因此 Chromium 引擎和其它基于 WebKit 的引擎所渲染页面的效果也是有出入的。所以有些地方会把 chromium 引擎和 webkit 区分开来单独介绍,而有的文章把 chromium 归入 webkit 引擎中,都是有一定道理的。
常见的html标签和使用场景
| 名称 | 使用场景 |
|------------- |: -------------:|
| <title>
| 文档的标题 |
| <p>
| 段落 |
| <img>
| 图片 |
| <ul>
| 无序列表 |
| <ol>
| 有序列表 |
| <li>
| 列表项 |
| <br>
| 换行 |
| <button>
| 按钮 |
| <div>
| 区块 |