Html5语义化元素及文本、链接、列表、图像和表格常用演示 - 前端开发

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > Html5语义化元素及文本、链接、列表、图像和表格常用演示

博主信息

博文 54

粉丝 6

访问量 126527

专题推荐

更多>

一、Html5 语义化元素

        这两天听朱老师讲 Html 知识，让我听到新词最多的就是 语义化 ,百度下，从上面我推荐网址更能全面了解所谓的语义化，其实就是为了 能够清楚表达内容给浏览器和开发者 ，对于经常快排的来说，它可以让搜索引擎更好理解网页表达内容，更快速收集，可以说是 SEO 优化的一部分。
        Html5 新增了 8 个语义化元素，主要是结构元素，包括 header、nav、aside、article、section 和 footer 等。现在绝大部分浏览器都已经支持，若是不支持，可在设置下它们的 display 属性为 block。IE8 及更早 IE 版本无法在这些元素中渲染 CSS 效果，以至于你不能使用 header、section、footer、aside、nav、article 等，或者其他的 HTML5 elements。
        解决办法: 你可以使用 HTML5 Shiv Javascript 脚本来解决 IE 的兼容问题。HTML5 Shiv 下载地址https://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js,下载后，将以下代码放入到网页中：

<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->

以上代码在浏览器小于 IE9 版本时会加载 html5shiv.js 文件. 你必须将其放置于<head>元素中，因为 IE 浏览器需要在头部加载后渲染这些 HTML5 的新元素。

二、语义化元素常用演示

1. 文本元素

常用元素有：abbr 缩写，sub 下标、sup 上标、address 地址、strong 加粗、em 斜体、del 删除线、progress 进度条和 mark 高亮标记等，其中旧式 b 加粗、i 斜体和 s 删除线不推荐使用，它们没语义。还有引用建议使用 q，blockquote 我测试无效，除非你自己定义 CSS。

代码

<p>
  <abbr title="HyperText Markup Language">html</abbr
  >文档,是采用超文本标记编写的文档
</p>
<p>2 <sup>4</sup> = 16</p>
<footer>
  <strong>联系地址:</strong>
  <address>合肥市政务新区99号</address>
</footer>
<p><em>猪肉原价</em>: <del> 38.88</del>, <mark>现价</mark>: 28.88</p>
<p><progress max="100" value="50">已完成50%</progress></p>

效果

文本元素

2. 链接元素

链接元素应该是重点之一了，重点就是网页间跳转和网页内跳转，前者主要就是 href 和 target 属性，href 是 url,target 可取_self(默认)、_blank、_parent、_top 和 name(配合 iframe 使用，常用于后台管理界面)；后者则是锚点，利用 href 属性跳转到页内指定的 ID 位置，如常见的回到顶部、跳转到指定章节等。还有就是 href 值中特殊前缀代表特殊功能，如 mailto 表示邮箱,tel 表示打电话。最后要提下 download 属性，一般网站都做了防盗链，download 作为属性了解就可以，实际使用很少。

代码

<a href="https://www.php.cn/" target="_blank">php中文网</a>
<a href="tel:1896644****">咨询电话</a>
<a href="mailto:123456@qq.com">发邮件</a>
通过锚点, 可以实现在当前页面内部跳转，这里就不显示效果了
<a href="#anchor">当前页面跳转</a>
<h1 id="anchor" style="margin-top: 1000px">跳到这里了</h1>

3. 列表元素

无序列表常用于导航、购物车。记得要 CSS 取消列表点号 list-style: none;
有序列表常用于工作计划等有序事务。主要属性有 start、type 和 reversed(反序)

start取值只能是数值，不管type是什么，不过按类型计算序列。如start=”2”，type=”A”，则从B开始计算序列
type只能取1、A、a、I和i。

自定义列表常用于联系方式

无序列表实现导航

<style>
  .nav {
    list-style: none;
    height: 50px;
    display: flex;
    line-height: 50px;
    background-color: #444;
  }
  .nav li {
    align-self: stretch;
    padding: 0 15px;
  }
  .nav li:last-of-type {
    margin-left: auto;
  }
  .nav li:hover {
    background-color: seagreen;
    cursor: pointer;
  }
  .nav a {
    color: #ccc;
    text-decoration: none;
  }
  .nav a:hover {
    color: white;
  }
