HTML_无序列表_有序列表_项目列表_超链接_表格_细线表格_Unit_2;
程序员文章站
2022-04-02 17:45:42
...
Topic 1： 列表
1.无序列表：
ul 嵌套 li ；
Practice：
编写下图的一个网页：
代码如下：
<!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. 有序列表：
编写如下网页：
代码如下：
<!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. 项目列表：
编写一个下图的网页：
代码如下：
<!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的背景色，再设置单元格的不同背景色