HTML基础知识26~30

最新推荐文章于 2024-08-13 14:09:09 发布
最新推荐文章于 2024-08-13 14:09:09 发布
阅读量162 收藏
点赞数
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41995845/article/details/120271021
版权

26、HTML(5) 样式指南和代码约定
HTML 代码约定
web 开发者常常不确定在 HTML 中使用的代码样式和语法。

在 2000 年至 2010 年之间，许多 web 开发者从 HTML 转换为 XHTML。

通过 XHTML，开发者不得不编写有效的“格式良好的”代码。

HTML5 在代码验证时会更宽松一点。

通过 HTML5，您必须创建属于自己的最佳实践、样式指南和代码约定。

智能且有未来保证
对样式的合乎逻辑的使用，可以令其他人更容易理解和使用您的 HTML。

在未来，诸如 XML 阅读器之类的程序，也许需要阅读您的 HTML。

使用格式良好的“近似 XHTML 的”语法，能够更智能。

注释：请始终保持您的样式智能、整洁、纯净、格式良好。

请使用正确的文档类型
请始终在文档的首行声明文档类型：

<!DOCTYPE html>

如果您一贯坚持小写标签，那么可以使用：

<!doctype html>

请使用小写元素名
HTML5 允许在元素名中使用混合大小写字母。

我们推荐使用小写元素名：

混合大小写名称并不好
开发者习惯使用小写名（比如在 XHTML 中）
小写更起来更纯净
小写更易书写
不太好：

<SECTION> 
  <p>This is a paragraph.</p>
</SECTION>

很糟糕：

<Section> 
  <p>This is a paragraph.</p>
</SECTION>

还不错：

<section> 
  <p>This is a paragraph.</p>
</section>

关闭所有 HTML 元素
在 HTML5 中，您不必关闭所有元素（例如 <p> 元素）。

我们建议关闭所有 HTML 元素：

看起来不好：

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

看起来不错：

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

关闭空的 HTML 元素
在 HTML5 中，关闭空元素是可选的。

允许这样：

<meta charset="utf-8">

也允许这样：

<meta charset="utf-8" />

斜杠（/）在 XHTML 和 XML 中是必需的。

如果您期望 XML 软件来访问您的页面，保持这个习惯是个好主意。
使用小写属性名
HTML5 允许大小写混合的属性名。

我们建议使用小写属性名：

混合属性名并不好
开发者习惯于使用小写属性名（比如在 XHTML 中）
小写属性名看情况更纯净
小写属性名更易书写
看起来不好：

<div CLASS="menu">

看起来不错：

<div class="menu">

属性值加引号
HTML5 允许不加引号的属性值。

我们推荐属性值加引号：

如果属性值包含值，则必须使用引号
混合样式绝对不好
加引号的值更易阅读
这个属性值无效，因为值中包含空格：

<table class=table striped>

这样是有效的：

<table class="table striped">

必需的属性
请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

空格和等号
等号两边的空格是合法的：

<link rel = "stylesheet" href = "styles.css">

但是精简空格更易阅读， But space-less is easier to read, and groups entities better together:

<link rel="stylesheet" href="styles.css">

避免长代码行
当使用 HTML 编辑器时，通过左右滚动来阅读 HTML 代码很不方便。

请尽量避免代码行超过 80 个字符。

空行和缩进
请勿毫无理由地增加空行。

为了提高可读性，请增加空行来分隔大型或逻辑代码块。

为了提高可读性，请增加两个空格的缩进。请勿使用 TAB。

请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行，也没有必要缩进每个元素：

不必要：

<body>

  <h1>Famous Cities</1>

  <h2>Tokyo</h2>

  <p>

    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

更好：

<body>

<h1>Famous Cities</1>
<h2>Tokyo</h2>

<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>

</body>

表格示例：

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  <tr>
</table>

列表示例：

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

