HTML知识

最新推荐文章于 2022-07-27 18:33:48 发布

sgzl111

最新推荐文章于 2022-07-27 18:33:48 发布

阅读量144

点赞数

分类专栏：前端文章标签： HTML

本文链接：https://blog.csdn.net/sgzl111/article/details/98869741

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML

【1】HTML5新特性

语义化

 语义化：用合理、正确的标签来展示内容

语义化优势

页面结构清晰
代码可读性和维护性高
有利于SEO(搜索引擎)，根据标签确定上下文和各个关键字的权重

主体结构标签

header：文档头部页眉，允许多次使用
nav：链接列表
main：文档主要内容，一个文档中不能出现多个标签
article：定义来自外部的内容，可复用
section：表示文档中的一个区域
aside：通常表现为侧边栏或嵌入内容。

footer：文档底部页脚，使用footer插入联系信息时，在 footer 元素内使用 <address> 元素，会斜体显示。

 `<article>`比`<section>`更具有独立性、完整性。可通过该段内容脱离了所在的语境，是否完整、独立来判断。

在这里插入图片描述

如何理解article标签和aside标签存在的意义【原文链接：https://www.jianshu.com/p/9c884e497e11】

其他H5新标签

hgroup：对网页或区段（section）的标题进行组合；若文章有主标题和子标题，就需要hgroup元素；
figure：通常放置图像
figcaption：为 figure 中的图片添加标题
details：描述文档细节，与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出details。【使用：https://www.w3cplus.com/html5/html5-details-summary.html】
summary
canvas：使用 JavaScript 在网页上绘制图像；
video：支持视频文件，播放视频时无需Flash插件；IE8或更早的版本不支持；当前支持 MP4, WebM, 和 Ogg三种格式；<video></video>之间放置文本，会被显示在那些不支持 <video> 标签的浏览器中;
audio：支持音频文件；IE8或更早的版本不支持；当前支持 MP4, Wav, 和 Ogg三种格式;
source：用于audio/video标签下，定义媒介资源，浏览器会选择支持的对媒体类
embed：定义嵌入的内容，如插件
datalist：定义选项列表，与input配合使用，
mark：高亮显示
time：定义日期和时间
command：定义命令行为，只有IE9可用

在这里插入图片描述

【2】浏览器的标准模式和怪异模式（两种渲染模式）

浏览器如何能将旧网页与新网页区分开来？
若HTML文档头部有正确的DOCTYPE文档类型声明，启动标准模式
标准模式与怪异模式的两个常见区别

（1）盒模型。W3C标准盒模型的宽高等于不包含内边距和边框。怪异模式下，盒模型为IE盒模型，IE6之前版本的盒模型的宽高是含内边距和边框。
（2）图片垂直对齐方式（针对inline和table-cell）。在标准模式下vertical-align默认为baseline（基线对齐），图片与父元素下边框之间存在空隙；而怪异模式下，vertical-align默认为bottom。
（3）<table>元素中的字体。怪异模式下，table元素中的字体不会从body等其他封装元素中继承得到
（4）内联元素（行内元素）的尺寸。标准模式下，内联元素无法自定义大小；怪异模式下，定义这些元素的width，height属性可以影响这些元素显示的尺寸。
（5）元素的百分比高度。当一个元素使用百分比高度时，标准模式下，高度取决于内容变化；怪异模式下，百分比高度被正确应用。
（6）元素溢出的处理。标准模式下，overflow取默认值visible；在怪异模式下，该溢出会被当做扩展box来对待，即元素的大小由其内容决定，溢出不会裁减，元素框自动调整，包含溢出内容。

【3】xhtml和html的区别

xhtml标准比html更加严格，四个主要不同

xhtml元素必须被正确嵌套
xhtml元素必须被关闭
xhtml标签名必须是小写
xhtml文档必须有<html>根元素

[4]使用data-的好处

data-提供自定义属性，通过dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取，（只有Chrome和Opera支持）。

<div data-author="david" data-time="2011-06-20"
          data-comment-num="10"  data-category="javascript">
</div>
<script>
var post = document.getElementsByTagName('div')[0];
post.dataset; // DOMStringMap
post.dataset.commentNum; // 10
</script>

[5]meta标签

描述 HTML 文档的元数据
- charset：文档字符编码

content：定义与 http-equiv 或 name 属性相关的元信息
http-equiv：把 content 属性关联到 HTTP 头部
name：把 content 属性关联到一个名称

【6】css js放置位置和原因

JS文件一般放在body尾部，因为浏览器构建DOM树的时候遇到js文件加载会阻塞，当js文件放在head中时，一旦这s文件的数量和内容比较大，会出现白屏现象。
CSS放在<head></head>，因为页面渲染时首先是根据DOM结构生成一个DOM树，然后加上CSS样式生成一个渲染树，如果CSS放在后面页面可能会出现闪跳、白屏、布局混乱直到CSS加载完成。

【7】什么是渐进式渲染

单页面应用（SPA）性能优化，一开始先加载首屏内容（减少首屏加载时间），之后再根据路由切换加载其他内容。（vue）

【8】html模板语言

【9】meta viewport原理

移动端中，把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟“窗口”比屏幕宽，这样就不用把网页挤到很小的窗口中，用户可以通过平移和缩放来看网页的不同部分。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

字段名称	类型	描述
width	number \| device-width	控制 viewport 的宽度
height	number \| device-width	控制 viewport 的宽度
initial-scale	device-width	初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale	number	允许用户缩放到的最大比例
minimum-scale	number	允许用户缩放到的最小比例
user-scalable	yes \| no	用户是否可以手动缩放

sgzl111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML知识

HTML【1】HTML5新特性语义化语义化：用合理、正确的标签来展示内容语义化优势页面结构清晰代码可读性和维护性高有利于SEO(搜索引擎)，根据标签确定上下文和各个关键字的权重主体结构标签header：文档头部页眉，允许多次使用nav：链接列表main：文档主要内容，一个文档中不能出现多个标签article：定义来自外部的内容，可复用secti...
复制链接

扫一扫