当前位置：网站首页 > 技术文章 > 正文

1. 如何理解HTML语义化?

myzbx 2024-12-07 15:12 16 浏览

语义化标签还有<header>(头部)、<nav>(导航)、<main>(主要区域)、<article>(主要内容)、<section>(区块)、<aside>(侧边栏)和<footer>(底部)等。

语义化优点：

没CSS样式的情况下，页面整体也会呈现很好的结构效果
让人更容易读懂-增加代码可读性
让搜索引擎更容易读懂-SEO

2. 默认情况下，哪些HTML标签是块级元素、内联元素、空元素？

内联(行内)元素有：a b span img input select strong；
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
常见的空元素：<br>、<hr>、<img>、<input>、<link>、<meta>

3. script标签中defer和async的区别

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

下图可以直观的看出三者之间的区别:

其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析时间。

defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：

执行顺序： 多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行；
脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载是并行进行的，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

4. HTML5有哪些更新

增加了语义化标签（上边已提到）；
增加了重要的媒体标签<audio>和<video>，还引入了<source>标签配合媒体标签使用；
新增了<canvas>，使用 JavaScript 在就可以网页上绘制图像；
增加了draggable属性设置元素可拖放；
提供了两种在客户端存储数据的新方法localStorage和sessionStorage；
增加了DOM查询操作querySelector和querySelectorAll；
此外，还增加了大量的表单类型和表单属性；

5. DOCTYPE的作用

在网页HTML的顶部，会发现顶部有一个<!DOCTYPE html>声明，所有处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

如果不写文档DOCTYPE声明，浏览器将无法获知HTML或XHTML文档的类型，也会进入怪异模式，那么，在不同的浏览器下，显示的样式效果会不一致；相反，浏览器按照W3C标准来解析代码，呈现页面。

6. 常?的meta标签及作用

<meta> 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如文章作者、关键词等。常用的meta标签：

对于viewport中的值，有下列选项：

width ：宽度(数值/device-width)
height ：高度(数值/device-height)
initial-scale ：初始缩放比例
maximum-scale ：最大缩放比例
minimum-scale ：最小缩放比例
user-scalable ：是否允许用户缩放(yes/no）

HTML 块

上一篇：为HTML页面添加视频、音频的方法——零基础自学网页制作
下一篇：温故而知我不懂的CSS

相关推荐

Django零基础速成指南:快速打造带用户系统的博客平台: #python##服务器##API##编程##学习#不是所有教程都值得你花时间！这篇实战指南将用5分钟带你解锁Django核心技能，手把手教你从零搭建一个具备用户注册登录、文章管理功能的完整...

iOS 17.0 Bootstrap 1.2.9 半越狱来啦!更新两点: 这款Bootstrap半越狱工具终于更新，离上一次更新已相隔很久，现在推出1.2.9版本，主要为内置两点功能进行更新，也是提升半越狱的稳定性。如果你正在使用这款半越狱工具的，建议你更新。注意！...

iOS 16.x Bootstrap 1.2.3 发布，支持运行清理工具: 本文主要讲Bootstrap半越狱工具更新相关内容。如果你是iOS16.0至16.6.1和17.0系统的，想体验半越狱的果粉，请继续往下看。--知识点科普--Bootstrap...

SpringBoot整合工作流引擎Acticiti系统，适用于ERP、OA系统: 今日推荐：SpringBoot整合工作流引擎Acticiti的源码推荐理由：1、SpringBoot整合工作流引擎Acticiti系统2、实现了三级权限结构3、持久层使用了mybatis框架4、流程包...

SpringCloud自定义Bootstrap配置指南: 在SpringCloud中自定义Bootstrap配置需要以下步骤，以确保在应用启动的早期阶段加载自定义配置：1.添加依赖（针对新版本SpringCloud）从SpringCloud2020...

Python使用Dash开发网页应用(三)（python网页开发教程）: PlotlyDash开发Web应用示例一个好的网页设计通常都需要编写css甚至js来定制前端内容，例如非常流行的bootstrap框架。我们既然想使用Dash来搭建web应用，很大的一个原因是不熟悉...

Oxygen XML Editor 27.1 中的新功能: OxygenXMLEditor27.1版是面向内容作者、开发者、合作者和出版商的行业领先工具包的增量版本。在27.1版本中，AIPositronAssistant得到了增强，包括用于...

【LLM-多模态】Mini-Gemini:挖掘多模态视觉语言模型的潜力: 一、结论写在前面论文提出了Mini-Gemini，一个精简而强大的多模态VLM框架。Mini-Gemini的本质在于通过战略性框架设计、丰富的数据质量和扩展的功能范围，发掘VLM的潜在能力。其核心是补...

谐云课堂 | 一文详解分布式改造理论与实战: 01微服务与分布式什么是分布式？首先，我们对上图提到的部分关键词进行讲解。单体，是指一个进程完成全部的后端处理；水平拆分，是同一个后端多环境部署，他们都处理相同的内容，使用反向代理来均衡负载，这种也叫...

基于Abaqus的手动挡换挡机构可靠性仿真: 手动挡，也称手动变速器，英文全称为Manualtransmission，简称MT，即用手拨动换挡操纵总成才能改变变速器内的齿轮啮合位置，改变传动比，从而达到变速的目的。家用轿车主要采用软轴连接的换挡...

【pytorch】目标检测:彻底搞懂YOLOv5详解: YOLOv5是GlennJocher等人研发，它是Ultralytics公司的开源项目。YOLOv5根据参数量分为了n、s、m、l、x五种类型，其参数量依次上升，当然了其效果也是越来越好。从2020...

超实用!50个非常实用的PS快捷键命令大全分享: 今天，给大家介绍50个非常实用的快捷键命令大全，大家伙都是设计师，关于软件使用那是越快越好啊。一、常用的热键组合1、图层混合模式快捷键：正常(Shift+Option+N)，正片叠底(Shif...

Pohtoshop中深藏不露的小技巧（科目一考试技巧记忆口诀看完必过）: 邢帅教育ps教程为大家总结了一些Pohtoshop中深藏不露的小技巧，可以帮助到大家在设计时减少不必要的麻烦，提高工作效率哦~~~1.设置网格线保持像素完美不在1:1分辨率下也能保持像素完美，可以...

Ganglia监控安装总结（监控安装工作总结）: 一、ganglia简介：Ganglia是一个跨平台可扩展的，高性能计算系统下的分布式监控系统，如集群和网格。它是基于分层设计，它使用广泛的技术，如XML数据代表，便携数据传输，RRDtool用于数据...

谁说Adobe XD做不出好看的设计?那是你没搞懂这些功能: AdobeXD的美化栏具有将设计视图美化的功能，它能使界面设计和原型设计更漂亮、更吸引眼球。美化栏的7个功能包括竖线布局设计、横线布局设计、重复网格、图形大小和位置设置、响应式调整大小、文字美化以及...

一周热门

最近发表

首页
收录
顶部