search

博客列表 >html常用元素细说1

html常用元素细说1

G
G原创
2020年10月01日 18:08:17856浏览

html常用元素细说1

文本与链接

文本元素

标签 描述
<p> 段落内容
<pre> 按源码格式原样显示
<br> 换行(源码中的换行会被解析来空格)
<span> 与<div>类似,无语义, 主要用作内容的样式钩子
<time> 描述日期或时间
<abbr> 缩写
<sub> 下标
<sup> 上标
<address> 地址,通常用在<footer>中
<s> / <del> 删除线, <s>无语义
<code> 显示代码块,通常与代码格式化插件配合,才能高亮关键字
<progress> 进度条
<b> / <strong> 加粗, <b>无语义
<i> / <em> 斜体, <i>无语义
<mark> 高亮标记, 默认为内容添加黄色背景
<q> / <blockquote> 引用, 内容加双引号
  1. <p>标签
    1. <p>这是一个段落标签</p>
  2. <pre>标签
    1. <!--值得注意的是pre标签之中的内容会被预格式化，也就是说pre标签内的内容可以被当做源码来进行解析。例如&lt；&gt
    2. 可直接转化为<;>符号-->
    3. <pre>&ltpre标签源码格式展示&gt</pre>
    图片展示：
    pre.png
  3. <br>标签
    1. <p>这是上一行<br>这是下一行</p>
    图片展示：
    br.png
  4. <span> 标签
    1. <!--<span>与`<div>`类似,无语义, 主要用作内容的样式钩子，在无样式的情况下类似于一个段落-->
    2. <span>与div类似,无语义, 主要用作内容的样式钩子</span>
  5. <time>标签
    1. <time>2020-09-30</time>
    图片展示：
    time.png
  6. <abbr>标签
    1. <!--title="文本或内容（鼠标放上去的提示语）"
    2. <abbr title="这是我的第二次作业">第二次作业abbr标签</abbr>
    图片展示：
    abbr.png
  7. <sub>标签
    1. <p>2<sub>1</p>
    图片展示：
    sub.png
  8. <sup>标签
    1. <p>2<sup>1</sup>=2</p>
    图片展示：
    sup.png
  9. <address> 标签
    1. <p>地址：<address>中国大陆</address></p>
    图片展示：
    address.png
  10. <s> / <del>
    1. <p>苹果11pro不要<s>11000</s>元也不要<del>100</del>元，现在免费领取</p>
    图片展示：
    PS:第一个11000为<s>的删除线效果，第二个100为<del>的删除线效果
    删除.png
  11. <code>标签
    PS:文本内容将显示为等宽、类似电传打字机样式的字体。
    1. <code> print("hello python") </code>
    图片展示：
    code.png
  12. <progress> 标签
    1. <!--max是进度条的总长，此处设定为100%。value为当前进度50%-->
    2. <!--但是如果浏览器不支持进度条的话，就只会显示一个文本：已完成50%-->
    3. <progress max="100" value="50">已完成</progress>
    图片展示：
    progress.png
  13. <b> / <strong>标签
    1. <b>加粗效果展示1</b><br />
    2. <strong>加粗效果展示2</strong>
    图片展示：
    加粗.png
  14. <i> / <em> 标签
    1. <em>斜体效果展示1</em><br />
    2. <i>斜体效果展示2</i>
    图片展示：
    斜体.png
  15. <mark> 标签
    1. <p>高亮效果展示：<mark>这里面是高亮的</mark></p>
    高亮.png
  16. <q> / <blockquote>标签
    1. <p>后面这句话加双引号：<q>给我加</q></p>
    2. <p>后面这句话引用blockquote标签：<blockquote>给我加333</blockquote></p>
    图片展示：
    引用.png

链接元素

1. 常用属性

属性 描述 举例
href 指向链接页面的 URL href="https://www.baidu.com/"
target 打开 URL 的页面来源 target=_self_blank_top_parent
download 自定义下载文件名 download="banner1.jpg"
type 设置链接文档的 MIME 类型 type="image/jpeg"

2. href属性值

属性 描述
href="url" 跳转的目标地址
href="mailto: 123456@qq.com" 打开邮箱,发送邮件
href="tel:13388**2345" 点击后,会询问用户是否要拨打电话
href="outline.md" 浏览器不能解析的文档, 会直接下载

3. taget属性值

属性 描述
target="__self" 当前窗口打开链接
target="_blank" 新窗口打开链接
target="_parent" 父窗口打开链接
target="_top" 顶层窗口打开链接
target="name" 指定名称的窗口, 与<iframe>元素配合
target="#anchor" 跳转到设置了锚点的元素所在位置

