HTML教程

第一章.HTML标签

网页格式	
html	网页的开始与结束。
body	网页的主体部分,显示在网页中用户可以浏览到的内容。
head	网页的头部,大部分不显示在用户浏览界面。
meta	网页的摘要信息,不会显示在浏览器浏览界面。
title	网页标签,显示在浏览器中用户看到的标签。
table	表格的开始和结束,但是表格是由行和列组成。
tr	组成表格的行。
td	组成表格的列。
colspan	表格的跨列。
rowspan	表格的跨行。
thead	表格头部。
tbody	表格主体。
tfoot	表格尾部。
cellpadding	表格中文本与表格边框的距离。
cellspacing	表格中表格与表格的距离。
h1--h6	网页中文本标题标签,以次是从大到小。
sub	文本下标标签。
sup	文本上标标签。
&	文本特殊符号索引标签。
p	换段落。
br	换行。
hr	水平线。
img	图片掉用标签。
a	超链接标签
ul	无序列表,内部使用li。
ol	有序列表,内部使用li。
dl	列标签,dt文本顶头,dd文本缩进。
	注释内容,网页中不显示。
form	表单的开始于结尾,中间包含的内容是待提交的内容。
text	单行文本框。
password	密码框。
radio	单选按钮。
file	文件域。
textarea	多行文本框。
checkbox	多选按钮。
select	列表框。
option	用于列表框中书写列表内容。
input	插入表单元素。
submit	提交按钮。
reset	重置按钮。
button	普通按钮。
image	图片按钮。
iframe	内嵌框架。
font	字体。
marquee	滚动标签(behavior=滚动方式)(direction=滚动方向)(scrollamount=滚动速度)


css规则定义代码对应关系		区块		table-caption	表格标题	list-style-image
代码	说明	word-spacing	单词间距	inherit	继承	list-style-position
类型		letter-spacing	字母间距	方框		inside
font-family	字体	vertical-align	垂直对齐	width	宽度	outside
font-size	字体大小	baseline	基线	height	高度	定位
font-style	字体样式	sub	下标	float	浮动	position
italic	斜体	super	上标	clear	清楚	absolute
oblique	偏斜体	top	顶部	padding	填充	fixed
line-height	行间距/行高	text-top	文本顶对齐	margin	边界	relative
font-weight	字体粗细	middle	中线对齐	top	上	static
font-variant	字体变形	bottom	底部	right	右	visibility
small-caps	小型大写字母	text-bottom	文本底对齐	bottom	下	inherit
text-transform	大小写	text-align	文本对齐	left	左	visible
capitalize	首字母大写	text-indent	文本缩进	边框		hidden
uppercase	大写字母	white-space	空格	style	样式	width
lowercase	小写字母	normal	正常	dotted	点划线	z-index
text-decoration	文本修饰	pre	保留	dashed	虚线	height
underline	下划线	nowrap	不换行	solid	实线	overflow
overline	上划线	display	显示	double	双线	scroll
line-through	删除线	inline	内嵌	groove	槽状	placement
blink	闪烁	block	块	ridge	脊状	clip
none	无	list-item	列表项	inset	凹陷	扩展
color	颜色	run-in	追加部分	outset	突出	page-break-before
背景		inline-block	内联块	width	宽度	page-break-after
background-color	背景颜色	compact	紧凑	color	颜色	auto
background-image	背景图片	marker	标记	列表		always
background-repeat	背景重复	table	表格	list-style-type	类型	cursor
backgrount-attachment	附件	inline-table	内嵌表格	disc	圆点	filter
fixed	固定的	table-row-group	表格行组	circle	圆圈	
scroll	滚动	table-header-group	表格标题组	square	方块	
background-position(X)	背景水平位置	table-footer-group	表格注脚组	decimal	数字	
background-position(Y)	背景垂直位置	table-row	表格行	lower-roman	小写罗马数字	
right	右对齐	table-column-group	表格列组	upper-roman	大写罗马数字	
center	居中对齐	table-column	表格列	lower-alpha	小写字母	
left	左对齐	table-cell	表格单元格	upper-alpha	大写字母	




    
    
    
    Document


    

你好,我是员工内连框架!

第二章:css的使用




    
    
    



    Document


    

    

欢迎来到计算机科学与技术学院!

