HTML

最新推荐文章于 2021-06-04 15:23:28 发布

桑鹿子

最新推荐文章于 2021-06-04 15:23:28 发布

阅读量258

点赞数

文章标签： html

本文链接：https://blog.csdn.net/juerzi/article/details/105718750

版权

请写出至少5个HTML块元素标签

div,p,form,ul,li,ol,table,h1

请写出至少5个HTML行内元素标签

a,span,img,br,imput,lable

请至少写出5个H5的新标签

<time> <video> <nav> <output> <footer> <header> <canvas>

空元素定义

标签开始结束之间没有内容，称为空元素

doctype 的作用？标准模式与兼容模式的区别

doctype是document type的缩写，它声明位于文档的最前面。它的作用是告诉浏览器的解析器使用哪种
HTML规范或者XHTML规范来解析页面

标准模式与兼容模式的区别：
标准模式是指浏览器按照W3C标准来解析代码呈现页面
兼容模式是指浏览器按照自己方式来解析代码，用一种页面以宽松的向后兼容的方式显示。

HTML5 为什么只需写< !DOCTYPE HTML>

因为HTML5不基于SGML,因此不需要对DTD（也就是文档定义类型）进行引用。
但是需要doctype来规范浏览器的行为

为什么要在html文件开头加上一个 !DOCTYPE html

告诉浏览器使用哪个HTML版本规范来渲染文档，DOCTYPE不存在或者形式不正确的时候会导致
HTML文档以兼容模式呈现

meta viewport 是做什么的,怎么写

因为移动端的布局不同于PC端，在PC端上css一个像素跟在移动端上css的一个像素是不相等的。
而且如果在移动端上用户缩放的话，那么css的像素就会增大一倍，反之会缩小的话，像素也会减少一倍
所以这时候就用到了viewport，首先将页面宽度固定，然后获取设备的宽度，可以得到设定宽度和
设备宽度的比例，然后再使用viewport来对页面进行缩放，并不允许用户再重新缩放。
作用就是控制在移动端不要将页面缩小放大显示

<meta name="viewport" content="设置属性"

介绍一下你对浏览器内核的理解

主要分为两个部分：渲染引擎和JS引擎
渲染引擎用于获取HTML,CSS,图片，然后输出至显示器。浏览器内核的不同会对网页的语法解释不同，所以渲染的效果也不相同
JS引擎用于解析和执行javascript来实现网页的动态效果

常见的内核

IE   Trident
火狐  Gecko
谷歌  Webkit

浏览器如何渲染页面的

解析HTML，XHTML构成DOM树，解析CSS构成CSS规则树，
JS通过DOM API 和 CSSOM API 来操作DOM树和CSS树
然后DOM树和CSS规则树附着构成renden树，
然后布局最后绘制

url到浏览器的渲染过程

首先DNS解析URL，然后浏览器发送请求与服务器交互，然后服务器处理并返回响应报文，
最后浏览器对接受到的HTML页面进行渲染

页面导入样式时，使用link和@import有什么区别

link属于XHTML标签，import是css提供的方式。import只能加载css。link除了css还能定义rel属性等
link是页面加载时同时进行的，import是在页面加载完之后在进行

html5有哪些新特性

新增加了图像，存储，多任务，位置等功能
阐述几个：
绘画：canvas
媒体回放：video和audio
本地离线存储：localStorage长期存储

你用过哪些 HTML 5 标签

<!DOCTYPE>  定义文档类型
<html>  定义html文档
<head> 定义文档的头部
<body> 定义文档的主体

如何区分 HTML 和 HTML5

HTML5只是在文档前一句简单的声明
HTML很长一段很难记住
HTML没有体现结构语义化的标签，HTML5却有很大优势，比如<header><content><footer>

简述一下你对HTML语义化的理解

语义化就是让页面的内容更加结构化，便于对浏览器，搜索引擎解析。
在没有CSS样式的时候也以一种文档格式显示，并且容易阅读。
有利于SEO和搜素引擎建立良好沟通，有助于爬虫抓取更多的信息。
有利于不同设备解析。有利于团队的开发与维护，便于阅读

请描述一下 cookies，sessionStorage 和 localStorage 的区别

存储大小不一样，cookies最大不能超过4k，而sessionStroage和localStorage可以达到5M
cookies可以在浏览器和服务器之间来回传递，而sessionStroage和localStorage不可以
数据有效期不同，cookies只要是在cookies的设置时间之前一直有效即使浏览器窗口关闭。
sessionStorage在浏览器窗口关闭之前一直游戏
localStorage一直有效，即使浏览器和窗口关闭了也一直有效。

实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

<div style="height:1px;overflow:hidden;background:red"></div>

Label 的作用是什么？是怎么用的？

当用户选择该标签时，浏览器将自动焦点转到和标签相关的表单控件上
他有两个属性 一个是for 另一个是accesskey
for属性表示label标签要绑定的html元素，当你点击这个标签时，所绑定的元素将获取焦点
assesskey属性表示label标签要绑定html元素的热键，当你按下这个热键时，所绑定的元素将获取焦点