主体结构标签
<html></html>双标签
<head></head>
里面包含的标签 <title></title>
<meta></meta>
<link/>
<body></body>
--------------------------------------------
文本样式标签
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<sub></sub> 下标
<sup></sup> 上标
<font></font> 字符的字体face,大小等
-----------------------------------------------------
排版标签
<p></p> 段落
<br /> 换行
<hr /> 水平线
<div></div>
<span></span>
<pre></pre> 预排版标签
<h1></h1> 标题效果标签
.......
<h6></h6>
-------------------------------------------
列表标签
<ul></ul> 无序列表 <ul type=" "></ul>
<ol></ol> 有序列表 <ol type=" "></ol>
<dl></dl> 定义列表
-------------------------
常用快捷键的使用:
ctrl + a 全选
ctrl + c 复制
ctrl + v 粘贴
ctrl + x 剪切
ctrl + s 保存
ctrl + z 撤销
ctrl + y 回退
ctrl + j 复制当前行
ctrl + f 查找
ctrl + h 替换
F5 刷新
ctrl + f5 强制刷新
alt + tab 界面切换
win + d 回到桌面
tab 整体后退 在editplus中相当于4个空格
shift + tab 整体前移
--------------------------------------------------------------
字符实体
空格
> >
< <
& &
¥¥
版权 ©;
注册 ®;
X ×;
÷ ÷
字体修饰
<b></b>对字体进行加粗设置
<i></i>设置文本内容为斜体
<u></u>加下划线
<sub></sub> 下标
<sup></sup> 上标
<font></font>:
<pre></pre>预排版标记
iw
滚动的文字,也称“走马灯”
<marquee direction="up" behavior="scroll" width="200" height="200"></marquee>
<marquee></marquee>
1、语法格式
<marquee 属性=“属性值”>内容</marquee>
2、常用属性
width:控制走马灯的宽度
height:控制走马灯的高度
direction:控制运动的方向:
取值:
left向左运动
right向右运动
up向上运动
down向下运动
behavior
取值:
scroll(滚动,默认)
alternate(弹动)
slide(一次)
scrollamount:控制步长(每次移动的距离),单位:毫米,步长越大,每次移动的距离越多
scrolldelay:控制滚动一次需要的时间。单位:毫秒,时间越小,运动的越快。
loop 设置文本滚动循环的次数。-1无限循环
scrollAmount 设置文本每次移动的距离,数值越小,滚动越慢,默认6px
scrollDelay 决定文本两次移动之间的间隔时间,单位为微秒,时间越小,文本移动频率越高。
***********
hspace 水平页边距
Vspace 垂直页边距
head头 meta等
该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。
meta标签,http-equiv属性
content-type
功能:设定当前页面使用的字符集和语言;
用法:<meta http-equiv="content-type" content="text/html; charset=gb2312">
content-language(显示语言的设定)
功能:显示语言的设定
用法:<meta http-equiv="Content-Language" content="zh-cn" />
refresh(刷新)
功能:自动刷新,并指向新的页面
用法:<meta http-equiv=“refresh” content=“2;url=http://itcast.cn” />
Keywords(网页关键字)
功能:用来告诉搜索引擎你网页的关键字是什么。
用法:<meta name=“keywords” content=“关键字,关键字,关键字”>
description(网站内容描述)
功能:用来告诉搜索引擎你的网站主要内容。
用法:<meta name=“description” content=“网页内容描述信息">
描述设计规则:
网页描述为自然语言而不是罗列关键词(与keywords设计正好相反)
尽可能准确地描述网页的核心内容,通常为网页内容的摘要信息,也就是希望搜索引擎在检索结果中展示的摘要信息
网页描述的文字不必太多,一般不超过搜索引擎检索结果摘要信息的最多字数(100字以内)
robots(机器人向导)
说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引
content的参数有all,none,index,noindex,follow,nofollow。默认是all。
Index代表文件将被检索 follow代表页面上的链接可以被查询
举例:<meta name="robots" content="none">
author(作者)
说明:标注网页的作者
用法:<meta name=“author” content=“传智播客”>
Copyright(版权信息)
功能:说明网站版权信息
用法:<meta name=“copyright" content="信息参数">
---------------------------
<thead> <tbody><tfoot> 方便程序员记,但是没什么作用的
<caption></caption>表格标题
<th>表格头 类似<h1>的作用
Width:设置表格宽度
Height:设置表格的高度
Border:表格边线的粗细
Bordercolor:设置表格边框线的颜色
Align:设置表格的对齐方式:left左对齐 right右对齐 center居中对齐
bgColor:设置表格的背景色
background:URL 设置表格的背景图片
Cellpadding:内填充。设置文字和边框线的距离
cellspacing::外填充。
<tr>里套<table>
Align:水平对齐方式:Left向左 ,right向右 ,center居中
Valign:垂直对齐方式 top向上 bottom 向下middle居中<
<colspan> 跨列合并
<rowspan> 跨行合并
<table>
<caption>学生登记表</caption>
<thead>
<tr>
<th>
</th>
</tr>
<thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
</td>
</tr>
</tfoot>
</table>
-----------------------------------
<a>
按使用对象的不同分为:
文本超链接,图像超链接,E-mail链接,锚点链接,多媒体文件链接,空链接等。
按URL的不同
绝对URL链接:
网站的完整路径 http://www.sina.com.cn
相对URL链接:本站点的不同页面上去
书签:链接到不同网页的不同部分。
属性 值 含义
href URL 链接的目标URL。
name name名 为当前锚定位设置一个名称,以便它能够被其他链接所定位。
target
_blank在新窗口中打开目标网页
_self在当前窗口中打开目标网页
_top整个浏览器窗口
_parent多框架结构中父窗口
定义href指向的页面打开位置
链接远程目标:通过URL地址链接到远程目标。
链接本地页面:可以通过相对路径或者绝对路径链接本地页面。相对路径:指相对于当前页面位置的路径./:表示当前页面所在的目录../:表示当前页面所在的上一级目录
绝对路径:
绝对路径指当前站点中确切的路径,一般以”/”开始
例如:<a href=“/admin/index.php”>后台首页</a>
锚点链接同一页面不同位置
当网页很长时,可以使用锚点在页面中定义一些点,通过超链接可以直接跳转到锚点。定义锚点:1,<a name=“top”>文档顶部</a>
链接到锚点:<a href=“#top”>返回顶部</a>
2,<a name=“top”>文档顶部</a>
链接到锚点:<a href=“文件名#top”>返回顶部</a>
---------------------------------
img src
vspace
-----------------------------------
map图像映射
<img src=“1.jpg” usemap=“#Map” /><map id=“Map” name=“Map”>
<area shape=“热点形状” coords=“坐标” href=“链接” alt=“替代文字” />
</map>
==============
内联元素(行内元素)内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易,也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
---------------------------
框架的制作步骤
声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<frameset>和<body>不能共存
1设计框架的结构 划分窗口
<frameset rows="80,*,80" frameborder="no" border="0" framespacing="0">
<frame src="file:///E|/yuefu/UntitledFrame-2" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />
scrolling="No" 不能滚动 noresize="noresize" 不能拉框
<frame src="file:///E|/yuefu/Untitled-1" name="mainFrame" id="mainFrame" />
<frame src="file:///E|/yuefu/UntitledFrame-3" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" />
</frameset>
<noframes><body>如果框架没作用,则告诉客户没作用的提示
</body>
</noframes></html>
2创建每一个窗口的页面
target
<a href="url" targe="位置的name名">
定义href指向的页面打开位置
3,分别给每个窗口写html
----------------------------------------------
a:link 初次
a:visited 放在上面
a:hover 点下激活
a:active 访问过
------------------------------------------------------------
<a href="#" target="blank">
空链接1.<a href="#"/>
2.<a href="javascript:void(0)">空链接</a>
target
_blank在新窗口中打开目标网页
_self在当前窗口中打开目标网页
_top整个浏览器窗口
_parent多框架结构中父窗口
定义href指向的页面打开位置
---------------html5-------------------------------------
<label><input type="email" /></label>
email 邮箱
url 地址
number 数字
range 音量调节
color 颜色
date 日期
month 月份
week 星期