2021-06-07

最新推荐文章于 2023-07-09 09:37:26 发布

wwwhf

最新推荐文章于 2023-07-09 09:37:26 发布

阅读量421

点赞数

分类专栏：前端复习文章标签： html

原文链接：runoob.com

版权

前端复习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML 基础- 4个实例

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

HTML 段落

HTML 段落是通过标签 <p> 来定义的。

HTML 链接

HTML 链接是通过标签 <a> 来定义的。

HTML 图像

HTML 图像是通过标签 <img> 来定义的.

HTML 元素

HTML 文档由 HTML 元素定义。

HTML 元素语法

元素的内容是开始标签与结束标签之间的内容
大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

HTML 文档由相互嵌套的 HTML 元素构成。

父子关系、兄弟关系

HTML 实例解析

<p> 元素定义了 HTML 文档中的一个段落。

<body> 元素定义了 HTML 文档的主体。

<html> 元素定义了整个 HTML 文档。

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML，因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感，许多网站都使用大写的 HTML 标签

因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML 属性

属性是 HTML 元素提供的附加信息。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定

HTML 属性常用引用属性值

双引号是最常用的，不过使用单引号也没有问题

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

而新版本的 (X)HTML 要求使用小写属性。

HTML 属性参考手册

https://www.runoob.com/tags/html-reference.html

HTML 标题

在 HTML 文档中，标题很重要。

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题

注释: 浏览器会自动地在标题的前后添加空行。

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。

浏览器会忽略注释，也不会显示它们。

HTML 段落

HTML 可以将文档分割为若干段落。

段落是通过 <p> 标签定义的。

注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签

HTML 输出- 使用提醒

需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML 格式化标签

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

加粗、放大、斜体、缩小、上标、下标等

HTML 超链接（链接）

HTML 使用超级链接与网络上的另一个文档相连

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。_blank _self

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

基本的注意事项 - 有用的提示

注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。

在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

TML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，

该标签作为HTML文档中所有的链接标签的默认链接

HTML <link> 元素

HTML <style> 元素

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档

HTML <meta> 元素

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

HTML <script> 元素

HTML 样式- CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

HTML样式实例 - 背景颜色

背景色属性（background-color）定义一个元素的背景颜色

HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色）和font-size（字体大小）属性来定义字体的样式:

HTML 样式实例 - 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式

已弃用的标签和属性

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。

不建议使用的标签有: <font>, <center>, <strike>

不建议使用的属性: color 和 bgcolor.

HTML 图像

HTML 图像- 图像标签（ <img>）和源属性（Src）

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

在页面上显示图像，需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

HTML 图像- 设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

提示: 指定图像的高度和宽度是一个很好的习惯

基本的注意事项 - 有用的提示：

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），

每行被分割为若干单元格（由 <td> 标签定义）

HTML 表格和边框属性

boder cellpadding cellrow

HTML 表格表头

表格的表头使用 <th> 标签进行定义

HTML 列表

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

注意事项 - 有用提示

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

HTML <div> 和<span>

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。例: <h1>, <p>, <ul>, <table>

TML 内联元素

内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

HTML 布局

网页布局对改善网站的外观非常重要。

请慎重设计您的网页布局。

网站布局

大多数网站可以使用 <div> 或者 <table> 元素来创建多列

HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素

HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式

大多数站点可以使用 <div> 或者 <table> 元素来创建多列

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程。

Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

HTML 表单和输入

HTML 表单用于收集不同类型的用户输入

HTML 表单

表单使用表单标签 <form> 来设置

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>）

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，

密码字段

密码字段通过标签<input type="password"> 来定义

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面

Iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")

一些旧的浏览器不支持iframe

Iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框:

使用iframe来显示目标链接页面

iframe可以显示一个目标链接的页面

目标链接的属性必须使用iframe的属性，如下实例:

出于有些网页不希望被嵌套, 响应头中有一选项

X-Frame-Options

他有三个可配置值

DENY：表示该网站页面不允许被嵌套，即便是在自己的域名的页面中也不能进行嵌套。
SAMEORIGIN：表示该页面可以在相同域名页面中被嵌套展示。
ALLOW-FROM uri：表示该页面可以在指定来源页面中进行嵌套展示。

HTML 颜色

HTML 颜色由红色、绿色、蓝色混合而成。

颜色值

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

1600万种不同颜色

三种颜色红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。

灰暗色调

Web安全色?

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。

相对于使用 rgb(255,255,0)，使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能

HTML 颜色名

目前所有浏览器都支持以下颜色名。

141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。下表列出了所有颜色的值，包括十六进制值。

提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色。

HTML 颜色值

颜色值由十六进制来表示红、绿、蓝（RGB）。

每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。

十六进制值的写法为 # 号后跟三个或六个十六进制字符。

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性

HTML <script> 标签

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

HTML<noscript> 标签

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容

HTML 字符实体

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

一些在键盘上找不到的字符也可以使用字符实体来替换

&nbsp &lt &gt &yen

虽然 html 不区分大小写，但实体字符对大小写敏感。

HTML 实体

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

如需显示小于号，我们必须这样写：< 或 < 或 <

使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，

浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格( )

结合音标符

发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如尖音符 ( ̀) 和抑音符 ( ́) 。

变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。

HTML 统一资源定位器(Uniform Resource Locators)

URL 是一个网页地址。

URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

URL - 统一资源定位器

Web浏览器通过URL从Web服务器请求页面。

当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。

一个统一资源定位器(URL) 用于定位万维网上的文档。

scheme://host.domain:port/path/filename

说明:

- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 runoob.com
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称

常见的 URL Scheme

http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。