标记
<hr width=”80%” size="10px" noshade>//水平线长80% 线粗10px 实体线
字符控制标记
<b>…</b> 粗 | <i>…</i> 斜 | <s>…</s> 删除 | <sub>…</sub> 下标 |
<strong>…</strong> 加强语气(加粗) | <em>...</em> 加强语气(倾斜) | <del>…</del> 删除 | <sup>…</sup> 上标 |
<big>…</big> 大字 | <tt>…</tt> 电报 | <address>…</address> 地址 | |
<samll>…</small> 小字 | <u>…</u> 下划 | <ins>...</ins> 修改 |
格式化
<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 | 像素/百分比 | 宽度 |
bgcolor | 英文/十六 | 数据栏的颜色 |
个别直列设置
格式:<col>功能完全和<colgroup>一样.
表格的标题:
<table>
<caption>….</caption>
</table>
<caption>下的属性值有:
属性名称 | 属性值 | 说明 |
align | top bottom | 标题在表格上方 标题在表格下方 |
为网站添加图标
<link rel="shortcut icon" href="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=”#ind”>…</a> 别的网页的书签项目链接点<a href=”index.htm#ind”>…</a>
为链接创建键盘快捷键
accesskey="w" (Alt+w) (Ctrl+w)
为链接设置制表符次序
tabindex="n"
表单的功能结构:
主标记结构:<from>…</from>
属性 | 值 | 说明 |
name | 字符串 | 给这个表单起个名字 |
method | get/post | 表单的传输方式 |
action | url | 传输目标 |
文本栏、密码栏、隐藏栏
文本栏:<input type=”text” name=”栏位名称” value=”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly>
密码栏:<input type=”password” name=”栏位名称” value=”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly>
隐藏性栏位:<input type=”hidden” name=”栏位名称” value=”栏位值”>
复选栏、单选栏
多重勾选栏位 :<input type=”checkbox” name=” 栏位 称 ” value=” 内定值” checked disabled>
单选栏位 :<input type=”radio” name=” 栏位名称 ” value=”内定值 ” checked disabled>
窗体栏位、区块栏位
窗体选项栏位设置:
<select name=”栏位名称” size=”数字” >
<option value=”选项值” selected>…
<option value=”选项值”>…
<option value=”选项值”>…
</select>
//分组<optgroup label="分组名称"></optgroup>
//多选 multiple
文字区块的设置:
<textarea cols=”设置长度” rows=”设置宽度” placeholder="内定值" autofocus disabled form>………</textarea>
//禁止拖动:resize:none; //autofocus:页面加载自动获取焦点 //form:文本所属表单
按钮、图像按钮
按钮设置: <input type=”submit” value=”按钮中显示的文字”>
<input type=”reset” value=”按钮中显示的文字”>
按钮图像:<button name=”栏位名称” type=”图象形态”>
<img src=”URL”>
</button>
图像按钮:<input type="image" src="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 others content revised | 描述作者资料 描述网页的内容 关键字,多个可用逗号隔开 描述网页是通过那种软件产生 可设置其他网页信息 字符串 配合 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 | 像素 | 左右两侧间距 |
demo:https://github.com/sctnl/html.git