HTML_无序列表_有序列表_项目列表_超连接_表格_细线表格_Unit_2;
Topic 1： 列表
1.无序列表：javascript
ul 嵌套 li ；html
Practice：java
编写下图的一个网页：程序员
代码以下：spa
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无序列表练习</title> </head> <body> <h1><font face="宋体">热点新闻</font></h1> <!----注意：hr的宽度设置 若是你的hr宽度跟随页面的缩放而缩放 那么它的宽度设置就是以百分比设置 反之则是像素设置-----> <hr width = "500" align = "left" color = "orange" size ="4"/> <ul type = "circle"> <li>程序员应该涨工资了，由于太辛苦</li> <li>怎么样才能碰见更好的本身！！！</li> <li>咱们都在为本身的梦想而奋斗着</li> <li type = "disc">程序员应该涨工资了，由于太辛苦</li> <li type = "square">程序员应该涨工资了，由于太辛苦</li> <li>程序员应该涨工资了，由于太辛苦</li> </ul> </body> </html>
2. 有序列表：设计
编写以下网页：code
代码以下：htm
<!doctype html> <html> <head> <meta charset="utf-8"> <title>有序列表</title> </head> <body> <h1><font face="宋体">热点新闻</font></h1> <!----注意：hr的宽度设置 若是你的hr宽度跟随页面的缩放而缩放 那么它的宽度设置就是以百分比设置 反之则是像素设置-----> <hr width = "500" align = "left" color = "orange" size ="4"/> <!----注意有序列表的排序方式有1,2,3；a,b,c;A,B,C;还有下面的那个I；对应的都是type的取值-------> <ul type = "I"> <li>程序员应该涨工资了，由于太辛苦</li> <li>怎么样才能碰见更好的本身！！！</li> <li>咱们都在为本身的梦想而奋斗着</li> <li>程序员应该涨工资了，由于太辛苦</li> <li>程序员应该涨工资了，由于太辛苦</li> <li>程序员应该涨工资了，由于太辛苦</li> </ul> </body> </html>
3. 项目列表：blog
编写一个下图的网页：排序
代码以下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>项目列表</title> </head> <body> <!-----咱们注意到dl标签是会空一行的 也就至关于有两个换行了-------> <dl> <dt>我是标题</dt> <dd>我是描述</dd> </dl> <dl> <dt>在线调查系统</dt> <dd>这个系统能够实现咱们在线的考勤，很方便的一个系统</dd> </dl> <dl> <dt>成龙</dt> <dd>他是一个演员也是一个导演</dd> <dt>房祖名</dt> <dd>他是成龙的儿子</dd> </dl> <dl> <dt>夏季热销水果</dt> <dd>西瓜</dd> <dd>香蕉</dd> <dd>苹果</dd> </dl> </body> </html>
Topic 2： 超连接
a，配合一个原则性属性href，表明的含义是跳转的页面的路径（相对路径查找）
<!----定义超连接用a标签-----><!----你在链接百度的时候必定要加http://或者是https:// 不然的话他会默认以相对路径查找你的本地文件---->
<!----又犯了一样的错误就是你的href单词写错了 而后你又找了大半天---->
超连接有：
连接到线上网址；连接到本地地址；图片超连接；假连接；新窗口打开超连接；
代码以下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>超连接</title> </head> <body> <!----定义超连接用a标签-----> <!----你在链接百度的时候必定要加http://或者是https:// 不然的话他会默认以相对路径查找你的本地文件----> <!----又犯了一样的错误就是你的href单词写错了 而后你又找了大半天----> <a href="https://www.baidu.com">连接网上地址--百度</a><br> <a href="2.2有序列表.html">连接到本地</a><br> <!----图片使用超连接-----> <a href="https://www.baidu.com"><image src="hashiqi.jpg"/></a><br> <!----假连接 注意“#”(跳转到当前页面)对js有影响------> <a href="#">假连接#</a><br> <!----假连接 这两就是什么都不作------> <a href="javascript:;">假连接js1</a><br> <a href="javascript:void(0);">假连接js2</a><br> <!----新窗口打开超连接 加强用户体验---------> <a href="http://www.baidu.com" target="_blank">新窗口打开超连接 保留原有页面</a> </body> </html>
Topic 3： 表格
说明：
对于HTML中的表格咱们不要求你记住代码了；
咱们只要求你会使用就行了；
咱们在使用的时候，你须要把视图切换为设计会显示一个白色的页面---插入table---选择几行几列---选中表格右击属性；
咱们操做的时候想要操做什么就选中什么（选中以后咱们在属性观察就行了）；
好比align是对齐方式；
咱们在这里操做完切换为代码视图相应的代码就生成了；
注意：
表格的格式是：
table嵌套tr，tr嵌套td，table表明整个表格，tr表明行，td表明单元格；
填充：拉开内容和单元格边缘的距离
间距：拉开两个单元格之间的距离
截图填充和间距（直接选中整个表格的时候出的那个属性）：
Topic 3： 制做细线表格
完成上面这个网页的设计：
这个表格的关键就是细线表格的制做：
注意：背景颜色是bgcolor
细线表格的制做步骤为：
设置table背景色为想要的细线颜色，配合间距（单元格之间的距离）设置为1px，在这1px的位置透出底部table的背景色，再设置单元格的不一样背景色