mirror of
https://github.com/Daotin/Web.git
synced 2024-10-29 12:04:46 +08:00
u
This commit is contained in:
Daotin
parent
d7ea55686c
commit
4adbde1759
@ -260,7 +260,7 @@ head标签是文档相关的配置信息（元数据），包含了所有的头
|
||||
|
||||
### title标签
|
||||
|
||||
`<title>` 元素定义文档的标题，显示在Browser的标题栏或标签页上。
|
||||
`<title>` 元素定义文档的标题，显示在浏览器的标题栏或标签页上。
|
||||
|
||||
### base标签
|
||||
|
||||
@ -274,15 +274,13 @@ head标签是文档相关的配置信息（元数据），包含了所有的头
|
||||
<!--链接样式表CSS-->
|
||||
<link rel="stylesheet" type="text/css" href="./demo.css" />
|
||||
<!--设置网站icon图标-->
|
||||
<link rel="shortcut icon" href="favicon.ico" />
|
||||
<link rel="icon" href="favicon.ico" />
|
||||
```
|
||||
|
||||
> `rel="stylesheet"`：链接的是什么？比如：样式表stylesheet，还是图标icon
|
||||
> `type="text/css"`：规定链接文件的类型是css文件
|
||||
> `href="./demo.css"`：链接的文件路径
|
||||
|
||||
|
||||
|
||||
### style标签
|
||||
|
||||
`<style>`元素主要设置文档的样式信息。
|
||||
|
||||
@ -1,39 +1,60 @@
|
||||
## 1、表格
|
||||
|
||||
### 1.1、标准结构
|
||||
在HTML中 ，我们可以使用`table`标签来表示表格数据。
|
||||
|
||||
### 1.1、基本结构
|
||||
|
||||
```html
|
||||
<table>
|
||||
<caption>表格标题</caption>
|
||||
<caption>表格标题</caption> <!--表头（表格标题）-->
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
```
|
||||
|
||||
> 写 `<thead> <tbody> <tfoot>`对SEO更好，不写也没问题。
|
||||
> 写 `<thead>，<tfoot>`对SEO更好，不写也没问题。
|
||||
|
||||
> 注意：`td`可以换成`th`，th会自动加粗，并且水平居中对齐
|
||||
|
||||
|
||||
|
||||
### 1.2、常见写法
|
||||
### 1.2、快捷写法
|
||||
|
||||
> VSCode快捷写法：`table>tr*3>td*5 + tab` ： 建立3行5列的表格
|
||||
|
||||
1.3、常见属性
|
||||
|
||||
>`width`：（宽度）
|
||||
>`height`：（高度）
|
||||
>`border`：（边框宽度）
|
||||
>`cellspacing`：（单元格与单元格的间距）// 还可以使用css属性border-spacing设置单元格间隔，相当于cellspacing，但是border-spacing优先级更高。
|
||||
>`cellpadding`：（单元格内容距边框的距离）
|
||||
>`bgcolor`：（表格背景颜色）
|
||||
>`align="left | right | center"`：
|
||||
>
|
||||
>- 如果直接给table使用align=”center” ，则表格居中
|
||||
>- 如果给tr或者td使用 ，tr或者td内容居中。
|
||||
|
||||
示例：
|
||||
|
||||
```html
|
||||
<table width="300px" height="300px" border="5" cellspacing="10px" cellpadding="0" bgcolor="pink" align="center" >
|
||||
@ -55,109 +76,52 @@
|
||||
</table>
|
||||
```
|
||||
|
||||
>width（宽度）
|
||||
>height（高度）
|
||||
>border（边框宽度）
|
||||
>cellspacing（单元格与单元格的距离）
|
||||
>cellpadding（内容距边框的距离）
|
||||
>bgcolor（表格背景颜色）
|
||||
>align=”left | right | center”
|
||||
> 如果直接给表格用align=”center” 表格居中
|
||||
> 如果给tr或者td使用 ，tr或者td内容居中。
|
||||
|
||||
|
||||
## 2、合并单元格
|
||||
|
||||
## 2、快速建表格的方式
|
||||
`<td colspan=“2”>填写内容</td>`：将两列合并成1列
|
||||
|
||||
`table>tr*3>td*5 + tab` ： 建立3行5列的表格
|
||||
|
||||
|
||||
|
||||
## 3、表头
|
||||
|
||||
`<caption></caption>`：位于table标签和tr标签之间
|
||||
|
||||
```html
|
||||
<table>
|
||||
<caption>表头</caption>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 4、单元格合并
|
||||
|
||||
`<td colspan=“2”>填写内容</td>`：合并到同一行的单元格，合并行数为2
|
||||
|
||||
`<td rowspan=“3”>填写内容</td>` ：合并到同一列的单元格，合并列数为3
|
||||
`<td rowspan=“3”>填写内容</td>` ：将三行合并成1行
|
||||
|
||||
```html
|
||||
<table border="2" cellspacing="0" width="400" height="100" align="center">
|
||||
<caption><strong>表头</strong></caption>
|
||||
<tr align="center" bgcolor="yellow" height="100">
|
||||
<td colspan="2">在电线杆上多嘴</td>
|
||||
<!-- <td><strong>2</strong></td> -->
|
||||
<td>在电线杆上多嘴</td>
|
||||
</tr>
|
||||
<tr align="center" bgcolor="yellow" height="100">
|
||||
<td colspan="2">在电线杆上多嘴</td>
|
||||
<td>在电线杆上多嘴</td>
|
||||
<!-- <td>在电线杆上多嘴</td> -->
|
||||
</tr>
|
||||
|
||||
<tr align="center" bgcolor="#CCC" height="100">
|
||||
<td>在电线杆上多嘴</td>
|
||||
<td>在电线杆上多嘴</td>
|
||||
<td rowspan="2">在电线杆上多嘴</td>
|
||||
</tr>
|
||||
<tr align="center" bgcolor="#CCC" height="100">
|
||||
<td>在电线杆上多嘴</td>
|
||||
<td>在电线杆上多嘴</td>
|
||||
<td rowspan="2">在电线杆上多嘴</td>
|
||||
</tr>
|
||||
|
||||
<tr align="center" bgcolor="#CCC" height="100">
|
||||
<td>在电线杆上多嘴</td>
|
||||
<td>在电线杆上多嘴</td>
|
||||
<!-- <td><strong>3</strong></td> -->
|
||||
</tr>
|
||||
</table>
|
||||
<tr align="center" bgcolor="#CCC" height="100">
|
||||
<td>在电线杆上多嘴</td>
|
||||
<td>在电线杆上多嘴</td>
|
||||
<!-- <td>在电线杆上多嘴</td> -->
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5、表格标题
|
||||
## 3、其他属性
|
||||
|
||||
**边框颜色**
|
||||
|
||||
```html
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
```
|
||||
|
||||
> 注意：将td改为th
|
||||
>
|
||||
> 特点：标题的文字自动加粗水平居中对齐
|
||||
|
||||
|
||||
|
||||
## 6、边框颜色
|
||||
|
||||
```html
|
||||
<table bordercolor=""></table>
|
||||
<table bordercolor=""></table> <!--只能在table使用，在tr或者td使用无效-->
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 7、内容在上下方向的对齐方式
|
||||
**内容上下方向对齐方式**
|
||||
|
||||
```html
|
||||
<tr>
|
||||
@ -169,66 +133,26 @@
|
||||
|
||||
|
||||
|
||||
## 8、补充
|
||||
|
||||
**细线表格：**
|
||||
|
||||
```html
|
||||
<table width="500" height="300" bgcolor="green" cellspacing="1" >
|
||||
<tr bgcolor="white">
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr bgcolor="white">
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr bgcolor="white">
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr bgcolor="white">
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
> 将背景作为边框来实现。
|
||||
|
||||
|
||||
|
||||
**单元格间隔**：
|
||||
|
||||
```css
|
||||
border-spacing: 10px;
|
||||
```
|
||||
|
||||
|
||||
|
||||
**无内容时单元格的设置：**
|
||||
**无内容时单元格的设置**
|
||||
|
||||
```css
|
||||
empty-cells:show/hide /* 当单元格无内容时，是否显示该单元格的边框区域*/
|
||||
```
|
||||
|
||||
定义单元格行和列的算法（加快运行速度）
|
||||
**单元格宽度使用固定**
|
||||
|
||||
```css
|
||||
table-layout:auto/fixed;
|
||||
/*定义表格的布局算法，设置为fixed，内容超出单元格的宽度则固定不变，如果没有设置宽度则平均分配；设置auto时则随内容宽度而定。*/
|
||||
```
|
||||
|
||||
**细线表格**
|
||||
|
||||
`border-collapse`决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
|
||||
|
||||
**20181010 补充：**
|
||||
```css
|
||||
table {
|
||||
border-collapse:collapse|separate;
|
||||
}
|
||||
```
|
||||
|
||||
设置表格较小，但是内容过大的话，为了不使的表格被撑大，可以设置一个属性：`table-layout:fixed;` 固定表格的宽高，加快计算机的运行速度。
|
||||
|
||||
Loading…
Reference in New Issue
Block a user