任务4-HTML初识

1、HTML、XML、XHTML 有什么区别?

1)HTML,超文本标记语言,是语法较为松散的、不严格的Web语言;

2)XML,可扩展标记语言, 是一种标记语言,很类似 HTML;
它的设计宗旨是传输数据,而非显示数据,XML标签没有被预定义,您需要自行定义标签。XML 被设计为具有自我描述性。
XML 和 HTML 为不同的目的而设计:
XML 被设计为传输和存储数据,其焦点是数据的内容。
HTML 被设计用来显示数据,其焦点是数据的外观。
即HTML 旨在显示信息,而 XML 旨在传输信息。

3)XHTML,可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格,比如在XHTML标准中:
元素必须被正确地嵌套。
元素必须被关闭。
标签名必须用小写字母。
文档必须拥有根元素。

2、怎样理解 HTML 语义化?

HTML是一种对文本内容进行结构和语义(或者说“意义”)进行说明的方法。
它会告诉我们说:“这行是一个标题,这几行组成了一个段落。这些文字是项目列表,这些文字是链接到互联网上另一个文件的超链接。”

值得注意的是,不应该让HTML来告诉我们:“这些文字是蓝色的,这些文字又是红色的。这部分内容是最最靠右的一栏,这行内容是斜体字。”这些和表现相关的信息是CSS的工作。

在做前端开发的时候要记住:HTML告诉我们一块内容是什么(或其意义),而不是它长的什么样子。当我们提到“语义标记”的时候,我们所说的HTML应该是完全脱离表现信息的,其中的标签应该都是语义化地定义了文档的结构。

HTML语义化的优点:
1.去掉或样式丢失的时候能让页面呈现清晰的结构。
2.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。
3.方便搜索引擎和网络爬虫很好的解析。
4.便于团队开发和维护。

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

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

4、有哪些常见的meta标签?

1、META标签的keywords 写法为:<meta name="Keywords" content="信息参数" /> meat标签的Keywords的的信息参数,代表说明网站的关键词是什么。

2、META标签的Description <meta name="Description" content="信息参数" /> meta标签的Description的信息参数,代表说明网站的主要内容,概况是什么。

3、META标签的http-equiv=Content-Type content="text/html 代表的是HTTP的头部协议,提示浏览器网页的信息。
写法为:<meta http-equiv="Content-Type" content="text/html; charset=信息参数" >
charset="信息参数" 指定字符集即网采用的编码方式:
GB2312=简体中文;
BIG5=繁体中文;
iso-2022-jp=日文;
ks_c_5601=韩文;
ISO-8859-1=英文;
UTF-8=世界通用的语言编码;
在HTML5中,在表达charset信息时可以简写,前面的内容可以去掉,即写法是: <meta charset="GBK">

4、<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 适配移动设备。

5、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">适配双核浏览器。

6、META标签的generator <meta name="generator" content="信息参数" /> meta标签的generator的信息参数,代表说明网站的采用的什么软件制作。

7、META标签的author <meta name="author" content="信息参数"> meta标签的author的信息参数,代表说明网页版权作者信息。

8、META标签的http-equiv="Refresh" <Meta http-equiv="Refresh" Content="时间; Url=网址参数"> meta标签的Refresh代表多少时间网页自动刷新,加上Url中的网址参数就代表,多长时间自动链接其他网址。

9、META标签的HTTP-EQUIV="Pragma" CONTENT="no-cache" <META HTTP-EQUIV="Pragma" CONTENT="no-cache">代表禁止浏览器从本地计算机的缓存中访问页面内容,这样设定,访问者将无法脱机浏览。

10、META标签的COPYRIGHT <META NAME="COPYRIGHT" CONTENT="信息参数"> meta标签的COPYRIGHT的信息参数,代表说明网站版权信息。

11、META标签的http-equiv="imagetoolbar" <meta http-equiv="imagetoolbar" content="false" /> 指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。

12、META标签的Content-Script-Type <Meta http-equiv="Content-Script-Type" Content="text/javascript"> W3C网页规范,指明页面中脚本的类型。

13、META标签的revisit-after <META name="revisit-after" CONTENT="7 days" > revisit-after代表网站重访,7 days代表7天,依此类推。

14、META标签的Robots <meta name="Robots" contect="信息参数"> Robots代表告诉搜索引擎机器人抓取哪些页面 其中的属性说明如下:
信息参数为all:文件将被检索,且页面上的链接可以被查询;
信息参数为none:文件将不被检索,且页面上的链接不可以被查询;
信息参数为index:文件将被检索;
信息参数为follow:页面上的链接可以被查询;
信息参数为noindex:文件将不被检索,但页面上的链接可以被查询;
信息参数为nofollow:文件将不被检索,页面上的链接可以被查询。

15、META标签的<meta http-equiv="windows-Target" contect="_top"> 代表页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用,设置有:_blank、_top、_self、_parent。

16、META标签的set-cookie <meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT"> 代表Cookie设定,如果网页过期,存盘的cookie将被删除,需要注意的也是必须使用GMT时间格式

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

