2021-12-29 html标签
常用开发工具：
sublime下载地址：https://www.html.cn/tool/edit/6.html
WebStorm下载地址：https://www.html.cn/tool/edit/8.html
HTML基本结构：
HTML文档标记：<html>
头标签：<head>
标题标签：<title>
页面元信息：<meta>,一般设置为utf-8
主题标记：<body>
HTML保存格式为.html，通过浏览器打开运行效果。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div>这是我的第一个HTML页面</div> 9 </body> 10 </html>
HTML中的标题标签通过<h1>-<h6>来设置，越往下标题越小。
标题（Heading）是通过 <h1> - <h6> 等标签来定义的，<h1> 是最大的标题，<h6>是最小的标题。
一般情况下<h1>作为主标题，越往下标签重要性越小。
1 <h1>你好</h1> 2 <h2>你好</h2> 3 <h3>你好</h3> 4 <h4>你好</h4> 5 <h5>你好</h5> 6 <h6>你好</h6>
HTML段落是通过 <p> 标签来定义的。
因为p标签是块级元素，所以浏览器会自动地在段落的前后添加空行。
1 <p>这是第一行文字。</p> 2 <p>这是第二行的文字。</p>
我们可以通过<br/>标签来对段落进行换行。如果希望在不产生一个新段落的情况下进行换行，就可以使用<br /> 标签，注意它是一个单标签。
1 <p>不陪你们玩了哈哈<br/>学习使人进步</p> 2 <p>黑发不知勤学早，白首方悔读书迟。</p>
HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。
HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体
这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML教程(html.cn)</title> 6 </head> 7 <body> 8 <b>加粗文本</b><br><br> 9 <i>斜体文本</i><br><br> 10 <code>电脑自动输出</code><br><br> 11 这是 <sub> 下标</sub> 和 <sup> 上标</sup> 12 </body> 13 </html>
HTML 文本格式化标签：
<b> 定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字
HTML "计算机输出" 标签：
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本
<code>定义计算机代码
HTML 引文, 引用, 及标签定义：
<abbr>定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目
HTML 区块元素：
可以通过 <div> 和 <span> 将 HTML 元素组合起来
HTML块级元素
块级元素在浏览器显示时，通常会以新行来开始和结束
例：<h1>, <p>, <ul>, <table>
HTML内联元素
内联元素在显示时通常不会以新行开始
例：<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素，浏览器会在其前后显示折行
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器
与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性
HTML 中，某些字符是预留的。
比如在 HTML 中不能使用小于号（<）和大于号（>）因为浏览器会误认为它们是标签，所以希望能正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
HTML 中的常用字符实体是不间断空格( )
浏览器总是会截短 HTML 页面中的空格，如果需要在页面中增加空格的数量，需要使用 字符实体。
HTML 颜色由红色、绿色、蓝色混合而成。
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。
在下面的颜色表中你会看到不同的结果，从0到255的红色，同时设置绿色和蓝色的值为0,随着红色的值变化，不同的值都显示了不同的颜色。
表格是由 <table> 标签来定义，每个表格的行由 <tr> 标签定义，每行被分割为若干单元格由 <td> 标签定义。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML 表格标签：
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元的列
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<col> 定义用于表格列的属性
<colgroup> 定义表格列的组
1 <body> 2 <table border="1"> 3 <caption>个人信息</caption> 4 <tr> 5 <td>ID</td> 6 <td>姓名</td> 7 <td>年龄</td> 8 <td>分数</td> 9 </tr> 10 <tr> 11 <td>1</td> 12 <td>张三</td> 13 <td>18</td> 14 <td>90</td> 15 </tr> 16 <tr> 17 <td>2</td> 18 <td>李四</td> 19 <td>20</td> 20 <td>88</td> 21 </tr> 22 </table> 23 </body>
如果不定义边框属性，表格将不显示边框
<table border="1"></table>
表格合并之 colspan列合并：
1 <table border="1"> 2 <tr> 3 <th>姓名</th> 4 <th colspan="2">电话</th> 5 </tr> 6 <tr> 7 <td>张三</td> 8 <td>111122233</td> 9 <td>444556677</td> 10 </tr> 11 </table>
rowspan行合并：
1 <table border="1"> 2 <tr> 3 <th>姓名</th> 4 <td>Bill Gates</td> 5 </tr> 6 <tr> 7 <th rowspan="2">电话</th> 8 <td>111112223</td> 9 </tr> 10 <tr> 11 <td>444445566</td> 12 </tr> 13 </table>
HTML 列表：
HTML 支持有序、无序和定义列表。
有序列表由 <ol> 标签开头，每个列表项由<li> 标签开头。
1 <ol> 2 <li>篮球</li> 3 <li>羽毛球</li> 4 <li>足球</li> 5 <li>乒乓球</li> 6 </ol>
无序列表由 <ul> 标签开头，每个列表项由<li> 标签开头。
1 <ul> 2 <li>篮球</li> 3 <li>羽毛球</li> 4 <li>足球</li> 5 <li>乒乓球</li> 6 </ul>
定义列表由 <dl> 标签开头，每个定义列表项由<dt> 标签开头，每个定义列表项的定义以 <dd> 开始。
1 <dl> 2 <dt>Coffee</dt> 3 <dd>*Black hot drink</dd> 4 <dt>Milk</dt> 5 <dd>*White cold drink</dd> 6 </dl>
HTML 表单：
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 <form> 来设置的，下面就来好好介绍一下HTML 表单元素。
<form> 元素，定义 HTML 表单。
1 <form> 2 . 3 input 元素 4 . 5 </form>
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
input元素，用于输入框，其输入类型是由类型属性（type）定义的。
text： 定义常规文本输入
radio ：定义单选按钮输入（选择多个选择之一）
submit： 定义提交按钮（提交表单）
password：定义密码字段的输入
checkbox ：定义多选按钮输入
文本输入与密码字段输入：
1 <form> 2 用户名：<input type="text"> 3 密码：<input type="password"> 4 </form>
单选与多选：
1 <form> 2 单选：<input type="radio" name="sex" value="male">男 3 <input type="radio" name="sex" value="female">女<br> 4 多选：<input type="checkbox" name="subject" value="Math">数学 5 <input type="checkbox" name="subject" value="English">英语 6 </form>
提交：当涌入输入完成后点击提交，表单的内容会被传送到另一个文件。
1 <form> 2 <input type="text"> 3 <input type="submit" name="submit"> 4 </form>
表单中的GET与POST的使用：
当表单提交的数据是是被动的，并且没有敏感信息可采用GET的方式提交。
如果表单正在更新数据，或者是包含敏感信息时就可以用POST方式，因为它安全性更高。
HTML Form 属性：
属性 描述
action 指向何处提交表单的地址（URL）
enctype 指被提交数据的编码（默认：url-encoded）
method 指在提交表单时所用的 HTTP 方法（默认：GET）
name 指识别表单的名称
target 指 action 属性中地址的目标
novalidate 指浏览器不验证表单
accept-charset 指在被提交表单中使用的字符集
autocomplete 指浏览器应该自动完成表单
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
如何在HTML文档中创建链接？
HTML超链接（链接）
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
1.一个未访问过的链接显示为蓝色字体并带有下划线。
2.访问过的链接显示为紫色并带有下划线。
3.点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
HTML 链接语法，链接的 HTML 代码很简单。它类似这样：
1 <a href="url">链接文本</a>
href 属性描述了链接的目标。
"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性：
使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML中文网(html.cn)</title> 6 </head> 7 <body> 8 9 <a href="https://www.html.cn/" target="_blank">访问HTML中文网!</a> 10 11 <p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p> 12 13 </body> 14 </html>
HTML 链接- id 属性：
id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
实例，在HTML文档中插入ID:
1 <a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
1 <a href="#tips">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
1 <a href="https://www.html.cn/html/html-links.html#tips">访问有用的提示部分</a>
HTML属性主要是为HTML标签提供附加属性，即提供了有关HTML元素的更多信息。
属性总是在HTML元素的开始标签中定义的。
常见的属性：
a标签中的href属性
1 <a href="http://www.html.cn/">html中文网</a>
input标签中的属性
1 用户名：<input type="text" value="">
img中的属性
1 <img src="images/1.jpg">
注意：属性和属性值对大小写不敏感，但最好还是以小写的形式去写；属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题。
本文来自博客园，作者：{admin-xiaoli}，转载请注明原文链接：{https://www.cnblogs.com/crackerroot}
