HTML笔记

date
Sep 30, 2021
slug
html
status
Published
tags
技术
summary
w3school教程再浓缩
type
Post

基础

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
HTML 段落是通过 <p> 标签进行定义的。
HTML 链接是通过 <a> 标签进行定义的。(注释：在 href 属性中指定链接的地址。
HTML 图像是通过 <img> 标签进行定义的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行），在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。
<h1 align="center"> 拥有关于对齐方式的附加信息。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
<table border="1"> 拥有关于表格边框的附加信息。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号。
注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

段落

<hr /> 标签在 HTML 页面中创建水平线。
提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
很多标签都可以用来改变文本的外观，并为文本关联其隐藏的含义。总地来说，这些标签可以分成两类：基于内容的样式（content-based style）和物理样式（physical style）。

引用

HTML <q> 元素定义短的引用。浏览器通常会为 <q> 元素包围引号。
HTML <blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。

注释

注释标签 <!-- 与 --> 用于在 HTML 插入注释。

CSS

通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。
有三种方式来插入样式表：
  • 外部样式表
  • 内部样式表
  • 内联样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
可以在 head 部分通过 <style> 标签定义内部样式表。

链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
有两种使用 <a> 标签的方式：
  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  1. 通过使用 name 属性 - 创建文档内的书签
使用 Target 属性，你可以定义被链接的文档在何处显示。
您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">有用的提示</a>
提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。
注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。
提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

图像

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的表头使用 <th> 标签进行定义。
注意：为了避免空的单元格的边框没有被显示出来的情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

块

大多数 HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
HTML <span> 元素是内联元素，可用作文本的容器。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式。

Id

id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。
id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。
注释：id 名称对大小写敏感！
同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用
JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素
Iframe
iframe 用于在网页内显示网页。
iframe 可用作链接的目标（target）。链接的 target 属性必须引用 iframe 的 name 属性：

JavaScript

JavaScript 使 HTML 页面更具动态性和交互性
HTML <script> 标签用于定义客户端脚本（JavaScript）。
<script> 元素即可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。
如需选取 HTML 元素，JavaScript 最常用 document.getElementById() 方法。
HTML <noscript> 标签定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户

路径

绝对文件路径是指向一个因特网文件的完整 URL
如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。

头部

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>
title 元素能够：
  • 定义浏览器工具栏中的标题
  • 提供页面被添加到收藏夹时显示的标题
  • 显示在搜索引擎结果中的页面标题
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<link> 标签定义文档与外部资源之间的关系。<link> 标签最常用于连接样式表：
<style> 标签用于为 HTML 文档定义样式信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

布局

<table> 元素不是作为布局工具而设计的。
<table> 元素的作用是显示表格化的数据。
使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式

响应式Web设计

  • RWD 指的是响应式 Web 设计（Responsive Web Design）
  • RWD 能够以可变尺寸传递网页
  • RWD 对于平板和移动设备是必需的

计算机代码

通常，HTML 使用可变的字母尺寸，以及可变的字母间距。
在显示计算机代码示例时，并不需要如此。
<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。

语义

notion image
<img> 元素定义图像，<figcaption> 元素定义标题。

代码约定

始终在文档的首行声明文档类型：<!doctype html>
使用小写元素名
使用小写属性名
属性值加引号
始终对图像使用 alt 属性。当图像无法显示时该属性很重要。
始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。
为了提高可读性，请增加空行来分隔大型或逻辑代码块。
为了提高可读性，请增加两个空格的缩进。请勿使用 TAB。
为了确保恰当的解释，以及正确的搜索引擎索引，在文档中对语言和字符编码的定义越早越好
短注释应该在单行中书写，并在 <!-- 之后增加一个空格，在 --> 之前增加一个空格
在逗号或分号之后添加空格，是所有书写类型的通用规则。
使用小写文件名
HTML 文件名应该使用扩展名 .html（而不是 .htm）

字符实体

HTML 中的预留字符必须被替换为字符实体。

编码

为了正确显示 HTML 页面，Web 浏览器必须知道页面中使用的字符集，这是在 <meta> 标签中规定的。
为了让浏览器了解您正在显示字符，您必须以 &# 开头并以 ;（分号）结束实体编号。
可以使用 CSS @charset 规则来指定样式表中使用的字符编码

统一资源定位器

scheme://host.domain:port/path/filename
  • scheme - 定义因特网服务的类型。最常见的类型是 http
  • host - 定义域主机（http 的默认主机是 www）
  • domain - 定义因特网域名，比如 w3school.com.cn
  • :port - 定义主机上的端口号（http 的默认端口号是 80）
  • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
  • filename - 定义文档/资源的名称
URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
 

© Dino 2021 - 2023