整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代 码语义化）。通俗来讲就是用正确的标签做正确的事情。
语义化的优点如下：
对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬 取有效信息，有利于 SEO。除此之外，语义类还支持读屏软件，根据 文章可以自动生成目录；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发 者能清晰地看出网页的结构，便于团队的开发与维护。
常见的语义化标签：
DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明，它的目 的是告诉浏览器（解析器）应该以什么样（html 或 xhtml）的文档类 行定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄JavaScript 脚本的解析。它必须声明在 HTML⽂档的第⼀⾏。
浏览器渲染页面的两种模式（可通过 document.compatMode 获取，比 如，语雀官网的文档类型是 CSS1Compat）：
CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用 W3C 的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈 现页面。
BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的 怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后 兼容的方式显示。
如果没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样 就阻塞了后续文档的加载。
下图可以直观地看出三者之间的区别:
其中蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿 色代表 html 解析。
defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不 会阻塞页面的解析，其区别如下：
执行顺序：多个带 async 属性的标签，不能保证加载的顺序；多个带 defer 属性的标签，按照加载顺序执行；
脚本是否并行执行：async 属性，表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的，即异步执行；defer 属性，加载后 续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded 事件触发执行之前。
行内元素有：a b span img input select strong；
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
空元素，即没有内容的 HTML 元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：
常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
鲜见的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。
在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面 ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经 访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线 的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文 件改变了，就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器会直接使用离线存储的资源。
（1）SVG：
SVG 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标 记语言 XML 描述的 2D 图形的语言，SVG 基于 XML 就意味着 SVG DOM 中的每个元素都是可用的，可以为某个元素附加 Javascript 事件处 理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象 的属性发生变化，那么浏览器能够自动重现图形。
其特点如下：
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用
（2）Canvas：
Canvas 是画布，通过 Javascript 来绘制 2D 图形，是逐像素进行渲 染的。其位置发生改变，就会重新进行绘制。
其特点如下：
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一 系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是
一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等 属性。
dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触 发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。
lt;hr>水平线
<hr size="9" /> 水平线(设定大小,单位:像素)
<hr width="80%" /> 水平线(设定宽度,单位:像素或百分比)
<hr color="#ff0000" /> 水平线对齐方式
<hr align="left" /> 水平线水平位置
<hr noshade /> 去掉水平线的阴影
align属性值:center(默认值) left right
<hr width="30%" color="blue" size="9" align="left"/>
<center></center>水平居中.
<br/> 换行
<p></p> 标签定义段落
<p align=""></p>将段落按左、中、右对齐;
align属性值:left(默认值) right center justify
注意：
<h1>...<h6>标题标记与<p>段落标记都只有一个属性align
<pre></pre> 定义预格式化的文本
<blockquote></blockquote> 设置段落缩进(可以缩进5个字符)
手册上没有的标记
<xmp></xmp> 忽略HTML标记
<nobr>…</nobr> 禁止换行
<wbr> 指定软换行（或单词换行），用在nobr标记中，即使用 <nobr> 禁止了换行，使用 <wbr> 仍然可以换行
<nobr>中华人民共和国上海市<wbr>黄浦区</wbr></nobr>
您将了解到11个非常有用的单行代码，它能帮助我们做很多事，不要小瞧了HTML哦!!!
HTML 和 CSS 是前端开发世界的支柱。虽然精通 CSS 和 JavaScript 对于创建出色的网站至关重要，但人们经常低估您仅使用一个普通的旧 HTML 文件就可以完成的工作。从延迟加载图像到为视频添加字幕，HTML 能够完成大多数开发人员并不完全了解的许多事情。以下是您可以立即使用的 11 个 HTML 单行代码
向 HTML 元素添加简单的工具提示不需要 CSS 或 JavaScript。 使用 title 属性，您可以轻松添加工具提示以向用户提供额外信息。
<body>
<p>
<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</p>
<p title="Free Web tutorials">W3Schools</p>
</body>
当您希望用户下载链接而不是导航到文件时，下载属性非常有用。 此外，您还可以设置用户将下载的文件的文件名
<a href="/images/myw3schoolsimage.jpg" download>
<a href="link/to/your/file" download="filename">Download link</a>
没有人喜欢HTML在不该打断的地方打断文字。 使用<wbr>，您可以轻松地找到可以打断单词的点(机会)。 当单词太长，浏览器很有可能会在不正确的地方打断它时，这很有用。
<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
使用DIR =“AUTO”，浏览器将根据内容的语言更改文本对齐。当您处理不遵循左边的语言时，这非常有用。使用此属性的潜在地点是社交媒体聊天应用程序。
<p dir="auto">This text is following dir=auto</p>
通过使用细节和摘要语义元素，您可以创建一个非常基本但很容易的手风琴。将accordion元素与details元素打包，而标题则使用summary元素。最后，使用p段落元素来编写手风琴的主要内容。
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
通过将contentteditable属性设置为true，可以使任何内容都可编辑。 不管它是div还是p，它都是可编辑的。 此外，还可以使用isContentEditable属性来查找某个元素是否可编辑。
<p contenteditable='true'>This is a paragraph. Click the button to make me editable.</p>
只需使用 HTML，您就可以使用 <track> 元素为视频文件添加字幕。 使用 src 属性指向字幕文件，使用 srclang 属性设置语言。
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
你可以通过设置加载属性为“lazy”来按需加载图片(也叫惰性加载)。 这是一种简单但非常有效的优化技术，只加载对用户可见的部分，其他图像稍后根据用户的需要加载。
<img src="/w3images/wedding.jpg" alt="Wedding" style="width:100%">
<img src="/w3images/rocks.jpg" alt="Rocks" style="width:100%">
<!-- off-screen images -->
<img src="/w3images/paris.jpg" alt="Paris" style="width:100%" loading="lazy">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%" loading="lazy">
<img src="/w3images/underwater.jpg" alt="Underwater" style="width:100%" loading="lazy">
<img src="/w3images/ocean.jpg" alt="Ocean" style="width:100%" loading="lazy">
<img src="/w3images/mountainskies.jpg" alt="Mountains" style="width:100%" loading="lazy">
如果您在您的网站上多次调用一个公共域，您可以使用**<base>**元素来设置一个基本URL，如下面提供的代码片段所示。 现在，src在图像元素中的实际值是“www.w3schools.com/images/stic… 如果您使用过像Axios这样的库，那么设置基URL是一种非常常见的做法。
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
您可以在使用右键单击时收听事件，也可以尝试使用OnContextMenu和OnPaste属性粘贴内容并处理这些事件。如果您不希望用户能够粘贴到密码等某些字段上，则可以在该输入字段上写入Onpaste =“返回false”，用户将无法粘贴到那里。同样，oncontextmenu在用户右键单击该元素时会触发。
<input type="text" onpaste="return false" value="Paste something in here">
<div oncontextmenu="myFunction()" contextmenu="mymenu">
当设置为 true 时，拼写检查属性会告诉浏览器必须检查用户在此元素中输入的语法和拼写错误。 这是一个方便的属性，可帮助用户编写正确无误的内容。
*请认真填写需求信息，我们会在24小时内与您取得联系。
