由于不注重基础知`识的系统化学习,被一份笔试题打败,所以潜心修炼,加油!!
一、零零碎碎
- 标签属于行内元素标签,给它宽高是不起作用的,必须转化为块级元素(display:block;或者display:inline-block;)才能设置宽高。
<em>起到强调作用,浏览器默认为斜体</em>
<strong>起强调作用,浏览器默认为粗体<strong>
<p style="letter-spacing:20px">设置字间间距</p>
<q>简短文本引用:即加双引号功能</q>
//”夕阳无限好,只是近黄昏<blockquote>长文本引用:加双引号</blockquote>
<code>代码标签</code>
- ol自动设置有序序号
<ol>
<li>信息</li> //1.信息
<li>信息</li> //2.信息
</ol>
二、标签
1.划分版块div
2.<caption>为表格添加标题和摘要</caption>
3.<a href="http://www.imooc.com" target="_blank">标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开需要用到target。</a>
4.给a标签中加入邮箱地址:可以直接发送
三、表单标签
- form标签是成对出现的
2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method : 数据传送的方式(get/post)。
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" id="username"
value="" /> //label中for的值必须与input中的id值一样
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
</body>
注意:
(1)name:为文本框命名,以备后台程序ASP 、PHP使用;
(2)value:提交数据到服务器的值(后台程序PHP使用)(一般起到提示作用),在提交与重置按钮时:value表示按钮上显示的文字;
(3)checked:当设置 checked=”checked” 时,该选项被默认选中
(4)label:label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
常见类型:
<form>
用户名: <input type="text" value=""/> //文本框
密码:<input type="password" value=""/> //密码框
<input type="submit" value="确定"/> //提交按钮
<input type="reset" value="重置"/> //重置
<input type="radio" /> //单选框
<input type="checkbox"/> //复选框
</form>
4.文本输入域
<textarea cols="列数" rows="行数">在这里输入内容...</textarea>
5.下拉列表框
注意:
(1)设置selected=”selected”属性,则该选项就被默认选中。
(2)下拉列表多选操作:在select标签中设置multiple=”multiple”属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击);
<form action="save.php" method="post">
<label>最喜欢的科目:<label/>
<selected>
<option value="数学" selected="selected">
数学</option> //将数学设置为默认选项
<option value="英语">英语</option>
<option value="政治">政治</option>
<option value="物理">物理</option>
<selected>
</form>
如图:
注意:
单选框radio在name相同的情况下只能选中一个!!!
取消已经选择过的按钮则需要更多代码:
<!DOCTYPE HTML>
<html>
<head>
<title>单选按钮取消选中的三种方式</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
//
var $browsers = $("input[name=browser]");
var $cancel = $("#cancel");
var $byhide = $("#byhide");
var $remove = $("#remove");
//
$cancel.click(function(e){
// 移除属性,两种方式都可
//$browsers.removeAttr("checked");
$browsers.attr("checked",false);
});
//
$byhide.click(function(e){
// 切换到一个隐藏域,两种方式均可
//$("#hidebrowser").attr("checked",true);
$("#hidebrowser").attr("checked","checked");
});
//
$remove.click(function(e){
// 直接去的DOM元素,移除属性
// 如果不使用jQuery,则可以移植此方式
var checkedbrowser=document.getElementsByName("browser");
/*
$.each(checkedbrowser, function(i,v){
v.checked = false;
v.removeAttribute("checked");
});
*/
//
var len = checkedbrowser.length;
var i = 0;
for(; i < len; i++){
// 必须先赋值为false,再移除属性
checkedbrowser[i].checked = false;
// 不移除属性也可以
//checkedbrowser[i].removeAttribute("checked");
}
});
});
</script>
</head>
<body>
<p>您喜欢哪款浏览器?</p>
<form>
<input style="display:none;" id="hidebrowser" type="radio" name="browser" value="">
<input type="radio" name="browser" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" value="Firefox">Firefox<br />
<input type="radio" name="browser" value="Netscape">Netscape<br />
<input type="radio" name="browser" value="Opera">Opera<br />
<br />
<input type="button" id="cancel" value="取消选中方式1" size="20">
<input type="button" id="byhide" value="取消选中方式2" size="20">
<input type="button" id="remove" value="取消选中方式3" size="20">
</form>
</body>
</html>
四、CSS样式
1.样式有三种:内联式、嵌入式、外部式
优先级:就近原则!!!
2.若标题标签例如h1默认为粗体,想要去掉粗体,则可以设置为:font-weight:normal;
3.子选择器与后代选择器区别:
子选择器:父元素的直接(第一代)后代;
后代选择器:父元素的所有后代(包括儿子、孙子)
4.伪类选择符:hover
5.权值:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
p>span{color:green} //权值也是1+1=2
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:
* 继承权值最低。
* 最高权值:!important 写法:
p{
color:green!important;
}
p{
color:red;
}
最终p的颜色为green;
6.层叠:
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。(后面的样式会覆盖前面的)
7.(1)设置文字斜体:italic
font-style:italic;
或者使用i标签;
(2).文字下划线:
text-decoration:underline;
或者使用u标签
(3)删除线:
类似于这种:
<p>原价:<span class="oldPrice">300</span>元 现价:230 元</p>
.oldPrice{
text-decoration:line-through;
}
(4)段前缩进:即空两个字
text-indent:2em;//2em即就是文字的两倍大小
(5)中文字间距、字母间距
letter-spacing:20px;
(6)块状元素居中:
text-align:center;
8.在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
(1)常用的块状元素:
div、p、h1-h6、ol、ul、dl、table、address、blockquote 、form
(2)常用的内联元素有:内联元素不可以设置宽高;
a、span、br、i、em、strong、label、q、var、cite、code
(3)常用的内联块状元素有:
img、input
注意:
(1)blockquote 标签定义块引用。
blockquote 与 /blockquote 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
(2)dl标签定义了定义列表
dl标签用于结合 dt (定义列表中的项目)和 dd (描述列表中的项目)。
例:
代码:
<html>
<body>
<h2>一个定义列表:</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
结果:
(3)
* cite标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
按照惯例,引用的文本将以斜体显示。
* 用 cite标签把指向其他文档的引用分离出来,尤其是分离那些传统媒体中的文档,如书籍、杂志、期刊,等等。如果引用的这些文档有联机版本,还应该把引用包括在一个 a 标签中,从而把一个超链接指向该联机版本。
* cite 标签还有一个隐藏的功能:它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器,它能够自动整理引用表格,并把它们作为脚注或者独立的文档来显示。cite标签的语义已经远远超过了改变它所包含的文本外观的作用;它使浏览器能够以各种实用的方式来向用户表达文档的内容。
(4)
* code标签是用于文本编辑的一个标签,所以作为大部分网站建设人员都不会用到。
* code标签的功能表现形式是将一段文本中的“代码”部分作区别于文本其他部分的显示。
* code标签的应用:当需要处理这些代码文本的显示的时候、可搭配css来制作更友好的页面。可以抓取code标签的内容进行处理,简单如设置复制按钮,使浏览者可以复制这一段代码
另外建议可以看一下pre标签,与code主要搭配使用。
9.块级元素有什么特点:
(1)每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
(2)元素的高度、宽度、行高以及顶和底边距都可设置。
(3)元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
10.将内联元素设置为块级元素:
display:block;
将块级元素设置为内联元素:
display:inline;
11.内联块状元素:如 img 与input
同事具备内联元素与块状元素的特点;
display:inline-block;
特点:
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
五、盒子模型
1、border-style(边框样式)常见样式有:
dashed(虚线)| dotted(点线)| solid(实线)。
2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
border-color:#888;//前面的井号不要忘掉。
3、border-width(边框宽度)中的宽度也可以设置为:
thin | medium | thick(但不是很常用),最常还是用象素(px)。
六、CSS布局模型
在网页中,元素有三种布局模型:
1、流动模型(Flow)
(1)在流动模型下,内联元素的特点:“包含元素内从左到右水平分布显示”。(内联元素可不像块状元素这么霸道独占一行)
(2)默认状态下,块状元素宽度都为100%;
2、浮动模型 (Float)
3、层模型(Layer)
层模型有三种形式:
(1)绝对定位(position: absolute)
(2)相对定位(position: relative)
(3)固定定位(position: fixed)
4.Relative与Absolute组合使用
(1)参照定位的元素必须是相对定位元素的前辈元素:
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
box1是box2的父元素,即属于前辈元素
(2)参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
(3)定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。
七、盒模型代码简写
1、如果top、right、bottom、left的值相同,如下面代码:
margin:10px 10px 10px 10px;
可缩写为:
margin:10px;
2、如果top和bottom值相同、left和 right的值相同,如下面代码:
margin:10px 20px 10px 20px;
可缩写为:
margin:10px 20px;
3、如果left和right的值相同,如下面代码:
margin:10px 20px 30px 20px;
可缩写为:
margin:10px 20px 30px;
注意:padding、border与margin缩写方法相同!
4、颜色值缩写
关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
如:
#000000——#000
#336699———#369
八、颜色值
1.英文命名颜色
例如:red 、green、……..
color:red;
2.rgb命名颜色
值在0-255之间也可以是百分比
rgb(122,222,211);
rgb(%13,24%,45%);
3.十六进制颜色
color:#00ffff;
九、长度值
1.像素值
因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。
2.em
就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。
下面注意一个特殊情况:
但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。如下代码:
<p>以这个<span>例子</span>为例。</p>
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。
3.百分比
p{font-size:12px;line-height:130%}
设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。
十、位置
1.水平居中设置
(1)如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。
(2)满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
(3)不定宽块状元素:块状元素的宽度width不固定。
不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多):
a.加入 table 标签(table标签长度自适应性,可看作是定宽块状元素,然后使用margin)
b.设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置(然后使用 text-align:center)
c.通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。