HTML基本概念

HTML、XML、XHTML 有什么区别

定义

  • HTML,超文本标记语言,是语法较为松散的、不严格的Web语言;
  • XML,可扩展标记语言,主要用于存储数据和结构参考;
    设计宗旨是传输数据,而非显示数据。
    自行定义标签
  • XHTML,可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格,包含了所有与XML语法结合的HTML 4.01元素参考w3school)。

XML与HTML主要差异:HTML 旨在显示信息,而 XML 旨在传输信息。

XHTML与HTML 类似,但语法更严格,如下:

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素
<html>
<head> ... </head>
<body> ... </body>
</html>

怎样理解 HTML 语义化 怎样理解内容与样式分离的原则

HTML语义化

  • WHAT:根据内容的的结构化含义,选用合适的标签。

  • WHY

  • 有利于SEO:搜索引擎的爬虫是读不懂无语义的span和div的,因此语义化标签能使爬虫抓取更多的有效信息。

  • 有助于爬虫抓取更多的有效信息(爬虫是依赖于标签来确定上下文和各个关键字的权重)

  • 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构

  • 方便其他设备的解析(如屏幕阅读器、盲人阅读器、移动设备)

  • 便于团队开发和维护

内容与样式分离原则
HTML负责内容与结构,CSS负责样式,JS负责行为,各司其职。即HTML内不出现行内样式,JS也不去直接操作样式(可通过给元素添加删除class来控制样式变化)。


有哪些常见的meta标签

  • http-equiv(模拟HTTP的响应消息头)

    <meta http-equiv="Content-Type" content="text/html;charset=gb_2312-80">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta http-equiv="Refresh" content="n;url=http://yourlink">
    <meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">
    <meta http-equiv="windows-Target" content="_top">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
  • name & content(网页的描述信息)

<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">

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

文档声明位于文档中的最前面的位置,用于告知浏览器文档使用哪种 HTML 或XHTML 规范。

常见的DOCTYPE声明:

  • HTML 5 <!DOCTYPE html>

  • HTML 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

  • XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

严格模式和混杂模式区别

  • 严格模式:包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
  • 混杂模式:包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE html>用于告知浏览器用HTML5的语法来解析文档。


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

代码在编辑器中保存时使用的编码方式,与浏览器在解析时使用的解码方式不一致。
html 的 <head>里添加<meta charset="编码方式">保持与编辑器中设置的编码方式一致即可解决。
(常见的字符编码方式资料参考)


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

  • IE
    IE 使用 Trident ,闭源,只有微软的 IE 在使用,只能用于Windows平台。存在与W3C标准脱节、大量Bug未修复的问题。
  • Firefox
    Firefox 使用 Gecko ,就是以前的 Netscape 使用的 Mozilla 引擎,Netscape 倒了以后,成立了Mozilla基金会,将这个引擎完全重写,开源。此外Gecko也是一个跨平台内核,可以在Windows、BSD、Linux和Mac OS X中使用。
  • Safari
    Safari 使用的是苹果公司根据 KHTML 修改来的 WebKit),闭源。 WebKit本身主要是由两个引擎构成的,一个正是渲染引擎“WebCore”,另一个则是javascript解释引擎“JSCore”,它们均是从KDE的渲染引擎KHTML及javascript解释引擎KJS衍生而来。
  • Chrome
    谷歌Chrome/Chromium浏览器从08年创始至今一直使用苹果公司的WebKit作为浏览器内核原型,是WebKit的一个分支,我们可以称之为Chromium引擎。在13年发布的Chrome 28.0.1469.0版本开始,Chrome放弃Chromium引擎转而使用最新的Blink引擎(基于WebKit2——苹果公司于2010年推出的新的WebKit引擎),Blink对比上一代的引擎精简了代码、改善了DOM框架,也提升了安全性。

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

  • 换行
<br/>
  • 横线
<hr/>
  • 文本突出
<mark>Text</mark>
<strong>Text</strong>
<em>Text</em>>
  • 标题1~6
<h1>h1</h1> 
  • 段落
<p>This is a paragragh.</p>
<div>Text</div>
  • 图片(自闭合标签在HTML 5标准中可不加“/”,XHTML必须加)
![](xxx.jpg)
  • 有序列表
 <ol>
       <li>Coffee</li>
       <li>Tea</li>
       <li>Milk</li>
 </ol>
  • 无序列表
 <ul>
       <li>Coffee</li>
       <li>Tea</li>
       <li>Milk</li>
 </ul>
  • 标题:内容

    <dl>
      <dt>商品名称:</dt>
      <dd>青花瓷</dd>
      <dt>特征:</dt>
      <dd>白色</dd>
      <dd>圆口</dd>
      <dt>商品介绍</dt>
      <dd>这是一个年代久远的瓷器,很贵,易碎</dd>
    </dl>
    
  • 超链接

<a target="_blank" href="http://www.baidu.com/">百度</a>
<a href="mailto:xxx@qq.com">联系我们</a>
<a href="#">联系我们</a>
  • 按钮
<button>按钮</button>
  • table

    <table cellpadding="4" cellspacing="10" border="1" width="100%">
        <thead>
            <caption>Kaisla's Table</caption>
            <colgroup>
            <col span="2" align="left">
            <col align="right">
          </colgroup>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </thead>
        <tbody>
            <tr>
                <td align="right">00</td>
                <td valign="bottom">01</td>
                <td>02</td>
            </tr>
            <tr>
                <td>10</td>
                <td>11</td>
                <td>12</td>
            </tr>
        </tbody>
        <tfoot>
            <td>20</td>
            <td>21</td>
            <td>22</td>
        </tfoot>
    </table>
    
    

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

推荐阅读更多精彩内容

  • HTML、XML、XHTML 有什么区别 1.HTML 是用来描述网页的一种语言,指的是超文本标记语言 (Hype...
    饥人谷_牛牛阅读 672评论 0 2
  • HTML、XML、XHTML有什么区别? XMLXML是The Extensible Markup Languag...
    zx9426阅读 422评论 0 1
  • 1.meta标签 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述...
    姚小帅阅读 325评论 0 1
  • 1.HTML、XML、XHTML的区别 HTML:超文本标记语言(Hyper Text Markup Langua...
    IT男的成长记录阅读 282评论 0 1
  • HTML、XML、XHTML 有什么区别 HTML全名为**超文本标记语言**(Hyper Text Markup...
    别让我一个人醉_1fa7阅读 487评论 0 1