一 超链接
1、爱恨原则
每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母)。
爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。定义A链接样式的正确的顺序:a:link、a:visited、a:hover、a:active。
a:link, //定义正常链接的样式;
a:visited, //定义已访问过链接的样式;
a:hover, //定义鼠标悬浮在链接上时的样式;
a:active, // 定义鼠标点击链接时的样式。
a:hover 和 a:visited 链接的状态(颜色、下划线等)一般 应该是相同的。
a:active不能设置有无下划线(总是有的)。
<style type="text/css">
a:link{
color:red;
text-decoration:underline;
}
a:visited {
color:white;
text-decoration:none;
}
a:hover {
color:blue;
text-decoration:underline;
}
a:active {
color:yellow;
text-decoration:none;
}
2、a 标签属性
href = “ 链接到的地址 ”
text-decoration:none; //去掉下划线
target = “ _blank ” //在新页面打开
title = “ 链接的附加提示信息 ” //隐藏的部分显示
common //一般属性
accesskey //代表一个链接的快捷键访问方式
charset //指定了链接到的页面所使用的编码方式,比如UTF-8
coords //使用图像地图的时候可以使用此属性定义链接的区域,通常是使用x,y坐标
hreflang //指出了链接到的页面所使用的语言编码
rel //代表文档与链接到的内容(href所指的内容)的关系
rev //代表文档与链接到的内容(href所指的内容)的关系
shape //使用图像地图的时候可以使用shape指定链接区域
tabindex //代表使用"tab"键,遍历链接的顺序
type //代表链接的MIME类型
title
// 鼠标放入图片上显示文字
//显示全部文字(文字超出隐藏)
placeholder = " 文字 " ;
// 输入时文字消失
二 数列
1、自定义列表
<dl> //列表开始
<dt> </dt> // 列表项的开始
<dd> </dd> // 列表项的定义
<dt> </dt>
<dd> </dd>
</dl>
2、列表中重要的样式
<ul dtyle="list-style:none" > </ul>
//list-style:none 去掉无序列表前的黑点
<li style="float:left; padding-left:10px ">
//float: left 横排
//padding-left: 10px 相距10 个像素
//用 margin 或 padding 进行左右上下的调整
三 行内元素和块级元素
(一)块级元素
1、块级元素的特征
(1)块级元素独占一行,之后的元素也只能另起一行,相邻的两个块级元素不能共用一行。
(2)块级元素其元素的高度,宽度,行高和顶部底部边距都是可以设置的。
(3)元素的宽度如果不设置的话,默认为父元素的宽度。
(4)块级元素对应的属性为display:block
2、常见块级元素
<address> <article> <p>
<aside> //定义内容之外的内容.可作为标题的解释内容或副标题. 不会自动缩进
<audio> //音频标签
<blockquote> //定义较长的引用内容,有首行缩进。
<canvas> //绘图标签 。
<caption> //定义表格标题,
<dd> //表格中的项目描述
<div> //定义文档流中小结,盒子模型标签 。
<dl> //定义列表标签。
<dt> //定义列表中的项目标题
<details> //定义元素的细节
<fieldset> //定义单中元素的边框
<figcaption> //定义figure元素的标题,
<figure> //定义媒介内容的分组,以及标题。
<footer> //定义section 或page的页脚
<form> //表单
<h1>-<h6> //定义html标题
<header> <hr> //定义水平线
<legend> //定义fieldset元素的标题
<li> //定义列
<menu> //定义列表或菜单 所有主流浏览器均不支持 menu 元素。
<meter> //定义预定义范围内的度量
<nav> //定义导航
<noframes> //定义针对不支持的框架的用户的替代内容
<noscript> //定义针对不支持客户端脚本的用户的替代内容
<ol> //定义有序列表,
<output> //定义输出的一些类型
<pre> //预格式标签
<section> //部分段落标签
<table> //表格
<tbody> //表格主内容
<td> //表格列
<tfoot> //脚注标签
<th> //表格表头标签
<thead> //表格表头内容标签
<time> //日期标签
<tr> //表格行标签
<ul> //无序列表标签
(二)行级元素
1、行级元素的特征
(1)可以与其他元素共用一行,不必另起一行。
(2)行级元素的高度,宽度,顶部,底部的边距不能设置。
(3)元素的宽度就是它包含的文字图片的宽度,不可改变。
(4)行内元素对应的属性为display :inline
2、常见的行级元素
<a> <abbr> //缩写标签
<acronym>//定义只取首字母的缩写
<b>//加粗
<bdo>//文字方向
<big>//大号文本
<br>//简单的折行
<button>//按钮
<cite>//引用
<code> //代码标签
<command> //命令按钮
<dfn> //项目描述标签,尽量少用
<del> //定义删除文本
<em> //定义强调文本
<i>//斜体
<img>//定义图像
<input>//定义输入
<kbd>//定义键盘
<label>//的标注
<mark>//定义有记号的文本
<pregress>//定义任何类型的任务的进度
<q>//定义短应用
<samp> //计算机代码样本
<select> //下拉列表
<small> //小号文本
<span> //文档节
<strong> //强调文本标签
<sub> //定义下标文本
<sup>//上标文本
<textarea> //文本框
(三)行级元素和块级元素的相互转换
//块级元素===>行级元素
display:inline
//将行级元素===>块级元素。
display:block
//将元素设置为块-行级元素。
display:inline-block