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>
    
    

推荐阅读更多精彩内容

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