初识HTML

一、HTML、XML、XHTML 有什么区别

HTML: 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准。超文本标记语言它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。

XHTML:XHTML 指扩展超文本标签语言
XHTML是当前HTML版的继承者。HTML语法要求比较松散,这样对网页编写者来说,比较方便,但对于机器来说,语言的语法越松散,处理起来就越困难,对于传统的计算机来说,还有能力兼容松散语法,但对于许多其他设备,比如手机,难度就比较大。因此产生了由DTD定义规则,语法要求更加严格的XHTML。大部分常见的浏览器都可以正确地解析XHTML,即使老一点的浏览器,XHTML作为HTML的一个子集,许多也可以解析。也就是说,几乎所有的网页浏览器在正确解析HTML的同时,可兼容XHTML。当然,从HTML完全转移到XHTML,还需要一个过程。
XML:可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。在电子计算机中,标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种的信息比如文章等。它可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言

XHTML与HTML的区别:
从HTML到XHTML过渡的变化比较小,主要是为了适应XML。最大的变化在于文档必须是良构的,所有标签必须闭合,也就是说开始标签要有相应的结束标签。另外,XHTML中所有的标签必须小写。而按照HTML 2.0以来的传统,很多人都是将标签大写,这点两者的差异显著。在XHTML中,所有的参数值,包括数字,必须用双引号括起来(而在SGML和HTML中,引号不是必须的,当内容只是数字、字母及其它允许的特殊字符时,可以不用引号)。所有元素,包括空元素,比如img、br等,也都必须闭合,实现的方式是在开始标签末尾加入斜扛。省略参数,比如<option selected>,也不允许,必须用<option selected="selected"/>。两者的详细差别,可通过W3C XHTML说明来查阅。

XML与HTML的区别:

它不是超文本标记语言的替代。
它是对超文本标记语言的补充。
它和超文本标记语言为不同的目的而设计:
它被设计用来传输和存储数据,其焦点是数据的内容。
超文本标记语言被设计用来显示数据,其焦点是数据的外观。
超文本标记语言旨在显示信息,而它旨在传输信息。
对它最好的描述是:它是独立于软件和硬件的信息传输工具。

二、怎样理解 HTML 语义化

首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用。

语义化的网页的好处,最主要的就是对搜索引擎友好,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。
语义 Web 技术有助于利用基于开放标准的技术,从数据、文档内容或应用代码中分离出意义。

三、怎样理解内容与样式分离的原则

CSS与HTML分离的优点
1、使页面载入得更快由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式的逐层加载速度快。
2、修改设计时更有效率在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。而表格布局则更不省事。3、保持视觉的一致性DIV+CSS最重要的优势之一:保持视觉的一致性;以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。4、更好地被搜索引擎收录由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中代码更加适合搜索引擎。5、对浏览者和浏览器更具亲和力对浏览者和浏览器更具亲和力,由于CSS富含丰富的样式,使页面更加灵活性,更加的美观,它可以根据不同的浏览器,而达到显示效果的统一和不变形。

CSS与HTML分离的缺点
1、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞大。
2、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火狐浏览器,在IE中显示正常的页面,到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。
3、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身

四、常用的meta标签总结

页面关键词

<meta name="keywords" content="your tags" />

页面描述

<meta name="description" content="150 words" />

==上面的2个 可以同于seo的优化==

页面重定向和刷新
  <meta http-equiv="refresh" content="0;url=" />

页面重定向和刷新
  <meta http-equiv="refresh" content="0;url=" />

charset 申明编码
  <meta charset='utf-8' />

禁止浏览器从本地计算机的缓存中访问页面内容
  <meta http-equiv="Pragma" content="no-cache">

隐藏状态栏/设置状态栏颜色
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

WebApp全屏模式
  <meta name="apple-mobile-web-app-capable" content="yes" />

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

文档声明的作用:doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下,“阅读程序”通常是浏览器或者校验器这样的一个程序,“规则”则是W3C所发布的一个文档类型定义(DTD)中包含的规则。Doctype可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

严格模式和混杂模式:
当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:标准模式和混杂模式
在标准模式中,浏览器以其支持的最高标准呈现页面;
在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

<!doctype html> 的作用:它是html5标准网页声明,全称为Document Type HyperText Mark-up Language,意思为文档种类为超文本标记性语言或超文本链接标示语言,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明。表示网页采用html5

附:

模式触发
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。
如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。
包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
html5既然没有DTD,也就没有严格模式与宽松模式的区别,html5有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。

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