省略 <html> 和 <body>？
在 HTML5 标准中，能够省略 <html> 标签和 <body> 标签。

以下代码作为 HTML5 进行验证：

示例

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

我们不推荐省略 <html> 和 <body> 标签。

<html> 元素是文本的根元素。它是规定页面语言的理想位置。

<!DOCTYPE html>
<html lang="en-US">

对于可访问应用程序（屏幕阅读器）和搜索引擎，声明语言很重要。

省略 <html> 或 <body> c可令 DOM 和 XML 软件崩溃。

省略 <body> 会在老式浏览器（IE9）中产生错误。

省略 <head>？
在 HTML5 标准中，<head> 标签也能够被省略。

默认地，浏览器会把 <body> 之前的所有元素添加到默认的 <head> 元素。

通过省略 <head> 标签，您能够降低 HTML 的复杂性：

示例

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

注释：对于 web 开发者，省略标签的做法是陌生的。建立规则需要时间。

元数据
<title> 元素在 HTML5 中是必需的。请尽可能制作有意义的标题。

<title>HTML5 Syntax and Coding Style</title>

为了确保恰当的解释，以及正确的搜索引擎索引，在文档中对语言和字符编码的定义越早越好：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

HTML 注释
短注释应该在单行中书写，并在 <!-- 之后增加一个空格，在 --> 之前增加一个空格：

<!-- This is a comment -->

长注释，跨越多行，应该通过 <!-- 和 --> 在独立的行中书写：

<!-- 
  This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->

长注释更易观察，如果它们被缩进两个空格的话。

样式表
请使用简单的语法来链接样式表（type 属性不是必需的）：

<link rel="stylesheet" href="styles.css">

短规则可以压缩为一行，就像这样：

p.into {font-family:“Verdana”; font-size:16em;}
长规则应该分为多行：

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

开括号与选择器位于同一行
在开括号之前用一个空格
使用两个字符的缩进
在每个属性与其值之间使用冒号加一个空格
在每个逗号或分号之后使用空格
在每个属性值对（包括最后一个）之后使用分号
只在值包含空格时使用引号来包围值
把闭括号放在新的一行，之前不用空格
避免每行超过 80 个字符
注释：在逗号或分号之后添加空格，是所有书写类型的通用规则。

在 HTML 中加载 JavaScript
请使用简单的语法来加载外部脚本（type 属性不是必需的）：

<script src="myscript.js">

通过 JavaScript 访问 HTML 元素
使用“不整洁”的 HTML 样式的后果，是可能会导致 JavaScript 错误。

这两个 JavaScript 语句会产生不同的结果：

var obj = getElementById(“Demo”)

var obj = getElementById(“demo”)
亲自试一试
如果可能，请在 HTML 中使用（与 JavaScript）相同的命名约定。

请访问 JavaScript 样式指南。

使用小写文件名
大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：

不能以 london.jpg 访问 London.jpg。

其他 web 服务器（微软，IIS）对大小写不敏感：

能够以 london.jpg 或 London.jpg 访问 London.jpg。

如果使用混合大小写，那么您必须保持高度的一致性。

如果您从对大小写不敏感的服务器转到一台对大小写敏感的服务器上，这些小错误将破坏您的网站。

为了避免这些问题，请始终使用小写文件名（如果可以的话）。

文件扩展名
HTML 文件名应该使用扩展名 .html（而不是 .htm）。

CSS 文件应该使用扩展名 .css。

JavaScript 文件应该使用扩展名 .js。
27、HTML 字符实体
HTML 中的预留字符必须被替换为字符实体。
HTML 实体
在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

字符实体类似这样：

&entity_name;

或者

&#entity_number;
如需显示小于号，我们必须这样写：&lt; 或 &#60;

提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
不间断空格（non-breaking space）
HTML 中的常用字符实体是不间断空格(&nbsp;)。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 &nbsp; 字符实体。

