首页 > > 网页制作 > css >

HTML

2018-06-24 00:35:55来源：未知阅读 ()

标记

<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

文字区块的设置:

//禁止拖动：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	像素	左右两侧间距