HTML篇

最新推荐文章于 2023-12-27 09:08:12 发布

爱吃玉米的鱼YA

最新推荐文章于 2023-12-27 09:08:12 发布

阅读量354

点赞数

CC 4.0 BY-SA版权

分类专栏：程序猿

本文链接：https://blog.youkuaiyun.com/CandiceYu/article/details/89189683

程序猿专栏收录该内容

14 篇文章

订阅专栏

HTML篇

HTML简史

蒂姆·伯纳斯-李，一名CERN（欧洲核子研究组织）的物理学家，在80年代后期设计了一种能在网路上分享文档的方式。在这之前，网路上沟通的方式仅限于纯文本传递，比如：电子邮件、FTP(文件传输协议)和Usenet讨论版。HTML是利用内容档案储存至中央服务器的方式，然后再将内容透过浏览器传递至本机工作站。它简化了内容存取的方式，也让更多丰富内容能够显示（诸如较复杂的文本格式与图片的显示）。HTML 源自于SGML——它是一种复杂的文档结构定义和内容描述（文本或图像）语法；从HTML5起，HTML不再坚守SGML的语法。
(
HTML5 为什么只需要写？
● HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
● 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
)

什么是 HTML？

HTML 是一种标记语言（markup language）。它告诉浏览器如何显示内容。HTML把内容（文字，图片，语言，影片等等）和「presentation」（这个内容是如何显示，比如文字用什么颜色显示等等）分开。HTML使用预先定义的元素集合来识别内容形态。元素包含一个以上的标记来包含或者表达内容。标记利用尖括号表示，而结束标记（用来指示内容尾端）则在前面加上斜线。

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

什么是怪异模式和标准模式呢？

浏览器的渲染模式有两种：标准模式和怪异模式。
我们常用的是标准模式，怪异模式是防止浏览器升级版本过高对后面版本的代码不兼容，让浏览器可以向后兼容其他低版本的代码的法规则，比如IE6的怪异模式下可以兼容IE5和IE4的语法。

怪异模式和标准模式的区别？

盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了padding和border。
设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的,而在quirks模式下，则会生效。
设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

如何判断怪异模式还是标准模式？

document上中有一个方法叫做compatMode，window.top.document.compatMode ，当浏览器处于怪异模式的时候会返回字符串“BackCompat”，在标准模式下可以返回“CSS1Compat”，通过这个方法我们就可以判断了。

块级元素和行内元素都有哪些？

块元素(block element)    
   　　* p - 段落    
   　　* dl - 定义列表   
   　　* ol - 排序表单   
   　　* dir - 目录列表   
   　　* div - 常用块级
   　　* table - 表格   
   　　* ul - 非排序列表   
   　　* h1~h6 - 标题    
   　　* address - 地址   
   　　* blockquote - 块引用   
   　　* form - 交互表单    
   　　* menu - 菜单列表   
   　　* fieldset - form控制组   
   　　* pre - 格式化文本    被包围在 pre 元素中的文本通常会保留空格和换行符

 内联元素(inline element)   
   　 　* span - 常用内联容器
   　 　* a - 锚点     
   　 　* big - 大字体   
  　  　* br - 换行   
   　 　* em - 强调     
  　  　* i - 斜体     
  　  　* sub - 下标   
   　 　* sup - 上标         
  　  　* select - 项目选择   
   　 　* small - 小字体文本  
  　  　* strong - 粗体强调     
  　 　 * u - 下划线  
   　 　* font - 字体设定(不推荐) 
   　 　* abbr - 缩写   
   　 　* cite - 引用    
   　 　* dfn - 定义字段   
  　  　* q - 短引用

浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

行内元素和块级元素的具体区别是什么？行内块元素的兼容性使用？

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

兼容性：display:inline-block;display:inline;*zoom:1;

对HTML语义化的理解

用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;(去掉或者丢失样式的时候能够让页面呈现出清晰的结构)
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

例如：<h1 2 3 4 5> 这里的常用的是标题你就不要用div 标签了；或 li 列表，就不要用<p>或了。好处：就是易理解，渲染快，利seo优化；

对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

为什么要使用web标准

具有更好的兼容性。
易于代码维护和开发。
可增加网站的访问量。
标准的web文档更易被转换为其他格式。
更易被搜索引擎访问，也更易被准确索引。
更易被JavaScript和DOM代码访问。
W3C标准：HTML、XHTML、CSS、XML、XSL、DOM。

iframe的优缺点？

优点：
- 并行加载脚本
- 解决加载缓慢的第三方内容如图标和广告等的加载问题
- 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
缺点：
- iframe会阻塞主页面的Onload事件
- 即时内容为空，加载也需要时间
- 搜索引擎的检索程序无法解读这种页面，不利于SEO
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
- 如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

title与h1的区别、b与strong的区别？

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展示强调内容。

描述一下渐进增强和优雅降级之间的不同

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

简述一下src与href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，
例如js脚本，img图片和frame等元素。<script src =”js.js”>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href=”common.css” rel=”stylesheet”/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

知道的网页制作会用到的图片格式有哪些

png-8，png-24，jpg，gif，svg。
Webp（新技术）：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

xhtml和html有什么区别?

XML是可扩展标记语言，它和HTML很相似。单XML的设计宗旨是个传输数据，而不是显示数据（HTML是为了在浏览器上显示数据）。更具体些，XML是用于标记电子文件，使其具有结构性的标记语言，可用来标记数据，定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。XML是一种简单，与平台无关并被广泛采用的标准。

它的优点是它将用户界面与结构化数据分隔开来，这种数据与显示的分离使得集成来自不同源的数据成为可能。客户信息，订单，研究结果，账单付款，病历，目录数据及其他信息都可以转为XML。XML不是替换HTML，而是对HTML的补充。XML标记由文档的作者定义，而且是无限制的。HTML标记则是预定义的，HTML作者只能使用当前HML标准所支持的标记。