html入门（源自runnoob）
步骤/目录：
无本文首发于个人博客https://lisper517.top/index.php/archives/4250/，转载请注明出处。
本文的原文写作日期为2020年9月22日，主要目的是初步了解html（源自runnoob）。
下面的内容有些缩进或者图片缺失，可以参考 原word文档 。
Runnoob可以提供html的基本知识。
参考手册：https://www.runoob.com/tags/html-reference.html
1.Html不认识\t\n等，都会输出为空格。<!DOCTYPE html>（不分大小写）为标准网页声明，位于所有标签之前，在支持html的浏览器中会被解释为网页使用html5编码。
<html>是页面的根元素，<head>一般包含了文档的meta数据，比如编码格式（一般对于中文可以写charset=”UTF-8”或者”GBK”）；<title>为网页标题，<body>为可见内容，<h1>到<h6>为标题，<p>为段落。链接在<a>标签的href属性中，图像在<img>中，后面规定名称和尺寸，如<img loading="lazy" src="/images/logo.png" width="258" height="39" />。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>myweb</title>
</head>
<body>
<h1>my first html</h1>
<p>my first html instance</p>
</body>
</html>
按f12，在elements中可找到标签布局。
关于图片的进一步解释：
1、*.html 文件跟 *.jpg 文件(f盘)在不同目录下：
<img src="file:///f:/*.jpg" width="300" height="120"/>
2、*.html 文件跟 *.jpg 图片在相同目录下：
<img src="*.jpg" width="300" height="120"/>
3、*.html 文件跟 *.jpg 图片在不同目录下：
a、图片 *.jpg 在 image 文件夹中，*.html 跟 image 在同一目录下：
<img src="image/*.jpg/"width="300" height="120"/>
b、图片 *.jpg 在 image 文件夹中，*.html 在 connage 文件夹中，image 跟 connage 在同一目录下：
<img src="../image/*.jpg/"width="300" height="120"/>
4、如果图片来源于网络，那么写绝对路径：
<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>
关于href和src：
href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：
<link href="reset.css" rel=”stylesheet“/>
浏览器会识别该文档为 css 文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用 link，而不采用 @import 加载 css 的原因。 src 是 source 的缩写，src 的内容是页面必不可少的一部分，是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。例如:
<script src="script.js"></script>
当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
简而言之，src 用于替换当前元素；href 用于在当前文档和引用资源之间建立联系。
1.<br>表示换行，没有结束标签。有些元素为空元素，以开始标签的结束而结束（有些元素只有一个开始标签），但考虑到未来标准，建议后面还是写个<br/>。大多数情况下，即使不写结束标签也可以，但这样不应当。目前标签大小写无所谓，但应该尽量小写。
在开始标签中设置属性，也是尽量小写，单双引号无所谓。Class属性中可为元素定义多个或一个类名（从样式文件引入），id则是唯一的，style规定样式，title描述元素的额外信息。
Html中的标签：
New : HTML5新标签
标签 描述
<!--...--> 定义注释
<!DOCTYPE> 定义文档类型
<a> 定义超文本链接
<abbr> 定义缩写
<acronym> 定义只取首字母的缩写，不支持HTML5
<address> 定义文档作者或拥有者的联系信息
<applet> HTML5中不赞成使用。定义嵌入的 applet。
<area> 定义图像映射内部的区域
<article>New 定义一个文章区域
<aside>New 定义页面的侧边栏内容
<audio>New 定义音频内容
<b> 定义文本粗体
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> HTML5不支持，不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi>New 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo> 定义文字方向
<big> 定义大号文本，HTML5不支持
<blockquote> 定义长的引用
<body> 定义文档的主体
<br> 定义换行
<button> 定义一个点击按钮
<canvas>New 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption> 定义表格标题
<center> HTML5不支持，不赞成使用。定义居中文本。
<cite> 定义引用(citation)
<code> 定义计算机代码文本
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组
<command>New 定义命令按钮，比如单选按钮、复选框或按钮
<datalist>New 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<dd> 定义定义列表中项目的描述
<del> 定义被删除文本
<details>New 用于描述文档或文档某个部分的细节
<dfn> 定义定义项目
<dialog>New 定义对话框，比如提示框
<dir> HTML5不支持，不赞成使用。定义目录列表。
<div> 定义文档中的节
<dl> 定义列表详情
<dt> 定义列表中的项目
<em> 定义强调文本
<embed>New 定义嵌入的内容，比如插件。
<fieldset> 定义围绕表单中元素的边框
<figcaption>New 定义<figure> 元素的标题
<figure>New 规定独立的流内容（图像、图表、照片、代码等等）。
<font> HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色。
<footer>New 定义 section 或 document 的页脚。
<form> 定义了HTML文档的表单
<frame> 定义框架集的窗口或框架
<frameset> 定义框架集
<h1> to <h6> 定义 HTML 标题
<head> 定义关于文档的信息
<header>New 定义了文档的头部区域
<hr> 定义水平线
<html> 定义 HTML 文档
<i> 定义斜体字
<iframe> 定义内联框架
<img> 定义图像
<input> 定义输入控件
<ins> 定义被插入文本
<kbd> 定义键盘文本
<keygen>New 规定用于表单的密钥对生成器字段。
<label> 定义 input 元素的标注
<legend> 定义 fieldset 元素的标题。
<li> 定义列表的项目
<link> 定义文档与外部资源的关系
<main> 定义文档的主体部分。
<map> 定义图像映射
<mark>New 定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<menu> 不赞成使用。定义菜单列表。
<meta> 定义关于 HTML 文档的元信息。
<meter>New 定义度量衡。仅用于已知最大和最小值的度量。
<nav>New 定义导航链接的部分
<noframes> 定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<object> 定义内嵌对象
<ol> 定义有序列表。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<output>New 定义不同类型的输出，比如脚本的输出。
<p> 定义段落。
<param> 定义对象的参数。
<pre> 定义预格式文本。
<progress>New 定义运行中的进度（进程）。
<q> 定义短的引用。
<rp>New <rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New <rt> 标签定义字符（中文注音或字符）的解释或发音。
<ruby>New <ruby> 标签定义 ruby 注释（中文注音或字符）。
<s> 不赞成使用。定义加删除线的文本。
<samp> 定义计算机代码样本。
<script> 定义客户端脚本。
<section>New <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<select> 定义选择列表（下拉列表）。
<small> 定义小号文本。
<source>New <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<span> 定义文档中的节。
<strike> HTML5不支持，不赞成使用。定义加删除线文本。
<strong> 定义强调文本。
<style> 定义文档的样式信息。
<sub> 定义下标文本。
<summary>New <summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
<sup> 定义上标文本。
<table> 定义表格。
<tbody> 定义表格中的主体内容。
<td> 定义表格中的单元。
<textarea> 定义多行的文本输入控件。
<tfoot> 定义表格中的表注内容（脚注）。
<th> 定义表格中的表头单元格。
<thead> 定义表格中的表头内容。
<time>New 定义日期或时间，或者两者。
<title> 定义文档的标题。
<tr> 定义表格中的行。
<track>New <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<tt> 定义打字机文本。
<u> 不赞成使用。定义下划线文本。
<ul> 定义无序列表。
<var> 定义文本的变量部分。
<video>New <video> 标签定义视频，比如电影片段或其他视频流。
<wbr>New 规定在文本中的何处适合添加换行符。
2.<h1>-<h6>定义了不同大小的标题。浏览器会自动在标题前后添加空行。
<hr />为水平线。<!--注释内容-->
<p></p>定义段落，段落前后自动加空行。在段落内使用<br>换行。
Html对不同的页面大小自动调整显示格式，连续的换行、空格等都算作一个空格。
<pre>类似raw string的作用。
区分一下： <br>, <br/> 以及 <br />（带有空格）
<br> 是 HTML 写法。
是 XHTML1.1 的写法, 也是 XML 写法。<br/> 是 XHTML 为兼容 HTML 的写法,也是 XML 写法。HTML5 因为兼容 XHTML，所以三种写法都可以使用。
早期发布的 HTML 规范当中，<br> 与 <img> 等元素是不用封闭自身的，但是这种元素造成了 HTML 规范的不严谨，于是在之后发布的 XHTML 语言中，参考了更为严谨的 XML 规范，在这些不用自身封闭的元素后加 / 来表示自行封闭，在逻辑上来讲等同于<br>....</br>（但是没有 </br> 这种写法），这样一来保证了较少的代码量，二来保证了规范的严谨。
3.html的文本格式：<b>或者<strong>为粗体bold，<i>或者<em>为斜体italic，<code>为代码格式，<sub>subscript和<sup>分别为上下标。Small和big分别为文本放大和缩小。
<code>相关标签：<code>计算机输出</code>，<kbd>键盘输入</kbd>，<tt>打字机文本</tt>，<samp>计算机代码样本</samp>，<var>计算机变量</var>。
<address>标签用斜体的方式输出地址。
<abbr>定义缩写，全称以属性title=”全称”给出，当鼠标移到文本上可以显示全称。不建议用<acronym>。
<bdo dir=”rtl”>Bi-Directional Override表示文字右到左显示。
短引用为<q>，加个引号。<blockquote>为长引用。<cite>为印证，<dfn>为定义一个定义项目。
<del>加删除线，<ins>加下划线。
4.<a>来定义超链接。默认情况下，一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时，链接显示为红色并带有下划线。
Target属性定义链接在何处打开，为_blank时在新窗口打开，_top则为从当前页面跳转。Id属性可以创建一个书签，对于人来说是隐藏的。其他链接可设置href=”#你设置的id名”，这样读者点击链接即可跳到书签，还可以访问其他页面的书签。链接里的空格用%20代替以确保正确跳转。
a标签中加入rel="noopener noreferrer"，可以使链接更安全、不被篡改。
对网页作者不信任的链接，可以在meta里加content="nofollow"来告诉爬虫不要点击页面中的链接，或者在<a>中加入rel=”nofollow”来指定特定的不信任链接。
<Img>创建图片，图片也可以用作超链接。<img>如<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32">有边框的图片，border=”0”为无边框。
创建邮件链接：关于创建电子邮件链接时如何发送邮件内容
在进行邮件内容发送时，需要使用关键字：mailto
示例如下：
<a href="mailto:zhangrr601@163.com?subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">发送邮件</a>
这样会调启系统默认的邮件程序发送给 zhangrr601@163.com，并且收件人那里已经填上了我邮箱的地址。
关于创建电子邮件链接时如何进行抄送，密送.
在进行抄送时，需要使用关键字：cc
在进行密送时，需要使用关键字：bcc
示例如下：
<a href="mailto:zhangrr601@163.com?cc=someone@163.com&bcc=somebody@163.com" rel="nofollow">发送邮件</a>
参数说明：
参数 描述
mailto:name@email.com 邮件接收地址
cc=name@email.com 抄送地址（carbon copy）
bcc=name@email.com 密件抄送地址（各个收件人不能看到该邮件还发送给了谁）
subject=subject text 邮件主题
body=body text 邮件内容
? 第一个参数分隔符
& 其他参数分隔符
注：多个邮件地址用 ; 隔开，空格用 %20 代替。
5.head：在head中定义<base>，其中添加属性href=””和target=”_blank”等，可以为页面中的链接提供默认设置，这些默认设置可以部分应用，填写图片地址也可以只填文件名（如果图片在这个链接目录下的话）。
区分：header 标签用于定义文档的页眉（介绍信息）。
在<head>中还可以使用多个<meta>来描述页面内容：
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
可以在<head>中出现：<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>等标签。
<title>是收藏夹中默认显示，也是搜索引擎显示的标题。
在title里还可以加标题左侧的logo：
<base>表示了基本链接地址。
<link>定义了文档与外部资源的关系，常用于链接到样式表：
<link rel="stylesheet" type="text/css" href="mystyle.css">
在link里还可以加标题左侧的logo：
<link rel="shortcut icon" href="图片url">
<style>定义了样式文件引用地址，或者也可以直接加样式：
<style type="text/css">
body {background-color:yellow}
p {color:blue}</style>
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
每30s刷新页面：
<meta http-equiv="refresh" content="30">
<script>用于脚本加载，见后。
6.css（cascading style sheets）用于渲染html元素标签的样式。
在head中的style中添加格式：
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
在<body>中即可显示出相应格式。
或者在标签中直接添加style属性：
<a href="//www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a>
这样的链接不会有下划线。
或者在head中引用外部样式文件：
<link rel="stylesheet" type="text/css" href="styles.css">
可以根据该文件样式化网页内容。
定义背景颜色：
<h2 style="background-color:red;">这是一个标题</h2>
景定义字体font-family，颜色color，字体大小font-size：
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
指定对齐方式：<h1 style="text-align:center;">居中对齐的标题</h1>
对于大部分标签，修改父标签的style也会影响子标签，但<a>标签必须直接在标签属性中更改。
7.插入图像：
<img src="smiley.gif" alt="Smiley face" width="32" height="32">
动图和静图语法一样。
<img>是空标签，其只包含属性，没有闭合标签。alt值为图片加载失败时显示的文本，描述图片内容。
尽量指定图片尺寸。
创建图像映射：
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<map>创建了图像地图，<area>定义了图像中的可点击区域。
1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
8.表格：
<table>标签定义，行为<tr>，列为<td>（table data）。
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
表头用<th>定义：
<tr> <th>Header 1</th> <th>Header 2</th> </tr>
caption定义表格标题，cellpadding="10"定义单元格边距，cellspacing="0"为单元格间距：
<caption>表格标题</caption>
横跨两列用colspan="2"属性，两行用rowspan="2"属性。
表格范例：https://c.runoob.com/codedemo/3187
表格三要素 table、tr、td 缺一不可。
<table> 标签常用属性：
border="1" 表格边框的宽度
bordercolor="#fff" 表格边框的颜色
cellspacing="5" 单元格之间的间距
width="500" 表格的总宽度
height="100" 表格的总高度
align="right" 表格整体对齐方式 (参数有 left、center、right)
bgcolor="#fff" 表格整体的背景色
<tr> 标签的常用属性:
bgcolor="#fff" 行的颜色
align="right" 行内文字的水平对齐方式 (参数有left、center、right)
valign="top" 行内文字的垂直对齐方式 (参数有top、middle、bottom)
<td>、<th> 标签的常用属性:
width="500" 单元格的宽度，设置后对当前一列的单元格都有影响
height="100" 单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff" 单元格的背景色
align="right" 单元格文字的水平对齐方式 (参数left、center、right)
rowspan="3" 合并垂直水平方向的单元格
colspan="3" 合并水平方向单元格
valign="top" 单元格文字的垂直对齐方式 (参数middle、bottom、top)
9.列表：
无序列表：
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
<ul style="list-style-type:disc">为圆点，style="list-style-type:circle"为圆圈，style="list-style-type:square"为正方形。
有序列表：
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
省略start则从1开始。
<ol type="">，type值可以取A、a、i、I（大小写罗马数字列表）。
使用<dl>也可以定义列表，主要用于<dt>自定义列表项目、<dd>自定义列表项的描述。
10.通过<div>和<span>（区块）将元素组合起来：
<div> 元素没有特定的含义，常用于文档布局，或者和css联用设置样式。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
创建网站，建议搜索网站模板。使用外部链接css样式文件，可以方便维护网站。
11.表单：
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
默认宽度是20个字符。
输入密码时，可以使用input=”password”、name=”password”，密码用星号、圆圈等显示。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单本身并不可见。
Type=”text”输入文本；password为密码，radio为单选框，checkbox为复选框。例：
<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
Type=”submit”为提交，这时form里有一个action属性，通常定义了对提交数据处理的文件。
带预选值的下拉列表：
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
文本框（<body>中）：
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
创建一个按钮：
<form action="">
<input type="button" value="Hello world!">
</form>
更多内容见https://www.runoob.com/html/html-forms.html
12.<iframe src="URL"></iframe>可以显示其他页面的内容。
13.颜色采用三个16进制数编码，#000000——#FFFFFF（等价于写法rgb(0,0,0)），三位分别是在R、G、B上的取值，有时候rgb(0,0,0,0)第四位，代表透明度。
14.插入脚本（如javascript）：
<script>
document.write("Hello World!")
</script>
对于不能支持js的浏览器，写一个<noscript>：
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
Js常用于图片操作、表单提交、动态更新网页。
15.字符实体：对一些键盘上没有的，或者html格式保留字符输出时使用。
如<写成：< 或 < 或 <，>写成>。
则表示不间断空格。
还有音标符号等。
16.URL的格式说明：
scheme://host.domain:port/path/filename
说明:
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
以下是一些URL scheme：
Scheme 访问 用于...
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页，加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。
Url只能使用ascii字符集，对于非ascii字符集的需要%后接两位16进制数来代替。空格常用+或者%20替换。
搭建网站见://www.runoob.com/hosting/hosting-tutorial.html
Xml：一种信息传输格式，标准类似Html，但html主要用来显示网页。
在xml中只有<和&需要用实体字符替换。