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倍
字符实体
一般格式: & + 实体名 + ;
空格
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
¢ 分 ¢ ¢
£ 镑 £ £
¥ 日圆 ¥ ¥
§ 节 § §
© 版权 © ©
® 注册商标 ® ®
× 乘号 × ×
÷ 除号 ÷ ÷
html+css基础 - 个人备忘录的更多相关文章
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础总结
CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- css 基础---选择器
1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- css基础不扎实
写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...
- css基础总结一
最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...
随机推荐
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
- Python入门 —— 01简介
Python 历史 python 的创始人为荷兰人吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为 ...
- 大数据技术原理与应用——分布式文件系统HDFS
分布式文件系统概述 相对于传统的本地文件系统而言,分布式文件系统(Distribute File System)是一种通过网络实现文件在多台主机上进行分布式存储的文件系统.分布式文件系统的设计一般采用 ...
- xshell5连接虚拟机的小问题处理
1.首先确保虚拟机是桥接状态,然后在虚拟机下用ifconfig查看ip地址(当然是默认你虚拟机下是linux) 2.确保虚拟机安装了ssh...安装openssh-server: 对应的sudo ap ...
- canvas画的文字在安卓移动设备上可以显示,但是在ios移动设备上无法显示
不用担心iOS Safari不支持canvas,查看https://caniuse.com/ 发现是支持的 ctx.font = "0.16rem Arial"; 为了适配移动端直 ...
- Codeforces Contest 870 前三题KEY
A. Search for Pretty Integers: 题目传送门 题目大意:给定N和M个数,从前一个数列和后一个数列中各取一个数,求最小值,相同算一位数. 一道水题,读入A.B数组后枚举i.j ...
- 上海Uber优步司机奖励政策(12月20日到12月27日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Android 项目,没有可运行的Module项
打开工程以后发现,可运行的Module 没有了.怎么办? 点击这个,即可.
- LVS Nginx HAProxy
转自:http://blog.chinaunix.net/uid-27022856-id-3236257.html LVS 优点:1.抗负载能力强.工作在第4层仅作分发之用,没有流量的产生,这个特点也 ...
- sql中的几种连接类型
一.连接类型简介 在sql中单表查询的几率相对来说比较少,随着数据库的日益复杂,多表关联的情况越来越多,在多表关联的情况下存在多种关联的类型, 1.自关联(join或inner join) 2.左外关 ...