作业内容:
1. 将课堂介绍过的<a>,<img><ul>,<table>,<iframe>的案例,全部上机练习,并自己扩展一些案例,发布到作业博客中;
2. 预习css知识
HTML常见标签
超链接(a)
a标签一般常用来做链接,常用的属性有href(所要链接的地址)和target(目标窗口)链接一般也分三种:
【站外链接】
<a href="https://www.baidu.com">点击跳转百度</a>
【指定窗口打开】
<!-- 新窗口打开百度 -->
<a href="https://www.baidu.com" target="_blank">新窗口打开百度</a>
<!-- 在框架内打开百度,这里因为百度做防内嵌操作了,所以打不开 -->
<a href="https://www.baidu.com" target="frame1">在框架内打开百度</a>
<iframe name="frame1" frameborder="0"></iframe>
【站内跳转】
<!-- 站内跳转,也称之为锚点链接 -->
<a href="#content1" target="_self">站内跳转</a>
<a href="#content2" target="_self">站内跳转</a>
<div id="content1" style="margin-top: 1000px">跳转内容1</div>
<div id="content2" style="margin-top: 1000px">跳转内容1</div>
图像(img)
img标签常见的属性有src(图像路径),alt(文本替换),width(宽度),height(高度)等。
其中前两个属性是必须的。后面的宽度和高度,可以以像素为单位,也可以填写百分比,在HTML5中也逐渐被CSS所取代,使用频率也不高了。
src属性代表该标签所指向的图像路径,这个路径可以是相对路径,也可以是绝对路径,甚至可以直接是站外的链接。
alt属性是在图片加载不出来的时候,显示的文字,一般也没啥用
<!-- 常规图片 -->
<img src="1.jpg" alt="这是一张图片" />
<!-- 指定宽度的图片 -->
<img src="1.jpg" alt="" width="400px" />
<!-- 按百分比指定高度的图片 -->
<img src="1.jpg" alt="" height="30%" />
如果没有同时宽度和高度,比如高度设置了30%,则宽度会按同比例缩放至30%。而按像素设定的宽度,那么高度也一样按对应的比例缩放,以确保图片不会变形。
而如果同时指定了高度和宽度,如果高宽比例与原图比例不同的话,则可能就会导致图片变形。
列表(ul)
我们常见的ul标签是拿来做导航栏或者侧边栏菜单的
列表主要表现形式有三类:
- 有序列表,显示结果会自动为每一条记录前面加上序号
<!-- 有序列表 -->
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
- 无序列表,显示结果会自动在每一条记录前加上一个小黑点
<!-- 无序列表 -->
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
- 自定义列表
<!-- 自定义列表 -->
<nav>
<a href="">item1</a>
<a href="">item2</a>
<a href="">item3</a>
</nav>
上面这几种做法,目前最常用的是无序列表结合CSS生成自己想要的任何效果。
表格(table)
表格一般分为表头,表主体以及表尾,表头常用<thead></thead>包含起来,表主体用<tbody></tbody>包含起来,而表尾则用<tfoot></tfoot>包含起来。不论哪一个部分都需要用<tr><td></td></tr>这种格式写,其中一个tr表示一行,一个td表示一列。表格是我们常用的元素,因为他跟二维数组几乎是一一对应的关系。此处代码较多,顺便可以复习一下emmet的语法:
table>thead>tr>td{表头}*4^^tbody>tr*3>td{表主体}*4^^tfoot>tr>td{表尾}*4
生成结果如下:
<table>
<thead>
<tr>
<td>表头</td>
<td>表头</td>
<td>表头</td>
<td>表头</td>
</tr>
</thead>
<tbody>
<tr>
<td>表主体</td>
<td>表主体</td>
<td>表主体</td>
<td>表主体</td>
</tr>
<tr>
<td>表主体</td>
<td>表主体</td>
<td>表主体</td>
<td>表主体</td>
</tr>
<tr>
<td>表主体</td>
<td>表主体</td>
<td>表主体</td>
<td>表主体</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
</tr>
</tfoot>
</table>
内嵌框架(iframe)
之前在讲述a标签的时候已经简单提到过框架,iframe框架支持所有HTML全局属性,常用的属性有src(框架指向的数据)和frameborder(框架边框)
<iframe src="https://taobao.com" frameborder="0"></iframe>
针对有些比较老的浏览器,不支持框架的情况下,可以这样写,以满足在框架不能正常显示的时候,可以显示文字
<iframe src="https://taobao.com" frameborder="0">
您的浏览器不支持框架,请更换最新的浏览器来正常浏览页面
</iframe>
预习CSS
简介:CSS是一种描述HTML文档样式的语言 CSS描述应该如何显示HTML元素
常见CSS样式表
<style>
/* 全局主体样式 */
body {
background-color: lightblue;
}
/* 全局h1标签样式 */
h1 {
color: blue;
text-align: center;
}
/* 针对class="menu"的标签指定样式 */
.menu {
font-size: 20px;
}
/* 针对id="name"的标签指定样式 */
#name {
font-family: verdana;
}
/* 组合选择器 */
div.menu {
color : red;
}
/* 分组选择器 */
h1, h2, h3 {
font-size: 20px;
}
/* 通用选择器 */
* {
text-align: center;
}
</style>
最上面的像body、h1、.menu、#name。统称为选择器,选择器也可以使用组合的方式,如div.menu,这个选择器的意思是所有class=”menu”的div标签。还可以用*号表示通配所有标签。如果多个标签拥有相同的样式,则可以用逗号把选择器连接放一起。如 .menu1,.menu2{ color : red; }
大括号里的内容,冒号左侧的为属性,冒号右侧的为属性值,可以有多个属性共同修饰一个选择器,并且以分号隔开。
选择器可以针对全局标签(如body),也可以针对一类标签(如.menu),甚至还可以针对某一个标签(如#name)。
其中的属性,常用的有
属性 | 含义 |
---|---|
background-color | 背景颜色 |
color | 文本颜色 |
font-size | 文本大小 |
font-family | 字体 |
太多了。。。。等老师讲吧。。。