HTML自学手册-基础篇3

HTML 样式- CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.

HTML 样式- CSS CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式. Look! Styles and colors Manipulate Text Colors,  Boxes and more…

HTML自学手册-基础篇3 插图1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>

</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<a href="http://liboven.cn/" style="text-decoration:none;">访问 runoob.com!</a>

</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>
</body>

</html>

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用”style” 属性
  • 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  • 外部引用 – 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

在本站的HTML教程中我们使用了内联CSS样式来介绍实例,这是为了简化的例子,也使得你能更容易在线编辑代码并在线运行实例。

你可以通过本站的 CSS 教程 学习更多的 CSS 知识。


当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落</p>

背景色属性(background-color)定义一个元素的背景颜色:

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body bgcolor="yellow">
	<h2>This is a heading</h2>
	<p>This is a paragraph.</p>
	<p>The old bgcolor attribute only works on the body element.</p>
	<p>For future proof HTML, use styles instead:</p>
</body>

</html>

我们可以使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落</p>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

现在通常使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义文本样式,而不是使用<font>标签;


使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式:

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落</p>

文本对齐属性 text-align取代了旧标签 <center>

复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

标签描述
<style>定义文本样式
<link>定义资源引用地址

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。

不建议使用的标签有: <font>, <center>, <strike>

不建议使用的属性: color 和 bgcolor.


对于大部分标签,以上两种方法均可,且修改父级标签,子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性,如a标签,修改其颜色特性,必须直接修改 a 标签的特性才可。

实例:

<a href="#" style="color:red;" rel="nofollow ugc">只能使用"内联"方式</a>

第一种方式:使用最多,稳定

<link rel="stylesheet" href="标签路径">

第二种方式:

<style>
@import url("标签路径")
</style>

扩展知识点: link 和 import之间的区别?

差别 1:

本质的差别:link 属于 XHTML 标签,而 @import 完全是 CSS 提供的一种方式。

差别 2:

加载顺序的差别: 当一个页面被加载的时候(就是被浏览者浏览的时候) ,link 引用的 CSS 会同时被加载,而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。

差别 3:

兼容性的差别: @import 是 CSS2.1 提出的,所以老的浏览器不支持,@import 只有在 IE5 以上的才能识别,而 link 标签无此问题。

差别 4:

使用 dom(document object model文档对象模型 )控制样式时的差别:当使用 javascript 控制 dom 去改变样式的时候,只能使用 link 标签,因为@import 不是 dom 可以控制的


HTML 图像

<meta name=”description” content=”HTML 图像 实例 Norwegian Mountain Trip 尝试一下 » 在线实例 插入图像 本例演示如何在网页中显示图像。 从不同的位置插入图片 本例演示如何将其他文件夹或服务器的图片显示到网页中。 (可以在本页底端找到更多实例。) HTML 图像- 图像标签( <img>)和源属性(Src) 在 HTML 中,图像由<img> 标签定义


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="https://cdn.yuanyuzou.liboven.cn/2022/12/97920ada84194137-scaled.jpg" alt="Pulpit rock" width="304" height="228">

</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<p>
一个图像:
<img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" width="32" height="32"></p>

<p>
一个动图:
<img src="/upload/course/000/000/010/58046a41c6e3c115.gif" alt="Computer man" width="48" height="48"></p>

<p>
注意插入动图的语法和静态图的语法是一样的。
</p>

</body>
</html>

从不同的位置插入图片

本例演示如何将其他文件夹或服务器的图片显示到网页中

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<p>一个来自文件夹中的图像:</p>
<img src="/upload/course/000/000/010/58046b14a8b9f738.gif" alt="Google Chrome" width="33" height="32"><p>一个来自自学元宇宙 (liboven.cn)</p>
<img src="/upload/course/000/000/010/58046c29b47ef575.png" alt="php.cn" width="336" height="69">

</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

在 HTML 中,图像由<img> 标签定义。

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是:

<img src="url" alt="some_text">

URL 指存储图像的位置。如果名为 “../style/images/boat.gif” 的图像位于 www.php.cn 的 images 目录中,那么其 URL 为 http://www.php.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段


alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="../style/images/boat.gif" alt="Big Boat">

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。


height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

属性值默认单位为像素:

<img src="../style/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局

基本的注意事项 – 有用的提示:

注意: 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。

注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

<p><b>注意:</b>在HTML 4中 align 属性已废弃,HTML5 已不支持该属性,可以使用 CSS 代替。</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的左边。
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的右边。
</p>