HTML 实例示例
用 HTML 实体符号做实验：亲自试一试

HTML 中有用的字符实体
注释：实体名称对大小写敏感！

显示结果 描述 实体名称 实体编号
空格

&nbsp;	&#160;

< 小于号

&lt;	&#60;

大于号

&gt;	&#62;

& 和号

&amp;	&#38;

" 引号

&quot;	&#34;

’ 撇号

&apos; (IE不支持)	&#39;

￠ 分（cent） &cent; &#162;
£ 镑（pound） &pound; &#163;
¥ 元（yen）

&yen;	&#165;

€ 欧元（euro） &euro; &#8364;
§ 小节

&sect;	&#167;

© 版权（copyright）

&copy;	&#169;

® 注册商标

&reg;	&#174;

™ 商标

&trade;	&#8482;

× 乘号

&times;	&#215;

÷ 除号 &divide; &#247;
28、HTML 符号
键盘上不存在的字符也可以由实体代替。
HTML 符号实体
在上一章中已经讲解了 HTML 实体。

普通键盘上不存在众多数学、技术和货币符号。

如需将此类符号添加到 HTML 页面，您可以使用 HTML 实体名称（HTML entity name）。

如果不存在实体名称，则可使用实体编号，十进制或十六进制的引用。

实例

我将显示 `&

`

我将显示 `€

`

我将显示 `€

` 将显示为：

我将显示 €
我将显示 €
我将显示 €
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
28、HTML 编码（字符集）
在 HTML 中使用表情符号
表情符号（Emoji）是来自 UTF-8 字符集的字符：😄 😍 💗

什么是 Emoji？
表情符号（Emoji）类似图像或图标，但它们并不是。

它们是来自 UTF-8 (Unicode) 字符集的字母（字符）。

提示：UTF-8 几乎涵盖世界上所有字符和符号。
HTML charset 属性
为了正确显示 HTML 页面，Web 浏览器必须知道页面中使用的字符集。

这是在 <meta> 标签中规定的：

<meta charset="UTF-8">

提示：如果未规定，UTF-8 则是 HTML 中的默认字符集。
UTF-8 字符
很多 UTF-8 字符无法在键盘上键入，但始终可以使用数字（被称为实体编号）来显示它们：

A 是 65
B 是 66
C 是 67
实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<p>我将显示 A B C</p>
<p>我将显示 &#65; &#66; &#67;</p>

</body>
</html>

例子解释
<meta charset="UTF-8"> 元素定义字符集。

字符 A、B、C 由数字 65、66 以及 67 来显示。

为了让浏览器了解您正在显示字符，您必须以 &# 开头并以 ;（分号）结束实体编号。

Emoji 字符
表情符号也是来自 UTF-8 字母的字符：

😄 是 128516
😍 是128525
💗 是 128151
实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>我的第一个 Emoji</h1>

<p>&#128512;</p>

</body>
</html>

由于表情符号是字符，因此可以像 HTML 中的其他任何字符一样复制、显示和调整它们的大小。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>放大的表情符号</h1>

<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>

</body>
</html>

在这里插入图片描述

29、HTML 编码（字符集）
为了正确显示 HTML 页面，Web 浏览器必须知道要使用哪个字符集。

从 ASCII 到 UTF-8
ASCII 是第一个字符编码标准。ASCII 定义了 128 种可以在互联网上使用的字符：数字（0-9）、英文字母（A-Z）和一些特殊字符，比如：! $ + - ( ) @ < >。

ISO-8859-1 是 HTML 4 的默认字符集。此字符集支持 256 个不同的字符代码。HTML 4 同时支持 UTF-8。

ANSI（Windows-1252）是原始的 Windows 字符集。 ANSI 与 ISO-8859-1 相同，不同之处在于 ANSI 具有 32 个额外的字符。

HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集，该字符集涵盖了世界上几乎所有的字符和符号！