欢迎来到计算机科学与技术学院!




    
    
    



    Document

    
    


    
    

欢迎来到计算机科学与技术学院!

欢迎来到计算机科学与技术学院!

今天天气真不错!




    
    
    
    Document
    


    

    

计算机科学与技术学院

第三章:css选择器

基本选择器




    
    
    

    
    Document



    

计算机科学与技术学院

计算机科学与技术学院

计算机科学与技术学院

计算机科学与技术学院

计算机科学与技术学院

计算机科学与技术学院

复合选择器:




    
    
    
    Document
    


    
计算机科学与技术学院

计算机科学与技术学院1

计算机科学与技术学院

关系选择器




    
    
    
    Document
    


    

    
计算机科学与技术学院

计算机科学与技术学院 计算机科学与技术学院

计算机科学与技术学院

属性选择器




    
    
    
    Document

    


    
计算机科学与技术

计算机科学与技术

计算机科学与技术

伪类选择器




    
    
    
    Document

    


    



  • 计算机科学与技术
  • 计算机科学与技术
  • 计算机科学与技术
  • 计算机科学与技术
  • 计算机科学与技术
  • 计算机科学与技术

超链接的伪类




    
    
    
    Document
    


    
    百度



    百度一下


伪元素选择器




    
    
    
    Document
    
    


    

计算机科学与技术

计算机科学与技术

继承




    
    
    
    Document
    


    
    

计算机科学与技术

计算机科学与技术

选择器的权重




    
    
    
    Document
    


    


    
计算机科学与技术