浏览器分为两种模式,一种是严格模式,一种是混杂模式,这两种模式就是是通过doctype的定义来区分,
什么是doctype,doctype是一种标准通用标记语言的文档类型声明,目的是告诉浏览器要使用什么样的文档类型定义(DTD)来解析文档,doctype 最早是xml的概念,在xml中它的定义是通过一种特定的语法,作为一种元数据,来描述xml文档中允许出现的元素,以及各元素的组成,规则等。
doctype在html中的作用是触发浏览器的标准模式,如果html中省略了doctype,浏览器会进入到混杂模式的状态也称之为兼容模式,在这种模式下有些样式,布局会和标准模式(或称严格模式)存在差异,html标准,DOM标准只规定了标准模式下的行为,没有对兼容模式做出规定,因此不同浏览器在兼容模式下的处理也是不同的,应用兼容模式比较困难,所以需要慎用。
在html4中 doctype有三种模式
严格模式:<!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">。
因为浏览器有容错能力,实际上运用这三种模式并不十分严格,浏览器都能正确解析出用户想要的结果,所以
在html5中doctype就简化成了<!DOCTYPEhtml>。

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

浏览器解析页面时使用的编码标准与网页实际的编码标准不一致就会导致乱码,可能的原因有两种:
1)网页未声明编码标准,浏览器渲染时自动使用的编码标准与文档实际的编码标准不一致。此时可以为网页添加编码声明或在浏览器中手动指定正确的编码标准。

2)网页声明了编码标准,但是与实际使用的不一致,浏览器在渲染时采用网页声明的编码设置,于是出现乱码。只要将声明的编码标准更改成正确的就可以 了。

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

1)IE浏览器(Internet explorer)
IE浏览器是世界上使用最广泛的浏览器,它由微软公公司开发,预装在windows操作系统中。所以我们装完windows系统之后就会有IE浏览器。
IE浏览器使用Trident内核,又称其为IE内核。Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器还包括:傲游、世界之窗浏览器、Avant、腾讯TT等

2)Safari浏览器
Safari浏览器由苹果公司开发,它也是使用的比较广泛的浏览器之一。Safari预装在苹果操作系统当中,从2003年首发测试以来到现在已经11个年头。是苹果系统的专属浏览器,当然现在其他的操作系统也能装Safari。
Safari使用WebKit内核,webkit 是一个开源项目,包含了来自KDE项目和苹果公司的一些组件,主要用于Mac OS系统,它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。

Firefox浏览器
火狐浏览器是一个开源的浏览器,由Mozilla资金会和开源开发者一起开发。由于是开源的,所以它集成了很多小插件,开源拓展很多功能。发布于2002年,它也是世界上使用率前五的浏览器。
Mozilla Firefox使用Gecko内核,Gecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一,仅次于Trident。

Opera浏览器
opera浏览器是由挪威一家软件公司开发,该浏览器创始于1995.目前其最新版本是opera 20.他有着快速小巧的特点,还有绿色版的,属于轻灵的浏览器。
Opera使用Presto内核,Presto是由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。

Chrome浏览器
Chrome浏览器由谷歌公司开发,测试版本在2008年发布。虽说是比较年轻的浏览器,但是却以良好的稳定性,快速,安全性获得使用者的亲睐。与Safari 一样采用WebKit内核。

其他浏览器
现在很多国内浏览器,像360浏览器,猎豹浏览器,搜狗浏览器使用高速(webkit)和兼容(Trident)双核浏览模式,保证良好兼容性的同时极大提升网页浏览速度。当采用高速模式访问网页出现问题时,可点击地址栏旁边的内核按钮直接切换内核,使用兼容性更佳的兼容模式正常浏览网页。

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

<html></html> 创建一个HTML文档。
<head></head> 设置文档标题和其它在网页中不显示的信息。
<title></title> 设置文档的标题
<body></body> 元素定义文档的主体,包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
<h1></h1>到<h6></h6>描述标题的标签,块元素,从上到下字体依次减少。
<p> </p> paragraph的缩写,描述的是段落,段中没有间距,但是在段与段之间是有间距的,典型的块元素。
<img src="图片地址" alt="信息"/>)插入一张图片,alt 定义当图片无法加载时,显示什么信息。
<a> </a>链接标签,例<a href="URL"></a><a>有比较重要的属性有两个,分别是href、target,href指定超链接地址;target指定打开方式:_blank 新页面打开,_self 为默认值可不写,指在当前页面打开。
<table>标签定义表格,用户注册登录时会用到。
<ul> <li>html列表标签,<ul>表示有序列表。
<ol> <li>html列表标签,<ol>表示无序列表。
<dl> <dt> <dd>内容块标签,dl:内容块,dt:内容块的标题,dd:内容。
<button> 定义一个点击按钮
<strong></strong> 加重文本,通常为黑体。
<em></em> 强调文本通常为斜体。
<!-- comment -->html注释并不会显示在网页上,提高可读性,便于维护。
<br /> 单标签,输出换行。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1 92
  • HTML、XML、XHTML 有什么区别 1.HTML 是用来描述网页的一种语言,指的是超文本标记语言 (Hype...
    饥人谷_牛牛阅读 643评论 0 2
  • HTML、XML、XHTML有什么区别? XMLXML是The Extensible Markup Languag...
    zx9426阅读 412评论 0 1
  • 一、HTML、XML、XHTML 有什么区别 1. HTML是什么? 描述网页的一种语言 超文本标记语言 (Hyp...
    饥人谷_CST阅读 758评论 0 7
  • Spring Web MVC Spring Web MVC 是包含在 Spring 框架中的 Web 框架,建立于...
    Hsinwong阅读 21,776评论 1 92