【HTML打卡】0123 HTML语义标签
抽奖中的BIGBANG专辑MADE series A。开森哈哈哈。
今天下雪了,初雪鸭霸王牛肉干芒果榴莲地瓜最配了。好撑咕~~(╯﹏╰)b
有语义标签:
div
span
无语义标签:
标题:h1-h6
段落:p
图片:img
视频:embed
超链接、锚点:a
无序列表:ul
有序列表:ol
表格:table、tr、td
1、img标签(自闭合标签)
img scr=“” alt=“” title=“”
scr 地址,本地地址/网络服务器地址
alt 文字(给机器看)
title 鼠标放上去显示的文字
内联、替换元素,需要初始化
img{
display:block;
margin:0px;
}
2、有序列表ol、无序列表ul
ul li{
list-style-type: circle;
}
ol li{
list-style-type: upper-roman;
}
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
3、表格table
(1)table tr td
(2)边框(一般设置为none,初始化)
td{
border:1px solid green;
}
table{
border-collapse:collapse;
borser-spacing:20px;
}
(3)合并列表
td colspan=“4”;
td rowspan="2";
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>课程表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="aaa http://www.itbool.com" />
<style>
table{
border-collapse: collapse;
}
td{
border:1px solid green;
width:80px;
height: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td>课程表</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td rowspan="2">上午</td>
<td>语文</td>
<td>地理</td>
<td>代数</td>
<td></td>
<td></td>
</tr>
<tr class="kong">
<td>语文</td>
<td>地理</td>
<td>代数</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
4、a 标签
超链接
<a href="" target="" title="">index</a>
heref 链接地址
target 网页开新网页
title 鼠标放上来显示
锚点
<a name="p1"><a1>
打个标记
超链接#p1 :直接跳到改处
伪列
a:link 普通超链接
a:visited 访问过后变为什么样
a:hover 鼠标放上时候什么样
a:active 鼠标点击瞬间什么样
ps.
active一般不写
顺序LVHA
a:link简写为a
5、字符实体
许多字符无法直接显示在html上
& + 实体名 + 分号
大于 >
小于 <
双引 "
日元 ¥
版权 ©