html学习笔记.docx
- 文档编号:7923319
- 上传时间:2023-01-27
- 格式:DOCX
- 页数:18
- 大小:157.46KB
html学习笔记.docx
《html学习笔记.docx》由会员分享,可在线阅读,更多相关《html学习笔记.docx(18页珍藏版)》请在冰豆网上搜索。
html学习笔记
1,
2,链接到同一个页面的不同位置
Chapter1
Thischapterexplainsbablabla
Chapter2
Thischapterexplainsbablabla
Chapter3
Thischapterexplainsbablabla
Chapter4
Thischapterexplainsbablabla
3,跳出框架
4,表头垂直表头,表格的标题
表头:
垂直的表头:
5,背景图像
body{background-image:
url(/i/eg_bg_04.gif);}
6,背景重复
属性值repeat导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。
repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复,no-repeat则不允许图像在任何方向上平铺。
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat:
repeat-y;
}
7,背景定位
为background-position属性提供值有很多方法。
首先,可以使用一些关键字:
top、bottom、left、right和center。
通常,这些关键字会成对出现,不过也不总是这样。
还可以使用长度值,如100px或5cm,最后也可以使用百分数值。
不同类型的值对于背景图像的放置稍有差异。
body
{
background-image:
url('/i/eg_bg_03.gif');
background-repeat:
no-repeat;
background-position:
center;
}
8,背景关联
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。
当文档滚动到超过图像的位置时,图像就会消失。
您可以通过 background-attachment属性防止这种滚动。
通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
body
{
background-image:
url(/i/eg_bg_02.gif);
background-repeat:
no-repeat;
background-attachment:
fixed
}
background-attachment属性的默认值是scroll,也就是说,在默认的情况下,背景会随文档滚动
9,缩进文本
把Web页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。
CSS提供了 text-indent属性,该属性可以方便地实现文本缩进。
通过使用text-indent属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进5em:
p{text-indent:
5em;}
注意:
一般来说,可以为所有块级元素应用text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用text-indent属性。
不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
提示:
如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
字间隔
word-spacing属性可以改变字(单词)之间的标准间隔。
其默认值normal与设置值为0是一样的。
word-spacing属性接受一个正长度值或负长度值。
如果提供一个正长度值,那么字之间的间隔就会增加。
为word-spacing设置一个负值,会把它拉近:
p.spread{word-spacing:
30px;}
p.tight{word-spacing:
-0.5em;}
Thisisaparagraph.Thespacesbetweenwordswillbeincreased.
Thisisaparagraph.Thespacesbetweenwordswillbedecreased.
text-transform属性处理文本的大小写。
这个属性有4个值:
∙none
∙uppercase
∙lowercase
∙capitalize
∙h1{text-transform:
uppercase}
文本装饰
接下来,我们讨论 text-decoration属性,这是一个很有意思的属性,它提供了很多非常有趣的行为。
text-decoration有5个值:
∙none
∙underline
∙overline
∙line-through
∙blink
∙a:
linka:
visited{text-decoration:
underlineoverline;}
处理空白符
white-space属性会影响到用户代理对源文档中的空格、换行和tab字符的处理。
通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。
从某种程度上讲,默认的XHTML处理已经完成了空白符处理:
它会把所有空白符合并为一个空格。
所以给定以下标记,它在Web浏览器中显示时,各个字之间只会显示一个空格,同时忽略元素中的换行:
Thisparagraphhasmany
spacesinit.
可以用以下声明显式地设置这种默认行为:
p{white-space:
normal;}
上面的规则告诉浏览器按照平常的做法去处理:
丢掉多余的空白符。
如果给定这个值,换行字符(回车)会转换为空格,一行中多个空格的序列也会转换为一个空格。
CSS字体系列
在CSS中,有两种不同类型的字体系列名称:
∙通用字体系列-拥有相似外观的字体系统组合(比如"Serif"或"Monospace")
∙特定字体系列-具体的字体系列(比如"Times"或"Courier")
除了各种特定的字体系列外,CSS定义了5种通用字体系列:
∙Serif字体
∙Sans-serif字体
∙Monospace字体
∙Cursive字体
∙Fantasy字体
使用 font-family属性 定义文本的字体系列。
p
{
font-family:
"TimesNewRoman",Georgia,Serif;
}
font-family规定元素的字体系列。
font-family可以把多个字体名称作为一个“回退”系统来保存。
如果浏览器不支持第一个字体,则会尝试下一个。
也就是说,font-family属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。
浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称:
∙指定的系列名称:
具体字体的名称,比如:
"times"、"courier"、"arial"。
∙通常字体系列名称:
比如:
"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示:
使用逗号分割每个值,并始终提供一个类族名称作为最后的选择。
字体加粗
font-weight属性设置文本的粗细。
使用bold关键字可以将文本设置为粗体。
关键字100~900为字体指定了9级加粗度。
如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100对应最细的字体变形,900对应最粗的字体变形。
数字400等价于normal,而700等价于bold。
如果将元素的加粗设置为bolder,浏览器会设置比所继承值更粗的一个字体加粗。
与此相反,关键词lighter会导致浏览器将加粗度下移而不是上移。
实例
p.normal{font-weight:
normal;}
p.thick{font-weight:
bold;}
p.thicker{font-weight:
900;}
字体大小
font-size属性设置文本的大小。
有能力管理文本的大小在web设计领域很重要。
但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。
请始终使用正确的HTML标题,比如使用
-来标记标题,使用
来标记段落。
font-size值可以是绝对或相对值。
绝对值:
∙将文本设置为指定的大小
∙不允许用户在所有浏览器中改变文本大小(不利于可用性)
∙绝对大小在确定了输出的物理尺寸时很有用
相对大小:
∙相对于周围的元素来设置大小
∙允许用户在浏览器改变文本大小
注意:
如果您没有规定字体大小,普通文本(比如段落)的默认大小是16像素(16px=1em)。
使用像素来设置字体大小
通过像素设置文本大小,可以对文本大小进行完全控制:
实例
h1{font-size:
60px;}
h2{font-size:
40px;}
p{font-size:
14px;}
使用em来设置字体大小
如果要避免在InternetExplorer中无法调整文本的问题,许多开发者使用em单位代替pixels。
W3C推荐使用em尺寸单位。
1em等于当前的字体尺寸。
如果一个元素的font-size为16像素,那么对于该元素,1em就等于16像素。
在设置字体大小时,em的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是16像素。
因此1em的默认尺寸是16像素。
可以使用下面这个公式将像素转换为em:
pixels/16=em
(注:
16等于父元素的默认字体大小,假设父元素的font-size为20px,那么公式需改为:
pixels/20=em)
实例
h1{font-size:
3.75em;}/*60px/16=3.75em*/
h2{font-size:
2.5em;}/*40px/16=2.5em*/
p{font-size:
0.875em;}/*14px/16=0.875em*/
设置链接的样式
能够设置链接样式的CSS属性有很多种(例如color,font-family,background等等)。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态:
∙a:
link-普通的、未被访问的链接
∙a:
visited-用户已访问的链接
∙a:
hover-鼠标指针位于链接的上方
∙a:
active-链接被点击的时刻
实例
a:
link{color:
#FF0000;}/*未被访问的链接*/
a:
visited{color:
#00FF00;}/*已被访问的链接*/
a:
hover{color:
#FF00FF;}/*鼠标指针移动到链接上*/
a:
active{color:
#0000FF;}/*正在被点击的链接*/
当为链接的不同状态设置样式时,请按照以下次序规则:
∙a:
hover必须位于a:
link和a:
visited之后
∙a:
active必须位于a:
hover之后
文本修饰
text-decoration属性大多用于去掉链接中的下划线:
实例
a:
link{text-decoration:
none;}
a:
visited{text-decoration:
none;}
a:
hover{text-decoration:
underline;}
a:
active{text-decoration:
underline;}
列表类型
要修改用于列表项的标志类型,可以使用属性 list-style-type:
ul{list-style-type:
square}
列表项图像
有时,常规的标志是不够的。
你可能想对各标志使用一个图像,这可以利用 list-style-image 属性做到:
ulli{list-style-image:
url(xxx.gif)}
只需要简单地使用一个url()值,就可以使用图像作为标志。
列表标志位置
CSS2.1可以确定标志出现在列表项内容之外还是内容内部。
这是利用 list-style-position 完成的。
简写列表样式
为简单起见,可以将以上3个列表样式属性合并为一个方便的属性:
list-style,就像这样:
li{list-style:
url(example.gif)squareinside}
list-style的值可以按任何顺序列出,而且这些值都可以忽略。
只要提供了一个值,其它的就会填入其默认值。
表格边框
table,th,td
{
border:
1pxsolidblue;
}
请注意,上例中的表格具有双线条边框。
这是由于table、th以及td元素都有独立的边框。
如果需要把表格显示为单线条边框,请使用border-collapse属性。
折叠边框(border-collapse用于表格属性,表示表格的两边框合并为一条。
)
border-collapse属性设置是否将表格边框折叠为单一边框:
table
{
border-collapse:
collapse;
}
table,th,td
{
border:
1pxsolidblack;
}
表格文本对齐
text-align和vertical-align属性设置表格中文本的对齐方式。
text-align属性设置水平对齐方式,比如左对齐、右对齐或者居中:
td
{
text-align:
right;
}
vertical-align属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐:
td
{
height:
50px;
vertical-align:
bottom;
}
CSS框模型概述
#box{
width:
70px;
margin:
10px;
padding:
5px;
}
提示:
内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
提示:
外边距可以是负值,而且在很多情况下都要使用负值的外边距。
单边内边距属性
也通过使用下面四个单独的属性,分别设置上、右、下、左内边距:
∙padding-top
∙padding-right
∙padding-bottom
∙padding-left
h1{
padding-top:
10px;
padding-right:
0.25em;
padding-bottom:
2ex;
padding-left:
20%;
}
或者也可以简写为:
h1{padding:
10px0.25em2ex20%;}
CSS边框属性
值复制
下图提供了更直观的方法来了解这一点:
换句话说,如果为外边距指定了3个值,则第4个值(即左外边距)会从第2个值(右外边距)复制得到。
如果给定了两个值,第4个值会从第2个值复制得到,第3个值(下外边距)会从第1个值(上外边距)复制得到。
最后一个情况,如果只给定一个值,那么其他3个外边距都由这个值(上外边距)复制得到。
利用这个简单的机制,您只需指定必要的值,而不必全部都应用4个值,例如:
h1{margin:
0.25em1em0.5em;}/*等价于0.25em1em0.5em1em*/
h2{margin:
0.5em1em;}/*等价于0.5em1em0.5em1em*/
p{margin:
1px;}/*等价于1px1px1px1px*/
单边外边距属性
您可以使用下列任何一个属性来只设置相应上的外边距,而不会直接影响所有其他外边距:
∙margin-top
∙margin-right
∙margin-bottom
∙margin-left
一个规则中可以使用多个这种单边属性,例如:
h2{
margin-top:
20px;
margin-right:
30px;
margin-bottom:
30px;
margin-left:
20px;
}
当然,对于这种情况,使用margin可能更容易一些:
p{margin:
20px30px30px20px;}
外边距合并
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。
请看下图:
当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。
请看下图:
尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。
假设有一个空元素,它有外边距,但是没有边框或填充。
在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
如果这个外边距遇到另一个元素的外边距,它还会发生合并:
这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。
外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。
以由几个段落组成的典型文本页面为例。
第一个段落上面的空间等于段落的上外边距。
如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。
这意味着段落之间的空间是页面顶部的两倍。
如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。
注释:
只有普通文档流中块框的垂直外边距才会发生外边距合并。
行内框、浮动框或绝对定位之间的外边距不会合并。
一切皆为框
div、h1或p元素常常被称为块级元素。
这意味着这些元素显示为一块内容,即“块框”。
与之相反,span和strong等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
p.inline
{
display:
inline;
}
CSSposition属性
通过使用 position属性,我们可以选择4种不同类型的定位,这会影响元素框生成的方式。
position属性值的含义:
static
元素框正常生成。
块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。
元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
元素框从文档流完全删除,并相对于其包含块定位。
包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。
元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。
(相对于浏览器窗口来对元素进行定位)
提示:
相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
jQuery语法
jQuery语法是为HTML元素的选取编制的,可以对元素执行某些操作。
基础语法是:
$(selector).action()
∙美元符号定义jQuery
∙选择符(selector)“查询”和“查找”HTML元素
∙jQuery的action()执行对元素的操作
示例
$(this).hide()-隐藏当前元素
$("p").hide()-隐藏所有段落
$(".test").hide()-隐藏所有class="test"的所有元素
$("#test").hide()-隐藏所有id="test"的元素
jQuery元素选择器
jQuery使用CSS选择器来选取HTML元素。
$("p")选取
元素。
$("p.intro")选取所有class="intro"的
元素。
$("p#demo")选取所有id="demo"的
元素。
jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素。
$("[href]")选取所有带有href属性的元素。
$("[href='#']")选取所有带有href值等于"#"的元素。
$("[href!
='#']")选取所有带有href值不等于"#"的元素。
$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。
jQueryCSS选择器
jQueryCSS选择器可用于改变HTML元素的CSS属性。
下面的例子把所有p元素的背景颜色更改为红色:
实例
$("p").css("background-color","red");
文档就绪函数
我们的实例中的所有jQuery函数位于一个documentready函数中:
$(document).ready(function(){
---jQueryfunctionsgohere----
});
这是为了防止文档在完全加载(就绪)之前运行jQuery代码。
jQuery事件
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html 学习 笔记
![提示](https://static.bdocx.com/images/bang_tan.gif)