4. 代码展示：

  1.     <!-- href属性是一定要有的，可以是跳转制定的url，也可以是拨打电话 -->
  2.     <!-- 发送邮件，浏览器不能解析的文档，会直接下载 -->
  3.     <!-- 只有href属性的话会默认在当前页面跳转打开页面或拨打发送邮件等操作 -->
  4.     <!-- 所以这里要用到第二个属性target,默认是_self（当前页面打开） -->
  5.     <!-- _blank（新建一个页面打开） -->
  6.     <!-- 先来看看在当前页面打开 -->
  7.     <!-- 先来看看跳转到指定url： -->
  8.     <a href="https://www.baidu.com/">点击这里跳转到百度首页</a>
  9.     <!-- 再来看看在新页面打开 -->
  10.     <a href="https://www.baidu.com/" target="_blank">点击这里跳转到百度首页</a>
  11.     <!-- 下面是询问用户是否拨打电话： -->
  12.     <a href="tel:10086">点击这里拨打电话给中国移动客服</a>
  13.     <!-- 下面是新建一个页面询问用户是否发送邮件 -->
  14.     <a href="mailto:123456789@qq.com" target="_blank">点击这里发送邮件</a>
  15.     <!-- 不能解析的时候会直接进行文件下载 -->
  16.     <a href="demo4.md">这是浏览器不能解析的文件，点击这里即可下载</a>
  17.     <!-- 文件下载操作 -->
  18.     <!-- href内填写文件的下载链接，download内填写的是文件下载时候的默认文件名 -->
  19.     <a href="0929/demo4.html" download="这是一个demo4.html">文件下载</a>
  21.     <!-- 使href属性在同一个页面跳转：锚点 -->
  22.     <!-- 锚点 -->
  23.     <!-- 通过锚点可以实现在当前页面内部实现跳转 -->
  24.     <!-- 跳转到某一个具有ID属性的地址，简而言之就是通过id来进行跳转 -->
  25.     <!-- 利用a标签的href属性：href"#id(锚点)" -->
  26.     <a href="#top">跳转到底部</a>
  27.     <!-- 这里不会显示跳转，但是我们可以通过浏览器的地址栏看到已经跳转了 -->
  28.     <!-- 所以我们要把这里是底部移出当前可视区域 -->
  29.     <p id="top" style="margin-top: 1000px">这里是底部</p>
  30.     <!-- 现在及可正常显示跳转了 -->

表格元素

常用标签

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

常用属性

序号 属性 适用元素 描述
1 border <table> 添加表格框
2 cellpadding <table> 设置单元格内边距
3 cellspacing <table> 设置单元格边框间隙
4 align 不限 设置单元格内容水平居中
5 bgcolor 不限 设置背景色
6 width 不限 设置宽度
7 height 不限 设置高度

实例操作解析

PS1：在 html 中生成一个表格，必须首先生成一个行，再生成列，并将数据不断填充至“单元格之中”
PS2：在 html 表格之中，表格标签必须都包在 table 标签之中

实战：在 html 之中生成一个商品信息表，并给予一定的美化！

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表格元素：1.带分页条的</title>
  7.   </head>
  8.   <body>
  9.     <!-- 利用border属性来给表格添加边框线；
  10.       利用cellspacing属性使表格边框间隙为0
  11.       利用cellpadding属性设置表格页边距为5
  12.       利用align使表格居中（不是内容居中） -->
  13.     <table
  14.       border="1"
  15.       cellspacing="0"
  16.       cellpadding="5"
  17.       width="300"
  18.       height="200"
  19.       align="center"
  20.     >
  21.       <caption>
  22.         商品信息表
  23.       </caption>
  24.       <!-- 表头 -->
  25.       <!-- bgcolor属性为表头添加浅蓝色的背景填充 -->
  26.       <thead bgcolor="ligtblue">
  27.         <!-- 要生成一个表格，必须先生成一个行，然后再生成列，
  28.         并将数据填充到单元格之中。 -->
  29.         <!-- td和th的区别，th有一个默认样式为：加粗和居中，更加实用表头的使用 -->
  30.         <tr>
  31.           <th>ID</th>
  32.           <th>名称</th>
  33.           <th>数量</th>
  34.           <th>单价</th>
  35.           <th>金额</th>
  36.         </tr>
  37.       </thead>
  38.       <!-- 表格主体区（表格主体可以有多个） -->
  39.       <tbody bgcolor="6aff8c">
  40.         <tr>
  41.           <td>1</td>
  42.           <td>IPHONE</td>
  43.           <td>1</td>
  44.           <td>11000</td>
  45.           <td>11000</td>
  46.         </tr>
  47.         <tr>
  48.           <td>2</td>
  49.           <td>华为</td>
  50.           <td>2</td>
  51.           <td>4500</td>
  52.           <td>9000</td>
  53.         </tr>
  54.         <tr>
  55.           <td>3</td>
  56.           <td>小米</td>
  57.           <td>3</td>
  58.           <td>3000</td>
  59.           <td>9000</td>
  60.         </tr>
  61.       </tbody>
  62.     </table>
  63.     <!-- 分页条功能可以利用a标签来进行实现 -->
  64.     <p>
  65.       <a href="" class="page">首页</a>
  66.       <a href="" class="page">...</a>
  67.       <a href="" class="page">5</a>
  68.       <a href="" class="page">6</a>
  69.       <a href="" class="page">7</a>
  70.       <a href="" class="page">8</a>
  71.       <a href="" class="page">...</a>
  72.       <a href="" class="page">尾页</a>
  73.     </p>
  74.   </body>
  75. </html>