乱码产生的根本原因是你保存的字符编码和浏览器解析时的解码格式不匹配,一般产生乱码的都是中文

解决:即通知浏览器用正确的方式解码,在文件保存的时候你自己要清楚是用哪种字符编码保存的。如果你的文件是保存为utf-8格式,那么一定要在html 的 <head>里添加<meta charset="utf-8">,这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了,直接用utf-8去解码。 同理,如果你的文件保存为gbk格式,一定在文件里添加<meta charset="gbk">

七、常见的浏览器有哪些,什么内核?
  1. IE浏览器——Trident内核
    ==另外IE10之后 微软启用了新的Edge引擎==
  2. Chrome浏览器——WebKit内核
  3. FireFox浏览器——Gecko内核
  4. Opera浏览器——Presto内核
  5. Safari浏览器——WebKti内核
  6. 国产浏览器——双内核,Trident和WebKit
八、列出常见的标签,并简单介绍这些标签用在什么场景

html 元素 代表 HTML 文档的根(顶级元素),其他所有元素都是此元素的后代
base 元素 指定文档里所有相对 URLs 地址的基础 URL 。一份文档最多只能有一个 <base> 元素。
head 元素 规定文档相关的通用信息(元数据),包括文档标题、样式或脚本的链接或定义。
link元素指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。
meta 元素表示那些不能由其它HTML元素(<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息。
style元素包含了文档的样式化信息或者文档的一部分。指定的样式化星系包含的该元素内,通常是CSS的格式
title元素 定义文档的标题,显示在浏览器的标题栏或标签页上。它只可以包含文本,若是包含有标签,则包含的任何标签都不会被解释。
address元素可以让作者为它最近的[article]或者<body>祖先元素提供联系信息。在后一种情况下,它应用于整个文档。
article元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目
aside 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条,例如来自词汇表的定义。也可能有其他类型的信息,例如相关的广告、笔者的传记、web 应用程序、个人资料信息,或在博客上的相关链接。
footer 元素表示最近一个章节内容元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
header元素表示一组引导性的帮助,可能包含标题元素,也可以包含其他元素,像logo、分节头部、搜索表单等。
div元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器,它在语义上不代表任何特定类型的内容,它可以被用来对其它元素进行分组,一般用于样式化相关的需求
dt 元素 (或 HTML 术语定义元素)用于在一个定义列表中声明一个术语。该元素仅能作为 dl 的子元素出现。通常在该元素后面会跟着 dd元素, 然而,多个连续出现的 dt 元素都将由出现在它们后面的第一个 dd 元素定义。
figure 元素代表一段独立的内容, 经常与说明(caption) <figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主体(main flow)时,它的位置独立于主体。这个标签经常是在主文中引用的图片,插图,表格,代码段等等,当这部分转移到附录中或者其他页面时不会影响到主体
h1–h6代表标题的六个级别,前者是最高级别,后者是最低级别

标签  |作用
 ---|---
h1|标题
p |指段落
b | 用于文字的粗体
I |  用于文字的斜体
br/|  用于自动换行
hr/|用于插入水平线
strong |用于加粗
em |起强调作用,默认显示斜体
abbr |指缩写
cite |指引用来源
dfn|指一个新术语的定义
address| 包含设计者的联系详情
ins| 用来显示已经插入文档中的内容
del|用来显示已经从文档中删除的文本
ol|用于创建有序列表
li|代表列表中的项目
ul| 用来创建无序列表
a| 用于建立链接,有一个重要的值href,href特性的值设定了链接的目标
table| 用来 创建表格
th |指表格列或行的标题
tr |代表表格行
td| 单元格列
title 属性和 alt属性分别有什么作用?

title属性是鼠标划上去显示的内容,
alt是在图片不能正常加载时候显示的提示语

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

推荐阅读更多精彩内容

  • HTML、XML、XHTML 有什么区别 1.HTML 是用来描述网页的一种语言,指的是超文本标记语言 (Hype...
    饥人谷_牛牛阅读 678评论 0 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 1.html、xml、xhtml HTML HTML(Hyper Text Mark-up Language)即超...
    饥人谷_小侯阅读 436评论 0 1
  • HTML与XML与XHTML三者之间的区别 HTML的简介超文本标记语言(HyperText Markup Lan...
    24_Magic阅读 349评论 0 1
  • 一、HTML、XML、XHTML有什么区别? 首先我们先来简略了解这三种语言是什么。HTML:超文本标记语言(英语...
    青鸣阅读 341评论 0 1