下载
加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 html学习笔记

html学习笔记.doc

html学习笔记

我很好伪装得很好
2019-04-20 0人阅读 举报 0 0 暂无简介

简介:本文档为《html学习笔记doc》,可适用于IT/计算机领域

<imgsrc="iegwschoolgif"width=""height="">链接到同一个页面的不同位置<p><ahref="#C">查看Chapter。<a><p><h>Chapter<h><p>Thischapterexplainsbablabla<p><h>Chapter<h><p>Thischapterexplainsbablabla<p><h>Chapter<h><p>Thischapterexplainsbablabla<p><h><aname="C">Chapter<a><h><p>Thischapterexplainsbablabla<p>跳出框架<ahref="indexhtml"target="top">请点击这里!<a>表头垂直表头表格的标题<caption>我的标题<caption><h>表头:<h><tableborder=""><tr><th>姓名<th><th>电话<th><th>电话<th><tr><h>垂直的表头:<h><tableborder=""><tr><th>姓名<th><td>BillGates<td><tr><tr><th>电话<th><td><td><tr><tr><th>电话<th><td><td><tr><table>背景图像body{backgroundimage:url(iegbggif)}背景重复属性值repeat导致图像在水平垂直方向上都平铺就像以往背景图像的通常做法一样。repeatx和repeaty分别导致图像只在水平或垂直方向上重复norepeat则不允许图像在任何方向上平铺。body{backgroundimage:url(iegbggif)backgroundrepeat:repeaty}背景定位为backgroundposition属性提供值有很多方法。首先可以使用一些关键字:top、bottom、left、right和center。通常这些关键字会成对出现不过也不总是这样。还可以使用长度值如px或cm最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。body{backgroundimage:url('iegbggif')backgroundrepeat:norepeatbackgroundposition:center}背景关联如果文档比较长那么当文档向下滚动时背景图像也会随之滚动。当文档滚动到超过图像的位置时图像就会消失。您可以通过 backgroundattachment属性防止这种滚动。通过这个属性可以声明图像相对于可视区是固定的(fixed)因此不会受到滚动的影响:body{backgroundimage:url(iegbggif)backgroundrepeat:norepeatbackgroundattachment:fixed}backgroundattachment属性的默认值是scroll也就是说在默认的情况下背景会随文档滚动缩进文本把Web页面上的段落的第一行缩进这是一种最常用的文本格式化效果。CSS提供了 textindent属性该属性可以方便地实现文本缩进。通过使用textindent属性所有元素的第一行都可以缩进一个给定的长度甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进下面的规则会使所有段落的首行缩进em:p{textindent:em}注意:一般来说可以为所有块级元素应用textindent但无法将该属性应用于行内元素图像之类的替换元素上也无法应用textindent属性。不过如果一个块级元素(比如段落)的首行中有一个图像它会随该行的其余文本移动。提示:如果想把一个行内元素的第一行“缩进”可以用左内边距或外边距创造这种效果。字间隔wordspacing属性可以改变字(单词)之间的标准间隔。其默认值normal与设置值为是一样的。wordspacing属性接受一个正长度值或负长度值。如果提供一个正长度值那么字之间的间隔就会增加。为wordspacing设置一个负值会把它拉近:pspread{wordspacing:px}ptight{wordspacing:em}<p>ThisisaparagraphThespacesbetweenwordswillbeincreased<p><p>ThisisaparagraphThespacesbetweenwordswillbedecreased<p>texttransform属性处理文本的大小写。这个属性有个值:lnoneluppercasellowercaselcapitalizelh{texttransform:uppercase}文本装饰接下来我们讨论 textdecoration属性这是一个很有意思的属性它提供了很多非常有趣的行为。textdecoration有个值:lnonelunderlineloverlinellinethroughlblinkla:linka:visited{textdecoration:underlineoverline}处理空白符whitespace属性会影响到用户代理对源文档中的空格、换行和tab字符的处理。通过使用该属性可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲默认的XHTML处理已经完成了空白符处理:它会把所有空白符合并为一个空格。所以给定以下标记它在Web浏览器中显示时各个字之间只会显示一个空格同时忽略元素中的换行:<p>This  paragraphhas  manyspaces     init<p>可以用以下声明显式地设置这种默认行为:p{whitespace:normal}上面的规则告诉浏览器按照平常的做法去处理:丢掉多余的空白符。如果给定这个值换行字符(回车)会转换为空格一行中多个空格的序列也会转换为一个空格。CSS字体系列在CSS中有两种不同类型的字体系列名称:l通用字体系列拥有相似外观的字体系统组合(比如"Serif"或"Monospace")l特定字体系列具体的字体系列(比如"Times"或"Courier")除了各种特定的字体系列外CSS定义了种通用字体系列:lSerif字体lSansserif字体lMonospace字体lCursive字体lFantasy字体使用 fontfamily属性 定义文本的字体系列。p{fontfamily:"TimesNewRoman",Georgia,Serif}fontfamily规定元素的字体系列。fontfamily可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体则会尝试下一个。也就是说fontfamily属性的值是用于某个元素的字体族名称或及类族名称的一个优先表。浏览器会使用它可识别的第一个值。有两种类型的字体系列名称:l指定的系列名称:具体字体的名称比如:"times"、"courier"、"arial"。l通常字体系列名称:比如:"serif"、"sansserif"、"cursive"、"fantasy"、"monospace"提示:使用逗号分割每个值并始终提供一个类族名称作为最后的选择。字体加粗fontweight属性设置文本的粗细。使用bold关键字可以将文本设置为粗体。关键字~为字体指定了级加粗度。如果一个字体内置了这些加粗级别那么这些数字就直接映射到预定义的级别对应最细的字体变形对应最粗的字体变形。数字等价于normal而等价于bold。如果将元素的加粗设置为bolder浏览器会设置比所继承值更粗的一个字体加粗。与此相反关键词lighter会导致浏览器将加粗度下移而不是上移。实例pnormal{fontweight:normal}pthick{fontweight:bold}pthicker{fontweight:}字体大小fontsize属性设置文本的大小。有能力管理文本的大小在web设计领域很重要。但是您不应当通过调整文本大小使段落看上去像标题或者使标题看上去像段落。请始终使用正确的HTML标题比如使用<h><h>来标记标题使用<p>来标记段落。fontsize值可以是绝对或相对值。绝对值:l将文本设置为指定的大小l不允许用户在所有浏览器中改变文本大小(不利于可用性)l绝对大小在确定了输出的物理尺寸时很有用相对大小:l相对于周围的元素来设置大小l允许用户在浏览器改变文本大小注意:如果您没有规定字体大小普通文本(比如段落)的默认大小是像素(px=em)。使用像素来设置字体大小通过像素设置文本大小可以对文本大小进行完全控制:实例h{fontsize:px}h{fontsize:px}p{fontsize:px}使用em来设置字体大小如果要避免在InternetExplorer中无法调整文本的问题许多开发者使用em单位代替pixels。WC推荐使用em尺寸单位。em等于当前的字体尺寸。如果一个元素的fontsize为像素那么对于该元素em就等于像素。在设置字体大小时em的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是像素。因此em的默认尺寸是像素。可以使用下面这个公式将像素转换为em:pixels=em(注:等于父元素的默认字体大小假设父元素的fontsize为px那么公式需改为:pixels=em)实例h{fontsize:em}*px=em*h{fontsize:em} *px=em*p{fontsize:em}*px=em*设置链接的样式能够设置链接样式的CSS属性有很多种(例如color,fontfamily,background等等)。链接的特殊性在于能够根据它们所处的状态来设置它们的样式。链接的四种状态:la:link普通的、未被访问的链接la:visited用户已访问的链接la:hover鼠标指针位于链接的上方la:active链接被点击的时刻实例<style>a:link{color:#FF}    *未被访问的链接*a:visited{color:#FF}  *已被访问的链接*a:hover{color:#FFFF}  *鼠标指针移动到链接上*a:active{color:#FF}  *正在被点击的链接*<style>当为链接的不同状态设置样式时请按照以下次序规则:la:hover必须位于a:link和a:visited之后la:active必须位于a:hover之后文本修饰textdecoration属性大多用于去掉链接中的下划线:实例a:link{textdecoration:none}a:visited{textdecoration:none}a:hover{textdecoration:underline}a:active{textdecoration:underline}列表类型要修改用于列表项的标志类型可以使用属性 liststyletype:ul{liststyletype:square}列表项图像有时常规的标志是不够的。你可能想对各标志使用一个图像这可以利用 liststyleimage 属性做到:ulli{liststyleimage:url(xxxgif)}只需要简单地使用一个url()值就可以使用图像作为标志。列表标志位置CSS可以确定标志出现在列表项内容之外还是内容内部。这是利用 liststyleposition 完成的。简写列表样式为简单起见可以将以上个列表样式属性合并为一个方便的属性:liststyle就像这样:li{liststyle:url(examplegif)squareinside}liststyle的值可以按任何顺序列出而且这些值都可以忽略。只要提供了一个值其它的就会填入其默认值。表格边框table,th,td{border:pxsolidblue}请注意上例中的表格具有双线条边框。这是由于table、th以及td元素都有独立的边框。如果需要把表格显示为单线条边框请使用bordercollapse属性。折叠边框(bordercollapse用于表格属性,表示表格的两边框合并为一条。)bordercollapse属性设置是否将表格边框折叠为单一边框:table{bordercollapse:collapse}table,th,td{border:pxsolidblack}表格文本对齐textalign和verticalalign属性设置表格中文本的对齐方式。textalign属性设置水平对齐方式比如左对齐、右对齐或者居中:td{textalign:right}verticalalign属性设置垂直对齐方式比如顶部对齐、底部对齐或居中对齐:td{height:pxverticalalign:bottom}CSS框模型概述#box{width:pxmargin:pxpadding:px}提示:内边距、边框和外边距可以应用于一个元素的所有边也可以应用于单独的边。提示:外边距可以是负值而且在很多情况下都要使用负值的外边距。单边内边距属性也通过使用下面四个单独的属性分别设置上、右、下、左内边距:lpaddingtoplpaddingrightlpaddingbottomlpaddinglefth{paddingtop:pxpaddingright:empaddingbottom:expaddingleft:}或者也可以简写为:h{padding:pxemex}CSS边框属性值复制下图提供了更直观的方法来了解这一点:换句话说如果为外边距指定了个值则第个值(即左外边距)会从第个值(右外边距)复制得到。如果给定了两个值第个值会从第个值复制得到第个值(下外边距)会从第个值(上外边距)复制得到。最后一个情况如果只给定一个值那么其他个外边距都由这个值(上外边距)复制得到。利用这个简单的机制您只需指定必要的值而不必全部都应用个值例如:h{margin:ememem}  *等价于emememem*h{margin:emem}    *等价于emememem*p{margin:px}      *等价于pxpxpxpx*单边外边距属性您可以使用下列任何一个属性来只设置相应上的外边距而不会直接影响所有其他外边距:lmargintoplmarginrightlmarginbottomlmarginleft一个规则中可以使用多个这种单边属性例如:h{margintop:pxmarginright:pxmarginbottom:pxmarginleft:px}当然对于这种情况使用margin可能更容易一些:p{margin:pxpxpxpx}外边距合并当一个元素出现在另一个元素上面时第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开)它们的上和或下外边距也会发生合并。请看下图:尽管看上去有些奇怪但是外边距甚至可以与自身发生合并。假设有一个空元素它有外边距但是没有边框或填充。在这种情况下上外边距与下外边距就碰到了一起它们会发生合并:如果这个外边距遇到另一个元素的外边距它还会发生合并:这就是一系列的段落元素占用空间非常小的原因因为它们的所有外边距都合并到一起形成了一个小的外边距。外边距合并初看上去可能有点奇怪但是实际上它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并段落之间的上外边距和下外边距就合并在一起这样各处的距离就一致了。注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。一切皆为框div、h或p元素常常被称为块级元素。这意味着这些元素显示为一块内容即“块框”。与之相反span和strong等元素称为“行内元素”这是因为它们的内容显示在行中即“行内框”。pinline{display:inline}CSSposition属性通过使用 position属性我们可以选择种不同类型的定位这会影响元素框生成的方式。position属性值的含义:static元素框正常生成。块级元素生成一个矩形框作为文档流的一部分行内元素则会创建一个或多个行框置于其父元素中。relative元素框偏移某个距离。元素仍保持其未定位前的形状它原本所占的空间仍保留。absolute元素框从文档流完全删除并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭就好像元素原来不存在一样。元素定位后生成一个块级框而不论原来它在正常流中生成何种类型的框。fixed元素框的表现类似于将position设置为absolute不过其包含块是视窗本身。(相对于浏览器窗口来对元素进行定位)提示:相对定位实际上被看作普通流定位模型的一部分因为元素的位置相对于它在普通流中的位置。jQuery语法jQuery语法是为HTML元素的选取编制的可以对元素执行某些操作。基础语法是:$(selector)action()l美元符号定义jQueryl选择符(selector)“查询”和“查找”HTML元素ljQuery的action()执行对元素的操作示例$(this)hide()隐藏当前元素$("p")hide()隐藏所有段落$("test")hide()隐藏所有的所有元素$("#test")hide()隐藏所有id="test"的元素jQuery元素选择器jQuery使用CSS选择器来选取HTML元素。$("p")选取<p>元素。$("pintro")选取所有的<p>元素。$("p#demo")选取所有id="demo"的<p>元素。jQuery属性选择器jQuery使用XPath表达式来选择带有给定属性的元素。$("href")选取所有带有href属性的元素。$("href='#'")选取所有带有href值等于"#"的元素。$("href!='#'")选取所有带有href值不等于"#"的元素。$("href$='jpg'")选取所有href值以"jpg"结尾的元素。jQueryCSS选择器jQueryCSS选择器可用于改变HTML元素的CSS属性。下面的例子把所有p元素的背景颜色更改为红色:实例$("p")css("backgroundcolor","red")文档就绪函数我们的实例中的所有jQuery函数位于一个documentready函数中:$(document)ready(function(){jQueryfunctionsgohere})这是为了防止文档在完全加载(就绪)之前运行jQuery代码。jQuery事件

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/26

html学习笔记

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利