继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

初识HTML-相关概念

largeQ
关注TA
已关注
手记 824
粉丝 92
获赞 585

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 ...:用于展示一系列标题内容的场景
代码:

webp

Paste_Image.png


显示:


webp

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>

效果是:


webp

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>



作者:饥人谷_米弥轮
链接:https://www.jianshu.com/p/240960b7532c


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP