我们在浏览网页的时候经常可以看到很多的表格,那么网页上的表格是怎么制作的呢?本篇文章讲述了HTML的常用标签和表格的制作方法。
1.基础概念:
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
2.标签与元素
2.1.常见标签
(1)标签大多数是成对出现的,如:
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>
html:超文本标记语言<br/>
*用来设计网页的标记语言<br/>
*由浏览器解释执行<br/>
</p>
<h1>
这是大标题
</h1>
<h6>
这是最小标题
</h6>
<center>
<hr>
<h1>不干了,回老家养猪!!!<br/>最后三天大甩卖!!!</h1>
<h2>原价:<em><s>299</s></em></h2>
<h2>现价:<em>99</em></h2>
<hr>
<img src="img/祈祷.jpg" alt=""width="500"height="300">
<img src="img/小喵.jpg" alt=""width="500"height="300">
<hr>
<h3>a超链接</h3>
<!--_self自身打开-->
<a href="index.html"target="_self">
<img src="img/祈祷.jpg" alt=""width="300"height="175">
</a>
<hr>
<!--_blank新窗口打开-->
<a href="index.html"target="_blank">
<img src="img/祈祷.jpg" alt=""width="300"height="175">
</a>
<hr>
<font size="" color="aqua">我是什么颜色?</font>
<ins>底部文字</ins>
<hr>
</center>
</body>
</html>
代码中我们可以看到总是成对的出现如<html></html>的标签,也有例外,如<hr>是分割线,没有必要写结束标签,逻辑上不通。在W3C标准里应该写成<hr/>。/代表结束。一些不需要在中间写数值的也可以用/代替,如<img/>。就像之前提到的,也可以不写/。在一些情况下是没有影响的。
(2)常见标签的含义
- <html>包含着HTML代码所有内容,里面包含头<head>和身体<body>;
- <title>是定义网页名称的;
- <a>是超链接,不能自动换行;
- <p>是program,代表段落,可以自动换行的,是外联元素(下面会讲到内联外联);
- <h1>到<h6>是一级标题到六级标题,共有6级;
- <center>是居中;
- <pre>是预处理格式,输入什么格式就会显示什么格式,比如回车,空格数量等;
- ....
2.2.标签和元素
严格来讲,标签指的是<h1>这样的单独一个,元素指的是<h1>一级大标题</h1>这样整个包含的所有内容。
3.元素的属性
属性为 HTML 元素提供附加信息。是用来描述元素的特征的。
- HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
- 属性总是以名称/值对的形式出现,比如:name="value"。
- 属性总是在 HTML 元素的开始标签中规定。
- 在这里列举了常用属性https://www.w3school.com.cn/tags/att_standard_class.asp
4.表格
4.1.基础使用
表格是用<table>定义的,<tr>代表行<td>代表列,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>演示表格</title>
</head>
<body>
<center>
<table border="1px" width="300px" height="200px" cellspacing="0" cellpadding="">
<tr>
<td align="center">姓名</td>
<td align="center">职业</td>
<td align="center"bgcolor="aqua">爱好</td>
</tr>
<tr>
<td align="center">蔡徐坤</td>
<td align="center">运动员</td>
<td align="center">唱跳rap篮球</td>
</tr>
<tr>
<td align="center">窃格瓦拉</td>
<td align="center">小偷</td>
<td align="center">偷电瓶</td>
</tr>
</table>
<hr>
</center>
</body>
</html>
显示结果如下:
4.2.对列表进行操作:
colspan 列合并 rowspan 行合并,属性值是合并的数量。
<table border="1px" width="200px" height="200px" cellspacing="2" cellpadding="" style="background: url(img/祈祷.jpg);">
<tr>
<td align="center" colspan="2" bgcolor="chartreuse"></td>
<td align="center" rowspan="2" bgcolor="aqua"></td>
</tr>
<tr>
<td align="center" rowspan="2" bgcolor="bisque"></td>
<td align="center" rowspan="1" bgcolor="blue"></td>
</tr>
<tr>
<td align="center" colspan="2" bgcolor="chartreuse"></td>
</tr>
</table>
运行结果如下:
5.思考一下
怎么做一个表格简历呢?下次写