html总集
3.1清单
格式:
<ul>
<li>...</li>
</ul>
<li>的属性:
type disc 实心圆(默认)
circle 空心圆
square 实心方块
<ol>
<li>...</li>
</ol>
ol的属性:
type 1 1.2.3表示
a a.b.c
A A.B.C
i i.ii.iii
I I.II.III
表格
4.1表格的基本格式
格式:
<table>
<tr>
<th>...</th>
</tr>
<tr>
<td>...</td>
</tr>
</table>
4.2<table>下的常用属性
属性:
border 像素 设置表格边线
cellspacing 像素 绝对设置 存储格框线宽度
百分比 相对设置 ......
cellpadding 像素 ....... 数据与框线的距离
百分比 ....... 数据与框线的距离
width 像素 ....... 表格宽度
百分比 ....... 表格宽度
height 像素 ....... ....高度
百分比 ....... ....高度
align lefr 表格往左靠(默认)
center 居中
right 右
bgcolor 英文/十六进制 表格的背景颜色
background URL 表格的背景图片
bordercolor 英文/十六进制 边框颜色
bordercolorlight ............ 边框亮度
bordercolordark ....... 暗色
4.3<table>下的边框设置
frame above 显示表格的上边线
rules all 显示全部格框线
4.4<tr><th><td>下的成语属性
width 1 10% 宽
height 1 10% 高
bgcolor red #f00 数据栏内的颜色
align 水平方向 left 数据靠左
center 居中
right 右
valign 垂直方向 top 上
middle 中
bottom 下
nowrap 无 在单元格中换行
4.5拆分与合并单元格
colspan 1 向两边扩展栏位
rowspan 1 下
4.6表格的结构化、直列化、标题
结构化:
<table>
<thead></thead> 表头区
<tbody></tbody> 表体区
<tfoot></tfoot> 表尾区
</table>
直列化:<colgrounp></colgrounp>
align left 靠左
center 中
right 右
valign top 上
middle 中
bottom 下
span 1 直列数目
width 1px 10% 宽度
个别直列设置:
<col>和<colgrounp>一样
标题:
<table>
<caption>表格标题</caption>
</table>
align top 标题在表格上方
bottom 标题在表格下方
结构化:
<table>
<thaed>...</thaed>
<tbody>...</tbody>
..................
<tfoot>...</tfoot>
</table>
图像
在body标签上加入background=“url”
图片插入网页中
<img src=“url”>
alt 文字 图片注释
width
height
border
align left 图左文右
right 图右文左
top 文上
middle 文中
bottom 文下
空隙
vspace 像素 垂直属上下两端与物的距离
hspace 像素 水平
超链接
用图片做超链接
就是超链接嵌套<img src>
地图索引
<map nane="xxx">
<img src="url"usemap="#xxx">
<area shape="截图的形状"coords="坐标"href="地址">
选中的区块 rect 矩形 4点
circle 圆 3点
poly 多边形 几边形就几点
</map>
图片索引
用表格来定位,在消除表格边线与边距。加上超链接就行了。
scheme://host[:post]/path/filename
一共7种↓IP地址 服务端口 文件路径 文件名
↓ 常用的四种
http
<a href="http://www.baidu.com">网页地址</a>
file
<a href="file:///e:/160/代码/xxx.jpg">图片上传</a>
e盘
ftp
<a href="ftp://192.168.4.21">id进入</a>
mailto
<a href="mailto:bnbbs@163.com">进入邮箱</a>
相对链接、绝对链接
a标签套上文件位置
<a href="文件"> 正常
<a href="page/文件"> page就是文件的目录
page/top/......
../........... ../就是向上翻一层
../page/......... 向上翻一层的page目录
书签链接
瞄点<a name="书签">第一章</a>
链接点<a href="#书签">第一章</a>
链接到其他网页的书签
瞄点<a name="书签">第一章</a>
链接点<a href="其他网页目录名#书签">其他第一章</a>
基准参考点
在head中插入<base href="c:/"> c盘
超链接颜色
<body link="yellow"alink="red"vlink="green">
link:还没点过的
alink:点了但没放开
vlink:已经点过了
7表单
7.1功能结构
主标记结构:<form>...</form>
属性:
name 字符 名字
method post 传输方式
action url 传输目标 value="123"
7.2文本框、密码栏、隐藏栏
文本栏:<input type="text" name="栏位名称" value="栏内值" size="宽度" maxlength="输入最多数">
密码栏:<input type="password" name="名称" value="栏内值" size="宽度"
maxlength="输入最多数">
隐藏栏:<input type="hidden" name="名称" value="栏内值">
7.3复选栏、单选栏
多重勾选栏位:<input type="checkbox" name="名称" value="栏内值" checked="checked(默认项)" disabled="disabled(必选项)">
单选:<input type="radio" name="名称" value="栏内值"checked="checked(默认项)" disabled="disabled(必选项)" >
7.4窗体栏、区块栏
窗体选项栏:
<select name="名称" size="数字"multiple(多选)>
<option value="上海" selected(首选项)>上海
<option value="北京">北京
</select>
<select name="名称"> (多组)
<optgroup label="上海">
<option value="普陀区">普陀区
<option value="宝山区">宝山区
</optgroup>
</select>
文字区块栏:
<textarea cols="设置长度" rows="设置宽度">
.............
</textarea>
7.5按钮、图像设置
按钮设置:
<input type="submit" value="按钮中显示的文字">
<input type="reset" value="按钮中显示的文字">
按钮图像: ↑
<button name="提交或重置" 统一“图像形态”>
<img src="URL">
</button>
图像按钮:<input type="image"src="URL" alt="文本">
7.6允许上传文件
上传栏位:<input type="file"name="file">
7.7加上外框和标题
外框:<fieldset>......</fieldset>
标题:<legend>.......</legend>
7.8元件的次序和快捷键
accesskey="w" (alt+w)(ctrl+w)
tabindex="n"
8.窗框
8.1基本结构
格式:<frameset>
<frame>
<frame>
</frameset>
<frameset>的属性:
cols 像素百分比 窗框环境(竖)
rows 像素百分比 窗框环境(橫)
border 像素 边框的宽度
framespacing 1或0 页面与页面的边距
属性格式:<frameset cois="120,80,">
80%,20%
<frame>的属性:
src URL 链接页面
noresize true 允许自行改变大小
false 不允许
scrolling yes 不管大小,都有滚动条
no 不管大小,都没有滚动条
auto 自动判断是否有滚动条
marginheight 像素 垂直,窗体内容与边界距离
marginwidth 像素 水平,.................
frameborder 0/1 不出现框边
属性格式:<frame src="URL">
<frame noresize>
8.2多窗体设置
格式:<frameset rows="20%,80%">
<frame src="URL">
<frameset cols="20%,80%">
<frame src="URL">
<frame src="URL">
</frameset>
</frameset>
8.3多框架与超链接
格式:<frame name="文件名称">
<a>超链接 <a href="URL" target="窗体名称">
多窗体链接的属性:
target _blank 打开一个新页面
8.4悬浮窗体的设置
格式:<ifame>......</ifame>
<ifame>属性:
height 像素 相对 高度
width 像素 相对 宽度
9.1FLASH动画的插入
格式:
<embed>...</embed>
属性:
src URL fiash路径
width 像素 fiash宽度
height 像素 fiash高度
wmode window fiash自身矩形窗口播放
opakue fiash隐藏页面位于后面
transparent fiash某一部分透明
格式:
<object>...</object>
属性:
type application/x-shockwave-flash flash类型
data URL flash路径
width 像素 flash宽度
height 像素 flash高度
必须使用子标签<param>
属性:
name 属性 flash属性
value 值 flash值
9.2MP3及WMV视频的插入
格式:
<embed>...</embed>
属性:
autostart true/false 自动/非自动播放
loop 数字 音乐循环的次数
前身:<bgsound src="URL" loop="次数">
格式:
<object>...</object>
属性:
name src(路径) 音乐路径
autoplay(true/false) 是否自动播放
9.3网络流媒体视频的插入
优酷、土豆
html总集的更多相关文章
- Java面试通关要点汇总集
Java面试通关要点汇总集 2018-03-09 转自:Java面试通关要点汇总集 文章目录 1. 基础篇 1.1. 基本功 1.2. 集合 1.3. 线程 1.4. 锁机制2. 核心篇 2 ...
- 【面试题】2018年最全Java面试通关秘籍汇总集!
[面试题]2018年最全Java面试通关秘籍汇总集!(转载于互联网) 前几天在交流群里有些小伙伴问面试相关的试题,当时给出了一些问题,苦于打字太累就没写下去了,但觉得这是一个很不负责任的表现,于是 ...
- [总集] LOJ 分块1 – 9
目录 分块9题 出题人hzw的解析 数列分块入门 1 修改:区间加 查询:单点值查询 代码 数列分块入门 2 修改:区间加 查询:区间排名 代码 数列分块入门 6 修改:单点插入 查询:单点值 代码 ...
- 0基础入门 docker 部署 各种 Prometheus 案例 - 程序员学点xx 总集篇
目录 大家好, 学点xx 系列也推出一段时间了.虽然 yann 能力有限,但还是收到了很多鼓励与赞赏.对这个系列 yann 还是很喜欢的,特别是 Prometheus 篇,在期间经历公众号 100 篇 ...
- css总集
1 font-style normal 正常显示 italic 斜体 百分比 字体大小 font-size 像素 字体大小 font-family 字体名称 设置字体名称 letter-spacing ...
- 小圣求职记B:总集篇
1. 搜狐sohu 搜狐在正式招聘前邀请了部分应聘者到武汉研发中心开座谈会(因此简历尽量早投,机会多些),有研发的也有产品的,40人左右,座谈会期间介绍了搜狐汽车.北京研发中心.武汉研发中心和搜狐媒体 ...
- Linux常用命令汇总集
cd ./ 当前目录 ../ 上级目录 / 代表根目录 or 代表目录和文件之间的分隔符 .. pwd 查看当前路径 LS 查看当前目录下的文件 ls ./a/ 查看目标路径下的文件 tab 自动补全 ...
- Java面试通关秘籍汇总集
一.基础篇 1.1.Java基础 面向对象的特征:继承.封装和多态 final, finally, finalize 的区别 Exception.Error.运行时异常与一般异常有何异同 请写出5种常 ...
- CS231n官方笔记授权翻译总集篇发布
CS231n简介 CS231n的全称是CS231n: Convolutional Neural Networks for Visual Recognition,即面向视觉识别的卷积神经网络.该课程是斯 ...
随机推荐
- 转换,2D,3D
一,转换定义: 1,能够改变元素的形状,尺寸,位置 2,转换分两种: 2D转换:只能在X,Y轴发生改变: 例子:旋转(rotate).拉伸(scale).平移(move).倾斜(skew) 3D转换: ...
- 获取系统进程信息和进程依赖的dll信息
body { font-family: Bitstream Vera Sans Mono; font-size: 11pt; line-height: 1.5; } html, body { colo ...
- 一张图说懂java中 private default protected public 的区别
private:修饰完全隐藏类的成员,这样,就不能从类的外边直接访问他们,我们提供set和get方法,保证类中数据域的安全. default:指默认修饰符,什么都不加,实际上它限制的范围就是一个包内可 ...
- AIX 环境下ODM库同步
IBM AIX v5.3操作系统环境下有时会出现ODM库与rootvg硬盘上数据不同步的情况.使用命令lsvg -l datavg检查文件系统类型,发现显示为"???"这就表示OD ...
- JavaScript中的枚举
在JavaScript目前的版本中,没有枚举这个概念(当然,ECMA-262第三版中已经将enum作为关键字保留). 然而,如同JavaScript中没有class一样,但我们仍然可以通过间接的方式- ...
- react-组件生命周期
本文同步至微信公众号http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=402267570&idx=1&sn=4b0dc2 ...
- sql while 遍历表
declare @n int declare @rowcount int ) create table #temp ( id ,), employeeName ) ) insert into #tem ...
- Elasticsearch相关资源
安装介绍 http://www.doc88.com/p-171165797348.html 入门教程 http://www.iteye.com/blogs/subjects/elasticsearch ...
- Parallel线程使用
Parallel的静态For,ForEach和Invoke方法 在一些常见的编程情形中,使用任务也许会提升性能.为了简化编程,静态类System.Threading.Tasks.Paral ...
- Linked List Start!
(1)Delete Node in a Linked List 题意简单明了,用后一个节点来替换要删除的节点即可.代码如下: /** * Definition for singly-linked li ...