【HTML】表格标签，语义化

【HTML】表格标签，语义化
❤️ Author：老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事乐观面对
😍 系列专栏：
文章目录
标签

 table
- 会像excel一样绘制出表格
- 先画行，然后每行再画单元格
- th表头，tr是行，td是列（其中有个属性是headers，值为某th的id，以表示这个数据的表头都是谁，方便查看）
- border属性控制外层边框厚度，cellspacing设置边框两条线之间的距离，如果设置为0，那么就成一条线了
- thead里面放表头，tbody里面放表格的内容，tfoot和thead样式一样，为什么要有thead和tfoot？，因为如果表格足够长的话，打印表格的时候会分很多页，如果加上thead和tfoot，就可以在打印的每一页上都加上thead和tfoot，方便查看。
```
 <table border=5>
    <thead>
     <tr>
      <th>No.th>
      <th>nameth>
    tr>
    thead>
    <tbody>
     <tr>
      <td>aaatd>
      <td>bbbtd>
      tr>
    tbody>
  table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
```
向右合并（colspan）
- 这里有一个特殊的，他只能把自己行的那个单元格向后推，别的跨过行的单元格他是顶不动的
```
 <tr>
      <td>aaatd>
      <td colspan=2>bbbtd>
       <td>bbbtd>
       <td>bbbtd>
       <td>bbbtd>
tr>
1
2
3
4
5
6
7
```
向下合并（rowspan）
- tbody里面的元素不能跨到tfoot 的
```
  <tr>
      <td rowspan=2>aaatd>
      <td>bbbtd>
       <td>bbbtd>
       <td>bbbtd>
       <td>bbbtd>
      tr>
1
2
3
4
5
6
7
```
caption
- 表格标题
```
<table border=5>
    <caption>成绩单caption>
    <thead>
     <tr>
      <th>No.th>
      <th>nameth>
       <th>nameth>
       <th>nameth>
       <th>nameth>
    tr>
    thead>
    <tbody>
     <tr>
      <td>aaatd>
      <td colspan=2>bbbtd>
       <td>bbbtd>
       <td>bbbtd>
       <td>bbbtd>
      tr>
      <tr>
      <td rowspan=2>aaatd>
      <td>bbbtd>
       <td>bbbtd>
       <td>bbbtd>
       <td>bbbtd>
      tr>
      <tr>
      <td>aaatd>
      <td>bbbtd>
       <td>bbbtd>
       <td>bbbtd>
       <td>bbbtd>
      tr>
    tbody>
  table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
```
headers属性
- 通过headers属性，可以知道26代表的是什么，对应的表头有哪些
- 通过id相互关联
col
- 如果想为一整列设置什么样式，有一个自闭合标签col，一个col代表一列，也有colgroup，可以设置colgroup里所有col样式
- bgcolor属性：设置背景颜色
- span属性：代码中的span=2代表包含第一列和第二列所有的单元格都设置成背景颜色为黄色
- 写在table后面，第一个col标签就代表第一列
```
    <col span=2 bgcolor=yellow>
    <col bgcolor=pink>
1
2
```
map
- 配合img标签来使用的，点击图片上的某个区域，可以跳转到指定的页面，rect是矩形（左上角坐标，右下角坐标），circle是圆（圆心坐标和半径），polygon是一个多边形
- 假如修改了图片的原始尺寸，这个坐标是相对于图片展示出来的尺寸的，而不是看原图的尺寸
```
 <img usemap="#map1" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
  <map name="map1">
    <area shape="rect" coords="174,108,274,221" href="http://www.baidu.com" target = "_blank" alt="">
    <area shape="circle" coords="280,230,55" href="https://www.mi.com" target="_blank" alt="">
    <area shape="polygon" coords="352,264,391,262,435,208,486,260,570,266,572,356" href="https://www.mi.com" target="_blank" alt="">
  map>
1
2
3
4
5
6
```
iframe
- 内嵌一个网站，frameborder是一个外边框基本就用0和1，9和1如果不加css样式的话是一样的
- 有的时候浏览器比较老，不认识iframe标签，会在iframe标签里面写一个p标签，这个里面的内容是fallback，也就是后备内容
- name属性：可以配合a标签的target属性，跳转到iframe里面，form标签也同样适用
- 当我们请求一个url的时候，服务器首先返回给我们一个html的页面，我们可以在开发者工具的network中的preview中看到，然后浏览器收到这个html之后再去解析css，js，那么现在有的页面现在不能iframe了，就是通过请求头里的x-iframe-Options：sameorigin，就是只能允许同源的网站使用iframe页面
```
  <iframe
  src="https://www.12306.cn/index/" frameborder="1">
  <p>您的浏览器不支持该功能，请升级p>
	iframe>
1
2
3
4
```
```
<a href="https://p5js.org/" target="frame1">p5js.orga>
  <iframe src="https://www.12306.cn/index/" frameborder="1" name="frame1">
  iframe>
1
2
3
```
```
 <form target="frame1" action="https://xieranmaya.github.io/">
    name: <input type="text" name="username">
    <button>submitbutton>
  form>
  <iframe src="https://www.12306.cn/index/" frameborder="1" name="frame1">
  iframe>
1
2
3
4
5
6
```
iframe层层嵌套
- page1
```
DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <h1>page 1h1>
  <iframe src="page2.html" width="800" height="800" frameborder="1">iframe>
body>

html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
- page2
```
DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <h1>page2h1>
  <iframe src="page3.html" width="500" height="600" frameborder="1">iframe>
body>

