first push
This commit is contained in:
hututu
112
1.Html/1-认识前端.md
Normal file
112
1.Html/1-认识前端.md
Normal file
@@ -0,0 +1,112 @@
|
||||
## 1、什么是前端
|
||||
前端对于网站来说，通常是指网页，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。
|
||||
|
||||
前端设计一般可以理解为网站的视觉设计，比如 UI 设计；
|
||||
前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。
|
||||
|
||||
前端开发的核心部分主要是：HTML，CSS，JavaScript 三个部分。
|
||||
|
||||
**HTML** 是这三者中最基础的部分，相当于是网页的骨架，也就是网页的结构；
|
||||
**CSS** 部分是网页的表现形式，也可以说是网页的美化，比如一个图片的大小、位置，文字的大小颜色等；
|
||||
**JavaScript** 是一种动态的脚本语言，负责与用户进行交互，增加用户体验的作用。
|
||||
|
||||
|
||||
|
||||
|
||||
## 2、网页组成
|
||||
|
||||
一个网页的组成部分主要包括下面几个部分：**文字、图片、输入框、视频、音频、超链接** 等。
|
||||
|
||||
|
||||
|
||||
## 3、Web 标准
|
||||
|
||||
说道 Web 标准，不能不说 W3C 组织（World Wide Web Consortium），全程为「万维网联盟」。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
|
||||
|
||||
W3C 最重要的工作是发展 Web 规范（称为推荐，Recommendations），这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。简单的说就是就是确定 Web 页面的语法格式和规范的。
|
||||
|
||||
与之类似的一个组织是「European Computer Manufacturers Association」（ECMA组织），这个组织制定了标准的脚本语言规范 ECMAScript ，而 JavaScript 就参照的这个规范。
|
||||
|
||||
那么 Web 标准规范了下面三个部分：
|
||||
|
||||
- HTML 标准（结构标准 ），相当人的骨架结构。
|
||||
- CSS 样式（表现）标准 ， 相当于给人化妆变的更漂亮。
|
||||
- JavaScript 行为标准 ， 相当与人在唱歌，页面更灵动。
|
||||
|
||||
|
||||
|
||||
## 4、浏览器内核
|
||||
|
||||
浏览器内核是一个浏览器的核心部分，也就是「**渲染引擎**」。它的主要作用是决定一个浏览器如何显示网页的内容及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。
|
||||
|
||||
这里涉及到一个「**兼容性问题**」，浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以我们在编写代码的时候，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。
|
||||
|
||||
|
||||
|
||||
**内核和对应的浏览器：**
|
||||
|
||||
<u>`trident`</u>: IE windows
|
||||
<u>`gecko`</u>: firefox 跨平台
|
||||
<u>`webkit`</u>: safari/chrome
|
||||
<u>`presto`</u>: opera 渲染速度最快
|
||||
<u>`blink`</u> : google/opera 共同开发
|
||||
|
||||
|
||||
|
||||
## 5、认识 HTML
|
||||
HTML 全程为：**超文本标记语言**（Hyper Text Markup Language）。这里超文本就是超链接的意思，就是可以实现页面的跳转。
|
||||
|
||||
|
||||
|
||||
## 6、HTML 结构标准
|
||||
|
||||
HTML 基本结构如下：
|
||||
```html
|
||||
<!DOCTYPE html> <!-- 文档声明 -->
|
||||
<html> <!-- <html></html> 定义文档整体 -->
|
||||
<head> <!-- <head></head> 对页面进行设置，定义标题，外链css,js文件等 -->
|
||||
<meta charset="UTF-8"> <!-- 定义网页的编码格式 -->
|
||||
<title>Document</title> <!-- 定义页面标题 -->
|
||||
</head>
|
||||
<body> <!-- 编写网页上显示的内容 -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
- `<!DOCTYPE html>` 是告诉浏览器，以下文件用 HTML 哪个版本解析，这里是 HTML5 版本。
|
||||
- `<html></html>` 标签是一个网页的根标签，所有的标签都要写在这一对根标签里面。
|
||||
- `<head></head>` 是头标签，主要是定义文档（网页）的头部，包括完档的属性和信息，文档的标题，还可以引入 JavaScript 脚本，CSS 格式等。
|
||||
- `<body></body>` 是一个文档的主题，里面包含文档的所有内容，比如文本，超链接，图片，表格等内容。
|
||||
|
||||
|
||||
|
||||
## 7、html 标签分类
|
||||
|
||||
**单标签** 没有闭合标签 单标签内以 /结尾
|
||||
|
||||
` <! Doctype html>`
|
||||
**双标签** 双标签 由开始标签+内容+结束标签 构成
|
||||
|
||||
`<html> </html> ，<head></head>， <title></title>`
|
||||
|
||||
|
||||
|
||||
##8、html 标签关系分类
|
||||
|
||||
包含（嵌套关系）` <head><title></title></head>` 父子关系
|
||||
并列关系 `<head></head><body></body>` 兄弟姐妹
|
||||
|
||||
|
||||
|
||||
## 9、开发工具
|
||||
|
||||
前期学习一种语言的时候，开发工具很重要。Web开发工具有很多。最简单的一个开发工具就是 Windows 系统自带的记事本了，但是又难用又难看，没有语法高亮、代码补全等功能。
|
||||
|
||||
那么我推荐大家使用的是「[Sublime Text 3](https://www.sublimetext.com/)」 代码编辑器，它虽小巧精致，但有着炫酷的界面，并且有大量的插件可以使用，大大提高了代码的编写效率。
|
||||
|
||||
提到 Web 开发工具不得不提到 JebBrain 全家桶的「 [Webstorm](http://www.jetbrains.com/webstorm/) 」软件。目前已经被广大 Web 开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。它令人称到的是它智能打代码补全、代码一键格式化、HTML 提示、联想查询、代码重构等强大功能。
|
||||
|
||||
还有近些年来崛起的【visual studio code】，已经成为前端开发的主流工具。
|
||||
|
||||
建议初学者初期使用Sublime等文本编辑器，太过于智能的编辑器确实会带给我们极大地便利，但是在带给我们便利的同时，也会削弱我们对基础知识的掌握，只有自己一个单词一个单词敲出来的代码，才会让我们记得更加牢固。
|
||||
|
||||
302
1.Html/2-常用标签.md
Normal file
302
1.Html/2-常用标签.md
Normal file
@@ -0,0 +1,302 @@
|
||||
## 1、标签
|
||||
|
||||
### 1.1、单标签
|
||||
|
||||
- 注释标签 ：`<!-- 注释 --> `
|
||||
- 换行标签：`<br> 或 <br />`
|
||||
- 水平线标签：`<hr> 或 <hr />`
|
||||
|
||||
|
||||
|
||||
### 1.2、双标签
|
||||
|
||||
- 段落标签：`<p></p>`
|
||||
> 特点：上下自动生成空白行。br 换行不会生成空白行。
|
||||
|
||||
- 标题标签：`<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>`
|
||||
> h1 在一个页面里只能出现一次。（作用是：便于SEO 搜索引擎优化）
|
||||
|
||||
- 文本标签：`<font size="" color=""></font>`
|
||||
- 文本格式化标签
|
||||
|
||||
**文本加粗** ：`<strong></strong> <b></b>`
|
||||
> 工作里尽量使用strong，对于盲人来说 strong有语义强调的功能。
|
||||
|
||||
**文本倾斜：**`<em></em> <i></i> <!-- 工作里尽量使用em，原因同strong -->`
|
||||
**删除线标签：**`<del></del> <s></s> <!--工作里尽量使用del -->`
|
||||
**下划线标签：**`<ins></ins> <u></u> <!--工作里尽量ins-->`
|
||||
**图片标签：**`<img src="" alt="" title=""width="" height="" >`
|
||||
|
||||
> src : 图片的来源（必写属性）
|
||||
> alt : 替换文本 ，图片不显示的时候显示的文字（重要性：1.SEO优化 2.盲人阅读需求）
|
||||
> title : 提示文本，鼠标放到图片上显示的文字
|
||||
> width : 图片宽度
|
||||
> height : 图片高度
|
||||
>
|
||||
> PS：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放
|
||||
|
||||
|
||||
|
||||
## 2、超链接
|
||||
|
||||
```html
|
||||
<a href="" title="" target="">填写内容</a>
|
||||
```
|
||||
> `href` ：去往的路径、跳转的页面， 必写属性
|
||||
> `title` ： 提示文本，鼠标放到链接上显示的文字
|
||||
> `target="_self"` （默认值），在自身页面打开（关闭自身页面，打开链接页面）
|
||||
>
|
||||
> `Target=”_blank”` 打开新页面，（自身页面不关闭，打开一个新的链接页面）
|
||||
>
|
||||
> PS：当 href 的值为 `javascript:void(0);` 或 `javascript:;` ，表示超链接不做任何事情，不做任何跳转。
|
||||
|
||||
|
||||
|
||||
### 2.1、锚链接
|
||||
|
||||
我们先搞清楚什么是锚链接：
|
||||
|
||||
锚链接也称锚点链接，命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，自动跳转到我们设置锚点的位置，类似于我们阅读书籍时的目录页码或章回提示。
|
||||
|
||||
锚点链接可以跳转到页面的任何位置。一般用于在页面下面的时候，点击回到最上面。锚点链接的名称可以随意取，只起到标记作用。
|
||||
|
||||
```html
|
||||
<p id="AAA">
|
||||
|
||||
</p>
|
||||
...
|
||||
<a href="#AAA"></a> // 超链接到锚点
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 2.2、空链
|
||||
|
||||
不知道链接到那个页面的时候，用空链
|
||||
|
||||
```html
|
||||
<a href="#">空链</a>
|
||||
```
|
||||
|
||||
> PS：空链相当于 `#top`，实际点击此链接的时候会跳转到页首的位置。
|
||||
|
||||
|
||||
|
||||
### 2.3、压缩文件下载
|
||||
|
||||
```html
|
||||
<a href="../../xxx.rar"></a>
|
||||
```
|
||||
|
||||
> PS：不推荐使用
|
||||
|
||||
|
||||
|
||||
### 2.4、超链接优化写法
|
||||
|
||||
```html
|
||||
<base target="_blank"> // 让所有的超链接都在新窗口打开
|
||||
```
|
||||
|
||||
> PS：写的位置在 head 里面。
|
||||
|
||||
------
|
||||
|
||||
|
||||
|
||||
## 3、特殊字符
|
||||
|
||||
| 特殊符号 | 字符代码 |
|
||||
| ---- | ---------- |
|
||||
| (空格) | ` ` |
|
||||
| < | `<` |
|
||||
| > | `>` |
|
||||
| & | `&` |
|
||||
| ¥ | `¥` |
|
||||
| © | `©` |
|
||||
| ® | `®` |
|
||||
| × | `×` |
|
||||
| ÷ | `&devide;` |
|
||||
|
||||
参考链接：[HTML特殊字符编码对照表](http://www.jb51.net/onlineread/htmlchar.htm)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 4、列表
|
||||
|
||||
### 4.1、无序列表
|
||||
|
||||
```html
|
||||
<ul type="">
|
||||
<li></li> <!-- 列表项 -->
|
||||
<li></li>
|
||||
<li></li>
|
||||
......
|
||||
</ul>
|
||||
```
|
||||
|
||||
> `type="square"` ：小方块
|
||||
> `type="disc"` ： 实心小圆圈
|
||||
> `type="circle"` ： 空心小圆圈
|
||||
|
||||
|
||||
|
||||
### 4.2、有序列表
|
||||
|
||||
```html
|
||||
<ol type="" start="">
|
||||
<li></li> <!-- 列表项 -->
|
||||
<li></li>
|
||||
<li></li>
|
||||
......
|
||||
</ol>
|
||||
```
|
||||
|
||||
> `type="1,a,A,i,I"` ，type的值可以为1,a,A,i,I
|
||||
>
|
||||
> `start="3"` 决定了开始的位置。
|
||||
|
||||
|
||||
|
||||
### 4.3、自定义列表
|
||||
|
||||
```html
|
||||
<dl>
|
||||
<dt></dt> <!-- 小标题 -->
|
||||
<dd></dd> <!-- 解释标题 -->
|
||||
<dd></dd> <!-- 解释标题 -->
|
||||
</dl>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5、音乐标签
|
||||
|
||||
```html
|
||||
<embed src="1.mp3" hidden="true"></embed>
|
||||
```
|
||||
|
||||
> `hidden="true"` 隐藏音乐标签
|
||||
|
||||
------
|
||||
|
||||
|
||||
|
||||
## 6、滚动标签
|
||||
|
||||
```html
|
||||
<marquee width="" height="" bgcolor="" behavior="" direction="" loop="">
|
||||
</marquee>
|
||||
```
|
||||
|
||||
> width：宽度
|
||||
> height：高度
|
||||
> bgcolor：背景颜色
|
||||
>
|
||||
> behavior：设置滚动的方式
|
||||
> alternate：在两端之间来回滚动
|
||||
> scroll：由一端滚动到另一端，会重复
|
||||
> slide：由一端滚动到另一端，不会重复
|
||||
>
|
||||
> direction：设置滚动的方向
|
||||
> left | right | up | down
|
||||
> loop：滚动次数（-1：一直滚动下去）
|
||||
|
||||
------
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 7、head相关知识
|
||||
|
||||
### 7.1、charset编码
|
||||
|
||||
```html
|
||||
<meta charset="UTF-8">
|
||||
```
|
||||
|
||||
> ASCII/ANSI/Unicode：英语
|
||||
> GBK ：亚洲通用字符集
|
||||
> GB2312：中文简体
|
||||
> Big5 ：台澳港繁体
|
||||
> UTF-8：世界通用字符集
|
||||
|
||||
|
||||
|
||||
### 7.2、name
|
||||
|
||||
- 关键字
|
||||
|
||||
```html
|
||||
<meta name="keywords" content="">
|
||||
```
|
||||
|
||||
> 告诉搜索引擎你的站点的关键字。SEO优化使用
|
||||
|
||||
- 网页描述
|
||||
|
||||
```html
|
||||
<meta name="discription" content="">
|
||||
```
|
||||
|
||||
> 告诉搜索引擎你的站点的主要内容。这个description是给SEO和用户看的。
|
||||
|
||||
- 作者
|
||||
|
||||
```html
|
||||
<meta name="author" content="名字">
|
||||
```
|
||||
|
||||
> 告诉搜索引擎你的站点的制作者
|
||||
|
||||
- 文件检索
|
||||
|
||||
```html
|
||||
<meta name="robots" content="all | none | index | noindex | follow | nofollow">
|
||||
```
|
||||
|
||||
> 有时候会有一些站点内容，不希望被 robots 抓取而公开。为了解决这个问题，robots 开发界提供了两个办法：一个是robots.txt，另一个是 robots meta 标签。
|
||||
> 其中的属性说明如下：
|
||||
> all：（默认）文件将被检索，且页面上的链接可以被查询；
|
||||
> none：文件将不被检索，且页面上的链接不可以被查询；
|
||||
> index：文件将被检索；
|
||||
> follow：页面上的链接可以被查询；
|
||||
> noindex：文件将不被检索，但页面上的链接可以被查询；
|
||||
> nofollow：文件将不被检索，页面上的链接可以被查询。
|
||||
|
||||
|
||||
|
||||
### 7.3、http-equiv 网页重定向
|
||||
|
||||
```html
|
||||
<meta http-equiv="reflesh" content="5; http://www.google.com">
|
||||
```
|
||||
|
||||
> 网页自动跳转：网页5秒后自动跳转到谷歌主页
|
||||
|
||||
|
||||
|
||||
### 7.4、链接外部样式表
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" type="text/css" href="1.css">
|
||||
```
|
||||
|
||||
> `rel="stylesheet"`：链接的是什么？样式表还是图标
|
||||
> `type="text/css" type="text/css"`：规定链接文件的MIME类型，就是说链接文件时css还是js
|
||||
> `href="1.css"`：链接的文件路径
|
||||
|
||||
|
||||
|
||||
### 7.5、设置 icon 图标
|
||||
|
||||
```html
|
||||
<link rel="icon" href="1.ico">
|
||||
```
|
||||
|
||||
289
1.Html/3-表格.md
Normal file
289
1.Html/3-表格.md
Normal file
@@ -0,0 +1,289 @@
|
||||
## 1、表格
|
||||
|
||||
### 简单的表格
|
||||
|
||||
```
|
||||
<table> 写· <!-- table 声明是一个表格 -->
|
||||
<tr> <!-- tr 声明一行 -->
|
||||
<td>第一行第一列格中的内容</td> <!--td 声明一列 -->
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
### 表格（table） 的相关标签
|
||||
|
||||
| table | 声明是个表格 |
|
||||
| ------- | ------------------ |
|
||||
| tr | 声明一行 |
|
||||
| td | 声明一列 |
|
||||
| caption | 声明表格标题 |
|
||||
| th | 声明表格表头单元格 |
|
||||
| thead | 表格头部 |
|
||||
| tbody | 表格主体 |
|
||||
| tfoot | 表格结尾 |
|
||||
|
||||
> thead, tbody, tfoot 没有实际效果 只是响应 html5的语义化标签
|
||||
|
||||
### 1.1、标准结构
|
||||
|
||||
```html
|
||||
<table>
|
||||
<caption>表格标题</caption>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
```
|
||||
|
||||
> 写 `<thead> <tbody> <tfoot>`对SEO更好，不写也没问题。
|
||||
|
||||
|
||||
|
||||
### 1.2、常见写法
|
||||
|
||||
```html
|
||||
<table width="300px" height="300px" border="5" cellspacing="10px" cellpadding="0" bgcolor="pink" align="center" >
|
||||
<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>
|
||||
```
|
||||
|
||||
>width（宽度）
|
||||
>height（高度）
|
||||
>border（边框宽度）
|
||||
>cellspacing（单元格与单元格的距离）
|
||||
>cellpadding（内容距边框的距离）
|
||||
>bgcolor（表格背景颜色）
|
||||
>align=”left | right | center”
|
||||
> 如果直接给表格用align=”center” 表格居中
|
||||
> 如果给tr或者td使用 ，tr或者td内容居中。
|
||||
|
||||
#### **边框变成单实线的方法** border-collapse
|
||||
|
||||
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
|
||||
| -------- | ------------------------------------------------------------ |
|
||||
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
|
||||
| inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
|
||||
|
||||
## 2、快速建表格的方式
|
||||
|
||||
`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、单元格合并
|
||||
|
||||
table 通过colspan 属性实现横向合并
|
||||
|
||||
通过rowspan 属性实现纵向合并
|
||||
|
||||
> colspan和rowspan 的属性值都是数字
|
||||
>
|
||||
> 如： colspan="3"
|
||||
>
|
||||
> rowspan="4"
|
||||
|
||||
`<td colspan=“2”>填写内容</td>`：合并到同一行的单元格，合并行数为2
|
||||
|
||||
`<td rowspan=“3”>填写内容</td>` ：合并到同一列的单元格，合并列数为3
|
||||
|
||||
```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="#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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5、表格标题
|
||||
|
||||
```html
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
```
|
||||
|
||||
> 注意：将td改为th
|
||||
>
|
||||
> 特点：标题的文字自动加粗水平居中对齐
|
||||
|
||||
|
||||
|
||||
## 6、边框颜色
|
||||
|
||||
```html
|
||||
<table bordercolor=""></table>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 7、内容在上下方向的对齐方式
|
||||
|
||||
```html
|
||||
<tr>
|
||||
<td valign="bottom">张三</td>
|
||||
</tr>
|
||||
```
|
||||
|
||||
> `valign="top | middle | bottom"`
|
||||
|
||||
|
||||
|
||||
## 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时则随内容宽度而定。*/
|
||||
```
|
||||
|
||||
|
||||
|
||||
**20181010 补充：**
|
||||
|
||||
设置表格较小，但是内容过大的话，为了不使的表格被撑大，可以设置一个属性：`table-layout:fixed;` 固定表格的宽高，加快计算机的运行速度。
|
||||
|
||||
|
||||
|
||||
# 作业
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 
|
||||
|
||||
|
||||
Reference in New Issue
Block a user