表格合并操作：

不论是行合并还是列合并 rowspan 和 colspan 都必须写到单元格之中 ###行的方向合并：
利用 rowspan 进行合并操作，rowspan=”需要合并的行数”

  1. <!-- 要使上午竖向合并，也就是在行的方向上进行合并，就要使用rowspan
  2.         属性，值得一提的是合并之后会出现当前单元格的内容去到其他单元格之中
  3.         比如上午替代了节数2  3   4的情况，这种时候就需要把后面的上午都注释掉
  4.         只保留第一个即可 -->
  5. <!-- rowspan="想要合并的行数" -->
  6. <tr>
  7.   <td rowspan="4">上午</td>
  8.   <td>1</td>
  9.   <td>物权法</td>
  10.   <td>没有课</td>
  11.   <td>民事诉讼法</td>
  12.   <td>合同法</td>
  13.   <td>刑法分论</td>
  14. </tr>
  15. <!-- 由于已经把上午进行合并了，我们就需要把后面的上午注释掉 -->
  16. <!-- 不然会出现单元格错乱的现象 -->
  17. <tr>
  18.   <!-- <td>上午</td> -->
  19.   <td>2</td>
  20.   <td>物权法</td>
  21.   <td>没有课</td>
  22.   <td>民事诉讼法</td>
  23.   <td>合同法</td>
  24.   <td>刑法分论</td>
  25. </tr>
  26. <tr>
  27.   <!-- <td>上午</td> -->
  28.   <td>3</td>
  29.   <td>物权法</td>
  30.   <td>没有课</td>
  31.   <td>民事诉讼法</td>
  32.   <td>合同法</td>
  33.   <td>刑法分论</td>
  34. </tr>
  35. <tr>
  36.   <!-- <td>上午</td> -->
  37.   <td>4</td>
  38.   <td>物权法</td>
  39.   <td>没有课</td>
  40.   <td>民事诉讼法</td>
  41.   <td>合同法</td>
  42.   <td>刑法分论</td>
  43. </tr>

效果展示： 1.已进行合并操作后未注释其他行的：
未注释.png 2.合并成功： 行的方向合并成功.png

列的方向合并

列的方向进行合并的话利用 colspan 进行合并操作，colspan=”需要合并的列数”

  1. <thead>
  2.   <!-- 列的合并：colspan -->
  3.   <!-- colspan="想要合并的列数" -->
  4.   <!-- 只保留一列的值，其他列注释，避免单元格的值发生错乱 -->
  5.   <tr>
  6.     <th colspan="2">时间</th>
  7.     <!-- <th>时间</th> -->
  8.     <th>星期一</th>
  9.     <th>星期二</th>
  10.     <th>星期三</th>
  11.     <th>星期四</th>
  12.     <th>星期五</th>
  13.   </tr>
  14. </thead>

图片展示：
列合并并align居中.png

表格美化：

1. 单元格内美化

  1. <!-- 利用bgcolor使它的背景颜色为ff788b色 -->
  2. <td colspan="7" align="center" bgcolor="ff788b">就餐和休息时间</td>

图片展示：
单元格美化.png

2. 利用<colgroup>和<col>进行列的美化

  1. <colgroup>
  2.   <!-- 第一列样式 -->
  3.   <col style="background-color: aqua" />
  4.   <!-- 第二列样式 -->
  5.   <col style="background-color: aquamarine" />
  6.   <!-- 第三~七列样式 -->
  7.   <!-- 多列样式的操作使用span进行合并操作 -->
  8.   <col span="5" style="background-color: antiquewhite" />
  9. </colgroup>

