HTML与CSS基础教程-优快云博客

一：HTML常用标签

<html></html> 创建一个HTML文档
<head></head> 设置文档标题和其它在网页中不显示的信息
<title></title> 设置文档的标题 
<img src=""/> 图片 
<form></form>表单  
<table></table>表
<tr></tr>行
<td></td>  列
<bgsound src=MID音乐档位址>背景音乐设定  
<h1></h1> 最大的标题         
<u></u> 下划线
<b></b> 黑体字    
<i></i> 斜体字    
<tt></tt> 打字机风格的字体
<cite></cite> 引用,通常是斜体        
<em></em> 强调文本(通常是斜体加黑体)
<strong></strong> 加重文本(通常是斜体加黑体)
<font size="" color=""></font> 文字
<BASEFONT></BASEFONT> 基准字体标记
<big></big> 字体加大
<SMALL></SMALL> 字体缩小        
<STRIKE></STRIKE> 加删除线
<CODE></CODE> 程式码          
<KBD></KBD> 键盘字
<SAMP></SAMP> 范例    
<VAR></VAR> 变量
<BLOCKQUOTE></BLOCKQUOTE> 向右缩排
<DFN></DFN> 述语定义
<ADDRESS></ADDRESS> 地址标记
<sup></SUP> 上标字    
<SUB></SUB> 下标字
<xmp></xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext></plaintext>固定宽度字体(不执行标记字符)
<listing></listing> 固定宽度小字体 
<font color=""></font>字体顏色
<font size=1></font>最小字體  
<font style ='font-size:100 px'></font>无限增大
<ins>...</ins>底线(表示插入文字)
<p></p>段落，会自动换行
<br>换行
<ol></ol> 创建一个标有数字的列表
<li> 放在每个列表项之前,若在<ol></ol>之间则每个列表项加上一个数字,
  若在<ul></ul>之间则每个列表项加上一个圆点
<div align=""></div> 块。用来排版大块HTML段落,也用于格式化表
<center></center> 水平居中
<a href="URL"></a> 创建超文本链接
<a name="name"></a> 创建位于文档内部的书签
<a href="#name"></a> 锚点。创建指向位于文档内部书签的链接，跳转到页面的某个地方，当然也可以跳转到另一个页面的某个地方。
<BASE> 文档中不能被该站点辨识的其它所有链接源的URL
<LINK> 定义一个链接和源之间的相互关系

<marqueee></marquee> 滚动字幕，中间也可加图片，滚动图片
behavior滚动方式 direction滚动方向  loop滚动次数 scrollamount速度 
scrolldelay两次滚动之间的延迟

onMouseOut="this.start()"  鼠标移出该区域继续滚动
onMouseOver="this.stop()"  鼠标移入该区域停止滚动

二：CSS常用语句

font-size 字体大小，单位px，pd
font-style 样式 oblique:偏斜体 italic:斜体 normal:正常
line-height 行高 normal:正常单位：PX,PD,
font-weight 粗细 bold:粗 lighter:细 normal
text-decoration 修饰 underline:下划线 overline:上划线 line-through:删除线 blink:闪烁
font-family 常用字体
background-color 颜色
background:url=”图片位置” no-repeat图片设置背景
background-attachment 滚动 fixed 固定 scroll 滚动
margin 外边距
padding 内边距
vertical-align 垂直对齐
border:width style color 边框大小，样式，颜色
border-style 边框样式 solid实线 dotted点线 dashed虚线
border-color 边框颜色
border-width 边框宽度
text-align 文字位置 center居中
position 定位 absolute 绝对定位，不会保留偏移前的位置； relative 相对定位，会保留偏移前的位置；static 默认
text-decoration:line-through; 加删除线
text-decoration: overline; 加顶线
text-decoration:underline; 加下划线
text-decoration:none; 删除链接下划线（比如a标签连接下划线）
cursor pointer 鼠标变成手
cursor:help 加个问号
a:link 超链接的默认显示样式
a:hover 鼠标悬停时的样式
a:active 鼠标点击不释放的样式
a:visited 访问后

animation 动画效果 @keyframes name{} 动画执行
tuansform rotate旋转 skew扭曲 scale缩放 translate移动 matrix矩形变形
transition

三：我遇到的问题：

1.定位(position)的理解不够深，经常不能准确使用absolute和relative。
2.各种div位置设置。图片位置大小比例。
3.使用百分比和使用像素时，使用百分比要定位（感觉有点同left，top等的使用），用像素可以不定位。
4.点击文字跳转到页面某处，鼠标悬停变色。由于列表使用的是table，所以鼠标悬停时整个table都变色了。
解决:之后把文字加入文字标签，而不是直接写在table里，然后对文字设置，再使用锚点进行跳转。具体问题直接百度。

web页面基础一