资讯专栏INFORMATION COLUMN

关于HTML的那些事

Zachary / 1694人阅读

摘要:标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重,有利于使阅读源代码的人更容易将网站分块,便于阅读,维护和理解。

HTML基础知识 meta标签

        
        
        
        
        
        
        
        
        
doctype作用,严格模式和混杂模式如何区分,它们有何意义?

doctype声明位于HTML文档的第一行,位于html标签之前,用于告知浏览器解析器用什么文档标准解析这个文档,doctype不存在或者格式不正确会导致文档以兼容模式呈现

在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。

如果HTML文档包含形式完整的doctype,那么他一般是以标准模式呈现,对于HTML4.01文档,包含严格的DTD的doctype常常导致页面以标准模式呈现,doctype不存在或者格式不对会导致文档以混杂模式出现。

请描述一个网页从开始请求到最终显示的完整过程?

1.在浏览器输入网址
2.发送至DNS服务器并获得域名对应的WEB服务器IP地址
3.与WEB服务器建立TCP连接
4.浏览器向WEB服务器的IP地址发送相应的HTTP请求
5.WEB服务器响应请求并返回指定的url的数据或错误信息。如果重定向,则重定向到新的url地址
6.浏览器下载数据后解析HTML源文件,解析的过程中实现对页面的排版,解析完成后在浏览器显示基础页面
7.分析页面中的超链接并显示在当前页面,重复以上过程直至无超链接需要发送,完成全部数据显示。

html5为什么只需要写<!DOCTYPE HTML>?

html5不基于SGML,因此不需要对DTD进行引用
html4.01基于SGML,因此需要对DTD进行引用

浏览器内核的理解

浏览器最重要或者说核心部分:渲染引擎,不过我们一般称之为浏览器内核。负责对网页语法的解释(标准通用标记语言下的一个应用html,javascript)并渲染显示的网页。渲染引擎决定了浏览器如何显示网页内容以及页面的格式信息,不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同浏览器内核的浏览器里渲染显示的效果也不同。
渲染引擎负责获取网页的内容,整理讯息,以及计算网页的显示方式

常用浏览器内核

Trident内核(MSHTML):IE,360,搜狗
Gecko内核:FireFox
Presto内核:Opera7以上
(Opera内核原为Presto 现为Blink)
webkit内核:Safari,Chrome
(Chrome的Blink使webkit的分支)
EdgeHTML内核:Microsoft Edge
(此内核其实是从MSHTMLfork来的,删除了几乎所有IE私有特性)

简述一下对html语义化的理解

1.html语义化让页面的内容结构化,结构更清晰,便于对浏览器,搜索引擎解析
2.即便在没有css样式的情况下也能以一种文档格式显示,并且是容易阅读的。
3.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,有利于SEO
4.使阅读源代码的人更容易将网站分块,便于阅读,维护和理解。

行级元素和块级元素分别有哪些?
行级元素:
a, em(强调),strong(粗体强调),span,i(斜体),img,b(粗体),lable(表格标签),
select(项目选择),textarea(多行文本输入框)sub(下标)
不能设置宽高宽高是内容的高度,可以设置padding,只能设置左右的外边距,不能设置上下外边距
块元素:
不设置高,靠内容充起来,宽度不设置的情况下是充满父级元素的
可以设置宽高,外边距,内边距
div dl定义列表 dt dd ul 非排序列表
ol,p,h1-h6,table,fieldset form,
空元素:br hr
行内块级元素 input和img
a标签

href里不仅可以是一个远程地址,还可以是一个本地文件

    百度一下
    
link和@impoort的区别

1.link属于XHTML标签,而@import是CSS提供的
2.页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完了再加载
3.import只在ie5以上才能被识别,而link是XHTML标签,无兼容性问题
4.link方式的样式权重高于@import的权重
5.使用dom控制样式时的差别,当使用js控制dom去改变样式的时候,只能使用link标签。

列表标签
ol,ul,li样式重置:list-style:none
a样式重置:text-direction :none
ul,ol有上下16px的外边距,左面40px内边距
img标签
图片加载失败






背景图片大于要显示的大小的时候




table标签
11
21 22

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53755.html

相关文章

  • 关于CSS Reset 那些(四)之 构架CSS基础样式库

    摘要:现在回到我们这一章节的标题,将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节,我们都说了哪些内容: CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    mj 评论0 收藏0
  • 关于CSS Reset 那些(四)之 构架CSS基础样式库

    摘要:现在回到我们这一章节的标题,将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节,我们都说了哪些内容: CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    Yu_Huang 评论0 收藏0
  • 关于CSS那些

    摘要:关于背景图片的那些小技巧背景图片太大没办法居中显示怎么办想完整显示图片如何按比例缩放想要在页面上显示两个空格,应该怎么写代码在代码里写才行。 CSS简介 想要制作出好看又高大上的网页,除了编写好HTML文件外,CSS的编写也必不可少。CSS的英文全称是Cascading Style Sheets,即层叠样式表。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格...

    smallStone 评论0 收藏0
  • 关于JS、JQ获取可视区域高度、宽度以及屏幕分辨率那些

    摘要:用和获取相关属性网页可见区域宽网页可见区域高网页可见区域宽包括边框的宽网页可见区域高包括边框的高网页正文全文宽网页正文全文高网页下滑的距离网页左滑的距离屏幕分辨率的高屏幕分辨率的宽屏幕可用工作区的高屏幕可用工作区的高浏览器可视区域的内宽度, 用JS和JQ获取相关属性 JavaScript document.body.clientWidth;//网页可见区域宽document.body....

    or0fun 评论0 收藏0

发表评论

0条评论

Zachary

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<