</style>
<ul class="nav">
  <li><a href="">首页</a></li>
  <li><a href="">基础知识</a></li>
  <li><a href="">实战练习</a></li>
  <li><a href="">课后总结</a></li>
</ul>

有序列表实现工作计划

<ol start="2" class="plan" type="A">
  <li>给客户打回访电话</li>
  <li>整理新客户资料</li>
  <li>准备晚上的约会</li>
</ol>

有序列表

3. 图像元素

图像元素就比较简单了，我们要把握一个原则，尽量小提高网页加载速度，以提供更好的体验，具体就是

能使用 css 字体图标,就不要使用图像图标
简单的动图,或者颜色要求较少的,可使用gif格式
推荐使用可压缩的jpg格式, 小图片,或需要背景透明的,推荐使用png格式

4. 表格元素

表格是最重要的数据格式化展示重要工具, 使用频率非常高
表格的数据,存储在由行与列组成的一系列单元格
数据必须存储在单元格元素中
与列表类似, 表格也是由一系列标签来描述
表格thead只有1个，tbody可以有多个，tfoot若有则不建议超过1个

常用标签

序号	标签	描述	备注
1	`<table>`	定义表格,	必选
2	`<tbody>`	定义表格主体, 允许定义多次	必选
3	`<tr>`	定义表格中的行,	必选
4	`<th>`	定义表格头部中的单元格,默认加粗居中	必选
5	`<td>`	定义表格主体与底部的的单元格	必选
6	`<caption>`	定义表格标题,	可选
7	`<thead>`	定义表格头格, 只需定义一次	可选
8	`<tfoot>`	定义表格底, 只需定义一次	可选
9	`<col>`	为一个/多个列设置属性,仅限	可选
10	`<colgroup>`	将多个`<col>`元素分组管理	可选

常用属性

序号	属性	适用元素	描述
1	`border`	`<table>`	添加表格框
2	`cellpadding`	`<table>`	设置单元格内边距
3	`cellspacing`	`<table>`	设置单元格边框间隙
4	`align`	不限	设置单元格内容水平居中
5	`bgcolor`	不限	设置背景色
6	`width`	不限	设置宽度
7	`height`	不限	设置高度
8	`colspan`	`<td>/<th>`	规定单元格可横跨的列数
9	`rowspan`	`<td>/<th>`	设置单元格可横跨的行数

表格源码

<table width="800px" border="1" cellspacing="0" cellpadding="5" align="center">
  <thead>
    <tr bgcolor="lightblue">
      <th colspan="2"></th>
      <th>星期一</th>
      <th>星期二</th>
      <th>星期三</th>
      <th>星期四</th>
      <th>星期五</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="4" align="center">上午</td>
      <td>1</td>
      <td>数学</td>
      <td>语文</td>
      <td>语文</td>
      <td>语文</td>
      <td>数学</td>
    </tr>
    <tr>
      <!-- <td>上午</td> -->
      <td>2</td>
      <td>语文</td>
      <td>语文</td>
      <td>音乐</td>
      <td>科学</td>
      <td>美术</td>
    </tr>
    <tr>
      <!-- <td>上午</td> -->
      <td>3</td>
      <td>语文</td>
      <td>美术</td>
      <td>数学</td>
      <td>数学</td>
      <td>语文</td>
    </tr>
    <tr>
      <!-- <td>上午</td> -->
      <td>4</td>
      <td>科学</td>
      <td>数学</td>
      <td>语文</td>
      <td>体育</td>
      <td>道法</td>
    </tr>
    <tr>
      <td colspan="7" align="center">午休</td>
    </tr>
    <tr>
      <td rowspan="3" align="center">下午</td>
      <td>5</td>
      <td>数学</td>
      <td>语文</td>
      <td>语文</td>
      <td>语文</td>
      <td>数学</td>
    </tr>
    <tr>
      <!-- <td>下午</td> -->
      <td>6</td>
      <td>语文</td>
      <td>语文</td>
      <td>音乐</td>
      <td>科学</td>
      <td>美术</td>
    </tr>
    <tr>
      <!-- <td>下午</td> -->
      <td>7</td>
      <td>课外活动</td>
      <td colspan="4" align="center">各班自行组织</td>
    </tr>
  </tbody>
</table>