html总结

主体结构标签

<html></html>双标签

里面包含的标签 <title></title>

<link/>

--------------------------------------------

文本样式标签

<b></b> 加粗

<i></i> 斜体

<u></u> 下划线

<sub></sub> 下标

<sup></sup> 上标

<font></font> 字符的字体face，大小等

-----------------------------------------------------

排版标签

<p></p> 段落

<br /> 换行

<hr /> 水平线

<pre></pre> 预排版标签

<h1></h1> 标题效果标签

.......

-------------------------------------------

列表标签

<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 整体前移

--------------------------------------------------------------

字符实体

空格  

> >

< <

& &

￥¥

版权 &copy；

X &times；

÷ &divide

字体修饰

<b></b>对字体进行加粗设置

<i></i>设置文本内容为斜体

<u></u>加下划线

<sub></sub> 下标

<sup></sup> 上标

<font></font>:

<pre></pre>预排版标记

滚动的文字，也称“走马灯”

1、语法格式

2、常用属性

width：控制走马灯的宽度

height：控制走马灯的高度

direction：控制运动的方向：

取值：

left向左运动

right向右运动

up向上运动

down向下运动

behavior

取值：

scroll(滚动，默认)

alternate(弹动)

slide(一次)

scrollamount：控制步长（每次移动的距离），单位：毫米，步长越大，每次移动的距离越多

scrolldelay：控制滚动一次需要的时间。单位：毫秒，时间越小，运动的越快。

loop 设置文本滚动循环的次数。-1无限循环

scrollAmount 设置文本每次移动的距离，数值越小，滚动越慢，默认6px

scrollDelay 决定文本两次移动之间的间隔时间，单位为微秒，时间越小，文本移动频率越高。

***********

hspace 水平页边距

Vspace 垂直页边距

head头 meta等

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

该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=“传智播客”>

功能：说明网站版权信息

用法：<meta name=“copyright" content="信息参数">

---------------------------

<thead> <tbody><tfoot> 方便程序员记，但是没什么作用的

<caption></caption>表格标题

<th>表格头类似<h1>的作用

Width:设置表格宽度

Height：设置表格的高度

Border：表格边线的粗细

Bordercolor：设置表格边框线的颜色

Align：设置表格的对齐方式：left左对齐 right右对齐 center居中对齐

bgColor：设置表格的背景色

background：URL 设置表格的背景图片

Cellpadding：内填充。设置文字和边框线的距离

cellspacing：：外填充。

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图像映射

</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设计框架的结构划分窗口

scrolling="No" 不能滚动 noresize="noresize" 不能拉框

</frameset>

<noframes><body>如果框架没作用，则告诉客户没作用的提示

</body>

</noframes></html>

2创建每一个窗口的页面

target

定义href指向的页面打开位置

3,分别给每个窗口写html

----------------------------------------------

a:link 初次

a:visited 放在上面

a:hover 点下激活

a:active 访问过

------------------------------------------------------------

空链接1.<a href="#"/>

2.<a href="javascript:void(0)">空链接</a>

target

_blank在新窗口中打开目标网页

_self在当前窗口中打开目标网页

_top整个浏览器窗口

_parent多框架结构中父窗口

定义href指向的页面打开位置

---------------html5-------------------------------------

email 邮箱

url 地址

number 数字

range 音量调节

color 颜色

date 日期

month 月份

week 星期