type
status
date
slug
summary
tags
category
icon
password
日期
时长
重点
Basic 基础code editor Google Devloper Tool 开发者工具HTML创建格式化文件有效性检查类型元素meta元素文本元素链接元素图片元素Semantic HTML语义Header 顶部Navigation 导航Main 概述Article 文章Aside 旁白Section 章节Footer 脚注Details and Summary 细节与概述Figure and Figcaption 图示说明Mark 标记Time 时间Progress 进度Forms and Validations 表格及其验证什么是表单验证表单验证的方式内置表单验证内置表单验证示例The required attribute 必需属性Validating against a regular expression 正则表达式Constraining the length限制长度各类型表单<input> types输入类型自定义错误信息JavaScript Form ValidationSEOSEO分析工具SEO技巧
Basic 基础
code editor
使用vscode
安装插件
Prettier 规范并统一代码格式，团队协作时尤其关键
Live Server 可以直接右键打开sever观看网站效果
Auto Import、Auto Close Tag、Auto Rename Tag（必备）
标签自动化三剑客，Auto Import可以根据你引入的组件，自动导入提示；Auto Rename Tag当你修改标签的时候，自动完成另一侧标签的同步修改；Auto Close Tag 自动闭合HTML/XML标签，
html 网页构建块 超文本格式
css 赋予视觉效果
js 添加交互功能
Google Devloper Tool 开发者工具
可以用于观察网络请求的具体状况，放在左侧便于操作
也可以在网站中直接修改并预览
HTML创建
我们创建一个文件夹，在vscode打开然后新建一个 index.html （这个名称通常代指主页）文件
格式化文件
我们首先 ctrl+shift+p 搜索 format document，点击之后会提示你选择，我们选用之前安装的插件Prettier
进入设置 启用 format on save 从而确保文件都能用统一的格式
有效性检查
validator.w3.org
用于检查网站或html文件不合规的地方，用于网站出错的快速检查。
类型元素
meta元素
字符集
显示 适配设备
描述
文本元素
可以画中所需内容，然后 ctrl+shift+p 搜索并使用 wrap with Abbrebiation命令 快速缩写包围
链接元素
图片元素
Semantic HTML语义
语义 HTML 指的是使用 HTML 标记来传达网页内容的含义，而不仅仅是其外观。
这种方法有几个好处。首先，它帮助搜索引擎和其他技术了解网站内容的结构和用途。其次，它使你的内容更容易被那些使用辅助技术浏览网页的人们接受。第三，它使您的代码更容易阅读和维护，因为每个元素的用途都很清楚。
Header 顶部
< header > 标记用于标记网页的顶部部分，其中通常包括主标题或徽标、导航链接和其他网站上每个页面共有的元素。通过使用 < header > 标签，您可以在页面的标题和主要内容之间创建一个清晰的分离，使用户更容易理解和浏览您的网站。
Navigation 导航
< nav > 标记用于标记网页中包含导航链接的部分。通过使用 < nav > 标签，您可以向用户和搜索引擎表明您的网站的这一部分是专门为导航设计的。
Main 概述
< main > 标记用于标记网页的主要内容区域。通过使用 < main > 标记，您可以向用户和搜索引擎清楚地表明页面的哪一部分包含主要内容。
Article 文章
标记 < article > 用于表示独立的内容，如博客文章、新闻文章或产品评论。< article > 标签中的内容应该是自包含的和有意义的，并且可以包括标题、段落、图像和其他类型的内容。
Aside 旁白
< side > 标签用于标记与网页上的主要内容相关的内容，但这些内容并不是网页不可分割的一部分。这可能包括补充信息、广告或相关文章。
Section 章节
< section > 标记用于标记按主题分组在一起的网页部分。这可能包括一篇长文章的章节或部分，或产品页面的不同部分。
Footer 脚注
< footer > 标签用于标记网页的底部，其中可能包括版权信息、联系方式或社交媒体档案链接等内容。
Details and Summary 细节与概述
< Details > 和 < Summary > 标记用于标记内容的可折叠部分。使用 < Summary > 标记来标记部分的标题，使用 < Details > 标记来标记内容本身。
Figure and Figcaption 图示说明
< figure > 和 < figcaption > 标记用于标记从 Web 页面的主要内容引用的自包含内容。< figure > 标记用于标记内容本身，而 < figcaption > 标记用于标记内容的标题或描述。
Mark 标记
< mark > 标记用于标记出于某种原因突出显示的文本。这可能包括搜索结果或用户突出显示的文本等内容。默认黄色荧光笔。
Time 时间
< time > 标记用于标记日期或时间。通过使用 < time > 标记，可以使搜索引擎和其他技术更容易理解页面上内容的含义。
Progress 进度
< Progress > 标记用于标记进度条。通过使用 < Progress > 标记，可以使用户更容易理解任务的进度。
Forms and Validations 表格及其验证
在向服务器提交数据之前，一定要确保以正确的格式填写所有必需的表单控件。这称为客户端表单验证，有助于确保提交的数据符合各种表单控件中规定的要求。本文将引导您了解客户端表单验证的基本概念和示例。
什么是表单验证
去任何一个有注册表格的流行网站，你会注意到当你没有按照他们期望的格式输入数据时，他们会提供反馈。你会收到这样的信息:
“此字段是必需的”(不能将此字段保留为空白)。
“请以 xxx-xxxx 格式输入您的电话号码”(需要特定的数据格式才能被认为是有效的)。
“请输入一个有效的电子邮件地址”(您输入的数据格式不正确)。
“您的密码需要8到30个字符长，并包含一个大写字母、一个符号和一个数字。”(数据需要非常特定的数据格式)。
这就是所谓的表单验证。当您输入数据时，浏览器和/或 Web 服务器将检查数据的格式是否正确，是否符合应用程序设置的约束条件。在浏览器中完成的验证称为客户端验证，而在服务器上完成的验证称为服务器端验证。在本章中，我们将重点讨论客户端验证。
为什么我们需要表单验证：
我们希望以正确的格式获得正确的数据。如果用户的数据存储格式错误、不正确或完全被忽略，我们的应用程序将无法正常工作。
我们希望保护用户的数据。强制我们的用户输入安全密码可以更容易地保护他们的帐户信息。
我们想要保护我们自己。有很多方法可以让恶意用户误用未受保护的表单来破坏应用程序。
表单验证的方式
内置的表单验证使用 HTML 表单验证特性，我们已经在本模块的许多地方讨论过这些特性。这种验证通常不需要太多的 JavaScript。内置的表单验证比 JavaScript 有更好的性能，但是它不像 JavaScript 验证那样可定制。
JavaScript 验证使用 JavaScript 进行编码。此验证是完全可定制的，但您需要创建所有验证(或使用库)。
内置表单验证
现代表单控件最重要的特性之一是无需依赖 JavaScript 就能验证大多数用户数据。这是通过对表单元素使用验证属性来完成的。
required: 指定在提交表单之前是否需要填写表单字段。
Minlength 和 maxlength: 指定文本数据(字符串)的最小和最大长度。
Min 和 max: 指定数值输入类型的最小值和最大值。
Type: 指定数据是否需要为数字、电子邮件地址或其他特定的预设类型。
Pattern: 指定定义输入数据需要遵循的模式的正则表达式。
如果在表单字段中输入的数据遵循上述属性指定的所有规则，则认为它是有效的。否则视为无效。
内置表单验证示例
The required attribute 必需属性
Validating against a regular expression 正则表达式
Regexp 非常复杂，我们不打算在本文中详尽地介绍它们。下面是一些例子，让你对它们的工作原理有一个基本的了解
a— Matches one character that isa(notb, notaa, and so on).
abc— Matchesa, followed byb, followed byc.
ab?c— Matchesa, optionally followed by a singleb, followed byc. (acorabc)
ab*c— Matchesa, optionally followed by any number ofbs, followed byc. (ac,abc,abbbbbc, and so on).
a|b— Matches one character that isaorb.
abc|xyz— Matches exactlyabcor exactlyxyz(but notabcxyzoraory, and so on).
Constraining the length限制长度
您可以使用 minlength 和 maxlength 属性约束由 < input > 或 < textarea > 创建的所有文本字段的字符长度。如果字段具有值，且该值的字符数少于 minlength 值或大于 maxlength 值，则该字段无效。
浏览器通常不允许用户在文本字段中键入比预期长的值。比起仅仅使用 maxlength，更好的用户体验是以一种可访问的方式提供字符数反馈，并让他们按大小编辑内容。这方面的一个例子是在 Twitter 上 Tweeting 时看到的字符限制。可以使用 JavaScript (包括使用 maxlength 的解决方案)来提供这一点。
各类型表单
驾驶调查
<input> types输入类型
checkbox
button
color
data
email
file
password
url
radio
range
自定义错误信息
正如您在前面的 HTML 验证约束示例中看到的，每当用户试图提交无效表单时，浏览器都会显示一条错误消息。此消息的显示方式取决于浏览器。
自定义错误信息需要以下命令
JavaScript Form Validation
编写脚本识别
SEO
SEO的意思是搜索引擎优化。这是一套指导方针，旨在使你的网站在谷歌搜索结果中显得比其他网站更高。这是一门深奥的学问在此只做简单介绍，更多内容可以在以下链接学习，
SEO分析工具
基本都要付费，但是以下这个谷歌插件是免费的
我试着让他分析我的博客还是很有收获的。
SEO技巧
- Write high quality text that is easy to read and free from grammatical/spelling mistakes.
- Anchor texts should accuratly and concisely describe the content of the page that is being linked to.
- Optimize title tags by (1) accurately describing the page's content; (2) making them unique; (3) having brief, but descriptive titles
- Improve page loading speed as Googlebot penalizes slow sites.
- Optimize the description meta tag by (1) accurately summarize the page's content; (2) making them unique
- Optimize URLs by (1) creating a simple structure that goes from the genral to the specific; (2) where the path uses descriptive words that reflect the page's content; (3) a page is accessed through a single URL (use canonical URLs); (4) showing useful pages when the user removes the right-most part of the URL
- Create a site map for visitors, a XML Site Map for search engines, and an Image Sitemap for images
- Use heading tags to provide users with an descriptive page outline
- Use descriptive and brief file names for images. Use the "alt" attribute to describe images
- Use robots.txt to prevent unnecessary pages from being crawled
- Prevent comment spam by using rel="nofollow" on links
- Use rich snippets
- Add mobile URL information to a Sitemap
- Set up RSS feeds so that users can easily read your content
- use Google Analytics Content Experiments to implement and measure site changes
- Follow best practices for video. Submit video sitemaps for major video sites.
- Add share buttons
- 作者:KashiwaByte
- 链接:https://www.kashiwabyte.tech/article/html
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。