前言
对网页设计的课程进行一下总结，方便复习,这篇博客本来就是给自己看的，所以就省略了很多东西。
基础知识
www（万维网缩写）_百度百科 (baidu.com)
https://baike.baidu.com/item/www/109924?fr=ge_ala计算机网络——应用层(万维网WWW)_万维网的工作方式-CSDN博客https://blog.csdn.net/weixin_45084986/article/details/118178040URL格式_百度百科 (baidu.com)https://baike.baidu.com/item/URL%E6%A0%BC%E5%BC%8F/10056474?fr=ge_ala可扩展标记语言_百度百科 (baidu.com)https://baike.baidu.com/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.com)https://baike.baidu.com/item/HTML/97049?fr=ge_ala
标记语言_百度百科 (baidu.com)https://baike.baidu.com/item/%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80/5964436?fromModule=lemma_inlink超文本_百度百科 (baidu.com)https://baike.baidu.com/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用来设置文字色彩。
<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.net/qq_42000201/article/details/102841404
<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.com)https://baike.baidu.com/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.com)https://baike.baidu.com/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.com)https://baike.baidu.com/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 对象名
总结
写不下了，现在打字已经很卡了，虽然还有很多没有写，就这样吧。
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
