简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Html5语义化元素及文本、链接、列表、图像和表格常用演示
Blogger Information
Blog 54
fans 6
comment 31
visits 106610
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Html5语义化元素及文本、链接、列表、图像和表格常用演示
吾逍遥
Original
1411 people have browsed it

一、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,下载后，将以下代码放入到网页中：

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

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

二、语义化元素常用演示

1. 文本元素

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

代码

  1. <p>
  2.   <abbr title="HyperText Markup Language">html</abbr
  3.   >文档,是采用超文本标记编写的文档
  4. </p>
  5. <p>2 <sup>4</sup> = 16</p>
  6. <footer>
  7.   <strong>联系地址:</strong>
  8.   <address>合肥市政务新区99号</address>
  9. </footer>
  10. <p><em>猪肉原价</em>: <del> 38.88</del>, <mark>现价</mark>: 28.88</p>
  11. <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 作为属性了解就可以，实际使用很少。

代码

  1. <a href="https://www.php.cn/" target="_blank">php中文网</a>
  2. <a href="tel:1896644****">咨询电话</a>
  3. <a href="mailto:123456@qq.com">发邮件</a>
  4. 通过锚点, 可以实现在当前页面内部跳转，这里就不显示效果了
  5. <a href="#anchor">当前页面跳转</a>
  6. <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。
  • 自定义列表常用于联系方式

无序列表实现导航

  1. <style>
  2.   .nav {
  3.     list-style: none;
  4.     height: 50px;
  5.     display: flex;
  6.     line-height: 50px;
  7.     background-color: #444;
  8.   }
  9.   .nav li {
  10.     align-self: stretch;
  11.     padding: 0 15px;
  12.   }
  13.   .nav li:last-of-type {
  14.     margin-left: auto;
  15.   }
  16.   .nav li:hover {
  17.     background-color: seagreen;
  18.     cursor: pointer;
  19.   }
  20.   .nav a {
  21.     color: #ccc;
  22.     text-decoration: none;
  23.   }
  24.   .nav a:hover {
  25.     color: white;
  26.   }
  27. </style>
  28. <ul class="nav">
  29.   <li><a href="">首页</a></li>
  30.   <li><a href="">基础知识</a></li>
  31.   <li><a href="">实战练习</a></li>
  32.   <li><a href="">课后总结</a></li>
  33. </ul>

导航

有序列表实现工作计划

  1. <ol start="2" class="plan" type="A">
  2.   <li>给客户打回访电话</li>
  3.   <li>整理新客户资料</li>
  4.   <li>准备晚上的约会</li>
  5. </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> 设置单元格可横跨的行数

表格源码

  1. <table width="800px" border="1" cellspacing="0" cellpadding="5" align="center">
  2.   <thead>
  3.     <tr bgcolor="lightblue">
  4.       <th colspan="2"></th>
  5.       <th>星期一</th>
  6.       <th>星期二</th>
  7.       <th>星期三</th>
  8.       <th>星期四</th>
  9.       <th>星期五</th>
  10.     </tr>
  11.   </thead>
  12.   <tbody>
  13.     <tr>
  14.       <td rowspan="4" align="center">上午</td>
  15.       <td>1</td>
  16.       <td>数学</td>
  17.       <td>语文</td>
  18.       <td>语文</td>
  19.       <td>语文</td>
  20.       <td>数学</td>
  21.     </tr>
  22.     <tr>
  23.       <!-- <td>上午</td> -->
  24.       <td>2</td>
  25.       <td>语文</td>
  26.       <td>语文</td>
  27.       <td>音乐</td>
  28.       <td>科学</td>
  29.       <td>美术</td>
  30.     </tr>
  31.     <tr>
  32.       <!-- <td>上午</td> -->
  33.       <td>3</td>
  34.       <td>语文</td>
  35.       <td>美术</td>
  36.       <td>数学</td>
  37.       <td>数学</td>
  38.       <td>语文</td>
  39.     </tr>
  40.     <tr>
  41.       <!-- <td>上午</td> -->
  42.       <td>4</td>
  43.       <td>科学</td>
  44.       <td>数学</td>
  45.       <td>语文</td>
  46.       <td>体育</td>
  47.       <td>道法</td>
  48.     </tr>
  49.     <tr>
  50.       <td colspan="7" align="center">午休</td>
  51.     </tr>
  52.     <tr>
  53.       <td rowspan="3" align="center">下午</td>
  54.       <td>5</td>
  55.       <td>数学</td>
  56.       <td>语文</td>
  57.       <td>语文</td>
  58.       <td>语文</td>
  59.       <td>数学</td>
  60.     </tr>
  61.     <tr>
  62.       <!-- <td>下午</td> -->
  63.       <td>6</td>
  64.       <td>语文</td>
  65.       <td>语文</td>
  66.       <td>音乐</td>
  67.       <td>科学</td>
  68.       <td>美术</td>
  69.     </tr>
  70.     <tr>
  71.       <!-- <td>下午</td> -->
  72.       <td>7</td>
  73.       <td>课外活动</td>
  74.       <td colspan="4" align="center">各班自行组织</td>
  75.     </tr>
  76.   </tbody>
  77. </table>

表格演示效果

表格

欢迎来我的GitHub指导https://github.com/woxiaoyao81

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：我也在考虑, 是不是以后可以将源码放在gitee上, 大家下载了也学习了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
吾逍遥 2020-10-19 19:37:35
老师可以这样，尤其是一些项目可以放在gitee上，让我们可以学习
1 floor
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！