HTML 入门教程一[基础内容]

一、HTML的基本标签

网页的摘要信息

1）<title>标签

2）<meta>标签

使用该标签描述网页的具体摘要信息，包括文档内容类型，字符编码信息，搜索关键字、网站提供的功能和服务的详细描述等。<meta>标签描述的内容并不显示，其目的是方便浏览器解析或利于搜索引擎搜索，它采用“名称、值”对的方式描述摘要信息。

1、常用于布局的块级标签

1）有序列表标签<ol>...<li>

2）无序列表标签<ul>...<li>

3）定义列表标签<dl>...<dt>...<dd>

4）表格标签<table>

5）表单标签<form>

6）分区标签<div>

2、行级标签

1）图像标签<img>

2）超链接标签<a>

3）范围标签<span>

4）换行标签<br/>

5）输入框标签<input>

6）文本域标签<textarea>

3、语法

1）超链接：<a   href="链接地址"   target="目标窗口位置">链接文本或图像</a>

属性说明

target：指定链接在哪个窗口打开，常用的取值有 _self(自身窗口)、 _blank(新建窗口)

2）超链接的三类应用场合

页面超链接：A页到B页，最常用，用于网站导航

锚链接：A页甲位置到A页（本页）的已位置或A页甲位置到B页的已位置
实现步骤如下：

（1）在页面的已位置设置标记：<a   name  =  "marker">目标位置已</a>,"name"为<a>标签的属性，"marker"为标记名。

（2）在甲位置设置href属性值为"#标记名"，语法如下：

<a  href = "#marker" >当前位置甲</a>

<a href="anchor.html#star">明星专区</a>

功能性链接：在页面中调用其他程序功能，例如电子邮件、QQ等

<a  href="mailto:330553352@qq.com">站长信箱</a>

常用的特殊符号

特殊符号	字符实体
空格
大于号（>）	>
小于号（<）	<
引号（“）	"
版权符号（）	©

<input>元素的属性

属性	说明
type	指定表单元素的类型，可用的选项有text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称
value	指定表单元素的初始值
size	指定表单元素的初始宽度。如果type为text或password，则表单元素的大小以字符为单位；对于其它输入类型，宽度以像素为单位；
maxlength	指定可在text或password元素中输入的最大字符数，默认不做限制
checked	此属性只有一个值，为"checked",表示选中状态，如果不选中，则不需添加此属性

语法：

1）提交按钮：<input  type="image"  src="images/login.gif"/>
虽然"type"属性没有设置为"submit",但仍然具备提交功能

2）文件域：<form  action = "" method="post"  enctype="multipart/form-data"/>

3）只读：readonly = "readonly"

4）禁用：disabled="disabled"

二、表格的高级用法

1、表格标题：<caption>

2、表格表头：<th>

3、表格数据的分组标签：<thead>、<tbody>、<tfooter>

三、<frameset>框架集

1、如何实现窗口间的关联（关键在于设置超链接的"target"目标窗口属性）

1）在框架页面中，为右侧框架窗口添加"name"名称标识，例如rightframe.

<frame  src = "subframe/right.html" name="rightframe"/>

2）在左侧窗口对应的页面中，设置超链接”target“目标窗口属性为希望显示的框架窗口名，在右侧窗口显示即为：

<a  href="right.html"  target="rightFrame"> <img  src="images/reg.jpg"  alt="注册" /> </a>

target属性的取值

属性值	含义
_blank	在新窗口中打开链接
_self	在链接所在页面的自身窗口中打开链接
框架窗口名	在指定的框架窗口中打开链接
_parent	在父框架集中打开链接，如果不是框架网页，则含义同”_self“
_top	在顶级窗口即整个浏览器窗口中打开链接

四、文本及字体属性

常用的文本属性

属性名	含义	举例	应用场景
line-height	设置行高（即行间距），常用取值为25px、28px	line-height="25px"	布局多行文本
text-align	设置对齐方式，常用取值为left、right、center	text-align="center"	各种元素对齐
letter-spacing	设置字符间距，常用取值为3px、8px	letter-spacing="5px"	加大字符间间隔
text-decoration	设置文本修饰，常用取值underline（下划线）、none	text-decoration="underline"	加中划线、下划线等
white-space	规定如何处理空白，例如规定是否换行等，常用取值为nowrap（不换行）	white-space="nowrap"	文本溢出时不断行

常用的字体属性

属性名	含义	举例	应用场景
font	在一个声明中设置字体的所有样式属性	font：bold  12px  宋体	常用于字体样式的缩写
font-family	定义字体类型	font-family：宋体	定义字体样式
font-size	定义字体大小	font-size：12px	定义字体样式
font-weight	定义字体的粗细	font-weight：bold	定义字体样式

注意：
font：bold  12px  宋体
三种格式的顺序依次为：粗细--字体大小--字体类型

五、背景属性

常用的背景属性

属性	含义	举例
background	在一个声明中设置所有的背景属性	background：#ccc url(images/bg.png) repeat-x 20px -100px
background-color	设置背景颜色	background-color：#ccc
background-image	设置背景图片	background-image：url(images/bg.png)
background-repeat	设置背景的平铺方式	background-repeat：no-repeat
background-position	设置背景的出现的初始位置	background-position：20px - 100px

background-repeat属性对应的取值

平铺方式	含义	应用场景
repeat	横纵向都平铺，不填时的默认值	小方块图平铺构建整体背景
repeat-x	横向平铺	细长小图实现渐变效果
repeat-y	纵向平铺	小图背景实现特殊边框
no-repeat	背景图不重复平铺	大图做背景或使用偏移量控制

六、列表的常用属性

list-style类型

属性值	方式	语法实现（常用缩写）
none	去掉修饰符号	list-style：none
dise	实心圆（<ul>默认类型）	list-style：disc
circle	空心圆	list-style：circle
square	实心正方形	list-style：square
decimal	数字（<ol>默认类型）	list-style：decimal

七、超链接伪类

超链接伪类

伪类	示例	含义	应用场景
a:link	a:link{color:#999;}	未单击访问时的超链接样式	常用，超链接主样式
a:visited	a:visited{color:#333;}	单击访问后的超链接样式	需区分是否已被访问
a:hover	a:hover{color:#ff7300;}	鼠标悬浮其上的超链接样式	常用，实现动态效果
a:active	a:active{color:#999;}	鼠标单击未释放的超链接样式	少用，一般与link一致