标记

<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                像素/百分比                       宽度

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                  描述网页是通过那种软件产生
                             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                    像素                           左右两侧间距

demo:https://github.com/sctnl/html.git

posted on 2016-11-04 13:50  再美的梦。  阅读(342)  评论(0编辑  收藏  举报