admin管理员组文章数量:1566223
前言
对网页设计的课程进行一下总结,方便复习,这篇博客本来就是给自己看的,所以就省略了很多东西。
基础知识
www(万维网缩写)_百度百科 (baidu)https://baike.baidu/item/www/109924?fr=ge_ala计算机网络——应用层(万维网WWW)_万维网的工作方式-CSDN博客https://blog.csdn/weixin_45084986/article/details/118178040URL格式_百度百科 (baidu)https://baike.baidu/item/URL%E6%A0%BC%E5%BC%8F/10056474?fr=ge_ala可扩展标记语言_百度百科 (baidu)https://baike.baidu/item/%E5%8F%AF%E6%89%A9%E5%B1%95%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80/2885849?fr=ge_alaWWW(World Wide Web,万维网)是Internet上基于客户/服务器体系结构的分布式多平台的超文本超媒体信息服务系统,它是Internet的最主要的信息服务,允许用户在一台计算机上通过Internet存取另一台计算机上的信息。
www是以客户机/服务器的方式来工作的,由3个部分协调共同完成的:客户机 、服务器、http协议。
URL是统一资源定位器,它是uniform resource locations的缩写 。
URL的标准结构:协议名称://主机名称[:端口地址/存放目录/文件名称]
一个标准的url是由4部分组成的:第一是协议;第二是主机名;第三部分就是文件存放在主机上的路径;第四部分是文件名。
HTML
HTML_百度百科 (baidu)https://baike.baidu/item/HTML/97049?fr=ge_ala
标记语言_百度百科 (baidu)https://baike.baidu/item/%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80/5964436?fromModule=lemma_inlink超文本_百度百科 (baidu)https://baike.baidu/item/%E8%B6%85%E6%96%87%E6%9C%AC/2832422?fromModule=lemma_inlink
HTML(Hyper Text Markup Language)的全称为超文本标记语言。
标记语言,是一种将文本以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。
超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。
编辑这个程序一方面可以通过先在记事本中编辑程序,然后通过修改后缀名的形式来运行。
注释标记<!--...-->
注释并不局限于一行,长度不受限制。结束标记与开始标记可以不在一行上。
<!-- 注释并不局限于一行,
长度不受限制。
结束标记与开始标记
可以不在一行上。
-->
空格字符:
换行<br>,不换号<nobr>...</nobr>
段落标记<p>...</p>
段落标记放在一个段落的头尾,用于定义一个段落。属性align用来设置段落文字在网页上的对齐方式:left(左对齐)、center(居中)和right(右对齐)。缺省时默认为left。
定位标记<div>…</div>
设定文字、图像、表格的摆放位置。align属性同p标签一致。
水平线标记<hr>
在页面中插入一条水平标尺线,可以使不同功能的文字分隔开,看起来整齐、明了。
size设定线条粗细,以像素为单位,默认为2。
width设定线段长度,可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)
color设定线条色彩,默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以“#”引导
的一个十六进制数代码来表示。
标题文字标记<h#>…</h#>
用来指定标题文字的大小,#取1~6的整数值,取1时文字最大,6时文字最小。align属性同前面一致。
字体标记<font>...</font>
设置字体的大小、字体、字型、色彩。
size用来设置文字的大小。数字的取值范围从1~7,size取1时最小,取7时最大。
face用来设置字体。如黑体、宋体、楷体_GB2312、隶书等。
color用来设置文字色彩。
回乡偶书二首·其一_诗词_百度汉语 (baidu)https://hanyu.baidu/shici/detail?from=aladdin&pid=3e5b492d37cb4f9d908d6e329cfb1455&showPinyin=1
<html>
<head>
<title>练习题</title>
</head>
<body>
<!-- “回乡偶书”用2号标题居中显示 head-->
<h2 align="center">回乡偶书</h2>
<!-- 作者“贺知章”用5号标题同样居中显示。 -->
<h5 align="center">贺知章</h5>
<!-- 正文和标题之间加一条兰色的三号水平线进行分隔。水平标尺线:Horizontal Rule -->
<hr color="blue" size="3">
<!--用定位标记设置成居中-->
<div align="center">
<!-- 前两句用绿色的4号隶书字体加粗显示 加粗:bold-->
<font color="green" face="隶书">
<b>少小离家老大回,乡音无改鬓毛衰。</b>
</font>
<!-- 正文的四句诗分两行显示 break-->
</br>
<!-- 后两句用红色的4号幼圆字体以倾斜的效果显示 倾斜:incline-->
<font color="red" face="幼圆">
<i>儿童相见不相识,笑问客从何处来。</i>
</font>
</div>
<!-- 独立成一段,并且中间不换行。nobr -->
<p>
<nobr>
解析:这是一首久客异乡、缅怀故里的感怀。写于初来乍到之时,抒写久客伤老之情。
在第一、二句中,诗人置身于故乡熟悉而又陌生的环境之中,一路迤逦行来,心情颇不平静:当年离家,风华正茂;
今日返归,鬓毛疏落,不禁感慨系之。首句用“少小离家”与“老大回”的句中自对,概括写出数十年久客他乡的事实,
暗寓自伤“老大”之情。次句以“鬓毛衰”顶承上句,具体写出自己的“老大”之态,并以不变的“乡音”映衬变化了的“鬓毛”,
言下大有“我不忘故乡,故乡可还认得我吗”之意,从而为唤起下两句儿童不相识而发问作好铺垫。
</nobr>
</p>
</body>
</html>
锚点标记<a>...</a>
href属性为超文本引用,是目标资源的有效地址,空超链接可以用“#”代替URL。
target属性设定链接被单击后结果所要开始窗口的方式。可选值为:_blank,_parent,_self,_top。
href (hypertext reference)超文本引用
a标签的target属性-CSDN博客https://blog.csdn/qq_42000201/article/details/102841404
贺知章《回乡偶书》全诗原文、注释、翻译和赏析 - 可可诗词网 (kekeshici)https://www.kekeshici/shicijianshang/tangdai/hezhizhang/2107.htmlmulu.html
<html>
<head>
<title>目录</title>
</head>
<body>
<!-- 在目录的《静夜思》和《回乡偶书》上建立超链接。
分别链接到tangshi文件夹中的jys.html和hxos.html网页文件。
_blank 内容在新页面显示
_parent 在父窗体中打开链接,在窗口与顶级框架中,等同于_self-->
<a href="tangshi/jys.html" target="_blank">《静夜思》</a>
<a href="tangshi/hxos.html" target="_parent">《回乡偶书》</a>
</body>
</html>
jys.html
<html>
<head>
<title>静夜思</title>
</head>
<body>
<!-- 在jys.html网页文件的“目录”两个字上建立超链接,使之重新链接回目录网页文件mulu.html。
_self 内容在当前页面显示。-->
<a href="../mulu.html" target="_self">目录</a>
</body>
</html>
hxos.html
<html>
<head>
<title>回乡偶书</title>
</head>
<body>
<!-- 在hxos.html网页文件的“简析”两个字上建立指向jianxi文件夹中jianxi.html网页文件的链接
_top 在当前窗体打开链接,并替换当前的整个窗体(框架页),清除所有包含的框架 无框架也和_self一样-->
<a href="../jianxi/jianxi.html" target="_top">简析</a>
</body>
</html>
jianxi.html
<a name="记号名">目标文本附近的字符串</a>
<a href="#记号名">热点文本</a>
从“热点文本”定位到“记号名”开始的网页元素。
<html>
<head>
<title>简析</title>
</head>
<body>
<a href="#简析">简析</a>
<p>
贺知章三十六岁中进士,在长安做官,八十六岁时因病还乡,其间离乡已五十多年,乡情积郁,人世沧桑,心中感慨万千,于是写下了《回乡偶书》七言绝句两首,这是其中的第一首。题为“偶书”,就是说诗人并非着意作诗,而是把回乡后感受最深的事和想法记下来。
诗的内容很平凡,感情却朴实亲切,富于人情味,因而感人至深,为人传诵。
</p>
<p>
贺知章《回乡偶书二首·其一》
.[唐].贺知章
少小离乡老大回,乡音难改鬓毛衰。
儿童相见不相识,笑问客从何处来。
</p>
<p>
①鬓毛衰(cui):指人老鬓发稀疏脱落。
②何:什么。
③处:地方。
</p>
<p>
【诗大意】 年轻时离开家,年老了才回来。鬓发已经斑白疏落,家乡的口音还没有改变。路上碰到的儿童看见我都不认识,他们笑着问我从哪里来。
</p>
<p>
这首诗是偶然得来,却大有讲究。一、二两句以写实的手法写感慨。少小离家,老大归来,乡音不变,两鬓苍白,
没有一件不是事实。妙就妙在诗人把“少小”和“老大”、“离家”和“回”、“无改”和“衰”这些具有对立意义的词组织起来,
两两对举,组成“少小离家老大回,乡音无改鬓毛衰”这样的诗句。短短的诗句,包容了几十年的生活变迁和人生慨叹,
唤起了读者同样或类似的生活经历,产生了浓郁的诗意。然后,诗人把引发感慨的生活事件写出来。“儿童相见不相识,
笑问客从何处来”,就使全诗耐人咀嚼,余味无穷。“笑问客从何处来”,在儿童,这只是淡淡的一问,言尽而意止;在诗人,
却成了重重的一击,引出了他的无穷感慨,自己的老迈衰颓与反主为宾的悲哀,
都包含在这看似平淡的一问之中了。全诗就在这有问无答处悄然作结,而弦外之音却如空谷传响,哀婉备至,久久不绝。
</p>
<p>
这首诗是偶然得来,却大有讲究。一、二两句以写实的手法写感慨。少小离家,老大归来,乡音不变,两鬓苍白,
没有一件不是事实。妙就妙在诗人把“少小”和“老大”、“离家”和“回”、“无改”和“衰”这些具有对立意义的词组织起来,
两两对举,组成“少小离家老大回,乡音无改鬓毛衰”这样的诗句。短短的诗句,包容了几十年的生活变迁和人生慨叹,
唤起了读者同样或类似的生活经历,产生了浓郁的诗意。然后,诗人把引发感慨的生活事件写出来。“儿童相见不相识,
笑问客从何处来”,就使全诗耐人咀嚼,余味无穷。“笑问客从何处来”,在儿童,这只是淡淡的一问,言尽而意止;在诗人,
却成了重重的一击,引出了他的无穷感慨,自己的老迈衰颓与反主为宾的悲哀,
都包含在这看似平淡的一问之中了。全诗就在这有问无答处悄然作结,而弦外之音却如空谷传响,哀婉备至,久久不绝。
</p>
<p>
这首诗是偶然得来,却大有讲究。一、二两句以写实的手法写感慨。少小离家,老大归来,乡音不变,两鬓苍白,
没有一件不是事实。妙就妙在诗人把“少小”和“老大”、“离家”和“回”、“无改”和“衰”这些具有对立意义的词组织起来,
两两对举,组成“少小离家老大回,乡音无改鬓毛衰”这样的诗句。短短的诗句,包容了几十年的生活变迁和人生慨叹,
唤起了读者同样或类似的生活经历,产生了浓郁的诗意。然后,诗人把引发感慨的生活事件写出来。“儿童相见不相识,
笑问客从何处来”,就使全诗耐人咀嚼,余味无穷。“笑问客从何处来”,在儿童,这只是淡淡的一问,言尽而意止;在诗人,
却成了重重的一击,引出了他的无穷感慨,自己的老迈衰颓与反主为宾的悲哀,
都包含在这看似平淡的一问之中了。全诗就在这有问无答处悄然作结,而弦外之音却如空谷传响,哀婉备至,久久不绝。
</p>
<p>
这首诗是偶然得来,却大有讲究。一、二两句以写实的手法写感慨。少小离家,老大归来,乡音不变,两鬓苍白,
没有一件不是事实。妙就妙在诗人把“少小”和“老大”、“离家”和“回”、“无改”和“衰”这些具有对立意义的词组织起来,
两两对举,组成“少小离家老大回,乡音无改鬓毛衰”这样的诗句。短短的诗句,包容了几十年的生活变迁和人生慨叹,
唤起了读者同样或类似的生活经历,产生了浓郁的诗意。然后,诗人把引发感慨的生活事件写出来。“儿童相见不相识,
笑问客从何处来”,就使全诗耐人咀嚼,余味无穷。“笑问客从何处来”,在儿童,这只是淡淡的一问,言尽而意止;在诗人,
却成了重重的一击,引出了他的无穷感慨,自己的老迈衰颓与反主为宾的悲哀,
都包含在这看似平淡的一问之中了。全诗就在这有问无答处悄然作结,而弦外之音却如空谷传响,哀婉备至,久久不绝。
</p>
<h4>
<a name="简析">简析</a>
</h4>
<p>
诗的前两句可谓信手拈来,不着痕迹,却散发出浓郁的生活气息。当 年我在年少时远离家乡,如今年逾古稀才姗姗回家,我的乡音没有丝毫改 变,但我鬓角的毛发越来越少。在此,诗人有意选择两组对比鲜明的意
象,给读者以强烈的视觉冲击与心理感受:少小离家对老大回乡,意味着 时空的漫长穿越,以及对家乡的情意依然浓烈;乡音未改却已鬓毛稀疏, 暗示离家之久远,以及世事无常、生命凋零的感叹。此二句,诗人以意象
的强烈反差烘托出诗人的“久客之感”,情真意切而又感人至深。
</p>
<p>
如果说前两句不过是平铺直叙的话,三、四句则笔锋陡转,为我们展 示出一幅诗人与儿童戏剧性问答的温馨场面。正当诗人无限感伤之时, 突然有一位故乡的小童迈步向前,笑盈盈地问道:“老大爷,您是从哪里过
来的啊?”对故乡的思念人皆有之,“近乡情更怯”的感受人皆有之,面对熟 悉而陌生的故乡故人,却总有万语千言无处表达的感觉。岑参有“故园东 望路漫漫,双袖龙钟泪不干。马上相逢无纸笔,凭君传语报平安”的诗句,
正传递出这种思念满怀却又欲言又止的微妙情绪。诗人用童子的笑问作 结,正彰显出诗人对重返故乡既失落又兴奋,既伤怀又欢畅的复杂情绪。 一“客”字,让诗人的身份发生位移,从原来的“主体”沦为今天的“客体”,
主客易位之间,恍惚的是岁月的沧桑与时空的颠倒,极大地提升了全诗的 哲理意蕴与审美境界。
</p>
<p>
就情感基调而言,全诗大起大落,从曾经的伤感唏嘘到其后的童趣满 怀,我们分明从诗人与童子的对话中,触摸到一股欢快的情绪在跳跃。从 创作风格来说,全诗全用直白语,天然去雕饰,但却语浅而情真,情景交
融,可谓“情景宛然,纯乎天籁”(清宋宗元《网师园唐诗笺》卷十四)。从哲 理意蕴来看,诗人以阅览人世沧桑与人生智慧之笔,写尽繁华落尽的淡然 与平和,沉淀出深邃的人生智慧。古人云:“宠辱不惊,闲看庭前花开花
落;去留无意,漫随天外云卷云舒。”或许,洪应明的这段话,正可作为本诗 人生表达与哲理阐释的最佳注脚。
</p>
<p>
诗的前两句可谓信手拈来,不着痕迹,却散发出浓郁的生活气息。当 年我在年少时远离家乡,如今年逾古稀才姗姗回家,我的乡音没有丝毫改 变,但我鬓角的毛发越来越少。在此,诗人有意选择两组对比鲜明的意
象,给读者以强烈的视觉冲击与心理感受:少小离家对老大回乡,意味着 时空的漫长穿越,以及对家乡的情意依然浓烈;乡音未改却已鬓毛稀疏, 暗示离家之久远,以及世事无常、生命凋零的感叹。此二句,诗人以意象
的强烈反差烘托出诗人的“久客之感”,情真意切而又感人至深。
</p>
<p>
如果说前两句不过是平铺直叙的话,三、四句则笔锋陡转,为我们展 示出一幅诗人与儿童戏剧性问答的温馨场面。正当诗人无限感伤之时, 突然有一位故乡的小童迈步向前,笑盈盈地问道:“老大爷,您是从哪里过
来的啊?”对故乡的思念人皆有之,“近乡情更怯”的感受人皆有之,面对熟 悉而陌生的故乡故人,却总有万语千言无处表达的感觉。岑参有“故园东 望路漫漫,双袖龙钟泪不干。马上相逢无纸笔,凭君传语报平安”的诗句,
正传递出这种思念满怀却又欲言又止的微妙情绪。诗人用童子的笑问作 结,正彰显出诗人对重返故乡既失落又兴奋,既伤怀又欢畅的复杂情绪。 一“客”字,让诗人的身份发生位移,从原来的“主体”沦为今天的“客体”,
主客易位之间,恍惚的是岁月的沧桑与时空的颠倒,极大地提升了全诗的 哲理意蕴与审美境界。
</p>
<p>
就情感基调而言,全诗大起大落,从曾经的伤感唏嘘到其后的童趣满 怀,我们分明从诗人与童子的对话中,触摸到一股欢快的情绪在跳跃。从 创作风格来说,全诗全用直白语,天然去雕饰,但却语浅而情真,情景交
融,可谓“情景宛然,纯乎天籁”(清宋宗元《网师园唐诗笺》卷十四)。从哲 理意蕴来看,诗人以阅览人世沧桑与人生智慧之笔,写尽繁华落尽的淡然 与平和,沉淀出深邃的人生智慧。古人云:“宠辱不惊,闲看庭前花开花
落;去留无意,漫随天外云卷云舒。”或许,洪应明的这段话,正可作为本诗 人生表达与哲理阐释的最佳注脚。
</p>
<p>
诗的前两句可谓信手拈来,不着痕迹,却散发出浓郁的生活气息。当 年我在年少时远离家乡,如今年逾古稀才姗姗回家,我的乡音没有丝毫改 变,但我鬓角的毛发越来越少。在此,诗人有意选择两组对比鲜明的意
象,给读者以强烈的视觉冲击与心理感受:少小离家对老大回乡,意味着 时空的漫长穿越,以及对家乡的情意依然浓烈;乡音未改却已鬓毛稀疏, 暗示离家之久远,以及世事无常、生命凋零的感叹。此二句,诗人以意象
的强烈反差烘托出诗人的“久客之感”,情真意切而又感人至深。
</p>
<p>
如果说前两句不过是平铺直叙的话,三、四句则笔锋陡转,为我们展 示出一幅诗人与儿童戏剧性问答的温馨场面。正当诗人无限感伤之时, 突然有一位故乡的小童迈步向前,笑盈盈地问道:“老大爷,您是从哪里过
来的啊?”对故乡的思念人皆有之,“近乡情更怯”的感受人皆有之,面对熟 悉而陌生的故乡故人,却总有万语千言无处表达的感觉。岑参有“故园东 望路漫漫,双袖龙钟泪不干。马上相逢无纸笔,凭君传语报平安”的诗句,
正传递出这种思念满怀却又欲言又止的微妙情绪。诗人用童子的笑问作 结,正彰显出诗人对重返故乡既失落又兴奋,既伤怀又欢畅的复杂情绪。 一“客”字,让诗人的身份发生位移,从原来的“主体”沦为今天的“客体”,
主客易位之间,恍惚的是岁月的沧桑与时空的颠倒,极大地提升了全诗的 哲理意蕴与审美境界。
</p>
<p>
就情感基调而言,全诗大起大落,从曾经的伤感唏嘘到其后的童趣满 怀,我们分明从诗人与童子的对话中,触摸到一股欢快的情绪在跳跃。从 创作风格来说,全诗全用直白语,天然去雕饰,但却语浅而情真,情景交
融,可谓“情景宛然,纯乎天籁”(清宋宗元《网师园唐诗笺》卷十四)。从哲 理意蕴来看,诗人以阅览人世沧桑与人生智慧之笔,写尽繁华落尽的淡然 与平和,沉淀出深邃的人生智慧。古人云:“宠辱不惊,闲看庭前花开花
落;去留无意,漫随天外云卷云舒。”或许,洪应明的这段话,正可作为本诗 人生表达与哲理阐释的最佳注脚。
</p>
<p>
诗的前两句可谓信手拈来,不着痕迹,却散发出浓郁的生活气息。当 年我在年少时远离家乡,如今年逾古稀才姗姗回家,我的乡音没有丝毫改 变,但我鬓角的毛发越来越少。在此,诗人有意选择两组对比鲜明的意
象,给读者以强烈的视觉冲击与心理感受:少小离家对老大回乡,意味着 时空的漫长穿越,以及对家乡的情意依然浓烈;乡音未改却已鬓毛稀疏, 暗示离家之久远,以及世事无常、生命凋零的感叹。此二句,诗人以意象
的强烈反差烘托出诗人的“久客之感”,情真意切而又感人至深。
</p>
<p>
如果说前两句不过是平铺直叙的话,三、四句则笔锋陡转,为我们展 示出一幅诗人与儿童戏剧性问答的温馨场面。正当诗人无限感伤之时, 突然有一位故乡的小童迈步向前,笑盈盈地问道:“老大爷,您是从哪里过
来的啊?”对故乡的思念人皆有之,“近乡情更怯”的感受人皆有之,面对熟 悉而陌生的故乡故人,却总有万语千言无处表达的感觉。岑参有“故园东 望路漫漫,双袖龙钟泪不干。马上相逢无纸笔,凭君传语报平安”的诗句,
正传递出这种思念满怀却又欲言又止的微妙情绪。诗人用童子的笑问作 结,正彰显出诗人对重返故乡既失落又兴奋,既伤怀又欢畅的复杂情绪。 一“客”字,让诗人的身份发生位移,从原来的“主体”沦为今天的“客体”,
主客易位之间,恍惚的是岁月的沧桑与时空的颠倒,极大地提升了全诗的 哲理意蕴与审美境界。
</p>
<p>
就情感基调而言,全诗大起大落,从曾经的伤感唏嘘到其后的童趣满 怀,我们分明从诗人与童子的对话中,触摸到一股欢快的情绪在跳跃。从 创作风格来说,全诗全用直白语,天然去雕饰,但却语浅而情真,情景交
融,可谓“情景宛然,纯乎天籁”(清宋宗元《网师园唐诗笺》卷十四)。从哲 理意蕴来看,诗人以阅览人世沧桑与人生智慧之笔,写尽繁华落尽的淡然 与平和,沉淀出深邃的人生智慧。古人云:“宠辱不惊,闲看庭前花开花
落;去留无意,漫随天外云卷云舒。”或许,洪应明的这段话,正可作为本诗 人生表达与哲理阐释的最佳注脚。
</p>
</body>
</html>
图片标记<img>
<img src=“图片文件名” alt=“替换文本" width="图片宽度" height="图片高度" border="边框宽度" hspace="水平方向空白" vspace="垂直方向空白" align="环绕方式|对齐方式">
无序列表标记<ul><li>...</li></ul>
<li>之前是单标签,在html5中是双标签。type指定每个表项左端的符号类型,可为disc(实心圆点)、circle(空心圆点)、square(方块)默认是实心圆。unordered list
有序列表标记<ol><li>...</li></ol>
整个表项与上下段文本之间各有一行空白;列表项目向右缩进并左对齐;各表项前带顺序号。ordered list
<html>
<head>
<title>图片</title>
</head>
<body>
<a href="列表.html">
<img src="cat.jpg" alt="cat" width="50%" height="100%">
</a>
</body>
</html>
alt替换的是如果当图片没有找到的时候被替换的文本。
<html>
<head>
<title>列表</title>
</head>
<body>
<ul type="disc">
<li>基本信息</li>
<li type="circle">尺寸和重量
<ol>
<li>长(mm)0205</li>
<li>宽(mm)0429</li>
<li>高(mm)0711</li>
</ol>
</li>
<li>发动机参数</li>
<li>驾驶性能
<ul>
<li type="disc">油耗(L/100Km)13.60</li>
<li type="square">最高车速(Km/h)250</li>
</ul>
</li>
</ul>
</body>
</html>
<html>
<head>
<title>列表</title>
</head>
<body>
<ul>
<li></li>
<ul>
<li></li>
<ul>
<li></li>
<ul>
<li></li>
<ul>
<li></li>
</ul>
</ul>
</ul>
</ul>
</ul>
</body>
</html>
表格标记<table>
width,height,水平对齐:align,垂直对齐:valign。valign的属性值分别为:top(靠单元格顶)、bottom(靠单元格底)、middle(靠单元格中)或baseline(同行单元数据项位置一致)。
航海王(1997年日本漫画家尾田荣一郎创作的少年漫画)_百度百科 (baidu)https://baike.baidu/item/%E8%88%AA%E6%B5%B7%E7%8E%8B/75861tr table row
td table data
th table head表头
<html>
<head>
<title>表格</title>
</head>
<body>
<table>
<tr>
<th>
职位
</th>
<th>
简介
</th>
<th>
图片
</th>
</tr>
<tr>
<td>
船长
</td>
<td>
<p><b>蒙奇·D·路飞</b></p>
<p>“草帽一伙”的船长,外号“草帽小子”。
东海出身,悬赏金30亿贝里。“草帽一伙”的创立者,是被称作“极恶的世代”中登陆香波地群岛的11位超新星的其中一位。
在“和之国”事件中将原“四皇”之一的“百兽”凯多击溃,顶替其成为新的“四皇”。
是食用了橡胶果实的橡胶人(五老星认为这是人人果实·幻兽种·尼卡形态)。
梦想成为“海贼王”,以此为目标在大海上航行。
</p>
</td>
<td>
<img src="img/路飞.webp" width="100%" height="100%">
</td>
</tr>
<tr>
<td>
战斗员
</td>
<td>
<p><b>罗罗诺亚·索隆</b></p>
<p>“草帽一伙”的战斗员,外号“海贼猎人”。东海出身,悬赏金11亿1100万贝里。
“草帽一伙”第一位加入的成员,与船长路飞一样是被称作“极恶的世代”中登陆香波地群岛的11位超新星的其中一位。
是使用三把刀战斗的三刀流剑士,梦想成为“世界第一大剑豪”,以此为目标在大海上航行。
</p>
</td>
<td>
<img src="img/索隆.webp" width="100%" height="100%">
</td>
</tr>
<tr>
<td>
航海士
</td>
<td>
<p><b>娜美</b></p>
<p>“草帽一伙”的航海士,外号“小贼猫”。东海出身,悬赏金3亿6600万贝里。使用天候棒结合气象科学进行战斗。
“草帽一伙”第二位加入的成员。 梦想绘制“全世界的地图”,以此为目标在大海上航行。
</p>
</td>
<td>
<img src="img/娜美.webp" width="100%" height="100%">
</td>
</tr>
<tr>
<td>
狙击手
</td>
<td>
<p><b>乌索普</b></p>
<p>“草帽一伙”的狙击手,外号“狙击之王”、“GOD·乌索普”。东海出身,悬赏金5亿贝里。使用特制弹弓和植物弹药进行战斗。
“草帽一伙”第三位加入的成员。梦想“成为勇敢的海上战士”,以此为目标在大海上航行。
</p>
</td>
<td>
<img src="img/乌索普.webp" width="100%" height="100%">
</td>
</tr>
<tr>
<td>
厨师
</td>
<td>
<p><b>山治</b></p>
<p>“草帽一伙”的厨师,外号“黑足”。北海出身,悬赏金10亿3200万贝里。使用踢技和杰尔马战斗服进行战斗。
“草帽一伙”第四位加入的成员。梦想“找到传说中的海域·All Blue”,以此为目标在大海上航行。
</p>
</td>
<td>
<img src="img/山治.webp" width="100%" height="100%">
</td>
</tr>
<tr>
<td>
船医
</td>
<td>
<p><b>托尼托尼·乔巴</b></p>
<p>“草帽一伙”的船医,外号“爱吃棉花糖的乔巴”。伟大航路出身,悬赏金1000贝里。
是食用了人人果实的驯鹿。“草帽一伙”第五位加入的成员。梦想“成为万能药”,以此为目标在大海上航行。
</p>
</td>
<td>
<img src="img/乔巴.webp" width="100%" height="100%">
</td>
</tr>
<tr>
<td>
考古学家
</td>
<td>
<p><b>妮可·罗宾</b></p>
<p>“草帽一伙”的考古学家,外号“恶魔之子”。西海出身,悬赏金9亿3000万贝里。食用了花花果实的能力者。
“草帽一伙”第六位加入的成员。梦想“找到空白的100年历史”,以此为目标在大海上航行。
</p>
</td>
<td>
<img src="img/罗宾logo.jpg" width="100%" height="100%">
</td>
</tr>
<tr>
<td>
船匠
</td>
<td>
<p><b>弗兰奇</b></p>
<p>“草帽一伙”的船匠,外号“铁人·弗兰奇”。南海出身,悬赏金3亿9400万贝里。
使用改造后的身体以及自制兵器进行战斗。“草帽一伙”第七位加入的成员。梦想“乘坐自己制作的梦想之船绕伟大航路一周”,以此为目标在大海上航行。
</p>
</td>
<td>
<img src="img/弗兰奇.webp" width="100%" height="100%">
</td>
</tr>
<tr>
<td>
音乐家
</td>
<td>
<p><b>布鲁克</b></p>
<p>“草帽一伙”的音乐家,外号“鼻歌·布鲁克”、“灵魂之王”。西海出身,悬赏金3亿8300万贝里。食用了黄泉果实的能力者。使用一把西洋剑战斗的剑士,战斗时会使用黄泉果实的能力作为辅助。
“草帽一伙”第八位加入的成员。梦想“与拉布汇合,实现与拉布的约定”,以此为目标在大海上航行。
</p>
</td>
<td>
<img src="img/布鲁克.webp" width="100%" height="100%">
</td>
</tr>
<tr>
<td>
舵手
</td>
<td>
<p><b>甚平</b></p>
<p>“草帽一伙”的舵手,外号“海侠甚平”。龙宫王国出身,悬赏金11亿贝里。
鱼人族的鲸鲨鱼人,使用鱼人空手道和鱼人柔道进行战斗。“草帽一伙”第九位加入的成员,原王下七武海之一。
梦想“帮助路飞成为海贼王,见证鱼人族和人鱼族获得真正的自由”,以此为目标在大海上航行。
</p>
</td>
<td>
<img src="img/甚平.webp" width="100%" height="100%">
</td>
</tr>
</table>
</body>
</html>
<table border="1" width="50%" height="10%" cellpadding="2" cellspacing="1" align="center">
</table>
border 是否拥有边框 1表示有,“”表示没有,默认没有
cellpadding 单元边沿与其内容之间的空白,默认1像素
cellspacing 单元格之间的空白,默认2像素
字幕标记<marquee>
<marquee direction="left|right|up|down" behavior="scroll|slide|alternate" loop="i|-1|infinite" hspace="m" vspace="n" scrollamount="i" scrolldelay="j" align="top|middle|bottom" bgcolor="色彩" width="x|x%" height="y"> 流动文字或(和)图片 </marquee>
marquee标记的属性值尽量使用默认值
<html>
<head>
<title>字幕标记</title>
</head>
<body>
<marquee>普通卷动</marquee>
<marquee behavior="slide">滑动</marquee>
<marquee behavior="scroll">预设卷动</marquee>
<marquee behavior="alternate">来回卷动</marquee>
<marquee direction="down">向下卷动</marquee>
<marquee direction="up">向上卷动</marquee>
<marquee direction="right">向右卷动</marquee>
<marquee direction="left">向左卷动</marquee>
<marquee loop="2">卷动2次</marquee>
<marquee>
活动字幕内容第一行<br>
活动字幕内容第二行<br>
活动字幕内容第三行<br>
</marquee>
<marquee><img src="cat.jpg" width="18"></marquee>
</body>
</html>
“卷动两次”的消失了
音频视频
- <a>...</a>
- 内嵌视频播放插件<embed>
<html>
<head>
<title>音频视频</title>
</head>
<body>
<a href="img/【Animenz】_We_Are!_-_海贼王_One_Piece_OP1_钢琴版.mp3">播放音乐</a>
<a href="img/【Animenz】_We_Are!_-_海贼王_One_Piece_OP1_钢琴版.mp4">播放视频</a>
<embed src="img/【Animenz】_We_Are!_-_海贼王_One_Piece_OP1_钢琴版.mp3">
<embed src="img/【Animenz】_We_Are!_-_海贼王_One_Piece_OP1_钢琴版.mp4">
</body>
</html>
框架<frameset>,<frame>
<frameset>的rows和cols属性用于设定横向分割和纵向分割的框架数目。标签需要置于<body>标签之前。
写在body标签中就没有这个效果,而且需要有rows或者cols属性,不然只会显示第一个页面,值之间是用逗号隔开,可以是像素也可以是百分比,如果cols="30%,40%",后面的页面会占70%。
老师教的是单标签,但是编译器是没有这个标签的,都可以实现效果。
<html>
<head>
<title>框架</title>
<frameset rows="30%,*">
<frame src="mulu.html"></frame>
<frameset cols="30%,40%,*">
<frame src="表格.html"></frame>
<frame src="字幕.html">
<frame src="列表.html"></frame>
</frameset>
</frameset>
</head>
<body>
</body>
</html>
表单标记<form>...</form>
type属性值为text,则输入的文本以标准的字符显示;type属性值为password,则输入的文本显示为“*”;type属性值为reset,清除输入到表单中的全部内容;type属性值为submit,将表单内容送给action中的网址或函件信箱;type属性值为radio,单选钮。select,选择栏,多行文字输入textarea。
radio和checkbox通过checked="checked"属性来确定默认选择的值,通过name属性来把一组联系起来,如果想扩大选中的范围可以通过label标签,点击label标签里面的内容可以自动将焦点转到与该标签相关的表单控件上,通过for和id对应,option标签是通过selected="selected"属性来选择默认值。
<html>
<head>
<title>表单</title>
</head>
<body>
<form action="" method="">
姓名:<input type="text"><br>
密码:<input type="password"><br>
性别:
<input type="radio" name="sex" id="male" checked="checked"><label for="male">男</label>
<input type="radio" name="sex" id="female"><label for="female">女</label><br>
语言:
<input type="checkbox" name="lan" id="C"><label for="C">C</label>
<input type="checkbox" name="lan" id="Java" checked="checked"><label for="Java">Java</label>
<input type="checkbox" name="lan" id="python"><label for="python">python</label><br />
选择上传文件:<input type="file"><br>
学历:
<select>
<option>初中</option>
<option selected="selected">高中</option>
<option>专科</option>
<option>本科</option>
<option>硕士</option>
<option>博士</option>
</select><br>
学习经历:<br>
<textarea rows="5" cols="10"></textarea><br>
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>
</body>
</html>
CSS
CSS(层叠样式表)_百度百科 (baidu)https://baike.baidu/item/CSS/5457?fr=ge_ala层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。
行内样式
在元素标签内部的style属性中设定css样式。
内部样式
写到html页面内部,将所有的css代码抽取出来,单独放到一个<style>标签中。
链入外部样式表文件
当浏览器读取到HTML文档的样式表链接标签时,将向所链接的外部样式表索取样式。样式表保存为一个样式表文件(.css),然后在网页中用<link>标记链接到这个样式表文件。
导入外部样式表文件
当浏览器读取HTML文件时,复制一份样式表到这个HTML文件中,即在内部样式表的<style>标签中导入外部样式表文件。
class选择符
.标识后面接类名
id选择符
#标识后面接id名
类选择器——人名;id选择器——身份证
<html>
<head>
<title>内部样式表</title>
<style type="text/css">
/* 通配符选择器 */
* {
text-align: center;
}
/* 元素选择器 */
h1 {
color: red;
font-weight: bold;
}
/* class选择器 */
.green {
color: green;
font-weight: bold;
}
/* id选择器 */
#blue {
color: blue;
font-family: "隶书";
background-color: yellow;
}
</style>
</head>
<body>
<h1>
字体的颜色为红色,加粗并居中显示
</h1>
<h2 class="green">
字体的颜色为绿色,加粗并居中显示
</h2>
<p id="blue">
兰色20号的隶书,黄色的背景色,同时也居中显示
</p>
</body>
</html>
h1 {
color: #FFA500;
font-weight: bold;
text-align: center;
}
.black {
color: #000000;
text-align: center;
}
#lanse {
color: #0000ff;
font-size: 20px;
font-weight: bold;
font-family: "黑体";
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链入</title>
<link rel="stylesheet" href="waibu.css" type="text/css">
</head>
<body>
<h1>
橘黄色加粗显示的字体,居中显示
</h1>
<h2 class="black">
黑色加粗显示的字体,居中显示
</h2>
<p id="lanse">
字体为兰色20号的黑体,居中显示
</p>
</body>
</html>
import语句后面需要加上分号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导入</title>
<style type="text/css">
@import url("waibu.css");
</style>
</head>
<body>
<h1>
橘黄色加粗显示的字体,居中显示
</h1>
<h2 class="black">
黑色加粗显示的字体,居中显示
</h2>
<p id="lanse">
字体为兰色20号的黑体,居中显示
</p>
</body>
</html>
字号需要加上px,绝对尺寸
行内样式>内部样式=外部样式
字体属性(Font Properties)
字体(font-family)
font-family : 字体名称
设置显示的字体
字号(font-size)
font-size : 绝对尺寸 | 相对尺寸 | 百分数,em是相对单位,当前元素1个文字的大小。pt是Point,印刷行业常用单位,等于1/72英寸,px表示pixel,像素。
设置字体的大小
字体风格(font-style)
font-style : italic | oblique | normal,italic斜体,oblique如果不是斜体设置成斜体,normal正常
设置字体是否为斜体
字重(font-weight)
font-weight : bold | number | normal,number取值100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
bold为粗体,相当于number为700,normal为正常,相当于number400
设置文本字体的粗细
文字变形(text-transform)
text-transform: uppercase | lowercase | capitalize | none
uppercase使所有字母大写显示,lowercase使所有字母小写显示,capitalize使每个单词的第1个字母大写显示,none使所有继承的文字变形参数被忽略,文字将以原来的形式显示。
设置字母的大小写
文字修饰(text-decoration)
text-decoration : underline || blink || overline || line-through | none
underline为下划线,blink为闪烁,overline为上划线,line-through为贯穿线,none为无装饰。
设置文本的修饰
字体(font)
font : font-style || font-variant || font-weight || font-size || line-height || font-family
声明方式参数必须按照语法中的排列顺序。每个参数仅允许有一个值。忽略时将使用其参数对应的独立属性的默认值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体属性</title>
<style type="text/css">
* {
text-align: center;
}
.ziti1 {
font-family: "微软雅黑";
font-size: 20px;
font-style: italic;
font-weight: 100;
text-transform: uppercase;
text-decoration: underline;
}
.ziti2 {
font-family: "黑体";
font-size: 20pt;
font-style: oblique;
font-weight: 200;
text-transform: lowercase;
text-decoration: blink;
}
.ziti3 {
font-family: "楷体";
font-size: 2em;
font-style: normal;
font-weight: 300;
text-transform: capitalize;
text-decoration: overline;
}
.ziti4 {
font-family: "华文行楷";
font-size: 20%;
font-style: italic;
font-weight: 400;
text-transform: none;
text-decoration: line-through;
}
.ziti5 {
font-family: "华文新魏";
font-size: 20px;
font-style: oblique;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
}
.ziti6 {
font-family: "楷体_GB2312";
font-size: 20pt;
font-style: normal;
font-weight: 600;
text-transform: lowercase;
text-decoration: underline;
}
.ziti7 {
font-family: "幼圆";
font-size: 2em;
font-style: italic;
font-weight: 700;
text-transform: capitalize;
text-decoration: blink;
}
.ziti8 {
font-family: "隶书";
font-size: 20%;
font-style: oblique;
font-weight: 800;
text-transform: none;
text-decoration: underline;
}
.ziti9 {
font-family: "宋体";
font-size: 20px;
font-style: normal;
font-weight: 900;
text-transform: uppercase;
text-decoration: line-through;
}
.ziti10 {
font-family: "黑体";
font-size: 20pt;
font-style: italic;
font-weight: normal;
text-transform: lowercase;
text-decoration: none;
}
.ziti11 {
font-family: "华文彩云";
font-size: 2em;
font-style: oblique;
font-weight: bold;
text-transform: capitalize;
text-decoration: underline;
}
</style>
</head>
<body>
<p>默认 默认 默认 默认 原样显示:abcdEFGH 默认</p>
<p class="ziti1">
微软雅黑 20px 100 斜体 字母大写显示:abcdEFGH 下划线
</p>
<p class="ziti2">
黑体 20pt 斜体 200 字母小写显示:abcdEFGH 闪烁
</p>
<p class="ziti3">
楷体 2em 正常 300 首字母大写显示:abcdEFGH 上划线
</p>
<p class="ziti4">
华文行楷 20% 斜体 400 原样显示:abcdEFGH 贯穿线
</p>
<p class="ziti5">
华文新魏 20px 斜体 500 字母大写显示:abcdEFGH 无修饰
</p>
<p class="ziti6">
楷体_GB2312 20pt 正常 600 字母小写显示:abcdEFGH 下划线
</p>
<p class="ziti7">
幼圆 2em 斜体 700 首字母大写显示:abcdEFGH 闪烁
</p>
<p class="ziti8">
隶书 20% 斜体 800 原样显示:abcdEFGH 上划线
</p>
<p class="ziti9">
宋体 20px 正常 900 字母大写显示:abcdEFGH 贯穿线
</p>
<p class="ziti10">
黑体 20pt 斜体 normal 字母小写显示:abcdEFGH 无修饰
</p>
<p class="ziti11">
华文彩云 2em 斜体 bold 首字母大写显示:abcdEFGH 下划线
</p>
</body>
</html>
文本属性(Text Properties)
字间距(word-spacing)
word-spacing : length | normal
length是由数字和单位标识符组成的长度值,允许为负值。normal恢复为默认间距。
设置对象中单词之间插入的空格数
字母间距(letter-spacing)
letter-spacing : length | normal
length是由数字和单位标识符组成的长度值,允许为负值。normal恢复为默认间隔
设置对象中文字之间的间隔
行高(line-height)
line-height : length | normal
length为由百分比数字或由数字、单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。normal为默认行高。
设置对象中文本的高度
文字对齐(text-align)
text-align : left | right | center | justify
left为左对齐,right为右对齐,center为居中,justify为两端对齐。
设置对象中文本的对齐方式
文字缩行(text-indent)
text-indent : length
length为百分比数字或由浮点数字、单位标识符组成的长度值,允许为负值。
设置对象中文本段落的缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本属性</title>
<style type="text/css">
p {
background-color: red;
}
.wenben1 {
word-spacing: 20px;
}
.wenben2 {
letter-spacing: 20px;
}
.wenben3 {
line-height: 10px;
}
.wenben4 {
text-align: left;
}
.wenben5 {
text-align: right;
}
.wenben6 {
text-align: center;
}
.wenben7 {
text-align: justify;
}
.wenben8 {
text-indent: 20px;
}
</style>
</head>
<body>
<p>
浪漫至死不渝 Romantic till death do us part
</p>
<p class="wenben1">
浪漫至死不渝 Romantic till death do us part
</p>
<p class="wenben2">
浪漫至死不渝 Romantic till death do us part
</p>
<p class="wenben3">
浪漫至死不渝 Romantic till death do us part
</p>
<p class="wenben4">
浪漫至死不渝 Romantic till death do us part
</p>
<p class="wenben5">
浪漫至死不渝 Romantic till death do us part
</p>
<p class="wenben6">
浪漫至死不渝 Romantic till death do us part
</p>
<p class="wenben7">
浪漫至死不渝 Romantic till death do us part
</p>
<p class="wenben8">
浪漫至死不渝 Romantic till death do us part
</p>
</body>
</html>
控制BOX的属性
外延边距属性(Margins Properties)
外边距:盒子与盒子之间的距离
顶边的外延边距(margin-top)
margin-top : length | auto
length是由数字和单位标识符组成的长度值或者百分数,百分数是基于父对象的高度。auto值被设置为对边的值。
设置对象顶边的外延边距
右边的外延边距(margin-right)
margin-right : length | auto
设置对象右边的外延边距
底边的外延边距(margin-bottom)
margin-bottom: length | auto
设置对象底部的外延边距
左边的外延边距(margin-left)
margin-left: length | auto
设置对象左边的外延边距
外延边距(margin)
margin: length | auto
设置对象四边的外延边距
边框属性(Borders Properties)
所有边框宽度(border-width)
border-width : medium | thin | thick | length
medium为默认宽度,thin为小于默认宽度,thick为大于默认宽度。length由数字和单位标识符组成的长度值,不可为负值。
设置边框的宽度
边框样式(border-style)
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
如果提供全部四个参数值,将按上、右、下、左的顺序作用于四个边框。如果只提供一个,将用于全部的四条边。如果提供两个,第一个用于上、下,第二个用于左、右。如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。参数值空格分隔
设置边框的样式
边框色彩(border-color)
border-color : color
设置边框的颜色
要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。如果border-width等于0或border-style设置为none,本属性失去作用
顶边框(border-top)
border-top : border-width || border-style || border-color
填写多个属性值用分号(;)隔开
/* 分号分隔 */
border-top-width: 10px;
border-top-style: dotted;
border-top-color: black;
设置顶边框的宽度、样式、颜色
右边框(border-right)
border-right : border-width || border-style || border-color
设置右边框的宽度、样式、颜色
底边框(border-bottom)
border-bottom : border-width || border-style || border-color
设置第边框的宽度、样式、颜色
左边框border-left)
border-left : border-width || border-style || border-color
设置左边框的宽度、样式、颜色
对象间隙(Paddings Properties)
对象间隙也称内补丁,位于对象边框和对象之间
padding-top(顶部间隙)、padding-right(右边间隙)、padding-bottom(底部间隙)、padding-left(左边间隙)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框属性</title>
<style type="text/css">
* {
text-align: center;
}
.biankuang1 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: red;
height: 200px;
width: 200px;
margin-top: 100px;
border-color: black;
border-width: 10px;
border-style: none;
border-color: black;
}
.biankuang2 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: orange;
height: 200px;
width: 200px;
margin-bottom: 100px;
border-width: 10px;
border-style: hidden;
border-color: black;
}
.biankuang3 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: yellow;
height: 200px;
width: 200px;
margin-left: 100px;
border-width: 10px;
border-style: dotted;
border-color: black;
}
.biankuang4 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: green;
height: 200px;
width: 200px;
margin-right: 100px;
border-width: 10px;
border-style: dashed;
border-color: black;
}
.biankuang5 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: blue;
height: 200px;
width: 200px;
margin-top: 100px;
border-width: 10px;
border-style: solid;
border-color: black;
}
.biankuang6 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: purple;
height: 200px;
width: 200px;
margin-bottom: 100px;
border-width: 10px;
border-style: double;
border-color: black;
}
.biankuang7 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: pink;
height: 200px;
width: 200px;
margin-left: 100px;
border-width: 10px;
border-style: groove;
border-color: black;
}
.biankuang8 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: aqua;
height: 200px;
width: 200px;
margin-right: 100px;
border-width: 10px;
border-style: ridge;
border-color: black;
}
.biankuang9 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: darkred;
height: 200px;
width: 200px;
margin-top: 100px;
border-width: 10px;
border-style: inset;
border-color: black;
}
.biankuang10 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: forestgreen;
height: 200px;
width: 200px;
margin-bottom: 100px;
border-width: 10px;
border-style: outset;
border-color: black;
}
.biankuang11 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: indianred;
height: 200px;
width: 200px;
margin-bottom: 100px;
border-width: 10px;
/* 空格分隔 */
border-style: dotted dashed solid double;
border-color: black;
}
.biankuang12 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: indianred;
height: 200px;
width: 200px;
margin-bottom: 100px;
border-width: 10px;
/* 空格分隔 */
border-style: dotted dashed solid;
border-color: black;
}
.biankuang13 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: indianred;
height: 200px;
width: 200px;
margin-bottom: 100px;
border-width: 10px;
/* 空格分隔 */
border-style: dotted dashed;
border-color: black;
}
.biankuang14 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: indianred;
height: 200px;
width: 200px;
margin-bottom: 100px;
border-width: 10px;
/* 空格分隔 */
border-style: dotted;
border-color: black;
}
.biankuang15 {
/* 模式转换,变成行列块元素才有宽度和高度 */
display: inline-block;
background-color: indianred;
height: 200px;
width: 200px;
margin-bottom: 100px;
/* 分号分隔 */
border-top-width: 10px;
border-top-style: dotted;
border-top-color: black;
}
</style>
</head>
<body>
<span class="biankuang1"></span><br>
<span class="biankuang2"></span>
<span class="biankuang3"></span><br>
<span class="biankuang4"></span>
<span class="biankuang5"></span>
<span class="biankuang6"></span><br>
<span class="biankuang7"></span>
<span class="biankuang8"></span>
<span class="biankuang9"></span>
<span class="biankuang10"></span><br>
<span class="biankuang11"></span>
<span class="biankuang12"></span>
<span class="biankuang13"></span>
<span class="biankuang14"></span>
<span class="biankuang15"></span>
</body>
</html>
布局属性(Layout Properties)
浮动(float)
float : none | left |right
none为对象不浮动,left为对象浮在左边,right为对象浮在右边。
设置对象是否浮动
清除(clear)
clear : none | left |right | both
none允许两边都可以有浮动对象,both不允许有浮动对象,left不允许左边有浮动对象,right不允许右边有浮动对象。
设置对象不允许浮动
背景属性(Background Properties)
色彩(color)
color : color
body {
color: red;
}
设置对象的文本颜色
背景色(background-color)
background-color : color | transparent
body {
background-color: red;
}
transparent使背景色透明。
设置对象的背景颜色
背景图像(background-image)
background-image : url(url) | none
body {
background-image: url(img/大熊2.png);
}
设置对象的背景图像
控制背景图象的属性
背景重复(background-repeat)
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat为背景图像在纵向和横向上平铺,no-repeat为背景图像不平铺,repeat-x为背景图像在横向上平铺,repeat-y为背景图像在纵向平铺。
body {
background-image: url(img/大熊2.png);
background-repeat: repeat;
}
body {
background-image: url(img/大熊2.png);
background-repeat: no-repeat;
}
body {
background-image: url(img/大熊2.png);
background-repeat: repeat-x;
}
body {
background-image: url(img/大熊2.png);
background-repeat: repeat-y;
}
设置对象的背景图片是否/如何铺排。必须先指定对象的背景图像
固定背景(background-attachment)
background-attachment : scroll | fixed
scroll使背景图像随对象内容滚动,fixed使文字滚动时背景图像保持固定。该属性只用于页面背景,即<BODY>标签内设定的背景图像。
设置背景图像是随对象内容滚动还是固定的
背景定位(background-position)
background-position : length || length
background-position : position || position
length为百分数或者由数字和单位标识符组成的长度值。
position可取top | center | bottom | left | center | right
设置对象的背景图像位置,即精确控制背景图像相对于对象的显示位置。必须先指定background-image属性。默认值为:(0% 0%)。如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。该属性定位不受对象的补丁属性(padding)设置影响。
背景(background)
background : background-color || background-image || background-repeat || background-attachment || background-position
JS
JavaScript_百度百科 (baidu)https://baike.baidu/item/JavaScript/321142?fr=ge_alaJavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。
脚本(Script)实际上就是一段程序,用来完成某些特殊的功能。
基本数据类型
常量
字符型(单引号/双引号)、数值型(十进制、十六进制、八进制)、布尔型(True、False)、空值null、控制字符(\n,\f)
变量
- 第一个字符必须是一个字母(大小写均可)、或下划线“_”或一个美元符“$”。
- 后续字符可以是字母、数字、下划线或美元符。除下划线“_”字符外,变量名中不能有空格、“+”、“-”、“,”或其他特殊符号。
- 不能使用JavaScript中的关键字作为变量。
var 变量名称1 [= 初始值1] , 变量名称2 [= 初始值2] ... ;
运算符和表达式
"+"字符串连接
程序控制流程
标号语句
label语句用于为语句添加标号。在任意语句前放上标号,都可为该语句指定一个标号。其格式为:
标号名称: 语句;
label语句常常用于标记一个循环、switch或if语句,且与break或continue语句联合使用。
函数
function 函数名(参数1, 参数2, ... )
{
语句段;
...
return 表达式; // return语句指明被返回的值
}
对象
对象的使用
引用JavaScript内置对象
由浏览器环境中提供
创建新对象
对象的操作语句
for...in语句。
for...in语句的基本格式为:
for(变量 in 对象){
代码块;
}
用于对某个对象的所有属性进行循环操作,它将一个对象的所有属性名称逐一赋值给一个变量,并且不需要事先知道对象属性的个数。
with(对象){
代码块;
}
用于声明一个对象,代码块中的语句都被认为是对这一对象属性进行的操作。这样,当需要对一个对象进行大量操作时,就可通过with语句来替代一连串的“对象名”,从而节省不少代码。
this关键字、new关键字、delete操作符
delete 对象名
总结
写不下了,现在打字已经很卡了,虽然还有很多没有写,就这样吧。
本文标签: 网页设计
版权声明:本文标题:网页设计与制作 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1727007644a1093947.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论