runnoob html粗略了解

Runnoob可以提供html的基本知识。
参考手册：https://www.runoob.com/tags/html-reference.html
1.Html不认识\t\n等，都会输出为空格。（不分大小写）为标准网页声明，位于所有标签之前，在支持html的浏览器中会被解释为网页使用html5编码。

是页面的根元素，一般包含了文档的meta数据，比如编码格式（一般对于中文可以写charset=”UTF-8”或者”GBK”）；

my first html

my first html instance

按f12，在elements中可找到标签布局。

关于图片的进一步解释：
1、.html 文件跟 .jpg 文件(f盘)在不同目录下：

2、.html 文件跟 .jpg 图片在相同目录下：

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、如果图片来源于网络，那么写绝对路径：

关于href和src：
href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：

浏览器会识别该文档为 css 文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用 link，而不采用 @import 加载 css 的原因。 src 是 source 的缩写，src 的内容是页面必不可少的一部分，是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。例如: 当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。 简而言之，src 用于替换当前元素；href 用于在当前文档和引用资源之间建立联系。

1.
表示换行，没有结束标签。有些元素为空元素，以开始标签的结束而结束（有些元素只有一个开始标签），但考虑到未来标准，建议后面还是写个
。大多数情况下，即使不写结束标签也可以，但这样不应当。目前标签大小写无所谓，但应该尽量小写。
在开始标签中设置属性，也是尽量小写，单双引号无所谓。Class属性中可为元素定义多个或一个类名（从样式文件引入），id则是唯一的，style规定样式，title描述元素的额外信息。
Html中的标签：
New : HTML5新标签
标签 描述

定义注释 定义文档类型

定义超文本链接
定义缩写
定义只取首字母的缩写，不支持HTML5

定义文档作者或拥有者的联系信息 HTML5中不赞成使用。定义嵌入的 applet。 定义图像映射内部的区域

New 定义一个文章区域

New 定义页面的侧边栏内容 New 定义音频内容 定义文本粗体 定义页面中所有链接的默认地址或默认目标。 HTML5不支持，不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 New 允许您设置一段文本，使其脱离其父元素的文本方向设置。 定义文字方向 定义大号文本，HTML5不支持

定义长的引用 定义文档的主体
定义换行 定义一个点击按钮 New 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形 定义表格标题 HTML5不支持，不赞成使用。定义居中文本。 定义引用(citation) 定义计算机代码文本 定义表格中一个或多个列的属性值 定义表格中供格式化的列组 New 定义命令按钮，比如单选按钮、复选框或按钮 New 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

定义定义列表中项目的描述 定义被删除文本 New 用于描述文档或文档某个部分的细节 定义定义项目 New 定义对话框，比如提示框 HTML5不支持，不赞成使用。定义目录列表。

定义文档中的节

定义列表详情 定义列表中的项目 定义强调文本 New 定义嵌入的内容，比如插件。 定义围绕表单中元素的边框

New 定义

元素的标题

New 规定独立的流内容（图像、图表、照片、代码等等）。 HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色。

New 定义 section 或 document 的页脚。 定义了HTML文档的表单 定义框架集的窗口或框架 定义框架集

to

定义 HTML 标题 定义关于文档的信息

New 定义了文档的头部区域

---

定义水平线 定义 HTML 文档 定义斜体字 定义内联框架 定义图像 定义输入控件 定义被插入文本 定义键盘文本 New 规定用于表单的密钥对生成器字段。 定义 input 元素的标注 定义 fieldset 元素的标题。

• 定义列表的项目 定义文档与外部资源的关系 定义文档的主体部分。

2.

-

定义了不同大小的标题。浏览器会自动在标题前后添加空行。

---

为水平线。

定义段落，段落前后自动加空行。在段落内使用
换行。 Html对不同的页面大小自动调整显示格式，连续的换行、空格等都算作一个空格。

类似raw string的作用。
区分一下： 
, 
 以及 
（带有空格）

 是 HTML 写法。
是 XHTML1.1 的写法, 也是 XML 写法。
 是 XHTML 为兼容 HTML 的写法,也是 XML 写法。HTML5 因为兼容 XHTML，所以三种写法都可以使用。
早期发布的 HTML 规范当中，
 与  等元素是不用封闭自身的，但是这种元素造成了 HTML 规范的不严谨，于是在之后发布的 XHTML 语言中，参考了更为严谨的 XML 规范，在这些不用自身封闭的元素后加 / 来表示自行封闭，在逻辑上来讲等同于
....（但是没有  这种写法），这样一来保证了较少的代码量，二来保证了规范的严谨。

3.html的文本格式：或者为粗体bold，或者为斜体italic，为代码格式，subscript和分别为上下标。Small和big分别为文本放大和缩小。
相关标签：计算机输出，键盘输入，打字机文本，计算机代码样本，计算机变量。

标签用斜体的方式输出地址。 定义缩写，全称以属性title=”全称”给出，当鼠标移到文本上可以显示全称。不建议用。 Bi-Directional Override表示文字右到左显示。 短引用为，加个引号。

为长引用。 为印证，为定义一个定义项目。 加删除线， 加下划线。

4.来定义超链接。默认情况下，一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时，链接显示为红色并带有下划线。
Target属性定义链接在何处打开，为_blank时在新窗口打开，_top则为从当前页面跳转。Id属性可以创建一个书签，对于人来说是隐藏的。其他链接可设置href=”#你设置的id名”，这样读者点击链接即可跳到书签，还可以访问其他页面的书签。链接里的空格用%20代替以确保正确跳转。
a标签中加入rel=“noopener noreferrer”，可以使链接更安全、不被篡改。
对网页作者不信任的链接，可以在meta里加content="nofollow"来告诉爬虫不要点击页面中的链接，或者在中加入rel=”nofollow”来指定特定的不信任链接。
创建图片，图片也可以用作超链接。如有边框的图片，border=”0”为无边框。

