您的位置：首页 > Web前端 > HTML

HTML小结

2016-05-28 21:09 295 查看

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.asp[/code] 
body
<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
相关文章推荐
新的分享
章节导航