HTML笔记
HTML笔记
WellsHTML简介
HTML（HyperText Markup Language）是用来描述网页的一种语言。
HTML标签
- HTML 标签是由尖括号包围的关键词，比如
<html> - HTML 标签通常是成对出现的，比如
<b>和</b> - 标签对中的第一个标签是开始标签，第二个标签是结束标签
注：”HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思。
HTML声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。doctype 声明是不区分大小写的
HTML实例
1 | <!-- 声明为HTML5文档 --> |
HTML基础构成
标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
1 | <h1>这是标题 1</h1> |
段落
HTML 段落是通过标签 <p> 来定义的。
1 | <p>这是一个段落。</p> |
水平线
<hr> 标签在 HTML 页面中创建水平线,可用于分隔内容。
1 | <p>这是一个段落。</p> |
注释
语法
1 | <!-- 这是一个注释 --> |
折行/换行
在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签
1 | <p>这个<br>段落<br>演示了分行的效果</p> |
注意：<br> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
空格的使用
对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
1 | <p> |
HTML文本格式化标签
文本加粗
1 | <b>这个文本是加粗的</b> |
1 | <strong>这个文本是加粗的</strong> |
文字放大与缩小
1 | <big>这个文本字体放大</big> |
1 | <small>这个文本是缩小的</small> |
文字斜体
1 | <em>这个文本是斜体的</em> |
1 | <i>这个文本是斜体的</i> |
上下标
1 | 这个文本包含<sub>下标</sub> |
1 | 这个文本包含<sup>上标</sup> |
定义预格式文本
1 | <pre> |
注：HTML未对此处的空格和换行进行处理为一个空格
定义缩写
1 | <abbr title="etcetera">etc.</abbr> |
文字方向
1 | <p>该段落文字从左到右显示。</p> |
引用
短引用
1 | <q>Build a future where people live in harmony with nature.</q> |
长引用
1 | <blockquote cite="http://www.worldwildlife.org/who/index.html"> |
下划线(插入线)与删除线
1 | <p>My favorite color is <del>blue</del> <ins>red</ins>!</p> |
标签所对应的全拼
1 | <b>---bold |
HTML元素
开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag)
语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
HTML 元素的嵌套
大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。
无结束标签
即使忘记了使用结束标签，大多数浏览器也会正确地显示 HTML。忘记使用结束标签会产生不可预料的结果或错误。
HTML属性
属性是 HTML 元素提供的附加信息。
实例
1 | <a href="https://heyhjwei.github.io/">这是一个链接使用了 href 属性</a> |
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定
引用属性值的方法
- 属性值应该始终被包括在引号内。
- 双引号是最常用的，不过使用单引号也没有问题。
- 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号
例如：
1 | name='John "ShotGun" Nelson' |
注意：
- 属性和属性值，尽量小写，本来这样做也方便些。
- class 属性可以多用
class=" "（引号里面可以填入多个class属性） - id 属性只能单独设置 **
id=" "**（只能填写一个，多个无效）
大多数 HTML 元素的属性：
| 属性 | 目的和用途 | 可使用的元素 |
|---|---|---|
| class | 可以用于选择和样式化元素。可以在 CSS 中使用类选择器来选择具有特定类名的元素，并应用样式规则。 | 适用于大多数 HTML 元素，如<div>, <p>, <span>, <h1>, 等等 |
| id | 用于为元素指定唯一的标识符。可以使用 JavaScript 或 CSS 来选择具有特定 id 的元素，并对其进行操作或样式化。 | 适用于大多数 HTML 元素，如<div>, <p>, <span>, <h1>, 等等 |
| style | 内联样式 | 适用于大多数 HTML 元素，如<div>, <p>, <span>, <h1>, 等等 |
| src | 指定外部资源的 URL | <img>, <script>, <iframe>, <video>, <audio>, 等等 |
| href | 用于创建超链接,指定链接的 URL | <a>, <link>, <area>, 等等 |
| alt | 为图像元素提供替代文本。当图像无法加载或无法显示时，浏览器会显示 alt 属性中的文本。 |
<img> |
| width | 元素的宽度 | <img>, <canvas>, <video>, <audio>, <table>, 等等 |
| height | 元素的高度 | <img>, <canvas>, <video>, <audio>, <table>, 等等 |
| disabled | 禁用元素，例如，可以将按钮元素 (<button>) 的 disabled 属性设置为 true，以禁用按钮，防止用户点击它。 |
<button>, <input>, <select>, <textarea>, 等等 |
| readonly | 将元素设置为只读 | <input>, <textarea>, 等等 |
| placeholder | 输入字段的占位符文本 | <input>, <textarea>, 等等 |
| required | 设置元素为必填 | <input>, <select>, <textarea>, 等等 |
| value | 元素的值 | <input>, <button>, <option>, <textarea>, 等等 |
| checked | 设置复选框或单选按钮的选中状态 | <input type="checkbox">, <input type="radio">, 等等 |
| maxlength | 输入字段的最大字符数 | <input>, <textarea>, 等等 |
| min, max | 输入字段的最小值和最大值 | <input type="number">, <input type="date">, <input type="time">, 等等 |
| placeholder | 为输入字段提供占位符文本，用于提示用户输入的内容。例如，您可以在文本输入字段 (<input type="text">) 中使用 placeholder 属性来提供示例输入。 |
<input type="text"> |
HTML 头部
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
<title> 元素
<title> 标签定义了不同文档的标题。<title> 在 HTML/XHTML 文档中是必需的。
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。显示时，要将<link>标签放入<head>里。
<base> 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
1 | <head> <base href="http://www.runoob.com/images/" target="_blank"> </head> |
<link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
1 | <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
<style> 元素
1 | <style> 标签定义了HTML文档的样式文件引用地址. |
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
1 | <head> <style type="text/css"> body { background-color:yellow; } p { color:blue } </style> </head> |
<meta> 元素
meta标签描述了一些基本的元数据。元数据也不显示在页面上，但会被浏览器解析。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
<meta> 一般放置于 <head> 区域
使用实例
为搜索引擎定义关键词:
1 | <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> |
为网页定义描述内容:
1 | <meta name="description" content="免费 Web & 编程 教程"> |
定义网页作者:
1 | <meta name="author" content="Runoob"> |
每30秒钟刷新当前页面:
1 | <meta http-equiv="refresh" content="30"> |
HTML <script> 元素
<script>标签用于加载脚本文件，如： JavaScript。
链接
HTML 链接是通过标签 <a> 来定义的。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
语法
以下是 HTML 中创建链接的基本语法和属性：code><a> 元素：创建链接的主要HTML元素是<a>（锚）元素。<a>元素具有以下属性：
href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。target（可选）：指定链接如何在浏览器中打开。常见的值包括_blank（在新标签或窗口中打开链接）和_self（在当前标签或窗口中打开链接）。title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
使用实例
文本链接：最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如：
1 | <a href="https://www.example.com">访问示例网站</a> |
图像链接：您还可以使用图像作为链接。在这种情况下，<a> 元素包围着 <img> 元素。例如：
1 | <a href="https://www.example.com"> |
锚点链接：除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。例如：
1 | <a href="#section2">跳转到第二部分</a> |
下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：
1 | <a href="document.pdf" download>下载文档</a> |
跳转id链接
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
在HTML文档中创建一个链接到”有用的提示部分(id=”tips”）”：
1 | <a href="#tips">访问有用的提示部分</a> |
或者，从另一个页面创建一个链接到”有用的提示部分(id=”tips”）”：
1 | <a href="https://www.runoob.com/html/html-links.html#tips"> |
邮箱链接
1 | <--案例1 --></--> |
案例2可设置指定的收件内容以及内容
图像
HTML 图像是通过标签 <img> 来定义的.<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
语法
1 | <img src="url" alt="some_text"> |
Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
1 | <img src="boat.gif" alt="Big Boat"> |
在浏览器无法载入图像时，此时，浏览器将显示这个替代性的文本而不是图像。
设置图像的高度与宽度
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素:
1 | <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> |
实例：
1 | <img src="https://hijwei.top/images/redefine-avatar.jpg" alt="cola" width="39" height="39" /> |
实现效果
表格
HTML 表格由 <table> 标签来定义。HTML 表格是一种用于展示结构化数据的标记语言元素。
<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。
<thead >用于定义表格的标题部分: 在<thead >中，使用<th >元素定义列的标题，以上实例中列标题分别为”列标题1”，”列标题2”和”列标题3”。<tbody >用于定义表格的主体部分: 在<tbody >中，使用<tr >元素定义行，并在每行中使用<td >元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（**<th>**）用于定义列的标题。
- tr：tr 是 table row 的缩写，表示表格的一行。
- td：td 是 table data 的缩写，表示表格的数据单元格。
- th：th 是 table header的缩写，表示表格的表头单元格。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格table后面加入border="1"
列表
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
HTML 区块
区块元素和内联元素
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <div>、<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <span>,<b>, <td>, <a>, <img>
<div>与 <span>
<div> 是块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构，例如页面的主体区域、容器、布局等。
<span> 是行内元素，它不会独占一行，宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。
嵌套关系：
<div>可以容纳其他块级元素和行内元素，包括其他的<div>和<span>元素。<span>通常被用来包裹文本或其他行内元素，比如用来设置特定文本的样式。
表单和输入
HTML 表单用于收集用户的输入信息。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。
我们可以使用 <form> 标签来创建表单:
HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签 **<input>**。输入类型是由type属性定义。接下来我们介绍几种常用的输入类型。
文本域
文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
1 | <form> |
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。
密码字段
密码字段通过标签 <input type="password"> 来定义:
1 | <form> |
注意：密码字段字符不会明文显示，而是以星号 ***** 或圆点 . 替代。
单选按钮
<input type="radio"> 标签定义了表单的单选框选项:
1 | <form action=""> |
复选框
<input type="checkbox"> 定义了复选框。
复选框可以选取一个或多个选项：
1 | <form> |
提交按钮
<input type="submit"> 定义了提交按钮。
当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理:
1 | <form name="input" action="html_form_action.php" method="get"> |
框架
iframe语法:
1 | <iframe src="URL"></iframe> |
该URL指向不同的网页。
iframe - 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如：”80%”)。
1 | <iframe src="demo_iframe.htm" width="200" height="200"></iframe> |
iframe - 移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 “0” 移除iframe的边框:
1 | <iframe src="demo_iframe.htm" frameborder="0"></iframe> |
使用 iframe 来显示目标链接页面
iframe 可以显示一个目标链接的页面
目标链接的属性必须使用 iframe 的属性，如下实例:
1 | <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="https://1.top" target="iframe_a" rel="noopener">HIJWEI.TOP</a></p> |
文章引用
1.引用菜鸟教程的文章
原文链接：https://www.runoob.com/html/html-tutorial.html