任务4作业

HTML、XML、XHTML 的区别


HTML(hype text markup language):超文本标记语言,是最早写网页的语言,语法较为松散的、大小写混写编码不规范不严格HTML设计宗旨是用来显示数据,旨在数据的外观,显示信息。

XML(extensible markup language),可扩展标记语言,设计宗旨是传输数据、描述数据,而非显示数据;实为存储数据格式的文件,标签需要自定义。

XHTML(extensible hypertext markup language),可扩展超文本标记语言,结合XML和HTML的优点。xhtml文档具有良好完整的排版,元素必须要有结束标签;元素必须嵌套;严格区分大小写。

怎样理解HTML语义化


定义:语义化HTML是一种编写HTML的方式,意为写页面时选择合适的代码结构和标签。

优点:便于开发者阅读,维护。同时让浏览器的爬虫和机器很好地解析。使页面整体的结构清晰有条理。在没有CSS的情况下也能呈现较好的内容结构、代码结构。

如何做到:

  <div>和<span>在HTML中没有语义,尽量少用<div>、<span>。

  熟悉所有规范的HTML标签使用场景,熟悉各标签规范的属性,给HTML标签设置的两个必要属性是alt属性和title属性,这两个属性可以提高HTML的语义。

  在img标签中,alt是必须要设置的属性,因为img是自闭合标签,并没有包含可以解释说明图片的额外信息。alt属性可以在无法显示图像时候浏览器将显示代替文本,可以显示图像是alt为图像添加描述性文本。

例如<img src="/e/1/hehe.jpg" alt="滑稽表情">。

在HTML里,title属性是可选属性,当标签包含的内容不足以说明语义时,可以通过title添加额外的信息, 在浏览器中当鼠标移到元素上时会显示提示文本。

例如<abbr title="hahaha">hhh</abbr> 

在lable标签中的for属性。标签是元素定义的标注。标签的for属性值指代一个表单元素,属性值为此表单元素的id值。for属性的作用不仅把标签上的触发事件指向了for属性指代的表单元素,也从语义上绑定了和此表单元素。

例如<lable for="male">Male</lable>

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


HTML代表页面上的内容,CSS代表页面的样子,JS代表页面上的交互和功能就是行为。写HTML时只需注重结构和语义,写好再去考虑样式。写JS时,勿用JS操作样式;例如网页换肤色:通过HTML里的ID或class标记,在CSS中找到相应的ID或class,js无需改动,节省了大量时间。在写HTML时不出现属性样式,行内样式。

如何做到:内容与样式分离的原则的实现,一个是要依靠意识,另一个是依靠经验。

例:面对一个分块明显的网页设计图时:

初级的开发人员思路及制作方法:div 层层嵌套;

中级的开发人员思路及制造方法:去掉多余的 div ,进行简化;

高级的开发人员思路及制造方法:最大化的简化 html 的结构,然后用 css 进行设置,减少 html 与 css 的契合度。

有哪些常见的meta标签


<meta charset="utf-8">编辑器里保存的代码所存为的一种编码格式,浏览器需要解析字符串显示内容,页面保存什么格式就在<meta charset="">写什么格式。

<meta http-equiv="X-UA-Compatoble" content="IE=edge,chrome=1">强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是ie浏览器就用最新的ie渲染,如果是双核浏览器就用chrome内核。

<metahttp-equiv=”Refresh”content=”5;URL”>:告诉浏览器在“5”秒后跳转到“一个网址”

<meta name="viewport" content="width=device-width, initial-scale=1.0">使页面在移动端展示合理,禁用缩放(zooming)功能,用户只能滚动屏幕。

<metaname="keywords"content="class">该网页的关键字是“class”。

<metaname="description"content="repositories">该网页的主要内容是“repositories”。

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


1.doctype声明的作用:在Web设计中用来说明你用的XHTML或者HTML是什么版本。、

2.严格模式(标准模式):浏览器根据浏览器支持的坐高标准呈现页面。

  混杂模式(兼容模式):页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止老站点无法工作。

3.<!doctype html>!的作用:是html5的文档声明文件的合法性验证。 如果文件代码不合法,那么浏览器解析时便会出一些差错。HTML编辑器通常也会在语法高亮的同时提供合法性验证。

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


  编码器编写的HTML在保存时会按照自己默认的格式保存,使用浏览器打开HTML时,在没有<meta charset="xxx">时,浏览器会自动选择一种方式解析字符集,如果编码器储存的是gbk格式,浏览器却选择utf-8解析,此时网页乱码。

  还有一种情况是在编码器中指定<meta charset="gbk">格式在保存HTML时却用utf-8保存,浏览器打开HTML时看到<meta charset="gbk">就会按照gbk的字符集解析。

解决方法:

  编辑器保存文档使用的字符集一定要跟 HTML 文档指定的字符集匹配。文件保存时清楚用哪种字符集保存的,也可以全用“utf-8”,“utf-8”包括世界上所有的文字。

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

IE浏览器内核:Trident

Trident内核程序在1997年的IE4中首次被采用,简称IE内核。它是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的IE8。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,有许多采用IE内核而非IE的浏览器涌现。

Netscape6浏览器内核:Gecko

Gecko的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。基于开源内核的特性,备受青睐,出现很多以Gecko为内核的浏览器,因此有挺大的市场占有量。

Opera浏览器内核:Presto

Presto内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核,但对网页的兼容性差。

苹果Safari浏览器内核:Webkit

Webkit是苹果公司自己的内核,也是使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来。且Webkit开放源代码。

傲游浏览器3、QQ浏览器和搜狗高速浏览器都是使用Webkit与Trident双核心

Webkit核心让网页打开速度更快,Trident核心则带来更好的兼容性支持。使用高速(webkit)和兼容(Trident)双浏览模式,保证良好兼容性的同时极大提升网页浏览速度。当采用高速模式访问网页出现问题时,可直接切换内核,使用兼容性更佳的兼容模式正常浏览网页。

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


h1,h2,h3,h4,h5,h6:标题

p:段落,大段文字

a:HTML链接

例:<a href="http://www.w3school.com.cn">This is a link</a>,在 href 属性中指定链接的地址。

img:图像

例:<img src="hehe.jpg" alt="avatar">,只闭合不加“/”。

div:块,页面分区

例:<divid="header">...</div>

        <divid="content">...</div>

        <divid="footer">...</div>

ul li:无序列表,表示并列内容,ul必须后面跟着li,可嵌套

ol li:有序列表,可以表示步骤、编号的并列内容,ol后面必须跟着li。

dl:列表,dt:列表下的标题,dd:列表下的标题的描述。

例:


button:按钮

strong、span、em、:都指强调,强调的程度依次减弱。可用于单独修改某一段字的背景色或者行为。

iframe:嵌入一个界面

例:<iframesrc="http://jirengu.com"name="myPage"></iframe>

table:展示表格,thead、tbody、tfoot在不做布局时候可以省略,tr:列,td:行

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

推荐阅读更多精彩内容