html
html
body属性
| 属性 | 值 | 说明 |
|---|---|---|
| text | rgb(r,g,b) rgb(%r,%g,%b) #rrggbb #rgb colorname | 文本颜色 |
| bgcolor | 背景颜色 | |
| alink | 活动链接颜色 | |
| link | 为访问链接默认颜色 | |
| vlink | 一访问链接颜色 | |
| background | url | 背景图像 |
| topmargin | px | 上边距大小 |
| leftmargin | px | 左边距大小 |
HTML常用特殊字符
HTML原代码 显示结果 描述
< < 小于号或显示标记
> > 大于号或显示标记
& & 可用于显示其它特殊字符
" “ 引号
® ® 已注册
© © 版权
™ ™ 商标
空格
块级标签
前后断行显示，默认状态下占用一整行
具有一定的宽度和高度，可以通过设置块级标签的width、height 属性来控制
块级标签常用作容器.即可以再容纳其他块级标签或行级标签。
标题标签
<h1>一级标题</h1>
h1-h6，可使用 align属性对齐
段落标签
<p>有勇气就会有奇迹。</p>
可使用 align属性对齐
水平线标签
【标签】<hr>
【属性】
size：尺寸，取值单位为 px（像素），可以省略
width：宽度，取值单位为px（像素）可以省略或百分比
color：颜色，取值自然颜色值
align：水平对齐方式，取值：left/center/right
列表
有序列表
<ol>
<li></li>
<li></li>
</ol>
【属性】
type:指定列表项标志的类型，默认为数字排列
取值：1（默认值）/a/A/i/I（顺序标号为数字、英文字母、罗马字母）
start:定义起始值(数字)，默认从1开始
取值：数字
无序列表
<ul>
<li></li>
</ul>
【属性】
type：指定无序列表的列表项标识
取值： disc,默认,实心圆/ circle空心圆/ square实心矩形 none，不显示标识
定义列表
<dl>
<dt>列表中的标题内容</dt>
<dd>列表中的数据</dd>
</dl>
使用场合：图文混排时使用
表格
由<table>元素定义。
【标签】<table></table>
【属性】
width ：设置表格的宽度
height：设置表格的高度
align：设置表格的对齐方式，取值: left/center/right
border：设置表格边框宽度
cellpadding：内边距（单元格边框与内容之间的距离）
cellspacing：外边距（单元格之间的距离）
bgcolor：设置表格的背景颜色
table中的子元素
【标签】<tr></tr> （创建表行）
【属性】
align：该行内容水平对齐方式，取值: left/center/right
valign：该行内容的垂直对齐方式，取值: top/middle/bottom
bgcolor：设置表格的背景颜色
【标签】<td></td> （创建单元格）
【属性】
align：内容水平对齐方式
valign：内容垂直对齐方式
width ：宽度
height ：高度
colspan=值（数字，合并单元格的个数）;
rowspan=值（数字，合并单元格的个数）;
【标签】<caption></caption> （表格标题）
【标签】<th></th> （表头，即列标题）
行标题或列标题，字体有加粗的效果，放在tr中
【标签】<thead></thead> （表头）
【标签】<tbody></tbody> 表主体）
【标签】<tfoot></tfoot> （表尾）
其他运用
（1）不规则表格
- 跨列：从指定单元格位置处，横向向右合并几个（包含自己）单元格
属性：colspan=值（数字，合并单元格的个数）;
- 跨行：从指定单元格位置处，纵向向下合并几个（包含自己）单元格
属性：rowspan=值（数字，合并单元格的个数）;
（2）表格的嵌套
在单元格中去嵌套另一个表格，但嵌套的表格必须要放在td中
表单
由<form>定义，将用户输入的数据提交给后台。
【常见属性】
action：提交的服务器地址
method：表单数据提交的方式，取值： get：明文提交/post：隐式提交
name：定义表单名称，JS用到的比较多
id： 独一无二的标识
如：<form action="url" method="get/post"> </form>
【表单控件主要属性】
type：根据不同的type属性值可以创建各种类型的输入字段
value：最终提交给服务器的值
name：控件的名称，提供给服务器使用，没有name，控件则无法提交
id：唯一标识，只能在当前页面使用，服务器不能用
disabled：禁用，不能被提交
常用的表单控件：
基本格式：
<input name="元素的名称" type="类型" value="值“
size="显示宽度" maxlength="最多输入字符" checked="是否选中" />
（1）文本框：<input type="text">
（2）密码框：<input type="password">
【专有属性】
maxlength：限制输入的字符数，取值：数字
readonly：设置文本控件只读
（3）单选按钮：<input name= “组名" type="radio" value="… " checked=" … ">
name相同表示同一组
（4）复选框：<input type="checkbox">
【专有属性】
checked，设置默认被选中
（5）提交按钮：<input type="submit">
（6）重置按钮：<input type="reset">
（7）普通按钮：<input type="button">
属性：onclick 值：事件代码
（8）图片按钮：<input type="image" src="">
（9）隐藏域：<input type="hidden">
（10）文件选择框：<input type="file">
**下拉选择框****select** **和** **option**
<select name="" size="行数">
<option value="" selected="selected">选项1</option>
<option value="" >选项2</option>
</select>
(11)多行文本框
<textarea name="... "cols="列宽"rows="行宽">
文本内容
</textarea>
只读和禁用属性
readonly：希望某个框内的内容只允许用户看，不能修改
disabled：因没达到使用的条件，限制用户使用
分区元素
（1）块分区元素：<div></div>
【特点】独立成行
【作用】页面布局
（2）行内分区元素：<span></span>
【特点】多个元素在一行内显示
【作用】设置同一行文字内的不同格式
行级标签
不会换行，多个元素会在一行内显示
可以嵌套行级标签
文本样式
斜体：<i></i> <em></em>
粗体：<b></b> <strong></strong>
删除线：<del></del>
下划线：<u></u>
上标：<sup></sup>
下标：<sub></sub>
换行元素
【标签】<br>
图像
【标签】<img>
【属性】
src：图片地址（绝对/相对）
alt: 替代文本
title：提示文字
width：图像宽度
height：图像高度
border:边框宽度
行范围标签span
<span></span>
font
【标签】<font>
【属性】
size: 字号-1 ~+7
color:值rgb(r,g,b),#rrggbb,colorname
face:字体
内容居中
<center>文字、图片、其他对象</center>
滚动文字，图片 marquee
[标签]<marquee>
[属性]：
width ,height,bgcolor,
direction:up,down,right,left(默认)
loop：循环次数，-1表示无限循环；
onMouseOver=”this.stop()” onMouseOut=”this.start()” :鼠标覆盖停止滚动，鼠标移开继续滚动；
pre预格式化
<pre>预格式化文本</pre>
链接
【标签】<a></a>
【属性】
href：链接地址（要跳转到的页面的地址）
target：目标，打开新网页的形式
取值：
_blank：在新标签页中打开
_self：在自身页面中打开（默认值）
frameName:在指定框架中打开链接
title：鼠标放到链接上的提示
锚链接：
1、定义标记（锚）：<a name="标记名">目标位置的</a>
or <a id="标记名">目标位置的</a>
2、设置链接到标记位置：<a href="#标记名">当前位置</a>
框架
frameset框架集
<frameset cols="25%,50%,*" rows ="50%,*" border="5">
<frame src="the_first.html " name="firstFrameName">
...
</frameset>
框架窗口见的跳转：
<a href="the_first.html" target="firstFrameName"></a>
<frameset>可以嵌套使用
<a href="跳转的目标网页" target="跳转的框架名"></a>
<frameset>标签的cols属性表示将页面横向分割为几列，例如，cols=“25%,50%,*"表示将页面分割为三列.第一列占浏览器窗口总宽度的25%，第二列占50%，第三列占剩余部分，各列的宽度值也可使用具体数值(单位像素为px)。
rows属性表示将页面纵向分割为几行。
各框架对应的页面情况：使用<frame> 标签的src属性引用各框架对应的页面文件，同时还可以使用name属性标识各框架窗口。
需要注意的是：<frameset> 标签和<body> 标签不能同时使用，需要使用<frameset> 代替页面中的<bady>标签
| 属性 | 值 | 描述 |
|---|---|---|
| frameborder | 0 1 | HTML5 不支持。规定是否显示框架周围的边框。 |
| longdesc | URL | HTML5 不支持。规定一个包含有关框架内容的长描述的页面。 |
| marginheight | pixels | HTML5 不支持。规定框架的上方和下方的边距。 |
| marginwidth | pixels | HTML5 不支持。规定框架的左侧和右侧的边距。 |
| name | name | HTML5 不支持。规定框架的名称。 |
| noresize | noresize | HTML5 不支持。规定无法调整框架的大小。 |
| scrolling | yes no auto | HTML5 不支持。规定是否在框架中显示滚动条。 |
| src | URL | HTML5 不支持。规定在框架中显示的文档的 URL。 |
iframe
<body>
<iframe src="引用页面地址" name="框架标识名" frameborder="边框" scrolling="no" />
<body>
和<frameset>不同，放在<body>标签内
<iframe>可以嵌套使用
| 属性 | 值 | 描述 |
|---|---|---|
| frameborder | 0 1 | HTML5 不支持。规定是否显示框架周围的边框。 |
| marginheight | pixels | HTML5 不支持。规定框架的上方和下方的边距。 |
| marginwidth | pixels | HTML5 不支持。规定框架的左侧和右侧的边距。 |
| name | name | 规定框架的名称。 |
| scrolling | yes no auto | HTML5 不支持。规定是否在框架中显示滚动条。 |
| src | *URL | 规定在框架中显示的文档的 URL。 |
| align | left,top,bottom,middle | 不赞成使用，请用样式 |
| height | px % | 设置框架高度 |
| width |