HTML charset 属性
为了正确显示 HTML 页面，Web 浏览器必须了解页面中使用的字符集。

这在 <meta> 标签中指定：

<meta charset="UTF-8">

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
ASCII 字符集
ASCII 使用 0 到 31（以及 127）之间的值作为控制字符。

ASCII 使用 32 到 126 的值表示字母、数字和符号。

ASCII 不使用 128 到 255 之间的值。

ANSI 字符集 (Windows-1252)
对于 0 到 127 的值，ANSI 与 ASCII 相同。

ANSI 有一组专有的字符，其值从 128 到 159。

对于 160 到 255 的值，ANSI 与 UTF-8 相同。

ISO-8859-1 字符集
对于 0 到 127 的值，8859-1 与 ASCII 相同。

8859-1 不使用 128 到 159 之间的值。

对于从 160 到 255 的值，8859-1 与 UTF-8 相同。

UTF-8 字符集
对于 0 到 127 的值，UTF-8 与 ASCII 相同。

UTF-8 不使用 12 8到 159 之间的值。

对于 160 到 255 之间的值，UTF-8 与 ANSI 和 8859-1 相同。

UTF-8 从值 256 继续，包含超过 10000 个不同字符。

如需深入研究，请阅读我们完整的 HTML 字符集参考手册。

@charset CSS 规则
您可以使用 CSS @charset 规则来指定样式表中使用的字符编码：

实例
将样式表的编码设置为 Unicode UTF-8：

@charset "UTF-8";

30、HTML 统一资源定位器
URL 也被称为网址。

URL 可以由单词组成，比如 “w3school.com.cn”，或者是因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会键入网址的域名，因为名称比数字容易记忆。
URL - Uniform Resource Locator
当您点击 HTML 页面中的某个链接时，对应的 标签指向万维网上的一个地址。

统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。

网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：

scheme://host.domain:port/path/filename
解释：

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
编者注：URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。

URL Schemes
以下是其中一些最流行的 scheme：

在这里插入图片描述