像素和百分比




    
    
    
    Document
    


    
  • 计算机科学与技术学院

  • 三原色

    
    
    
        
        
        
        Document
        
    
    
        
            

    计算机科学与技术学院欢迎您!

    文档流

    
    
    
        
        
        
        Document
        
    
    
        
    
    
    计算机科学与技术学院
    计算机科学与技术学院

    第四章:盒模型

    
    
    
        
        
        
        Document
        
    
    
        
    
    计算机科学与技术学院
    计算机科学与技术学院

    边框

    
    
    
        
        
        
        Document
        
    
    
        

    内边距

    
    
    
        
        
        
        Document
    
    
    
    
        
    
        

    外边距

    
    
    
        
        
        
        Document
    
        
    
    
    
        
    计算机科学与技术

    水平方向布局

    
    
    
        
        
        
        Document
        
    
    
        
    
        

    垂直方向布局

    
    
    
        
        
        
        Document
    
        
    
    
        
    

    外边距的折叠

    
    
    
        
        
        
        Document
    
        
    
    
        
    
        

    行内元素的盒模型

    
    
    
        
        
        
        Document
        
    
    
        计算机科学与技术
    
        
    
    
    

    浏览器的默认样式

    
    
    
        
        
        
        Document
        
    
    
        
    
    
    计算机科学与技术
    • 计算机科学与技术
    • 计算机科学与技术
    计算机科学与技术

    习题一

    
    
    
        
        
        
        Document
    
    
        
        
    
    
        
    
    
    
    
    
    
    
        
        
        
        Document
    
        
    
    
        
    
    
    
    
    
    
    
    
    
        
        
        
        Document
        
    
    
        

    计算机科学与技术学院

    首页
    计算机
    • 计算机科学与技术学院头条一
    • 计算机科学与技术学院头条二
    • 计算机科学与技术学院头条三

    盒子的大小

    
    
    
        
        
        
        Document
        
    
    
        
    
        

    HTML进阶

    第一章:语义化标签应用

    
    
    
        
        
        
        Document
    
    
        

    我是target3.html

    
    
    
        
        
        
        Document
    
    
        
        
        超链接1 
        

    超链接2

    超链接3

    超链接4
    
    
    
        
        Document
    
    
      
    
       
    
    
    
    
    
    
        
        实体
    
    
    
        
    

    今天         天气真不错!

    a<b>c

    
    
    
        
        
         
         
         
        
        Document
    
    
    
        
    
    
    
    
    
    
        
        Document
    
    
    
        
         

    一级标题

    二级标题

    三级标题

    四级标题

    五级标题
    六级标题

    回乡偶书二首

    其一

    在p标签中的内容就表示一个段落

    在p标签中的内容就表示一个段落

    今天天气不错!

    你今天必须要完成作业

    鲁迅说:
    这句话我是从来没有说过的!
    子曰学而时习之,乐呵乐呵!

    今天天气真不错
    
    
    
        
        Document
    
    
    
        
    
         

    哈哈

    我就要写在html标签的外部!

    
    
    
        
        Document
    
    
        
    
         
         
    
    
    
    
        
        Document
    
    
    
    
        
    
        
    • 结构
    • 表现
    • 行为
    1. 结构
    2. 表现
    3. 行为
    结构
    结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落
    结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落
    结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落
    • aa
      • aa-1
      • aa-2
        • aa-1
        • aa-2
    
    
    
        
        超链接
    
    
        
    
         超链接
         

    超链接2
    
    
    
        
        
        
        Document
    
    
        
        
        超链接
    
        

    去底部

    去第三个自然段

    在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。

    在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。

    在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。

    在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。

    在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。

    在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia quasi numquam quam molestias cumque eveniet ab nobis doloribus dolores. Nesciunt, distinctio tempore similique consequuntur nulla dolorem sapiente minus praesentium impedit.

    这是一个新的超链接

    这是一个新的超链接

    回到顶部
    
    
    
        
        
        
        Document
    
    
    
        
    
        松鼠
    
        钢铁侠
    
        
        
        
    
    
    
    
    
    
        
        
        
        Document
    
    
    
        
        
        

    Hello

    
    
    
        
        
        
        Document
    
    
    
        
        
        
        
    
    
        
        
    
        
        
    
        
    
    
    
    
    
    
       
          哈哈,我在哪出现?
       
       
          

    回乡偶书(二首)

    其一

    贺知章

    少小离家老大回

    乡音无改鬓毛衰

    儿童相见不相识

    笑问客从何处来

    
       
          这是我的第二个网页
       
       
       
          
          

    这是我的第二个网页

    -->
    
       
          标签的属性
       
       
       
       
          

    这是我的第三个网页!

    
    
       
       
          
          网页的基本结构
       
       
       
       
       
    
       
    
    
    
    
    
    
    
    
       
       
    
          
          
          
          
          网页的标题
    
       
    
       
       
    
          
          

    网页的大标题

    第二章:CSS样式应用

    
    
    
        
        
        
        Document
    
        
    
        
    
        
         
    
    
    
        
    
    
         
         
    
         

    落霞与孤鹜齐飞,秋水共长天一色

    少小离家老大回,乡音无改鬓毛衰

    
    
    
        
        
        
        Document
        
    
    
        

    我是H1

    今天天气真不错!

    今天天气真不错!

    今天天气真不错!

    今天天气真不错!

    
    
    
        
        
        
        Document
        
    
    
        

    我是标题

    少小离家老大回

    乡音无改鬓毛衰

    儿童相见不相识

    笑问客从何处来

    秋水共长天一色

    落霞与孤鹜齐飞

    
    
    
        
        
        
        Document
        
    
    
        
    我是div

    我是p元素

    我是div2

    标题

    哈哈
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
        
    我是一个div

    我是div中的p元素 我是p元素中的span

    我是div中的span元素 我是div中的span元素 我是div中的span元素 我是div中的span元素
    我是div外的span
    
    
    
        
        
        
        Document
    
        
    
    
            

    少小离家老大回

    乡音无改鬓毛衰

    儿童相见不相识

    笑问客从何处来

    秋水共长天一色

    落霞与孤鹜齐飞

    
    
    
        
        
        
        Document
        
    
    
        
        
      我是一个span
    • 第〇个
    • 第一个
    • 第二个
    • 第三个
    • 第四个
    • 第五个
    
    
    
        
        
        
        Document
        
    
    
        
        
    
        访问过的链接
    
        

    没访问过的链接
    
    
    
        
        
        
        Document
    
        
    
    
    
        
        
    Hello Hello How are you

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.

    
    
    
        
        
        
        Document
        
    
    
        

    我是一个p元素 我是p元素中的span

    我是p元素外的span
    我是div 我是div中的span 我是span中的em
    
    
    
        
        
        
        Document
    
        
    
    
    
        
    我是一个div 我是div中的span
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
    
        
        
        
        Document
        
    
    
        
        

    第三章:盒子模型应用

    
    
    
        
        
        
        Document
        
    
    
        
    
         
    我是div1
    我是div2
    我是span1 我是span2 我是span2 我是span2 我是span2 我是span2 我是span2 我是span2 我是span2 我是span2
    
    
    
        
        
        
        Document
    
        
    
    
    
        
    
         
    
    
    
        
        
        
        Document
        
    
    
        
    
    
    
        
        
        
        Document
        
    
    
        
    
    
    
        
        
        
        Document
        
    
    
        
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
    
        
        
        
        Document
    
        
    
    
        
    
        
    在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
    
        
        
        
        Document
        
    
    
    
        超链接
        超链接
    
    
        我是span
        我是span
        
        
    
    
    
        
        
        
        Document
        
        
    
        
        
    
    
        
    

    我是一个段落

    我是一个段落

    我是一个段落

    • 列表项1
    • 列表项2
    • 列表项3
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
    
        
        
        
        Document
        
    
    
    
        
    
        
    CSS模块:
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
    
    /* Document
       ========================================================================== */
    
    /**
     * 1. Correct the line height in all browsers.
     * 2. Prevent adjustments of font size after orientation changes in iOS.
     */
    
    html {
      line-height: 1.15; /* 1 */
      -webkit-text-size-adjust: 100%; /* 2 */
    }
    
    /* Sections
       ========================================================================== */
    
    /**
     * Remove the margin in all browsers.
     */
    
    body {
      margin: 0;
    }
    
    /**
     * Render the `main` element consistently in IE.
     */
    
    main {
      display: block;
    }
    
    /**
     * Correct the font size and margin on `h1` elements within `section` and
     * `article` contexts in Chrome, Firefox, and Safari.
     */
    
    h1 {
      font-size: 2em;
      margin: 0.67em 0;
    }
    
    /* Grouping content
       ========================================================================== */
    
    /**
     * 1. Add the correct box sizing in Firefox.
     * 2. Show the overflow in Edge and IE.
     */
    
    hr {
      box-sizing: content-box; /* 1 */
      height: 0; /* 1 */
      overflow: visible; /* 2 */
    }
    
    /**
     * 1. Correct the inheritance and scaling of font size in all browsers.
     * 2. Correct the odd `em` font sizing in all browsers.
     */
    
    pre {
      font-family: monospace, monospace; /* 1 */
      font-size: 1em; /* 2 */
    }
    
    /* Text-level semantics
       ========================================================================== */
    
    /**
     * Remove the gray background on active links in IE 10.
     */
    
    a {
      background-color: transparent;
    }
    
    /**
     * 1. Remove the bottom border in Chrome 57-
     * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
     */
    
    abbr[title] {
      border-bottom: none; /* 1 */
      text-decoration: underline; /* 2 */
      text-decoration: underline dotted; /* 2 */
    }
    
    /**
     * Add the correct font weight in Chrome, Edge, and Safari.
     */
    
    b,
    strong {
      font-weight: bolder;
    }
    
    /**
     * 1. Correct the inheritance and scaling of font size in all browsers.
     * 2. Correct the odd `em` font sizing in all browsers.
     */
    
    code,
    kbd,
    samp {
      font-family: monospace, monospace; /* 1 */
      font-size: 1em; /* 2 */
    }
    
    /**
     * Add the correct font size in all browsers.
     */
    
    small {
      font-size: 80%;
    }
    
    /**
     * Prevent `sub` and `sup` elements from affecting the line height in
     * all browsers.
     */
    
    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    
    sub {
      bottom: -0.25em;
    }
    
    sup {
      top: -0.5em;
    }
    
    /* Embedded content
       ========================================================================== */
    
    /**
     * Remove the border on images inside links in IE 10.
     */
    
    img {
      border-style: none;
    }
    
    /* Forms
       ========================================================================== */
    
    /**
     * 1. Change the font styles in all browsers.
     * 2. Remove the margin in Firefox and Safari.
     */
    
    button,
    input,
    optgroup,
    select,
    textarea {
      font-family: inherit; /* 1 */
      font-size: 100%; /* 1 */
      line-height: 1.15; /* 1 */
      margin: 0; /* 2 */
    }
    
    /**
     * Show the overflow in IE.
     * 1. Show the overflow in Edge.
     */
    
    button,
    input { /* 1 */
      overflow: visible;
    }
    
    /**
     * Remove the inheritance of text transform in Edge, Firefox, and IE.
     * 1. Remove the inheritance of text transform in Firefox.
     */
    
    button,
    select { /* 1 */
      text-transform: none;
    }
    
    /**
     * Correct the inability to style clickable types in iOS and Safari.
     */
    
    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
      -webkit-appearance: button;
    }
    
    /**
     * Remove the inner border and padding in Firefox.
     */
    
    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
      border-style: none;
      padding: 0;
    }
    
    /**
     * Restore the focus styles unset by the previous rule.
     */
    
    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
      outline: 1px dotted ButtonText;
    }
    
    /**
     * Correct the padding in Firefox.
     */
    
    fieldset {
      padding: 0.35em 0.75em 0.625em;
    }
    
    /**
     * 1. Correct the text wrapping in Edge and IE.
     * 2. Correct the color inheritance from `fieldset` elements in IE.
     * 3. Remove the padding so developers are not caught out when they zero out
     *    `fieldset` elements in all browsers.
     */
    
    legend {
      box-sizing: border-box; /* 1 */
      color: inherit; /* 2 */
      display: table; /* 1 */
      max-width: 100%; /* 1 */
      padding: 0; /* 3 */
      white-space: normal; /* 1 */
    }
    
    /**
     * Add the correct vertical alignment in Chrome, Firefox, and Opera.
     */
    
    progress {
      vertical-align: baseline;
    }
    
    /**
     * Remove the default vertical scrollbar in IE 10+.
     */
    
    textarea {
      overflow: auto;
    }
    
    /**
     * 1. Add the correct box sizing in IE 10.
     * 2. Remove the padding in IE 10.
     */
    
    [type="checkbox"],
    [type="radio"] {
      box-sizing: border-box; /* 1 */
      padding: 0; /* 2 */
    }
    
    /**
     * Correct the cursor style of increment and decrement buttons in Chrome.
     */
    
    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
      height: auto;
    }
    
    /**
     * 1. Correct the odd appearance in Chrome and Safari.
     * 2. Correct the outline style in Safari.
     */
    
    [type="search"] {
      -webkit-appearance: textfield; /* 1 */
      outline-offset: -2px; /* 2 */
    }
    
    /**
     * Remove the inner padding in Chrome and Safari on macOS.
     */
    
    [type="search"]::-webkit-search-decoration {
      -webkit-appearance: none;
    }
    
    /**
     * 1. Correct the inability to style clickable types in iOS and Safari.
     * 2. Change font properties to `inherit` in Safari.
     */
    
    ::-webkit-file-upload-button {
      -webkit-appearance: button; /* 1 */
      font: inherit; /* 2 */
    }
    
    /* Interactive
       ========================================================================== */
    
    /*
     * Add the correct display in Edge, IE 10+, and Firefox.
     */
    
    details {
      display: block;
    }
    
    /*
     * Add the correct display in all browsers.
     */
    
    summary {
      display: list-item;
    }
    
    /* Misc
       ========================================================================== */
    
    /**
     * Add the correct display in IE 10+.
     */
    
    template {
      display: none;
    }
    
    /**
     * Add the correct display in IE 10.
     */
    
    [hidden] {
      display: none;
    }
    
    
    
    /* v2.0 | 20110126
      http://meyerweb.com/eric/tools/css/reset/ 
      License: none (public domain)
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    

    第四章:浮动应用

    
    
    
        
        
        
        Document
        
    
    
        
    
    
    
        
        
        
        Document
        
    
    
    
    
        
    
    
        我是一个span
        
        
    
        
    
    
    
    
    
    
        
        
        
        Document
        
    
    
    
        
        
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
    
        
        
        
        Document
        
    
    
    
        
    1
    2
    3
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
    
        
        
        
        Document
        
    
    
    
        

    第五章:定位应用

    
    
    
        
        
        
        Document
        
    
    
    
        
    1
    2
    3
    
    
    
        
        
        
        Document
        
    
    
    
        
    1
    4
    5
    2
    3
    
    
    
        
        
        
        Document
        
    
    
    
        
    1
    4
    5
    2
    3
    
    
    
    
        
        
        
        导航条
        
        
    
    
    
        
        
    
    
    
    
    
    
    
    
        
        
        
        Document
    
        
    
    
    
    
    
    
    
        
        
        
        Document
        
    
    
    
        
    1
    2
    3
    4
    rest  CSS样式
    /* v2.0 | 20110126
      http://meyerweb.com/eric/tools/css/reset/ 
      License: none (public domain)
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    

    第六章:背景主题字体应用

    
    
    
        
        
        
        Document
        
    
    
        

    今天天气真不错,Hello Hello How are you!

    
    
    
        
        
        
        Document
        
    
    
        
        
        
        
        
        
    
    
    
    
    
    
        
        
        
        Document
        
        
    
    
    
        
    
        
    • 锄禾日当午
    • 汗滴禾下土
    • 谁知盘中餐
    • 粒粒皆辛苦
    
    
    
        
        
        
        Document
        
        
    
    
    
        
        
        
    
        
    
        

    Hello

    
    
    
        
        
        
        Document
        
    
    
        
        
    今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello
    
    
    
        
        
        
        Document
        
    
    
        
        
    今天天气真不错 Hello hello
    
    
    
        
        
        
        Document
        
    
    
        
    
    今天天气 Helloyx真不错 Hello

    
    
    
        
        
        
        Document
        
    
    
    
        
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt numquam. Dolores, cupiditate enim.
    今天天气真不错
    
    
    
        
        
        
        Document
    
        
    
    
        
    
    
    
        
        
        
        Document
    
        
    
    
        
    
    
    
        
        
        
        Document
        
    
    
        
    
    
    
        
        
        
        Document
        
    
    
        

    第七章:表单表格应用

    
    
    
    
        
        
        
        Document
    
    
    
    
        
    
        
    A1 B1 C1 D1
    A2 B2 C2 D2
    A3 B3 C3
    A4 B4 C4
    
    
    
    
        
        
        
        Document
    
    
    
        
    日期 收入 支出 合计
    2000.1.1 500 200 300
    2000.1.1 500 200 300
    2000.1.1 500 200 300
    2000.1.1 500 200 300
    合计 300
    
    
    
    
        
        
        
        Document
        
    
    
    
    
        
    学号 姓名 性别 年龄 地址
    1 孙悟空 18 花果山
    2 猪八戒 28 高老庄
    3 沙和尚 38 流沙河
    4 唐僧 16 女儿国
    1 孙悟空 18 花果山
    2 猪八戒 28 高老庄
    3 沙和尚 38 流沙河
    4 唐僧 16 女儿国
    1 孙悟空 18 花果山
    2 猪八戒 28 高老庄
    3 沙和尚 38 流沙河
    4 唐僧 16 女儿国
    
    
    
    
        
        
        
        Document
    
    
    
        
        
        
    文本框

    密码框

    单选按钮

    多选框



    
    
    
        
        
        
        Document
    
    
    
        












    
    
    
        
        
        
        Document
    
    
        

    您的数据已经收到!

    第八章:动画滚动应用

    
    
    
        
        
        
        Document
    
        
    
    
    
    
        
    
    
    
        
        
        
        Document
    
        
    
    
    
    
        
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
    
        
        
        
        Document
        
    
    
        
        

    第九章:less语法及应用

    
    
    
        
        
        
        Document
        
    
    
        
    
         
    aaaa
    aaaa
    aaaa
    
    
    
        
        
        
        Document
        
    
    
        
    less文件:
    //import用来将其他的less引入到当前的less
    //可以通过import来将其他的less引入到当前的less中
    @import "syntax2.less";
    
    .box1{
        // 在less中所有的数值都可以直接进行运算
        // + - * /
        width: 100px + 100px;
        height: 100px/2;
        background-color: #bfa;
        
    }
    
    
    body{
        width: 100px;
        height: 100px;
        
        div{
            color: red;
        }
    }
    、
    
    // less中的单行注释,注释中的内容不会被解析到css中
    
    /*
        css中的注释,内容会被解析到css文件中
    */
    .box1{
        background-color: #bfa;
    
        .box2{
            background-color: #ff0;
    
            .box4{
                color: red;
            }
        }
    
        .box3{
            background-color: orange;
        }
    }
    
    //变量,在变量中可以存储一个任意的值
    // 并且我们可以在需要时,任意的修改变量中的值
    // 变量的语法: @变量名
    @a:200px;
    @b:#bfa;
    @c:box6;
    
    .box5{
        //使用变量是,如果是直接使用则以 @变量名 的形式使用即可
        width: @a;
        color:@b;
    }
    
    //作为类名,或者一部分值使用时必须以 @{变量名} 的形式使用
    .@{c}{
        width: @a;
        background-image: url("@{c}/1.png");
    }
    
    @d:200px;
    @d:300px;
    
    div{
        // 变量发生重名时,会优先使用比较近的变量
        @d:115px;
        width: @d;
        height: @e;
    }
    
    //可以在变量声明前就使用变量
    @e:335px;
    
    
    div{
        width: 300px;
        // 新版的语法
        // height: $width;
    }
    
    
    
    
    
    .box1{
        .box2{
            color: red;
        }
    
        >.box3{
            color: red;
    
            &:hover{
                color: blue;
            }
        }
    
        //为box1设置一个hover
        //& 就表示外层的父元素
        &:hover{
            color: orange;
        }
    
        div &{
            width: 100px;
        }
    }
    
    .p1{
        width: 100px;
        height: 200px;
    }
    
    //:extend() 对当前选择器扩展指定选择器的样式(选择器分组)
    .p2:extend(.p1){
        color: red;
    }
    
    .p3{
        //直接对指定的样式进行引用,这里就相当于将p1的样式在这里进行了复制
        //mixin 混合
        .p1();
    }
    
    // 使用类选择器时可以在选择器后边添加一个括号,这时我们实际上就创建了一个mixins
    .p4(){
        width: 100px;
        height: 100px;
    }
    
    .p5{
        .p4;
    }
    
    //混合函数 在混合函数中可以直接设置变量
    .test(@w:100px,@h:200px,@bg-color:red){
        width: @w;
        height: @h;
        border: 1px solid @bg-color;
    }
    
    div{
        //调用混合函数,按顺序传递参数
        // .test(200px,300px,#bfa);
        .test(300px);
        // .test(@bg-color:red, @h:100px, @w:300px);
    }
    
    span{
        color: average(red,blue);
    }
    
    html{
        width: 100%;
        height: 100%; 
    }
    body {
        width: 100%;
        height: 100%;
        background-color: #bfa;
    }
    
    body:hover{
        background-color: darken(#bfa,50%);
    }
    
    

    第十章:容器及移动端适配

    
    
    
        
        
        
        Document
        
    
    
        
    
         
    • 1
    • 2
    • 3
    
    
    
        
        
        
        Document
        
    
    
        
    
         
    • 1
    • 2
    • 3
    
    
    
        
        
        
        Document
        
    
    
        
    
         
    • 1
    • 2
      2
    • 3
      3
      3
    • 1
    • 2
      2
    
    
    
        
        
        
        Document
        
    
    
        
    
         
    • 1
    • 2
    • 3
    
    
    
        
        
        
        Document
        
    
    
    
        
    
    
    
        
        
        
        Document
        
    
    
        
    
         
    
    
    
        
        
        
    
        
        
        Document
        
    
    
        
        
    
    
    
        
        
        
        Document
        
    
    
    
        
        
    
    
    
        
        
        
        Document
        
    
    
    
        
         
    
    
    
        
        
        
        Document
        
    
    
        
        
    
    
    
    
    
    
        
        
        
        Document
        
    
    
        
    
    
    

    HTML与CSS总复习综合练习

    习题一:
    
    
    
        
        
        
        图片列表
        
        
    
    
    
        
    
        
        
    
    
    
    习题二:
    
    
    
    
        
        
        
        京东的左侧导航
        
        
    
    
    
    
        
        
    
    
    
    
    
    
    
    习题三:
    
    
    
    
        
        
        
        网易的新闻列表
        
        
    
    
    
    
        
        
    
    
    
    
    
    习题四:
    
    
    
    
        
        
        
        导航条
        
        
    
    
    
        
        
    
    
    
    
    
    习题五:
    
    
    
        
        
        
        Document
        
        
    
    
        
    习题六:
    
    
    
    
        
        
        
        京东顶部导航条