创建邮件链接：关于创建电子邮件链接时如何发送邮件内容
在进行邮件内容发送时，需要使用关键字：mailto
示例如下：
发送邮件
这样会调启系统默认的邮件程序发送给 zhangrr601@163.com，并且收件人那里已经填上了我邮箱的地址。
关于创建电子邮件链接时如何进行抄送，密送.
在进行抄送时，需要使用关键字：cc
在进行密送时，需要使用关键字：bcc
示例如下：
发送邮件
参数说明：
参数 描述
mailto:name@email.com 邮件接收地址
cc=name@email.com 抄送地址（carbon copy）
bcc=name@email.com 密件抄送地址（各个收件人不能看到该邮件还发送给了谁）
subject=subject text 邮件主题
body=body text 邮件内容
? 第一个参数分隔符
& 其他参数分隔符
注：多个邮件地址用 ; 隔开，空格用 %20 代替。

5.head：在head中定义，其中添加属性href=””和target=”_blank”等，可以为页面中的链接提供默认设置，这些默认设置可以部分应用，填写图片地址也可以只填文件名（如果图片在这个链接目录下的话）。
区分：header 标签用于定义文档的页眉（介绍信息）。
在中还可以使用多个来描述页面内容：

可以在中出现：

表示了基本链接地址。 定义了文档与外部资源的关系，常用于链接到样式表： 在link里还可以加标题左侧的logo： 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。 META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。 元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。 每30s刷新页面：

6.css（cascading style sheets）用于渲染html元素标签的样式。
在head中的style中添加格式：

在中即可显示出相应格式。
或者在标签中直接添加style属性：
访问 runoob.com!
这样的链接不会有下划线。
或者在head中引用外部样式文件：

可以根据该文件样式化网页内容。

定义背景颜色：

这是一个标题

景定义字体font-family，颜色color，字体大小font-size：

一个段落。

指定对齐方式：

居中对齐的标题

对于大部分标签，修改父标签的style也会影响子标签，但 标签必须直接在标签属性中更改。

7.插入图像：

动图和静图语法一样。
是空标签，其只包含属性，没有闭合标签。alt值为图片加载失败时显示的文本，描述图片内容。
尽量指定图片尺寸。

创建图像映射：

8.表格：

标签定义，行为，列为 caption定义表格标题，cellpadding="10"定义单元格边距，cellspacing="0"为单元格间距： 横跨两列用colspan="2"属性，两行用rowspan="2"属性。 表格范例：https://c.runoob.com/codedemo/3187

表格标题

（table data）。 Row 1, cell 1 Row 1, cell 2 表头用	定义：
Header 1	Header 2

表格三要素 table、tr、td 缺一不可。

标签常用属性： border="1" 表格边框的宽度 bordercolor="#fff" 表格边框的颜色 cellspacing="5" 单元格之间的间距 width="500" 表格的总宽度 height="100" 表格的总高度 align="right" 表格整体对齐方式 (参数有 left、center、right) bgcolor="#fff" 表格整体的背景色 标签的常用属性: bgcolor="#fff" 行的颜色 align="right" 行内文字的水平对齐方式 (参数有left、center、right) valign="top" 行内文字的垂直对齐方式 (参数有top、middle、bottom)

、	标签的常用属性: width="500" 单元格的宽度，设置后对当前一列的单元格都有影响 height="100" 单元格的高度，设置后对当前一行的单元格都有影响 bgcolor="fff" 单元格的背景色 align="right" 单元格文字的水平对齐方式 (参数left、center、right) rowspan="3" 合并垂直水平方向的单元格 colspan="3" 合并水平方向单元格 valign="top" 单元格文字的垂直对齐方式 (参数middle、bottom、top)

9.列表：
无序列表：

• apples
• bananas
• pineapples

• 为圆点，style="list-style-type:circle"为圆圈，style="list-style-type:square"为正方形。 有序列表：
  50. Coffee
  51. Tea
  52. Milk
  省略start则从1开始。
  1. ，type值可以取A、a、i、I（大小写罗马数字列表）。 使用

     也可以定义列表，主要用于 自定义列表项目、

     自定义列表项的描述。

10.通过

和 （区块）将元素组合起来：

元素没有特定的含义，常用于文档布局，或者和css联用设置样式。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

创建网站，建议搜索网站模板。使用外部链接css样式文件，可以方便维护网站。

11.表单：

First name:
Last name: 默认宽度是20个字符。 输入密码时，可以使用input=”password”、name=”password”，密码用星号、圆圈等显示。 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单本身并不可见。

Type=”text”输入文本；password为密码，radio为单选框，checkbox为复选框。例：

I have a bike
I have a car Type=”submit”为提交，这时form里有一个action属性，通常定义了对提交数据处理的文件。

带预选值的下拉列表：

Volvo Saab Fiat Audi 文本框（中）： 我是一个文本框。 创建一个按钮：

更多内容见https://www.runoob.com/html/html-forms.html

12.可以显示其他页面的内容。

13.颜色采用三个16进制数编码，#000000——#FFFFFF（等价于写法rgb(0,0,0)），三位分别是在R、G、B上的取值，有时候rgb(0,0,0,0)第四位，代表透明度。

14.插入脚本（如javascript）：

对于不能支持js的浏览器，写一个：
抱歉，你的浏览器不支持 JavaScript!
Js常用于图片操作、表单提交、动态更新网页。

15.字符实体：对一些键盘上没有的，或者html格式保留字符输出时使用。
如<写成：< 或 < 或 &#060，>写成&gt。
&nbsp则表示不间断空格。
还有音标符号等。

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