删除没备份的痛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Python基础知识点总结
学Python的小白！
08-25 7万+
本文包括python基本知识：简单数据结构，数据结构类型（可变：列表，字典，集合，不可变：数值类型，字符串，元组），分支循环和控制流程，类和函数，文件处理和异常等等。
javascript中的107个基础知识收集整理 推荐
10-29
### JavaScript基础知识精讲 #### 一、文档对象模型（DOM）及基本操作 **1. 输出语句** `document.write("")` 是一种常见的在网页上输出内容的方式，但建议在开发过程中避免使用，因为它会重绘整个页面，影响性能...
HTML中属性值使用双引号和单引号的问题
读书札记2022的博客
11-28 2145
属性值应该始终被包括在引号内。 双引号是最常用的，不过使用单引号也没有问题。 提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=‘John “ShotGun” Nelson’ 转载：https://www.runoob.com/html/html-attributes.html ...
C#226课的主要内容
jackli_zhang012的博客
10-16 163
今天主要讲了一下知识点：
HTML(5) 样式指南和代码约定
u013291945的博客
05-24 460
HTML 代码约定web 开发者常常不确定在 HTML 中使用的代码样式和语法。在 2000 年至 2010 年之间，许多 web 开发者从 HTML 转换为 XHTML。通过 XHTML，开发者不得不编写有效的“格式良好的”代码。HTML5 在代码验证时会更宽松一点。通过 HTML5，您必须创建属于自己的最佳实践、样式指南和代码约定。智能且有未来保证对样式的合乎逻辑的使用，可以令其他人更容易理解和
什么是 DOM?
苍穹青空
05-17 462
什么是 DOM?文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情
HTML——基础知识点总结
m0_61016904的博客
10-30 2万+
HTML总结 一.HTML简介 1.HTML HTML(HyperText Markup Language),超文本标记语言，使用各种标记来表示文档的结构以及标识超链接的信息。 2.HTML文档 HTML文档包含了标签及文本内容，并且 html 文档也叫做 web 页面。 二.HTML基本结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 菜鸟教程（runoob.com
WEB——html基础知识总结＋案例实战
weixin_51525416的博客
07-07 5083
WEB——html基础知识总结＋案例实战
【前端】Html+Css+JavaScript基础知识点
lcukyNwa的博客
07-18 6307
Html+Css+JavaScript基础知识点
计算机基础知识(免费、全面)
MrFlySand的博客
12-27 1万+
查看目录 网络基础知识* 计算机基础知识1* 计算机基础知识2# 计算机病毒* 病毒:人为编制的程序,特点有隐蔽性、传染性破坏性等。传染性是病毒的基本特征,破坏性是目的* 按感染的方式分为:引导型病毒、文件型、网络、复合型、宏病毒、外壳型* 杀毒软件:KV300、KV3000、Kill、AV95* 引导型病毒感染引导区和主导区,如:大麻病毒、小球病毒、2708病毒。引导型病毒存放在引导区中* 文件病毒:大多是可执行文件,如:黑色星期五、CIH(硬盘/BIOS数据丢失)。 复合病毒:感染文件和引导区* .
零基础学HTML CSS源代码
05-10
CSS基础.html 演示CSS基础链接知识用法。 style1.css 名为style1的CSS样式文件。 style2.css 名为style2的CSS样式文件。 style3.css 名为style3的CSS样式文件。 第16章（源代码\第16章） ...
java基础知识点67条
12-29
### Java基础知识点详解 #### 1. HTTP状态码理解 - **1.404 Not Found**: 表示请求的资源未找到。这通常是因为URL地址输入错误或服务器上对应的资源已被移除。 - **500 Internal Server Error**: 表示服务器遇到了...
C#面试基础知识汇总.doc
03-31
### C#面试基础知识汇总 #### 1. CTS、CLS 和 CLR 分别作何解释？ - **CTS (Common Type System, 公共类型系统)**：是.NET Framework的一部分，定义了一组数据类型规则，确保所有.NET语言共享相同的类型系统。CTS...
html知识整理
12-19
### HTML基础知识整理 #### 1. 基础样式属性 HTML中的样式属性主要用于控制页面元素的外观。以下是一些常见的样式属性： 1. **网页字体加粗**: 使用`<b>`标签可以使文本变粗。例如： ```html 这段文字将被加粗...
缩进与对齐——正确地使用Tab和空格
热门推荐
Eric Z的程序人生
12-11 3万+
写代码时大家都会使用缩进（indentation）和对齐（alignment），这是两个相关而又不同的概念，两者都是为了提高代码的可读性。缩进出现在一行的最左边，目的是明显地区分开包含与被包含的代码；对齐则是为了使代码美观、整洁。 下例中，类的两个成员变量相对于类名来说具有一级缩进；两个变量的注释部分采用了对齐显示。它使用了Tab（假设一个Tab等于8个空格的大小）来缩进和对齐，一块绿色表示一个
HTML样式- CSS——WEB开发系列08
最新发布
一条晒干的咸鱼的博客
08-13 761
HTML 和 CSS 是构建现代网页的基础。HTML（超文本标记语言）负责定义网页的结构，而 CSS（层叠样式表）则用于控制网页的外观和布局。
JS UI库DHTMLX Suite v8.4全新发布——图表、网格组件等API全面升级
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
08-13 416
本文将为大家介绍强大JavaScript UI库DHTMLX Suite v8.4新功能，欢迎下载新版体验！
Python小课实践：30个基础代码示例
"Python小课包含30个常用代码实现，旨在帮助初学者快速入门Python编程。这些实现涵盖了基础到进阶的各种功能，包括排序算法、数学计算、文件...通过实践这些例子，初学者能够快速提升编程技能，掌握Python的基础知识。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值