<p><b>注意:</b> 在这里我们使用了 CSS float 属性,在HTML 4 中 float 属性已废弃,HTML5 已不支持该属性,可以使用 CSS 代替。</p>

</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<p>创建图片链接:
<a href="http://liboven.cn/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="http://liboven.cn/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学元宇宙 (liboven.cn)</title>
</head>
<body>

<p>点击太阳或其他行星,注意变化:</p>

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

</body>
</html>


HTML 图像标签

标签描述
<img>定义图像
<map>定义图像地图
<area>定义图像地图中的可点击区域

【技术笔记-1】示例”创建图像映射”中的代码
<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>

该段代码中的shape指的是点击区域的形状,coords指的应该是链接区域在图片中的坐标(像素为单位)

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>

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格生成器


First NameLast NamePoints
JillSmith50
EveJackson94
JohnDoe80
AdamJohnson67

<h4>一列:</h4>
<table border="1">
  <tr>
    <td>100</td>
  </tr>
</table>
 
<h4>一行三列:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>
 
<h4>两行三列:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
  </tr>
</table>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

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

在浏览器显示如下::

HTML自学手册-基础篇3 插图2

如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

使用边框属性来显示一个带有边框的表格:

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

表格的表头使用 <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>

在浏览器显示如下:

HTML自学手册-基础篇3 插图3

在线实例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<h4>这个表格没有边框:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>这个表格没有边框:</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直标题:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<h4>没有单元格边距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>有单元格边距:</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<h4>没有单元格间距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center" class="biaoti" height="60">受理员业务统计表</td>
  </tr>
  <tr>
    <td align="right" height="25">2017-01-02---2017-05-02</td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
  <tr>
    <td colspan="2" class="btbg font-center titfont" rowspan="2">受理员</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2">受理数</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2">自办数</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2">直接解答</td>
    <td colspan="2" class="btbg font-center titfont">拟办意见</td>
    <td colspan="2" class="btbg font-center titfont">返回修改</td>
    <td colspan="3" class="btbg font-center titfont">工单类型</td>
  </tr>
  <tr>
    <td width="8%" class="btbg font-center">同意</td>
    <td width="8%" class="btbg font-center">比例</td>
    <td width="8%" class="btbg font-center">数量</td>
    <td width="8%" class="btbg font-center">比例</td>
    <td width="8%" class="btbg font-center">建议件</td>
    <td width="8%" class="btbg font-center">诉求件</td>
    <td width="8%" class="btbg font-center">咨询件</td>
  </tr>
  <tr>
    <td width="7%" rowspan="8" class="btbg1 font-center">受理处</td>
    <td width="7%"  class="btbg2">张三</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2 font-center">总计</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
  </tr>
  <tr>
    <td width="7%" rowspan="8" class="btbg1 font-center">话务组</td>
    <td width="7%"  class="btbg2">张三/td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2">张三</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2">王艳</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2">张三</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
   <tr>
    <td class="btbg2 font-center">总计</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
  </tr>
</table>

标签描述
<table>定义表格
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格单元
<caption>定义表格标题
<colgroup>定义表格列的组
<col>定义用于表格列的属性
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚

【技术笔记-1】确定 tr 和 td(th 同 td)的方法
HTML自学手册-基础篇3 插图4

如上图的表格:tr 是行数,td 是单元格数,th 是标题性质的 td

1、从上到下,最细分到几行便是几个 tr

2、如上是三种基本单元格形式。A 是基本单元格,其余的变种都是基本单元格合并而成。B 是合并上下单元格组合而成,

C 是合并左右单元格。合并后的 B 种单元格算到第二行第一个单元格中,C 种单元格算到第四行第一个单元格中(按上表

从上到下从左到右算),所以第一行 6 个 td,第二行 6 个 td,第三行 5 个 td,第四行 1 个,第五行 6 个 td,第六行 5 个 td。

合并后用 colspan 和 rowspan 来标示 B 和 C 变种单元格是横向还是纵向吃了几个单元格(算他自己)

3、第四种变种单元格是又横向又纵向合并,这个时候同时标示 rowspan 和 colspan(空格隔开)

合并后的单元格归属原则都是左上原则,即下归上,右归左,越往左上角越优先