html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
- page3
```
DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <h1>page3h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolores ullam sapiente nemo libero ut architecto.
    Id quisquam ipsa saepe odit ex at suscipit quo qui dolorem! Amet, dolorem debitis!p>
  <a href="https://p5js.org/" target="_top">topa>
  <a href="https://p5js.org/" target="_parent">parenta>
body>

html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
```
- top是跳到page1，parent是跳到page2
h5新增标签

 article
- 文章标签，表达一个段落
section
- 一个区块，类似于div
aside
- 侧边栏
header/footer

nav
- 导航栏
main
- 页面主体
sub
- 角标
sup
- 上标
code
- 包含一段代码，和pre一起使用
video
- 内嵌页面里的视频播放器
- autoplay属性：无值属性，自动播放，自动播放是没有声音的，不然吓人(设置静音的属性：muted)
- loop属性：循环播放，无值属性
- preload：无值属性，没有点击video的时候，预先加载一部分
- controls：无值属性，显示控制条
```
<video src="xx.mp4">video>
1
```
source
- 在video标签里使用，指定多个视频源
```
<video controls>
    <source src="a.mp4">
    <source src="b.mp4">
  video>
1
2
3
4
```
audio
- 音频播放器，controls属控制是否显示控制栏，音量等控制属性
```
<audio src="" controls>audio>
1
```
object
- 类似于iframe标签
- data属性：里面可以嵌入任何一个浏览器认识的东西，图片，pdf文件，网页，视频，音频等等，默认300宽
```
 <object data="xxx.pdf">object>
1
```
canvas
- 默认给你一个画布，网页里面的游戏，3d效果都是用canvas做的，github注册页面有个那个地球，就是用canvas做的
progress
- 进度标签
- 没有min属性
```
<progress value="70" max="80">progress>
1
```
kbd
- 在网页上展示一个由键盘输入的内容，类似于code标签
```
<kbd> aa bbkbd>
1
```
address
- 表示一个地址，其实就是默认带一个斜体
q
- 行内引用，自动两边带一个引号，行内标签
blockquote
- 块引用，带有一个缩进
- 类似于github上回复的那个功能，按R键，就可以引用那段话了、
figure
- 介绍图片的，配合figcaption使用
figcaption
- 对图片的文字描述
```
<figure>
    <img src="xxx" alt="">
    <figcaption>拍摄者：xxxfigcaption>
  figure>
1
2
3
4
```
abbr
- 表示缩写，通过title可以知道全称是什么
- 样式就是下面由一个个小点点组成的虚线
s
- 删除线
small
- 小号的字
details

summary
- 默认是收起来的，展示summary内容，如果点一下，就展示details的内容
- 里面有一个属性open，点开就有open属性
```
<details>
    <summary>Details
    summary>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque dicta sequi ducimus dolor, asperiores nostrum autem
    voluptatibus ipsum incidunt quidem veniam voluptates sint aliquam earum quibusdam cupiditate magni repellat eum!
 details>
1
2
3
4
5
6
```
- 首先，写这个是为了让浏览器以最新的渲染模式来解析页面
- 那这时候会有一个问题，会不会加载不了十年前的页面了，这个大可不必担心，会兼容的，和windows10也会兼容windows7一样的。
- 这个是必须要写的，如果不写，浏览器会以一种非标准的形式渲染页面，在IE浏览器下会以quirkmode（怪异模式）渲染，会出现一些bug
语义化
- 语义化就是能够用合适的内容选用合适的标签，语义化做的好的页面能够方便人于机器的理解，能够让团队的后来者更易于维护代码，比如说不要用表格设计样式（之前用表格设计阴影），合理使用html5新增的语义标签进行合适的嵌套，标签之间也不要乱嵌套。
- 优势：1.方便项目的维护，增加代码的阅读性2.减少开发者之间的沟通成本3.能让语音合成工具能够正确的阅读网页元素的用途，以便做出正确的反应4.有利于SEO
SEO
- SEO是搜索引擎的优化，通过了解搜索引擎的运作规则来调整网站，以提高网站在有关搜索引擎内的排名
role/aria-*
- 这两个标签是为了配合读屏软件使用的
- 比如
  就表示，用一个div写了一个button，为什么要用div画button呢？以为如果在windows和mac，或者linux上展示的button都是不一样的，如果想让他们是样式一样的，我们可以通过css和div配合使用，画出一个button，这样在每一个浏览器上，每一个系统上都是一样的
- 而aria是表示一个状态，比如aria-open为false的时候，就表示dropdown下拉框是合上的，如果变成true，就是打开的，可以通过js改变aria的属性值
————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章
相关阅读:
“构建交互式用户界面的自定义组件应用与界面布局设置“
蓝桥杯单片机快速开发笔记——矩阵键盘
 【scikit-learn基础】--『预处理』之离散化
 MySQL——练习
 android源码设计模式学习之单列模式
 GEE4：FCMASK算法进行去云处理
 laravel-admin联动选择展示时ueditor样式错乱
 Vuex 的用法
 哪些企业适合做私域？私欲怎么做成效大？
Redis6.0使用了多线程还能保证线程安全么？-Redis6.0 多线程精讲
原文地址：https://blog.csdn.net/partworld/article/details/126687891

文章目录

标签

table

向右合并（colspan）

向下合并（rowspan）

caption

headers属性

col

map

iframe

iframe层层嵌套

h5新增标签

article

section

aside

header/footer

nav

main

sub

sup

code

video

source

audio

object

canvas

progress

kbd

address

q

blockquote

figure

figcaption

abbr

s

small

details

summary

语义化

SEO

role/aria-*