html+css基础 - 个人备忘录

//======================html部分===================//

表现内容
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

创建一个css链接
<link rel="stylesheet" type="text/css" href="css/css.css" />

图片标签
<img src="img.png" alt="图片名" title="鼠标放上去 他就显示" />
//图片是内联元素,同时是 内联替换元素,替换元素是能设置宽高的
//可用display转换成块状元素 来消除图片间距.

最外面的div
<div id="container"></div>

背景图片
<body background="你的背景图片地址"></body>

注释语法
<!--注释的内容-->

滚动标签
<marquee> </marquee>
  direction 表示滚动的方向,值可以是left,right,up,down,默认为left
  behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
  loop 表示循环的次数,值是正整数,默认为无限循环
  scrollamount 表示运动速度,值是正整数,默认为6
  scrolldelay 表示停顿时间,值是正整数,默认为0,单位是毫秒
  valign 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle
  align 表示元素的水平对齐方式,值可以是left,center,right,默认为left
  bgcolor 表示运动区域的背景色,值是16进制的RGB颜色,默认为白色
  height、width 表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度
  hspace、vspace 表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。
  onmouseover=this.stop() onmouseout=this.start() 表示当鼠标移上区域的时候滚动停止,当鼠标移开的时候又继续滚动。

输入框
<input type="text" name="pin" maxlength="25" style = "width:400px,height:200px"/></p>

在图片上添加文字
第一种方法:
添加一个DIV,采用绝对定位,图片所属DIV为基准
<div style="position:relative;width:100px;height:100px;">
   <img src="" alt="注释" />
   <div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">
       文字
   </div>
</div>
第二种方法:图片作为背景图片
<div style="background:url(abc.jpg) no-repeat left top;">
   wenzi
</div>

Html插入视频
<embed src="url" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"></embed>

简单的下拉列表
<select name="cars">
<option value="volvo">选项1</option>
<option value="saab"  selected="selected" (用来调默认)>选项2</option>
<option value="fiat">选项3</option>
<option value="audi">选项4</option>
</select>

表单
<form action="信息发送的地址"  method="post" (隐藏提交信息)>
<input type="text" name="username" value="默认" />                        用户名
<input type="password" name="password" />                    密码
<input type="radio" name="xingbie" value="男" checked="checked" (用来调默认) /> 单选框
//value 是值 给后台看的
<input type="checkbox" name="aihao" value="排球" />           复选框
<input type="file" name="touxiang" />                         上传文件
<input type="hidden" name="yincangIP" value="192.168.1.1" />      隐藏域
//这个例子是隐藏了IP地址
<input type="submit" name="tijiao" />                          提交
</form >
//name 的作用是让后台区分数据

大文本框
<textarea name="intro">文本(默认值)</textarea>
overflow : visible | auto | hidden | scroll
visible :  默认值。不剪切内容也不添加滚动条。假如显式声明此默认值, 对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 
auto :    在必需时对象内容才会被裁切或显示滚动条 
hidden :  不显示超过对象尺寸的内容 
scroll :   总是显示滚动条

表格
<table>
<tr> //行
<td>1</td>  //列
</tr>
<tr colspan="4">
//colspan 合并列
<td rowspan="3">2</td>
//rowspan 合并行
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>

内联元素
<span class=” ”>行内元素 只在行内发挥作用 不像div是块状元素</span>

html图片按钮
<input name="imgbtn" type="image" src="login_08.gif" width="50" height="35" border="0">

head部分
  <title>网站标题 - Admin10000.com </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Author" content="网页作者" /> 
<meta name="Copyright" content="网站版权" /> 
<meta name="keywords" content="网站关键字" />
<meta name="description" content="网站描述" />
<link rel="Shortcut Icon" href="网站.ico图标路径" />
<link type="text/css" rel="stylesheet" href="CSS文件路径" />
<script type="text/javascript" src="JS文件路径"></script>

框架集
需要先将规范改为框架型 frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
然后将body去掉后, 写上下面的
<frameset rows="200px , *">     (rows="200px , *" 表示将整个页面分成2部分 第一部分200px高,剩下的都给第二部分.  *  表示剩下的都给另一部;rows表示行(指行高) )

<frame src="a.html">名字</frame>
> 这里是第一部分 引入了a.html页面

<frameset cols="30% , *">       (cols表示列)
  \
<frame src="b.html" name="zuo"></frame>
} 这里是第二部分
<frame src="c.html" name="you"></frame>
  /
</frameset>  /

</frameset>

-------------------------b.html页面中-------------------------------------------------
| <a href=" " target="you" >链接到c.html,并在右侧显示出来</a>
|
-------------------------------------------------------------------------------------------