图片展示：样式美化.png ##制作一个课程表
代码展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>课程表</title>
  7.   </head>
  8.   <body>
  9.     <table border="1" cellspacing="0" cellpadding="5" align="">
  10.       <caption>
  11.         法学8班课程表
  12.       </caption>
  13.       <!-- 无论是行合并，还是列合并，colspan和rowspan都必须写到单元格之中 -->
  15.       <!-- 自定义列样式 利用colgroup标签来进行处理 -->
  16.       <!-- 标签内使用col标签处理 -->
  17.       <colgroup>
  18.         <!-- 第一列样式 -->
  19.         <col style="background-color: aqua" />
  20.         <!-- 第二列样式 -->
  21.         <col style="background-color: aquamarine" />
  22.         <!-- 第三~七列样式 -->
  23.         <!-- 多列样式的操作使用span进行合并操作 -->
  24.         <col span="5" style="background-color: antiquewhite" />
  25.       </colgroup>
  26.       <thead>
  27.         <!-- 列的合并：colspan -->
  28.         <!-- colspan="想要合并的列数" -->
  29.         <!-- 只保留一列的值，其他列注释，避免单元格的值发生错乱 -->
  30.         <tr>
  31.           <th colspan="2">时间</th>
  32.           <!-- <th>时间</th> -->
  33.           <th>星期一</th>
  34.           <th>星期二</th>
  35.           <th>星期三</th>
  36.           <th>星期四</th>
  37.           <th>星期五</th>
  38.         </tr>
  39.       </thead>
  40.       <tbody>
  41.         <!-- 要使上午竖向合并，也就是在行的方向上进行合并，就要使用rowspan
  42.         属性，值得一提的是合并之后会出现当前单元格的内容去到其他单元格之中
  43.         比如上午替代了节数2  3   4的情况，这种时候就需要把后面的上午都注释掉
  44.         只保留第一个即可 -->
  45.         <!-- rowspan="想要合并的行数" -->
  46.         <tr>
  47.           <td rowspan="4">上午</td>
  48.           <td>1</td>
  49.           <td>物权法</td>
  50.           <td>没有课</td>
  51.           <td>民事诉讼法</td>
  52.           <td>合同法</td>
  53.           <td>刑法分论</td>
  54.         </tr>
  55.         <!-- 由于已经把上午进行合并了，我们就需要把后面的上午注释掉 -->
  56.         <!-- 不然会出现单元格错乱的现象 -->
  57.         <tr>
  58.           <!-- <td>上午</td> -->
  59.           <td>2</td>
  60.           <td>物权法</td>
  61.           <td>没有课</td>
  62.           <td>民事诉讼法</td>
  63.           <td>合同法</td>
  64.           <td>刑法分论</td>
  65.         </tr>
  66.         <tr>
  67.           <!-- <td>上午</td> -->
  68.           <td>3</td>
  69.           <td>物权法</td>
  70.           <td>没有课</td>
  71.           <td>民事诉讼法</td>
  72.           <td>合同法</td>
  73.           <td>刑法分论</td>
  74.         </tr>
  75.         <tr>
  76.           <!-- <td>上午</td> -->
  77.           <td>4</td>
  78.           <td>物权法</td>
  79.           <td>没有课</td>
  80.           <td>民事诉讼法</td>
  81.           <td>合同法</td>
  82.           <td>刑法分论</td>
  83.         </tr>
  84.         <!-- 午餐时间： -->
  85.         <tr>
  86.           <!-- 利用align属性使它居中 -->
  87.           <!-- 利用bgcolor使它的背景颜色为ff788b色 -->
  88.           <td colspan="7" align="center" bgcolor="ff788b">就餐和休息时间</td>
  89.         </tr>
  90.       </tbody>
  91.     </table>
  92.   </body>
  93. </html>

列表元素

序号 列表元素 描述 场景
1 <ul> + <li> 无序列表 导航
2 <ol> + <li> 有序列表 事务
3 <dl> + <dt> + <dd> 自定义列表 声明

无序列表

