HTML与Web标准简介-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52744344/article/details/129376648

HTML

什么是HTML？

HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。

HTML 不是一种编程语言，而是一种标记语言 (markup language)。

标记语言是一套标记标签 (markup tag)。

web标准

Web标准是指由W3C制定的关于Web开发的一系列技术规范，包括HTML、CSS、JavaScript、XML等。遵循Web标准可以提高网站的可访问性、可维护性、跨浏览器兼容性以及搜索引擎优化能力。

(1) 为什么需要web标准

提高网站的可访问性：Web标准提供了一种适用于视觉障碍者、听觉障碍者和行动不便者等残疾人的设计标准，从而增加网站的可访问性。

提高网站的可维护性：Web标准将HTML、CSS和JavaScript语言进行了规范化，遵循标准可以让开发者编写更清晰、更高效和更简洁的代码，从而降低网站维护和更新的成本。

提高跨浏览器兼容性：Web标准确保网站在不同的浏览器和设备上都能够正确地显示和工作。由于遵循标准可以减少浏览器兼容性问题的出现，因此网站在不同的浏览器和设备上都能够获得更好的兼容性表现。

提高搜索引擎优化能力：Web标准使开发者能够更好地优化网站的结构和内容，从而提高搜索引擎对网站的认可和排名。遵循标准可以使网站页面更容易被搜索引擎索引和理解，进而提供更准确的搜索结果。

总之，遵循Web标准是设计、开发和维护高质量网站的重要方式，可以提高用户体验和网站的可用性，同时降低成本和风险。

(2) Web 标准的构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构：html

表现：css

行为：js

html标签

基础结构

(1) Doctype声明：告诉浏览器使用哪个HTML版本来渲染页面。

例如： <!DOCTYPE html>

HTML标签：表示整个HTML文档的开始和结束，包括和两部分。

例如：

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页内容
    </body>
</html>

(2) head 头部<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

<head>
    <title>网页标题</title>
    <meta charset="UTF-8"> ### 字符集
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="description" content="这是一个HTML5网页">
    <link rel="stylesheet" href="style.css">
</head>

元素来描述HTML文档的描述，关键词，作者，字符集等。

(3) HTML boby常用标签

<h1> - <h6> 标题标签

<p>1. 文本在一个段落中会根据浏览器窗口的大小自动换行。2. 段落和段落之间保有空隙。</P> 可以把 HTML 文档分割为若干段落。

<br /> 换行

<a href="url">这是一个链接</a>

a标签的常见属性：

href：表示链接目标的URL。

target：表示链接如何打开，可以设置为_blank、_self、_parent和_top。

title：表示鼠标悬停时显示的提示信息。

download：表示链接下载的文件名称。

rel：表示链接与当前页面的关系，如nofollow、noopener、noreferrer等。

aria-label：表示链接的访问辅助信息。

tabindex：表示链接的tab键顺序。

data-*：表示自定义数据属性，以data-开头，可以存储任意数据。

<img src="url" /> 图片

src：指定图片资源的URL地址

alt：指定图片的文本描述（如果图片无法显示时，会显示此文本替代品）

title：指定图片的提示文本（鼠标悬停在图片上时显示）

width：指定图片的宽度（以像素为单位）

height：指定图片的高度（以像素为单位）

align：指定图片的对齐方式（left, right, center）

border：指定图片边框的大小（以像素为单位）

usemap：指定使用哪个图像映射（可与map元素配合使用）

ismap：指定提交form表单时，是否将图片的坐标作为参数提交给服务器

loading：指定图片加载方式，有lazy和eager两种选项。lazy表示图片在需要显示时才会加载，eager表示图片会立即加载。

定义注释

表格

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