标题标签
<h1>title1</h1>
<h2>title2</h2>
<h3>title3</h3>
<h4>title4</h4>
<h5>title5</h5>
<h6>title6</h6>
//标题标签h1-6系列,表示1-6号标题

段落标签
<p>段落标签</p>

无序列表 ul
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

有序列表 ol
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>

链接
a标签
<a href="地址" target="_blank" title="鼠标放上来显示"></a>
[target="_blank" 在新网页中打开]
a标签去掉下划线
a{
text-decoration:none;
}
或者把这个属性分别加到a标签下,
a:link{
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:active{
text-decoration:none;
}
锚点
<a href="index.html#名字">锚点</a>
<a name="名字"></a>
[一般用法: index.html#名字 ]

label标签
<label><input type="checkbox" />点这里也可以 </label>

//======================CSS部分=====================//
<style>
背景颜色
background: red  orange   yellow   green  indigo  blue  purple  pink  violet   black  white   gray    transparent
赤    橙      黄        绿     青     蓝     紫     粉   紫罗兰     黑    白     灰色        透明

背景颜色
body{

}

背景图片
body{
background-image:url(img.png);
background-repeat:repeat-x;
在 x 轴上铺开
background-repeat:repeat-y;
在 y 轴上铺开
background-repeat:no-repeat;
不重复
}

大图片做背景
{Width:50px;  } div的宽
{Height:50px;}
div的高
background-position:X值 Y值 
以左上角为原点 分别 向右 和向下 X Y值为正, 反之像素则为负
{background-position:100px 200px;}
{padding: 10px;}
//用一句做背景
{background:transparent url(img.png) no-repeat 100px 200px;}

浮动
float:left/right;

定位
position: relative;   相对定位
//是指在其正常的位置上,偏移某些像素.
top:0px;  
right:0px;  //想怎么移动就写哪个方向
bottom:10px;
left:10px;

position:absolute;   绝对定位
//是指在其父元素的位置上,偏移某些像素.
top:0px;
right:0px;  //想怎么移动就写哪个方向
bottom:10px;
left:10px;
//用绝对定位时,父元素要有 position:relative; 属性才行,否则将依据父的父的父的父的父的.....body.
绝对定位相当于漂浮在父元素上面的,遮挡住了父元素的一部分.
如果再来一个子元素,就会遮挡住原来的子元素,这时可以调节高度来决定谁遮挡住谁.

z-index:1000;      高度   (没有单位)

CSS距离
margin:10px 20px 30px 40px;
4个值是   是指上  右  下  左  4个方向的距离
margin:0 auto;
2个值是   是指 (上下)    (左右)   一起控制  
那么  margin:0 auto;的意思  就是 上下距离是0   左右距离自动   也就是说  是居中的意思!

文字居中
text-align: center;

清除浮动
clear: left/right/both
.clr{
width: 0px;
height:0px;
clear: both;
}

边距
外边距 margin-top/right/bottom/left:
//上右下左
内边距 padding:

边框
border: 20px solid/dashed/dotted green;
//边框宽  20px    实线/虚线/点线/..等 可以查手册   green  还可以设置单条边的边框

去掉点:
li{list-style:none};

控制段落
段落缩进:  text-indent:20px;
文字方向:  text-align: center;
//居中
文字装饰线:  text-decoration:underline;
//下划线 overline;//上划线 line-through;//删除线
字母间距:  letter-spacing:10px;

文字控制
颜色控制:  {color:blue;}
字型:  {font-style:italic;}
//斜体
文字粗细:  {font-weight:bold;}
//粗体
文字大小:  {font-size:15px;}
行高:  {line-height:20px;}
字体:  {font-family:"SimHei";}
//黑体 font-family:‘微软雅黑‘,‘黑体‘,sans-serif;
(如果用一行写,必须按照下面的顺序写属性)
font-family:‘New Times‘,‘新宋‘,‘宋体‘,serif;
用一行写:  {font:blue italic bold 15px/20px "SimHei";}

表格控制
table{
border: 1px solid blue;
border-collapse: collapse;
//破裂融合  消除表格间距
border-collapse: separate;
//独立(默认)
border-spacing: 20px;
//设置边框间距
}

css伪类
a:link {color: #FF0000}             /* 未访问的链接 */
a:visited {color: #00FF00}          /* 已访问的链接 */
a:hover {color: #FF00FF}            /* 鼠标移动到链接上 */
a:active {color: #0000FF}           /* 选定的链接 */
必须按照以上顺序: LVHA
a:link 可以简写为 a

CSS画圆角
{border-radius:5px;}  (数字为圆的半径)

内联与块状的转化
{display:block;}
//内联转块状 可用于消除图片之间的距离
{display:inline;}
//块状转内联
{display:none;}
//隐藏元素

利用行高使字体竖直居中
{line-height:10px;}
//行高

溢出处理
{overflow:visible;}
//默认溢出
{overflow:hidden;}
//隐藏 它还可以解决IE的一个BUG,在IE下控制小的元素不好,然后就用hidden把多余的隐藏起来.
{overflow:scroll;}
//滚动框
{overflow:auto;}
//内容多了再加滚动条

阴影
文字: {text-shadow:5px 5px 0px rgba(0,0,0,0.5);
}
div: {box-shadow:5px 5px 0px rgba(0,0,0,0.5);}

透明度
{opacity:0.3}

</style>
//=========================注意事项=================================//

margin重叠现象研究
相邻的普通元素,上下边距,并非简单的相加,
而是取其中较大的边距值.

IE BUG 
双倍margin bug   解决方案 在CSS中添加样式   _display:inline;

尺寸的表示
ex (x-height,字母 "x" 的高度)
cm (厘米,1厘米=10毫米)
mm (毫米)
pt (点,1点=1/72英寸)
pc (帕,1帕=12点)
%  还可以百分比来表示
em 是相对大小,是指其父元素中的一个‘M‘大小,可以理解为是父元素字体大小的em倍

字符实体
一般格式: & + 实体名 + ;
空格 &nbsp;   
< 小于号 &lt; < 
> 大于号 &gt; > 
& 和号 &amp; & 
" 引号 &quot; " 
‘ 撇号  &apos; (IE不支持) ' 
¢ 分 &cent; ¢ 
£ 镑 &pound; £ 
¥ 日圆 &yen; ¥ 
§ 节 &sect; § 
© 版权 &copy; © 
® 注册商标 &reg; ® 
× 乘号 &times; ×

÷ 除号 &divide; ÷

时间: 2024-10-03 13:20:22

html+css基础 - 个人备忘录的相关文章

蓝鸥零基础学习HTML5—html+css基础

蓝鸥零基础学习HTML5-html+css基础 一.课程目标 1.了解前端开发职位:2.掌握常用标签以及语义及用法:3.掌握常用css的特性,掌握基础布局技巧:4.掌握整站规划概念. 二.适用人群 零基础积极学习html5者 三.课程简介 本课程主要讲解了 html+css的基础知识,包括html模板.标签.css基础样式.布局.表格表单.整站等等,是进行前端开发的基础.Html+css是前端开发的基础,大部分前端开发工程都需要从html+css布局开始,html+css的基础非常重要,是前端开

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

前端知识学习一 :CSS基础

一.CSS概述 css指的是层叠样式表,样式定义如何显示HTML元素,样式通常存储在样式表中, 把样式添加到HTML4.0中,是为了解决内容和表现分离的问题.外部样式表通常存储在css文件     中.多个样式定义可层叠为一. 二.层叠次序 一般而言,所有的样式都会根据下面的规则层叠于一个新的虚拟样式表中,其中4拥有最高的优先权. 1.浏览器的缺省设置 2.外部样式表(通过引入的外部.css文件) 3.内部样式表(位于<head>标签内部) 4.内联样式表(在HTML元素内部) 因此属性的优先

Form标签+Css基础

一.Form表单标签 <form action="" method=""></form> 表单就是用来将用户的信息提交到服务器,服务器会将信息存储或者根据信息查询数据(增删改查). 表单中所有的内容都要写在form标签中. <input type="text" value="哈哈哈哈" placeholder="请输入用户名"> Input文本输入框,type类型为tex

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

css基础学习

1.css基础语法 Css规则由两个主要的部分组成:选择器,声明. Selector{declaration1;...declarationN;} 如: H1 { font-size : 32px; color : blue } H1:选择器 Font-size:32px,color:blue:声明 2.css的三种定义方法 内联式: <h1 style="font-size:20px;color:red">内联式</h1> 嵌入式: <style typ

Html5开发——html+css基础二(个人博客一)

今天没有写完,而且写的还有点问题,所以今天就先不上传代码了(ps:快写完了才发现布局有问题,导致代码太多,感觉写的不是很好,所以今天先分析一下布局) 第一步先写一个大的div用来放ABC三个部分,这个大的div居中! 第二步分别写ABC三个部分,ABC三个部分分别使用浮动(float)来定位.A和B都各使用了一张非常小的图片,通过重复(repeat)属性生成A和B 第三步C部分分别写好3~16这几个模块,在通过组合利用浮动定位.分组如下: E:3 F:4.7.10.13 G:5.8.11.14

Html5开发——html+css基础一(百度首页)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{text-align: center;} .header{text-align: right;f