1. 语义化
定义
明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等
优点
- 更容易被搜索引擎收录。
- 更容易让屏幕阅读器读出网页内容。
2. 添加图片
语法
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
讲解
- src:标识图像的位置;
- alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
- title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
- 图像可以是GIF,PNG,JPEG格式的图像文件。
3. 添加超链接
语法
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
eg:<a href="http://www.imooc.com" title="点击进入慕课网">click here!</a>
注
上面例子作用是单击click here!文字,网页链接到http://www.imooc.com这个网页。
title属性的作用:鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中 作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)
在新建浏览器窗口中打开链接(a标签中的target属性)
a标签的target属性,代表打开网页的方式。
eg:<a href="http://www.baidu.com/" target="self">百度一下</a>
<a href="http://www.baidu.com/" target="blank">百度一下</a>
注
可选值为"self"和"blank",默认值为"self",代表在当前页面打开链接,"blank"代表在新窗口打开链接。
4. 添加表格(table)
语法
创建表格的四个元素:table、tr、th、td
1. <table>…</table>:整个表格以<table>标记开始、</table>标记结束。
2. <tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
3. <td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
4. <th>…</th>:表格的头部的一个单元格,表格表头。
5. 表格中列的个数,取决于一行中数据单元格的个数。
6. border属性可以为表格添加边框,属性值为数字。
注意
- table标签用来定义整个表格,为双标签,必须有结束标签。
- table标签里面可以放caption标签和tr标签。
- caption标签用来定义表格的标题。
- tr标签用来设置表格的行,tr里面只能放th或者td标签,一组tr标签代表一行。
- th用来设置表格的标题,会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
- td同来设置表格的列,一组td标签代表一列。
- table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
例子
使用thead、tbody、tfoot定义表格
1. <thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
2. <tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)
3. <tfoot> 元素用于对 HTML 表格中的表注(页脚)内容进行分组。
4. 这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用thead、tbody、tfoot标签</title>
</head>
<body>
<h3>成绩表</h3>
<hr>
<table border="1">
<thead>
<tr>
<th>科目</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>60</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分</td>
<td>159</td>
</tr>
</tfoot>
</table>
</body>
</html>
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 zzzqqqyyy2002@163.com