共计 5511 个字符,预计需要花费 14 分钟才能阅读完成。
1 图像
1.1 图像标签
- 图像由
<img>
标签定义; <img>
是空标签,只蕴含属性,并且没有闭合标签;- 须要应用源属性
(src)
,页面上能力显示图像,其值是图像的 URL 地址;
标签 | 阐明 |
---|---|
<img> |
定义图像 |
<map> |
定义图像地图 |
<area> |
定义图像地图中的可点击区域 |
1.2 应用办法
<img src="url" alt="可替换的文本信息">
1.3 Alt 属性
- 用来为图像定义一串准备的可替换的文本;
- 文本的内容用户自定义;
- 作用:浏览器无奈载入图像时,就会显示替换文本,这样很容易晓得错误信息。
1.4 高度和宽度
- 应用 height(高度 与 width(宽度)进行设置;
- 属性值默认单位为像素;
- 应用办法:
<img src="xxx.jpg" alt="可替换文本信息" width="数字" height="数字">
- 倡议对图像的宽度和高度进行设置,这样便于图片显示,而不打乱页面布局;
1.5 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 图像学习 </title>
</head>
<body>
<!-- 图像在文字中的应用 -->
<h3>1、图像居中、底部对齐(vertical-align: middle、bottom):</h3>
<p><b> 鹿柴 - 王维〔唐代〕</b></p>
<p> 空山不见人,<img src="F:\html_study\img\1.jpg" alt="图片居中" style="vertical-align: middle;" width="64" height="64"> 但闻人语响。</p>
<p> 返景入深林,<img src="F:\html_study\img\1.jpg" alt="图片底部对齐" style="vertical-align: bottom;" width="64"
height="64"> 复照青苔上。</p>
<hr>
<h3>2、图像顶部对齐、居中(vertical-align: middle、top):</h3>
<p><b> 送别 - 王维〔唐代〕</b></p>
<p> 山中相送罢,<img src="F:\html_study\img\1.jpg" alt="顶部对齐" style="vertical-align: top;" width="64" height="64"> 日暮掩柴扉。</p>
<p> 春草明年绿,<img src="F:\html_study\img\1.jpg" alt="图片居中" style="vertical-align: middle;" width="64" height="64"> 王孙归不归?</p>
<hr>
<h3>3、图像浮动在段落右边、左边(float: left、right):</h3>
<p><b> 春晓 - 孟浩然〔唐代〕</b></p>
<p> 春眠不觉晓,<img src="F:\html_study\img\1.jpg" alt="图像浮动在段落右边" style="float: left;" width="64" height="64"> 处处闻啼鸟。</p>
<p> 夜来风雨声,<img src="F:\html_study\img\1.jpg" alt="图像浮动在段落左边" style="float: right;" width="64" height="64"> 花落知多少。</p>
<hr>
<h3>4、图像链接(a herf)- 无、有边框:</h3>
<a href="https://blog.csdn.net/NoamaNelson" <br><img border="0" src="F:\html_study\img\1.jpg" alt="图像链接无边框"
width="64" height="64">
<img border="10" src="F:\html_study\img\1.jpg" alt="图像链接有边框" width="64" height="64"></a>
<hr>
<h3>5、点击图片中的对应区域:</h3>
<img border="0" src="F:\html_study\img\2.jpg" width="565" height="367" alt="图片" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="333,212,530,322" alt="矩形" href="html\ 矩形.html">
<area shape="circle" coords="160,269,69" alt="圆形" href="html\ 圆形.html">
<area shape="poly" coords="272,31,369,31,404,99,369,168,272,168,237,99" alt="多边形" href="html\ 多边形.html">
</map>
</body>
</html>
1.6 总结
- 对于图像映射标签
<area>
;
shape | coords |
---|---|
rect(矩形) | 矩形左上角和右下角的坐标 |
circle(圆形) | 圆心的坐标和半径 |
poly(多边形) | 规定多边形各顶点坐标 |
2 表格
2.1 表格标签
- 由
<table>
标签来定义; - 每个表格均有若干行(由
<tr>
标签定义); - 每行被宰割为若干单元格(由
<td>
标签定义); - 数据单元格能够蕴含文本、图片、列表、段落、表单、水平线、表格等;
- 举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 表格学习 </title>
</head>
<body>
<table border="1">
<tr>
<td>r1, c1</td>
<td>r1, c2</td>
</tr>
<tr>
<td>r2, c1</td>
<td>r2, c2</td>
</tr>
</table>
</body>
</html>
2.2 边框属性
- 如上 2.1 的代码,应用了
border
来设置边框; border
的值从 0 开始,值越大,边框越粗;- 以下
border
的值为1,5,20
;
2.3 表格表头
- 应用
<th>
标签进行定义; - 举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 表格学习 </title>
</head>
<body>
<table border="1">
<tr>
<th> 我的项目 </th>
<th> 阐明 </th>
</tr>
<tr>
<td>r1, c1</td>
<td>r1, c2</td>
</tr>
<tr>
<td>r2, c1</td>
<td>r2, c2</td>
</tr>
</table>
</body>
</html>
2.4 表格示例
- 示例 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 表格学习 </title>
</head>
<body>
<table border="1">
<h4>1、有边框 </h4>
<tr>
<th> 我的项目 </th>
<th> 阐明 </th>
</tr>
<tr>
<td>r1, c1</td>
<td>r1, c2</td>
</tr>
<tr>
<td>r2, c1</td>
<td>r2, c2</td>
</tr>
</table>
<h4>2、无边框 </h4>
<table border="0">
<tr>
<th> 我的项目 </th>
<th> 阐明 </th>
</tr>
<tr>
<td>r1, c1</td>
<td>r1, c2</td>
</tr>
<tr>
<td>r2, c1</td>
<td>r2, c2</td>
</tr>
</table>
<h4>3、设置题目 </h4>
<table border="1">
<caption> 成绩单 </caption>
<tr>
<th> 姓名 </th>
<th> 科目 </th>
<th> 分数 </th>
</tr>
<tr>
<td> 隔壁老王 </td>
<td> 数学 </td>
<td>100</td>
</tr>
<tr>
<td> 草根小李 </td>
<td> 语文 </td>
<td>100</td>
</tr>
</table>
<h4>4、单元格跨行扩列,相似合并 </h4>
<table border="1">
<caption> 成绩单 </caption>
<tr>
<th> 姓名 </th>
<th colspan="2"> 科目和分数 </th>
</tr>
<tr>
<td> 隔壁老王 </td>
<td> 数学 </td>
<td>100</td>
</tr>
<tr>
<td> 草根小李 </td>
<td> 语文 </td>
<td>100</td>
</tr>
<tr>
<td rowspan="2"> 剑神无名 </td>
<td> 剑气 </td>
<td>100</td>
</tr>
<tr>
<td> 武力 </td>
<td>99</td>
</tr>
</table>
</body>
</html>
- 示例 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 表格学习 </title>
</head>
<body>
<h4> 表格内标签 </h4>
<table border="1">
<caption> 内标签阐明 </caption>
<tr>
<th> 我的项目 </th>
<th> 阐明 </th>
</tr>
<tr>
<td>
<p> 段落 1 </p>
<p> 段落 2 </p>
</td>
<td>
单元格中再套一个表格
<table border="1">
<tr>
<td>r1, c1</td>
<td>r1, c2</td>
</tr>
<tr>
<td>r1, c1</td>
<td>r1, c2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> 单元格中是列表
<ul>
<li> 第一;</li>
<li> 第二;</li>
<li> 第三;</li>
</ul>
</td>
<td>r1, c2</td>
</tr>
</body>
</html>
- 示例 3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 表格学习 </title>
</head>
<body>
<h4> 单元格无边距 </h4>
<table border="1">
<tr>
<th> 我的项目 </th>
<th> 阐明 </th>
</tr>
<tr>
<td> 我的项目 1 </td>
<td> 阐明 1 </td>
</tr>
<tr>
<td> 我的项目 2 </td>
<td> 阐明 2 </td>
</tr>
</table>
<h4> 单元格有边距 </h4>
<table border="1" cellpadding="20">
<tr>
<th> 我的项目 </th>
<th> 阐明 </th>
</tr>
<tr>
<td> 我的项目 3 </td>
<td> 阐明 3 </td>
</tr>
<tr>
<td> 我的项目 4 </td>
<td> 阐明 4 </td>
</tr>
</table>
</body>
</html>
3 列表
3.1 有序、无序列表
- 有序应用
<ol>
标签; - 无序应用
<ul>
标签; - 举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 列表学习 </title>
</head>
<body>
<h4> 无序列表 </h4>
<ol>
<li> 我的项目 1 </li>
<li> 我的项目 1 </li>
<li> 我的项目 1 </li>
<li> 阐明 1 </li>
<li> 阐明 1 </li>
<li> 阐明 1 </li>
</ol>
<h4> 有序列表 </h4>
<ul>
<li> 我的项目 1 </li>
<li> 我的项目 1 </li>
<li> 我的项目 1 </li>
<li> 阐明 1 </li>
<li> 阐明 1 </li>
<li> 阐明 1 </li>
</ul>
</body>
</html>
3.2 列表标签
标签 | 形容 |
---|---|
<ol> |
定义有序列表 |
<ul> |
定义无序列表 |
<li> |
定义列表项 |
<dl> |
定义列表 |
<dt> |
自定义列表我的项目 |
<dd> |
定义自定列表项的形容 |
4 区块
4.1 区块元素
- 块级元素在浏览器显示时,通常会以新行来开始(和完结);
- 如
<h1>, <p>, <ul>, <table>
;
4.2 内联元素
- 在显示时通常不会以新行开始;
- 如
<b>, <td>, <a>, <img>
;
4.3 div 元素
<div>
元素是块级元素;- 用于组合其余 HTML 元素的容器;
- 如果与 CSS 一起应用,
<div>
元素可用于对大的内容块设置款式属性; - 另一个常见的用处是文档布局;
4.4 span 元素
- 是内联元素;
- 可用作文本的容器;
- 与 CSS 一起应用时,
<span>
元素可用于为局部文本设置款式属性。
4.5 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 区块学习 </title>
<style type="text/css">
div {font-family: 'Courier New', Courier, monospace;color: blue;}
span {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;color: brown;color: brown;font-size: larger;}
</style>
</head>
<body>
<div>
<h4> 区块元素和内联元素 </h4>
<ul>
<li><span> 我的项目 1 </span></li>
<li> 我的项目 1 </li>
<li><span> 我的项目 1 </span></li>
<li> 阐明 1 </li>
<li><span> 阐明 1 </span></li>
<li> 阐明 1 </li>
</ul>
</div>
</body>
</html>
正文完