无需列表通常用在导航之中，通过<ul>标签和<li>标签来进行嵌套使用，从而达到一定的效果。

  1. <!-- 无序列表 -->
  2. <!-- 利用`ul标签包含li标签实现 -->
  3. <!-- 列表标签和a标签套用，可以实现列表的跳转 -->
  4. <h3>导航</h3>
  5. <ul class="nav">
  6.   <li><a href="">百度</a></li>
  7.   <li><a href="">搜狗</a></li>
  8.   <li><a href="">博客</a></li>
  9.   <li><a href="">登录/注册</a></li>
  10. </ul>

有序列表

通常用在事务上，用于表达一定的时间顺序和计划顺序，能够有一定顺序去完成任务的场景。
通常使用<ol>+<li>标签使用

  1. <!-- 有序列表 -->
  2. <!-- 有序列表利用ol标签包含li标签来实现 -->
  3. <h3>计划:</h3>
  4. <ol class="plan">
  5.   <li><a href="">早上</a></li>
  6.   <li><a href="">中午</a></li>
  7.   <li><a href="">晚上</a></li>
  8.   <li><a href="">凌晨</a></li>
  9. </ol>

自定义列表

通常用在声明等页脚说明上
利用<dl>标签下嵌套<dt>嵌套<dd>标签使用
<dl>标签声明这是一个自定义列表，<dt>表示这个列表的标题，<dd>为内容

  1. <!-- 自定义列表 -->
  2. <!-- dl标签包含dt标签和dd标签来进行使用 -->
  3. <!-- 其中，dl标签表示是一个列表，dt表示标题，dd表示内容 -->
  4. <!-- 通常自定义列表可在页脚友情链接或联系方式等地方可见 -->
  5. <dl class="explain">
  6.   <dt>联系方式:</dt>
  7.   <dd>QQ735740022</dd>
  8.   <dd>联系地址：XX市XX县XX区</dd>
  9.   <dd>tel：12456</dd>
  10.   <dt>友情链接</dt>
  11.   <dd><a href="">百度首页</a></dd>
  12.   <dd><a href="">搜狗首页</a></dd>
  13.   <dd><a href="">腾讯首页</a></dd>
  14. </dl>

不搭配 CSS 代码可以实现以下效果：
列表无CSS.png

配合老师给的 css 代码，可以做到以下效果：
列表有CSS.png

图像元素

1. 简介

  • 当前文档的图像元素,仅仅是外部图片资源的占位符,只有解析时才会加载进来
  • 所以, 在确保用户可以看清的情况下, 图片体积越小越好, 以提升加载速度
  • 推荐使用可压缩的jpg格式, 小图片,或需要背景透明的,推荐使用png格式
  • 对于简单的动图,或者颜色要求较少的,可使用gif格式
  • 对于图标, 建议使用 css 字体图标,而不是使用图像图标

2. 常用标签

元素 描述
<img> 图片元素,空元素(单标签)
<figure> 图片/插图区域
<figcaption> 图片/插图区域的标题

3. <img>常用属性

属性 描述
src 图片来源地址, 可以是本地, 也可以是来自网络
alt 图片描述信息,当图片无法显示时, 显示该信息, 也可以为无障碍阅读器所识别
title 鼠标悬停时显示的文本信息, 通常与 alt 属性一致
width/height 图片尺寸, 宽高只需设置一个,另一个会等比缩放, 推荐使用 css 设置

实战

  1. <!-- 创建一个容器，可以放置图片和文字链接 -->
  2. <!-- 创建一个类，使图片和文字为一个整体 -->
  3. <!-- img标签应该注意的地方重点是src，src存放的是图片的地址，alt属性为图片地址错误时无法
  4.      加载图片时提示的文字，title为图片标题，即为鼠标放置在图片上的时候提示的文字 -->
  5. <div class="container">
  6.   <div class="course">
  7.     <a href="https://www.php.cn/course/1136.html#down">
  8.       <img
  9.         src="https://img.php.cn/upload/course/000/000/001/5f59db7b704fe778.png"
  10.         alt="PHP中文网第13期前端培训课程"
  11.         title="PHP中文网第13期前端培训课程"
  12.         width="200"
  13.     /></a>
  14.     <a href="https://www.php.cn/course/1136.html#down">第13期前端培训课程</a>
  15.   </div>
  16.   <div class="course">
  17.     <a href="https://www.php.cn/course/1137.html"
  18.       ><img
  19.         src="https://img.php.cn/upload/course/000/000/001/5f59db6ea55b7525.png"
  20.         alt="PHP编程"
  21.         title="PHP编程"
  22.         width="200"
  23.     /></a>
  24.     <a href="https://www.php.cn/course/1137.html">PHP编程</a>
  25.   </div>
  26. </div>

图片展示：

当图片地址错误时：alt 属性中的值即为提示词，提示用户这张图片是干嘛的

图片地址错误.png

图片地址和代码正确：

图片正确.png

配合老师给的 CSS 代码，可以实现：

CSS配合.png

上一条：文本、链接和表格元素学习总结及实例展示下一条：链接元素和表格的基础知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多