整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML 表格实例:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Adam | Johnson | 67 |
在线实例
表格
这个例子演示如何在 HTML 文档中创建表格。
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格实例
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下：:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML 表格表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下：
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
更多实例
没有边框的表格
本例演示一个没有边框的表格。
表格中的表头(Heading)
本例演示如何显示表格表头。
带有标题的表格
本例演示一个带标题 (caption) 的表格
跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。
表格内的标签
本例演示如何显示在不同的元素内显示元素。
单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。
HTML 表格标签
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
<html></html>双标签 开头结尾 HTML标签为最大的标签 称为根标签
<head></head> 文档头部标签 且必须设置title
<title></title> 页面标题
<body></body> 文档的主体 包含页面的内容
<h1>-<h6> HTML提供6个等级的页面标题 有大到小
<p></p> p标签用于定义段落 可以将页面分为若干个段落 根据窗口大小自动换行
<br/>单标签 换行标签 （break打断）
加粗 <strong></strong>or<b></b>
斜线 <em></em>or<i></i>
删除线 <del></del>or<s></s>
下划线 <ins></ins>or<u></u>
没有语义 属于一种盒子 来装内容
<div></div> 表示分割分区 用来布局 一行一个 大盒子
<span></span>意为跨度，跨距 一行可以哦有多个 小盒子
<img src="图像路径(url)"/> 定义页面中的图像
图像标签包含多个属性
src 图片路径 必须属性
alt 文本 替换文本 图像不能显示的文字
title 文本 鼠标放到图像上显示文字
width 像素 宽度
height 高度
border 边框
相对路径和绝对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径
分类：下级路径/ 上级路径../
绝对路径：是指目录下的绝对位置，如硬盘中的路径或网路地址
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href用于指定链接目标的url地址(必须属性)
target用于指定链接打卡方式 _self为默认值 _blank为在新窗口打开方式
锚点链接：可以快速到页面某个位置
在链接文本中的href属性中，设置属性值为#名字的形式，如<a href="#two">目标</a>
找到目标位置标签，里面添加一个id属性 = 名字，如：<h3 id="two">目标</h3>
<!-- 注释语句 --> 快捷键CTRL + /
HTML 原代码 | 显示结果 | 描述 |
< | < | 小于号或显示标记 |
> | > | 大于号或显示标记 |
& | & | 可用于显示其它特殊字符 |
" | “ | 引号 |
® | ® | 已注册 |
© | © | 版权 |
™ | ™ | 商标 |
半个空白位 | ||
一个空白位 | ||
不断行的空白 |
<table></table> 是用于定义表格的标签
<tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中
<tb></tb> 用于定义表格的单元格，必须嵌套在<tr></tr>标签中
<td> 元素中的文本通常是普通的左对齐文本。字母td指表格数据(table data)，即数据单元格的内容
表头单元格标签：
<th>标签表示HTML表格的表头部分 <th> 元素中的文本通常呈现为粗体并且居中。
表格属性：
align left center right 规定表格相对于周围元素的对齐方式
border 1or"" 规定表格单元是否拥有边框默认为"",表示没有边框
cellpadding 像素值 规定单元边沿与其内容的空白，默认1像素
cellspacing 像素值 规定单元格直接的空白 默认2像素
with 像素值or百分比 规定表格的宽度
合并单元表格方式：
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
<ul>标签表示无序列表 里面只能包含li
<ol>有序标签 里面只能包含li
<li>相当于一个容器定义列表项 与<ui>or<li>嵌套使用 li里面可以包含任何标签
<dl>标签用于定义描述列表(或自定义列表),该标签会与<dt>(定义项目和名字)和<dd>(描述每一个项目名字)一起使用
标签 | 描述 |
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义了 <input> 元素的标签，一般为输入标题 |
<fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
<legend> | 定义了 <fieldset> 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<datalist> New | 指定一个预先定义的输入控件选项列表 |
<keygen> New | 定义了表单的密钥对生成器字段 |
<output> New | 定义一个计算结果 |
<input>标签用于收集用户信息 包含一个type属性 可以有多种样式
<input type="value">
<input type="属性值" />属性值：
button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。 |
checkbox | 定义复选框。 |
file | 定义输入字段和 "浏览"按钮，供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。 |
<label> 标签为 input 元素定义标注（标记）。 label是标注的意思
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同
详情可参考
https://www.runoob.com/ 菜鸟教程
https://www.w3school.com.cn/ w3c
html图像
在htmtl中,图像由<img>标签定义.<img>是空标签,它只包含属性,并且没有闭合标签.
要在页面上显示图像,使用源属性(src).源属性的值是图像的url地址(统一资源定位符).
定义图像的语法是:
<img src="url"/>
url指存储图像的位置.
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" alt=" "/>
</body>
<html>
●如果图像无法显示,则alt属性用来为图像定义一串预备的可替换的文本.alt属性是必需的.
height(高度)与width(高度)属性用于设置图像的高度与宽度.该属性值可以以像素或百分比形式指定,默认单位为像素
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" height="100px" width="100px" alt=" "/>
<!--或者-->
<img src="logo.png" height="80%" width="80%" alt=" "/>
</body>
</html>
●<img>的border属性规定图像周围的边框的宽度.默认情况下,图像是没有边框的
border属性的属性值的单位是像素.表示边框的宽度
实例:带有2个像素粗边框的图像.
<img src="logo.png" height="100px" width="100px" border="2" alt=" " />
二 html链接
html使用标签<a>来设置超文本链接.
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分.
在标签<a>中,使用href(hyper text reference)属性来描述链接的目标地址
链接的html代码很简单.格式如下:
<a href="url">链接文本</a>
上边的代码显示为:链接文本(链接文本下面有下划线)
●使用target属性,你可以规定在何处打开链接文档.如果给target属性赋值_blank,将使链接在新窗口或新选项卡中打开.
<a href="url" target="_blank">链接文本</a>
三 html列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记
无序列表使用<ul>标签,与<li>标签一起使用(unordered list)
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
浏览器显示效果如下:
有序列表也是一列项目,列表项目使用数字进行标记.
有序列表始于<ol>标签,每个列表项目始于<li>标签.
<ol>
<li>咖啡</li>
<li>菜</li>
<li>牛奶</li>
</ol>
运行效果如下:
四 html表格
表格由<table>标签定义.
每个表格均有若干行(由<tr>标签定义,table row),每行被分割为若干单元格(由<td>标签定义,table division)
下面是一个包含两行两列的表格:
<table border="2">
<tr>
<td>阿/td>
<td>平</td>
</tr>
<tr>
<td>加</td>
<td>油</td>
</tr>
</table>
运行效果:
*请认真填写需求信息，我们会在24小时内与您取得联系。
