前端基础类学习我爱编程

初识HTML-相关概念

2017-03-17  本文已影响51人  饥人谷_米弥轮

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的时候先不管样式,重点放在HTML的结构和语义化上,让HTML能提现页面结构或者内容,,然后进行 css 样式设置,减少 HTML 与 CSS 契合度(即内容与样式分离) ,写JS的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化(即行为分离)。

4.有哪些常见的meta标签

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

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

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

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

原因:
解决方法:

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

  • Trident内核代表产品Internet Explorer,又称其为IE内核。
    Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

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>
上一篇下一篇

猜你喜欢

热点阅读