初识HTML-相关概念

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

HTML:

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

  1. 对大小写不敏感
  2. 松散、简单
  3. 不需要结束符 ' / '
  4. 不需要成对出现
  5. 用于显示数据
XHTML:

可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格。

  1. HTML过渡到XML的过渡版本
  2. 对大小写敏感,必须小写
  3. 标签必须成对出现
  4. 单标签必须有结束标签 ' / '
  5. 属性值必须在引号之内,不能用空值
XML:

可扩展标记语言,主要用于存储数据和结构

  1. 一种标记语言
  2. 可自定义标签
  3. 用于传输数据、描述,而非显示数据
  4. 是HTML的补充

2.怎样理解 HTML 语义化

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

  1. 有利于SEO的搜索
  2. 用户体验
  3. 方便特殊群体的设备解析
  4. 便于开发和维护
  5. 尽可能的少用无语义标签,如:div、span
  6. 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
  7. 不要使用纯样式标签,如:b、font、u等,改用css设置。
  8. 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
  9. 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元10. 格要区分开,表头用th,单元格用td;
  10. 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
  11. 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

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

  • 浏览器加载网页页面速度变快。分离原则下,大部分页面代码写在了CSS当中,页面体积容量变得更小。
  • 网页修改设计时,效率、省时。根据html标签内ID或class的标记,到CSS里找到相应的ID或class,可以快速替换指定位置的样式,不会破坏页面架构和其他部分的样式。
  • 典型的应用就是网页换肤,使用相同的 html 结构,不同的 css 样式。
  • 更好地被搜索引擎收录。基于内容与样式分离的原则,html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
  • css样式的分离,它可以根据不同的浏览器,达到显示效果的统一。保证网页架构不变形的前提下,放心在不同浏览器渲染显示样式。
重点是写HTML的时候先不管样式,重点放在HTML的结构和语义化上,让HTML能提现页面结构或者内容,,然后进行 css 样式设置,减少 HTML 与 CSS 契合度(即内容与样式分离) ,写JS的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化(即行为分离)。

4.有哪些常见的meta标签

看了这篇文章meta标签的总结,很详细:

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

  • <!doctype html>用来定义文件类型(DTD),告诉浏览器该文件是属于什么类型,用什么规范来解析文档。
  • 严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。
  • 混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。
  • 如何区分:浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD 直接相关。
    1、如果文档包含严格的 DOCTYPE ,那么它一般以严格模式呈现。(严格 DTD ——严格模式)
    2、包含过渡 DTD 和 URI 的 DOCTYPE ,也以严格模式呈现,但有过渡 DTD 而没有 URI (统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现。(有 URI 的过渡 DTD ——严格模式;没有 URI 的过渡 DTD ——混杂模式)
    3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。(DTD不存在或者格式不正确——混杂模式)
    4、HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。( HTML5 没有严格和混杂之分)

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

原因:
  • 比如网页源代码是gbk的编码,而内容中的中文字是utf-8编码的,这样浏览器打开即会出现html乱码。反之网页是编码utf-8,内容是gbk也会出现乱码。
  • html网页编码是gbk,而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
  • 浏览器不能自动检测网页编码,造成网页乱码。
解决方法:
  • html网页源代码编码与中文字输入编码一致
  • 如果网页设置编码是gbk的,而数据库储存数据编码格式是UTF-8的,这个时候程序查询数据库数据显示数据代码转码即可。
  • 更改浏览器当前的网页编码

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

  • Trident内核代表产品Internet Explorer,又称其为IE内核。
    Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
  • Gecko内核代表作品Mozilla
    FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一,仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
  • WebKit内核代表作品Safari、Chromewebkit
    是一个开源项目,包含了来自KDE项目和苹果公司的一些组件,主要用于Mac OS系统,它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
  • Presto内核代表作品OperaPresto
    是由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。
  • 多种内核
    傲游浏览器3傲游浏览器3.0是国内首先尝试使用Webkit与Trident双核心的浏览器。Webkit核心将使你打开网页的速度更快,Trident核心则会带给你更好的兼容性支持。除此之外,傲游3.0目前还包括智能填表、智能地址栏、弹窗过滤、在线收藏等功能。
    QQ浏览器6.11是腾讯公司推出的新一代浏览器,使用极速(Webkit)和普通(Trident)双浏览模式,设计了全新的界面交互及程序框架,目的是为用户打造一款快速、稳定、安全、网络化的优质浏览器。
    搜狗高速浏览器**搜狗浏览器,搜狐出品,使用高速(webkit)和兼容(Trident)双浏览模式,保证良好兼容性的同时极大提升网页浏览速度。当采用高速模式访问网页出现问题时,可点击地址栏旁边的内核按钮直接切换内核,使用兼容性更佳的兼容模式正常浏览网页。

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

(1)dl dt dd ...:用于展示一系列标题内容的场景
代码:

Paste_Image.png

显示:


Paste_Image.png

(2)ul li和ol li: ul li 是无序列表, ol li是有序列表
代码如下:
<ul>求职 <li>智联招聘</li> <li>前程无忧</li> <li>51job</li> <li>拉勾网</li> </ul> <ol>前端 <li>javascript</li> <li>html</li> <li>css</li> </ol>

效果是:


Paste_Image.png

(3)button:按钮标签
(4)strong,em,span
em:强调
strong:很重要,强调性更强(比em)
span:修饰一段文字,可以对一个元素内的文字的一部分加上 不同的颜色等css样式

(5)h1,h2...h6:不同级别的标签
(6)p:段落,表示一段文字
(7)a:表示链接,链接到一个地址
跳转到一个网页地址:href是地址,target打开方式,title是光标移动到a标签上后的提示文字<a href="http://www.jirengu.com/app/watch/1340/1?vsum=12"target="_blank" title="It's title!">饥人谷视频</a>

焦点跳到指定id的标签:'#' 后面就是id<a href="#id">点这里焦点将跳转到指定Id的标签</a>

(8)img:展示一张图片
src:图片地址
alt:图片加载失败后提示的文字

(9)div:用于给页面划分区块,让结构更清晰
(10)iframe:用于嵌入一个页面

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

推荐阅读更多精彩内容

  • HTML、XML、XHTML 有什么区别? HTML,是一种用于创建网页的标准标记语言,语法要求较为松散; XML...
    VirtualX阅读 608评论 0 5
  • 问答题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阅读 410评论 0 1
  • 1、HTML、XML、XHTML 有什么区别? 1)HTML,超文本标记语言,是语法较为松散的、不严格的Web语言...
    大胡子歌歌阅读 324评论 0 1