HTML相关知识点

1. HTML, XML, XHTML 有什么区别?

HTML (HyperText Markup Language), 直译过来即 超文本| 标记| 语言。
  • Hyper Text “超文本”,就是指页面内可以包含图片、链接、音乐、程序等 非文字元素。
  • Markup “标记” ,就是指用特定的标记符号要标记要显示的内容的各个部分,如标题。
  • 超文本标记语言,是标准通用语言下的一种应用,也是一种规范、标准,被设计出来用来显示数据。
    是语法松散的,不严格的web语言
  • HTML文本就是我们通常所说的网页,扩展名可以是html或者htm。
XML(Extensible Markup Language), 直译过来即 可扩展| 标记| 语言。
  • XML是标准通用标记语言的子集,是一种用于标记电子文件使其 具有结构性的标记语言,它被设计用来传输和存储数据,是对超文本标记语言的补充。
  • 它能够更精确地声明内容,方便跨越多种平台的更有意义的搜索结果。它提供了一种描述结构数据的格式,简化了网络中数据交换和表示,使得代码、数据和表示分离,并作为数据交换的标准格式,因此它常被称为智能数据文档,文件扩展名为xml。
XHTML(Extensible HyperText Markup Language), 直译过来即 可扩展| 超文本| 标记| 语言。
  • XHTML 是基于可扩展标记语言(XML),作用与HTML类似,但语法更严格。
  • XHTML就是一个扮演着类似HTML的角色的可扩展标记语言(XML),所以XHTML结合了XML数据转化特性及大多数HTML 的简单特性。
总结

HTML、XML和XHTML都是标准通用标记语言的一个子集。HTML被设计用来显示数据,其焦点是数据的外观;XML被设计用来传输和存储数据,其焦点是数据的内容;XHTML是更严格更纯净的 HTML 版本,是作为一种 XML 应用被重新定义的 HTML,设计的目的是为了取代HTML以适应未来网络更多的需求。它们都可以用来开发网页,但就目前来看,网页开发中HTML还是占绝对的主流

2. 怎么理解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);

    使用表格时,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;

    每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

3. 怎样理解内容与样式分离的原则

  • 理解了HTML语义化,所以我们要内容与样式分离,整套文档就变得清晰易读、易维护!不管页面多么复杂,页面就是HTML, JS, CSS。

  • 写HTML的时候先不管样式,终点放在结构和语义化上,让HTML能体现页面结构或者内容。之后再去写样式。尽可能少的使用无语义的标签,如div和span。

  • 写JavaScript的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化。

  • HTML内不允许出现属性样式,尽量不要出现行内样式。

4. 有哪些常见的meta标签

什么是meta标签?通常所说的META标签,是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新,编码格式等。

常见的meta标签
  • <meta charset="utf-8">, 声明编码格式。

  • <meta http-equiv="X-UA-Compatible" content="IE=dege, chrome=1">,优先使用IE最新版本和Chrome(双核)。注解:http-equiv,超文本传输协议标题信息。

  • <meta name="keywords" content="your tags">, 页面关键词(搜索引擎优化)。

  • <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0>,移动设备。

  • <meta name="description" content="your description">, 页面描述内容(搜索引擎优化)。

  • <meta name="robots" content="index,follow">, 搜索引擎索引方式。
    1. all:文件将被检索,且页面上的链接可以被查询;
    2. none:文件将不被检索,且页面上的链接不可以被查询;
    3. index:文件将被检索;
    4. follow:页面上的链接可以被查询;
    5. noindex:文件将不被检索;
    6. nofollow:页面上的链接不可以被查询。

5. 文档声明的作用?严格模式和混杂模式指什么?<!DOCTYPE html> 的作用?

  • <!DOCTYPE>就是告诉游览器用什么标准来解析渲染页面。

  • 严格模式,页面添加了<!DOCTYPE>,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。
    混杂模式,页面不添加<!DOCTYPE>, 就是浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样子。

  • <!DOCTYPE html>就是告诉游览器,用html5标准解析渲染页面。

6. 浏览器乱码的原因是什么?如何解决?

产生乱码的原因一般是文档没有声明自身的编码格式,导致浏览器错误地使用了与文档不同的解码方式,从而导致内容无法正常显示一定要清楚文件保存时的编码方式并在文件内声明。

如何解决游览器乱码。1, 在<meta charset="编码格式">中声明编码格式。2, 在所用游览器中设置编码格式。

<meta charset="编码格式">
常见的编码格式有:ASCII、ISO-8859-1、GB2312、GBK、UTF-8、UTF-16。
接触较多常用的编码格式 UTF-8, 用在网页上可以统一页面显示中文简体繁体及其它语言。

7. 常见的浏览器有哪些,什么内核

  • Trident, IE 游览器内核。
  • Gecko,Mozilla Firefox火狐游览器内核。
  • Webkit,苹果的safari和Google游览器的内核。
  • Presto, Opera游览器内核。

8.列出常见的标签,并简单介绍这些标签用在什么场景

  • 文本样式相关标签
    <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5>, <h6> </h6>, 标题。
    <p> </p>, 段落。
    <strong> </strong>, <em> </em>,强调。

  • 分区元素
    <div> </div>, 给页面划分区块,让结构更清晰。
    <span> </span>.

  • 在页面中显示图片
    <img>

  • 链接元素
    <a href=" "> </a>,链接。

  • 列表元素
    ul(unordered list)无序列表,直接子元素为 li, 可以嵌套,显示并列的内容。
    ol(ordered list ) 有序列表, 直接子元素为 li, 可以嵌套,显示带步骤或编号的并列内容。
    dl (definition list)定义列表 , 子元素为dt, dd, 展示一系列“标题:内容”的场景。

  • 表单元素
    <form>, </form> 和 <input >配合使用。

  • 表格
    <table> </table>用来展示表格,不要用来做布局,thead、tbody,tfoot可省略。

  • 按钮元素
    <button> </button>, <input type=“button”>按钮;
    <input type=“submit”>确认 ;
    <input type=“reset”>重置;
    <input type=“image” src=""> 图片按钮。

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

推荐阅读更多精彩内容