关于HTML一些琐碎知识

关于HTML一些琐碎知识

html vs xml vx xhtml

  • HTML ,超文本标记语言,语法比较松散、不严格的Web语言。
  • XML ,可拓展标记语言,主要用于存储数据和结构参考。(自定义标签)
  • XHTML ,可拓展超文本标记语言,基于xml ,作用于html类似,但是语法更严格。

表现,样式,行为 分离

  • 写html 的时候先不管样式,重点放在HTML的结构和语义化上,让html能体现页面结构或者内容。
  • 写js的时候,尽量不要用js去直接操作样式,而是通过元素添加删除class来控制样式变化。
  • html内尽量避免出现属性样式(行内)。

这样做的优势

  1. 有利于搜索引擎优化: 因为控制网页表现的样式代码和网站的内容剥离出来了,一般都是放在一个单独的样式表中,这样网页的内容就赤裸裸的暴漏在搜索引擎面前,这样有利于搜索引擎抓取网页的内容。
  2. 便于网站改版: 内容和表现分离后,非常便于网站的改版,只需要调整样式表代码即可,这样非常便于网站的维护,尤其是大型网站的维护。

语义化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
补充:
  1. IE从版本 11 开始,初步支持 WebGL 技术。IE8 的 JavaScript 引擎是 Jscript,IE9 开始用 Chakra,这两个版本区别很大,Chakra 无论是速度和标准化方面都很出色。Window10 发布后,IE 将其内置浏览器命名为 Edge,Edge 最显著的特点就是新内核 EdgeHTML。

  2. chromium fork 自开源引擎 webkit,却把 WebKit 的代码梳理得可读性提高很多。因此 Chromium 引擎和其它基于 WebKit 的引擎所渲染页面的效果也是有出入的。所以有些地方会把 chromium 引擎和 webkit 区分开来单独介绍,而有的文章把 chromium 归入 webkit 引擎中,都是有一定道理的。

常见的html标签和使用场景

| 名称 | 使用场景 |
|------------- |: -------------:|
| <title> | 文档的标题 |
| <p> | 段落 |
| <img> | 图片 |
| <ul> | 无序列表 |
| <ol> | 有序列表 |
| <li> | 列表项 |
| <br> | 换行 |
| <button> | 按钮 |
| <div> | 区块 |

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,752评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,100评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,244评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,099评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,210评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,307评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,346评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,133评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,546评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,702评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,331评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2 351

推荐阅读更多精彩内容

  • 源自SeeYouBug博客 地址为:http://www.cnblogs.com/SeeYouBug 一、HTML...
    欲泪成雪阅读 1,216评论 0 15
  • 关于 HTML 超文本标记语言(HyperText Markup Language,简称 HTML)是一种用于创建...
    _空空阅读 1,075评论 0 1
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,220评论 0 8
  • HTML、XML和XHTML的区别 HTML,超文本标记语言,被设计用来显示数据,标记内容的格式,“超文本”体现在...
    佳联阅读 346评论 0 0
  • 一.HTML、XML、XHTML 有什么区别 什么是 HTML? HTML 指的是超文本标记语言 (Hyper T...
    Sunset125阅读 688评论 0 1