首页 > 代码库 > HTML
HTML
标记
<hr width=”80%” size="10px" noshade>//水平线长80% 线粗10px 实体线
字符控制标记
<b>…</b> 粗 <i>…</i> 斜 <s>…</s> 删 <u>…</u> 下划
<tt>…</tt> 电报 <sub>…</sub> 下标 <sup>…</sup> 上标 <address>…</address> 地址
<big>…</big> 大字 <del>…</del> 删除 <ins>...</ins> 修改 <samll>…</small> 小字 <strong>…</strong> 加强语气(加粗) <em>...</em> 加强语气(倾斜)
格式化
<pre>…</pre>让书写的文字格式化！
引用文本
<blockquote cite="url">...</blockquote>
<table> 标签下的属性
属性名称 属性值 说明
border 像素 设置表格的边线
cellspacing 像素/百分比 存储格框线宽度
cellpadding 像素/百分比 数据与框线的距离
width 像素/百分比 表格宽度
height 像素/百分比 表格厚度
align left 表格往左靠(默认)
center 表格往中靠
right 表格网右靠
bgcolor 英文/十六 表格的背景颜色
background URL 表格的背景图片
summary 字符串 用来描述表格数据说明
bordercolor 英文/十六 边框的颜色
bordercolorlight 同上 边框的亮色
bordercolordark 同上 边框的暗色
<table> 标签下的边框设置（该属性必须在 border的属性值不为0 的状态下!）
属性名称 属性值 说明
frame void 不要显现表格的边线
above 只要显现出表格的上边线
below 只显现出表格的下边线
hsides 只显示表格的上下边线
vsides 只显现表格的左右边线
lhs 只显现表格的左边线
rhs 只显现表格的右边线
border/box 会显现出表格的所有边线
rules rows 只显示出横行的格框线
cols 只显示出直行的格框线
all 显示全部格框线
groups 表示列组合水平部分
none 不显示任何格框线
（表格单边框：border=1;border-collapse:collapse）
<tr><th><td>标签下的常用属性
属性名称 属性值 说明
width 像素/百分比 宽
height 像素/百分比 高
bgcolor 英文/十六 数据栏的颜色
align(水平方向) left 数据靠左
center 数据靠中
right 数据靠右
valign(垂直方向) top 数据靠上
middle 数据靠中
bottom 数据靠下
nowrap 无 在单元格中换行
拆分与合并单元格
属性名称 属性值 说明
colspan 数字 向两边扩展栏位
rowspan 数字 向下扩展栏位
直列化格式：<colgroup>….</colgroup>
属性名称 属性值 说明
align left 靠左
center 靠中
right 靠右
valign top 靠上
middle 靠中
bottom 靠下
span 数字 直列数目
width 像素/百分比 宽度
个别直列设置
格式:<col>功能完全和<colgroup>一样.
表格的标题：
<table>
<caption>….</caption>
</table>
<caption>下的属性值有:
属性名称 属性值 说明
align top 标题在表格上方
bottom 标题在表格下方
为网站添加图标
<link rel="shortcut icon" href="http://www.mamicode.com/favicon.ico" type="image/x-icon">
超链接的基本格式
格式:
scheme://host[:post]/path/filename
scheme指的是 http,ftp,file,mailto,news,gopher,telnet 七种
host 指的是 IP 地址或计算机名称
post 指的是服务器端口
path 指的是文件路径
filename 指的是文件名
<a href=scheme://host[:post]/path/filename >…</a>
超链接的种类
1. http 声明 <a href=http://www.163.com/images/logo.htm>网易 logo</a>
2. file 声明 <a href=file:///e/images/img.jpg>图片</a>
3. ftp 声明 <a href=ftp://192.168.1.44/>进入</a>
4. mailto 声明<a href=mailto:sctnl@163.com>E-MAIL</a>
书签的链接
瞄点<a name=”ind”>…</a>或<a id=”ind”>…</a>
链接点<a href=http://www.mamicode.com/”#ind”>… 别的网页的书签项目链接点…
为链接创建键盘快捷键
accesskey="w" (Alt+w) (Ctrl+w)
为链接设置制表符次序
tabindex="n"
表单的功能结构：
主标记结构：<from>…</from>
属性 值 说明
name 字符串 给这个表单起个名字
method get/post 表单的传输方式
action url 传输目标
文本栏、密码栏、隐藏栏
文本栏：<input type=”text” name=”栏位名称” value=http://www.mamicode.com/”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly>
密码栏：<input type=”password” name=”栏位名称” value=http://www.mamicode.com/”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly>
隐藏性栏位：<input type=”hidden” name=”栏位名称” value=http://www.mamicode.com/”栏位值”>
复选栏、单选栏
多重勾选栏位 ：<input type=”checkbox” name=” 栏位 称 ” value=http://www.mamicode.com/” 内定值” checked disabled>
单选栏位 :<input type=”radio” name=” 栏位名称 ” value=http://www.mamicode.com/”内定值 ” checked disabled>
窗体栏位、区块栏位
窗体选项栏位设置:
<select name=”栏位名称” size=”数字” >
<option value=http://www.mamicode.com/”选项值” selected>…
<option value=http://www.mamicode.com/”选项值”>…
<option value=http://www.mamicode.com/”选项值”>…
</select>
//分组<optgroup label="分组名称"></optgroup>
//多选 multiple
文字区块的设置:
<textarea cols=”设置长度” rows=”设置宽度” placeholder="内定值" autofocus disabled form>………</textarea>
//禁止拖动：resize:none; //autofocus:页面加载自动获取焦点 //form：文本所属表单
按钮、图像按钮
按钮设置: <input type=”submit” value=http://www.mamicode.com/”按钮中显示的文字”>
<input type=”reset” value=http://www.mamicode.com/”按钮中显示的文字”>
按钮图像:<button name=”栏位名称” type=”图象形态”>
<img src=http://www.mamicode.com/”URL”>
</button>
图像按钮:<input type="image" src="http://www.mamicode.com/url" alt="文本">
允许上传文件
上传栏位:<input type="file" name="file">
表单加上外框和标题
外边框:<fieldset>...</fieldset>
标题:<legend>...</legend>
自动展示网页内容：
格式：<meta http-equiv=”refresh” content=”time;URL”>
1. meta 文件头声明
2. http-equiv=”refresh” 表示网页要重新下载显示
3. content=”time;URL” time 表示秒数，URL 网页显示内容
例：<meta http-equiv=”refresh” content=”3;url=index.html”>
如何让别人找到你的网页：
<meta>下的属性：
属性名称 属性值 说明
name author 描述作者资料
description 描述网页的内容
keywords 关键字，多个可用逗号隔开
generator 描述网页是通过那种软件产生
revised 描述网页的版本
others 可设置其他网页信息
content 字符串 配合 name,http-equive 设置
例：<meta name=”author” content=”sctnl”>
<meta name=”description” content=”这是我的个人网站”>
<meta name=”keywords” content=”音乐，动漫，博客”>
<meta name=”generator” content=”sublime_text”>
<meta name=”revised” content=”html4.01”>
<meta name=”others” content=”这个我第一个网站，网站的主要内容有动漫，音乐，文章，博客等等，欢迎大家光临！”>
活动文字： <marquee> … </marquee>
属性名称 属性值 说明
behavior scroll 从右到左移动
slide 从右到左停止
alternate 两边移动
direction left 向左移动
right 向右移动
up 向上移动
down 向下移动
bgcolor 英文/十六 背景颜色
height 像素/百分比 高度
width 像素/百分比 宽度
scrollamount 数字 播放的速度
vspace 像素 左右两侧间距
hspace 像素 上下两侧间距
HTML