HTML 2017.07.18
来源:互联网 发布:汉仪综艺简体 mac版本 编辑:程序博客网 时间:2024/06/05 20:03
1. 单元格跨行
<th colspan="number">Tab1</th>
2.单元格跨列
<th rowpan="number"> Tab2</th>
3.colspan与rowspan
<th></th>中colspan与rowspan分别对行和列作用。
4.table的cellspacing属性与cell padding属性
即单元格间距属性(cellspacing)(是边格中心之间!)
效果:
单元格边距属性(cellpadding)(是边与边之间!):
这看起来其实是改变了单元格的大小。但是字体大小并没有变化。
实例:
5. 表格的页眉与页脚与表格体
①<thead>
②<tfoot>
③表格体<tbody>
另:thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过,您可以使用 CSS 来为这些元素定义样式,从而改变表格的外观。
<table>将<thead>,<tfoot>,<tbody>包括在其中,方便使用CSS对其进行修饰。
在<table>中,如果没有特殊说明,则表格数据默认为<tbody>的内容,与其使用同样的style。
效果示例:
说明:从上到下分别是<thead>.<tbody>,<tfoot>
6. <caption>
<caption>用来定义表格的标题,一个表格通常只有一个标题;
而且 <caption> 通常放置于 <table>后面。
例如:
7. html中的列
格式:
<ur>
<li>....</li>
<li>.....</li>
<li>....</li>
</ur>
实例:
8. <colground>与<col>
注:span表示规定某个列组所跨越的列数:
实例:
<table border="1" cellspacing="0" cellpadding="10"><colground><col span="2" style ="background-color:skyblue"><col style="background-color:greenyellow"></colground><tr><th>fight on</th><td>paradise</td><td>war zone</td></tr><tr><td>make</td><td>done</td> <td>fight</td></tr></table>
实例效果:
9. 有序列表与无序列表(ordered list,unordered list)
①有序列表
格式:
<ol>
<li>......<li>
</ol>
②无序列表
格式:
<ul>
<li>....</>
</ul>
实例:
<ul><li>fight</li><li>make</li><li>sixsix</li></ul><ol><li>five</li><li>four</li><li>three</li><li>two</li></ol>
效果图:
10. 自定义列表
基本格式:
<dl> //define list
<dt>....</dt> // define list title
<dd>....</dd> //define list define
</dl>
实例效果:
11. html 区块元素
大多数HTML元素被定义成区块元素,这其中又包括了块级元素和内联元素;显示块级元素通常以新行开始(包括table,ul,h,p);而显示内联元素却通常不以新行开始(例如<td>,<b>(注释),<img>等)。
12. HTML中的<div>与<span>
<div>是块级元素,没有特定的含义,一般与CSS 一起使用;来设置大的内容块的样式。
<span>是内联级元素,也没有特定的含义,可以设置部分文本的样式。
13. <div>内容块可以使用id唯一标识,这样做会更加方便。
<div>元素常用的属性:
1)height
用来定义div的宽度.
2)margin
3)padding
4)position
5)font
6)overflow
一些特殊的效果:
1)z_index
2)cursor
3)clip
4)opacity
- HTML 2017.07.18
- 学习笔记2017.07.03-day1,pm-HTML属性-HTML标题-HTML注释-HTML段落-HTML
- HTML 2017.07.17
- HTML 2017.07.19
- HTML 2017.07.20
- (18)HTML杂记
- html
- html
- html
- HTML
- HTML
- html
- html
- html
- html
- HTML
- HTML
- Html
- android 设置textview中划线效果
- 函数模板
- CentOS7 最小化安装完配置
- Nginx nginx.conf 配置详解
- Android:Authentication Error errorcode: 230 uid: -1 appid -1 msg: APP Scode码校验失败
- HTML 2017.07.18
- 延迟初始化错误: org.hibernate.LazyInitializationException: could not initialize proxy
- 第15讲 mysql积累
- 剑指Offer——(33)丑数
- Zookeeper和zkui介绍以及部署
- 如何提高代码的执行效率--c++
- LeetCode刷题【Array】 Shortest Unsorted Continuous Subarray
- caffe——python接口:生成deploy文件
- 百练_2690:首字母大写