HTML小结
Posted Y_ZhiWen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML小结相关的知识，希望对你有一定的参考价值。
html
- head
- meta
- …
- body
- …
HTML:http://www.w3school.com.cn/tags/tag_frameset.asp
head
- meta提供页面信息
<meta name="keywords" content="某个关键字"/>
// 某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
<meta name="author" content="yzw"/>
<meta name="generator" content="编辑工具"/>
<meta name="description" content="页面说明"/>
<meta http-equiv="content-type" content="text/html; charset=euc-jp" />
// 设置网页文字和语言：此处为日语
<meat http-equiv="refresh" content="[跳转时间]; rul=[跳转地址]" />
More: http://www.w3school.com.cn/tags/tag_meta.aspbody
<body
bgcolor="背景颜色"
backgroud="图片地址"
text="文字颜色"
link="链接颜色"
alink="正在访问连接颜色"
vlink="访问后连接颜色"
topmargin=上边距
leftmargin=左边距(单位像素)/>标题
<h1></h1> -> <h6></h6> <h2 align="left / center / right"> 标题对齐</h2>- 文本
<font face="宋体 / 华文彩玉" size="字号" color="颜色">文本</font>
<b>加粗</b>
<i>斜体</i>
<hr> 水平线
<hr width="300" size="3" noshade(去掉阴影) color="颜色" align="center/left/right">
<br> 换行
空格图像
<img src="images/car.jpg" alt="无法显示或鼠标停服时提示文字"> // 为图像添加链接 <a href="#"><img src=""></a>列表
// 有序列表 <ol> <li>星期一</li> <li>星期二</li> </ol> <ol type="1 / a / A / i / I (序列符号类型)" start="序号起始值"> </ol> // 无序列表 <ul> <li>星期一</li> <li>星期二</li> </ul> <ul type="Disc / circle / square"> </ul>表格
table:表格
tr:行标记
td:单元格标记
eg:
<table border="1">
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>
表格标题
<table>
<caption>标题</caption>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</table>
// 表格属性
<table
width=""
height=""
align="left / center / right(整个表格在浏览器的对齐方式)"
border="边框宽度"
bordercolor="边框颜色"
cellspacing="内边框度值"
cellpadding="文字与边框距离"
bgcolor=""
background="">
</table>
// 表格行属性
<tr
height=""
bordercolor=""
bgcolor=""
background=""
align=""
valign="top / middle / bottom">
</tr>
// 单元格属性
<td
width=""
height=""
colspan="水平跨度的列数"
rowspan="垂直跨度的行数"
align=""
valign=""
bgcolor=""
bordercolor=""
bordercolorlight="亮边框的颜色"
bordercolordark="暗边框的颜色"
background="">
</td>
// 表格结构
<thead></thead> // 表首标记 包裹<caption>
<tbody></tbody> // 表主体标记 包裹<tr>
<tfoot></tfoot> // 表尾标记 包裹<td> <tr>
- 超链接
- 内部链接 – 与自身网站页面有关的链接
- 外部链接
// 内部链接
<a href="链接地址" target="">
// 锚点 用于跳转，也在本页面也可以在其他页面
<a name="锚点名称"></a> // 建立锚点
<a href="#锚点名称></a> // 链接锚点
<a href="index.html#锚点名称"></a> // 链接到index.html 锚点
// 外部链接
<a href="http://www.baidu.com / mailto:邮件地址 / ftp://... "></a>
多媒体
滚动：
<marquee>文字、图片、表格...</marquee>
<marquee
direction="up / down / left(默认) / right" 滚动方向
behavior="scroll(默认，循环滚动) \\ slide(滚动一次) \\ alternate(来回滚动)" 滚动方式
scrollamount="3" 滚动速度
scrolldelay="200" 滚动延迟
loop="12" 滚动次数
width=""
height="" 滚动范围
bgcolor=""
hspace=""
vspace="" 空白空间
>
</marquee>
多媒体文件:
<embed src="" width="" height=""></embed>
背景音乐:
<bgsound src="" loop="循环次数/true(无限循环)">
- 框架结构 ： 将两个或两个以上的网页组合起来，在同一个窗口中打开的网页结构。
<frameset
rows="40%,60%" // 水平分割窗口 cols="123,312,41" // 垂直分割窗口
frameborder="yes/1 no/0" 边框
border="1"
bordercolor=""
framespacing="1"
>
<frame src="top.html" name="mainFrame" id="mainFrame"/>
<frame src="foot.html" name="footFrame" id="footFrame"/>
</frameset>
<noframes>
浏览器不支持框架效果
</noframes>
// 嵌套分割
<frameset
rows="80,*" // 水平分割窗口
cols="*" // 垂直分割窗口
frameborder="yes/1 no/0" 边框
border="1"
bordercolor=""
framespacing="1"
>
<frame src="top.html" name="mainFrame" id="mainFrame"/>
<frameset cols="80,*" >
<frame src="left.html" name="leftFrame" id="leftFrame"/>
<frame src="right.html" name="rightFrame" id="rightFrame"/>
</frameset>
// frame
<frame
src=""
name=""
noresize // 禁止调整窗口尺寸
marginwidth="边框与页面内容水平距离"
marginheight="边框与页面内容垂直距离"
scrolling="yes / no / auto" // 是否显示滚动条
>悬浮框架
框架链接
- 表单 – 收集客户端信息
// 表单
<form
action="表单处理程序">
name="表单名称(不能含特殊符号和空格)"
method="get / post (传送方法)"
enctype="application/x-www-form-urlencoded(默认) / multipart/form-data (MIME编码方式)"
target="目标窗口打开方式">
</form>
// 插入表单对象 以下都有id元素，用来表示页面的唯一元素
<form >
姓名:
<input name="控件名称" type="text" value="文本字段的默认值" size="控件长度" maxlength="24" />
密码:
<input name="" type="password" value="" .. />
单选按钮
<input name="" type="radio" value="" checked="checked"/>
复选框
<input name="" type="checkbox" value="" checked="checked" />
普通按钮
<input type="submit" name="" value="单击关闭窗口" onclick="window.close()" />
重置按钮
<input type="reset" name="" value="重置" />
图像按钮
<input type="image" src="" name="" />
隐藏按钮 -- 用于传输对用户不可知数据
<input type="hidden" name="" value="" />
文件域
<input type="file" />
// 菜单
<select name="下拉菜单名称">
<option value="选项值" selected="selected">选项1</option>
<option value="选项值">选项2</option>
</select>
// 列表
<select name="" size="" multiple="multiple">
<option value="选项值">选项1</option>
</select>
// 文本域
<textarea name="" cols="列数" rows="行数">
</textarea>
</form>
- XHTML
作为HTML向XML的过渡
// XHTML的页面结构
//文档类型声明
<!DOCTYPE html>
//<html>元素和名称空间
<html lang="zh-cn">
完全嵌套
id属性代替name属性
标签必须小写
属性必须双引号
以上是关于HTML小结的主要内容，如果未能解决你的问题，请参考以下文章
如何使用jQuery在元素的内部文本的最后一个单词周围包裹一个范围？