<h4 style="text-align:center">课程表</h4>
<table border="1" cellpadding="10" width="100%">
    <tr>
	    <th colspan="2">时间\日期</th>
	    <th>一</th>
	    <th>二</th>
	    <th>三</th>
	    <th>四</th>
	    <th>五</th>
    </tr>

    <tr>
	    <th rowspan="2">上午</th>
	    <th>9:30-10:15</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>

    <tr>
	    <th>10:25-11:10</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>

    <tr>
    <th colspan="7"></th>
    </tr>

    <tr>
	    <th rowspan="2">下午</th>
	    <th>14:30-15:15</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>

    <tr>
	    <th>15:25-16:10</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>
 </table>
【技术笔记-3】HTML Work表实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
  <h1 style="text-align:center;">My working time</h1>
  <table border="2">
    <caption><b>Working Day</b></caption>
  <tr>
    <th rowspan="2">Am</th>
    <td>9:30</td>
    <td>11:30</td>
    <td>-----</td>
    <td>-----</td>
    <td>-----</td>
    <td>-----</td>
  </tr>
  <tr>
    <td>Working</td>
    <td>Go off work</td>
    <td>Empty</td>
    <td>Empty</td>
    <td>Empty</td>
    <td>Empty</td>
   </tr>
   <tr>
     <th colspan="7" style="text-align:center;">
       Rest
     </th>
   </tr>
   <tr>
     <th rowspan="2">Pm</th>
     <td>1:00</td>
     <td>6:00</td>
     <td>-----</td>
     <td>-----</td>
     <td>-----</td>
     <td>-----</td>
   </tr>
   <tr>
     <td>Working</td>
     <td>Go off work</td>
     <td>Empty</td>
     <td>Empty</td>
     <td>Empty</td>
     <td>Empty</td>
   </tr> 
  </table>
</body>
</html>
  •  thead ———表格的页眉
  •  tbody ———表格的主体
  •  tfoot ———定义表格的页脚

thead, tbody, tfoot 相当于三间房子,每间房子都可以用来放东西。

<tr> </tr> 这个标签就是放在三间房子里面的东西,每一个 <tr> </tr> 就是表格一行。

表格的每一行被分为一个个单元格。

每一个单元格就是用来存放数据的,这个数据分为两种:一,数据的名称;二,数据本身。

用 <th></th> 表示数据的名称(标题) ,

<td></td>表示真正的数据内容。

HTML自学手册-基础篇3 插图5

一个简单实例:

HTML自学手册-基础篇3 插图6
【技术笔记-5】表格三要素 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) 

引号里的数字和颜色代码均可以更改

表格结构语义标签:

  •  1.<table>:表格根元素。
  •  2.<thead>:表格头。
  •  3.<tbody>:表格体。
  •  4.<tfoot>:表格尾,一般可忽略该结构。
  •  5.<tr>:表格行。

表格内容标签:

  •  1.<th>:表头单元格。
  •  2.<td>:表体单元格。

跨列:colspan

跨行:rowspan

单元格内边距:cellpadding

单元格外边距:cellspacing

col 和 colgroup 用于便捷定义表格指定列的样式。


HTML 支持有序、无序和定义列表


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head> 
<body>

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
</body>
</html>

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下:

  • Coffee
  • Milk

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

浏览器显示如下:

Coffee

– black hot drink

Milk

– white cold drink

注意事项 – 有用提示

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<h4>编号列表:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表:</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>罗马数字列表:</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写罗马数字列表:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<p><b>注意:</b> 在 HTML 4中 ul 属性已废弃,HTML5 已不支持该属性,因此我们使用 CSS 代替来定义不同类型的无序列表如下:</p>

<h4>圆点列表:</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表:</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表:</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<h4>嵌套列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<h4>嵌套列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学元宇宙 (liboven.cn)</title> 
</head>
<body>

<h4>一个自定义列表:</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>
标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
<dl>定义列表
<dt>自定义列表项目
<dd>定义自定列表项的描述

ul是unordered lists的缩写 (无序列表)

li是list item的缩写 (列表项目)

ol是ordered lists的缩写(有序列表)

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写(自定义列表描述)

nl是navigation lists的英文缩写 (导航列表)

tr是table row的缩写 (表格中的一行)

th是table header cell的缩写 (表格中的表头)

td是table data cell的缩写 (表格中的一个单元格)


温馨提示:本文最后更新于2022-12-27 10:03:02,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
文章版权声明 1、本网站名称:元宇宙之家
2、本站永久网址:https://liboven.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞16赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称常用语表情代码图片

    暂无评论内容