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 中的常用字符实体是不间断空格(&nbsp;)

浏览器总是会截短 HTML 页面中的空格，如果需要在页面中增加空格的数量，需要使用 &nbsp; 字符实体。

 

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">

注意：属性和属性值对大小写不敏感，但最好还是以小写的形式去写；属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题。

 

posted @   admin-xiaoli  阅读(43)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae