简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >爆肝之我在html学导航表格

爆肝之我在html学导航表格

斗人传说
斗人传说原创
2022年07月05日 01:31:30535浏览

博客已迁移至自建网站,此博客已废弃.
请移步至:https://blog.ours1984.top/posts/bgbg/欢迎大家访问

一个页面就是一个html文档，大家不要学傻了。css/js通过标签以元素的属性寄生在在html文档中

元素和标签

在 HTML 中，标签（tag）通常又被称作元素（element）。例如 <a> 标签又叫做 <a> 元素，<p> 标签也叫作 <p> 元素。HTML 元素根据其表现形式可以分为 2 种：块级元素,行内元素;任何 HTML 元素都属于这两者中的任意一种。

块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素如下表：

块级元素 说明
div 最典型的块元素
p 表示段落
h1-h6 表示1-6级标题（默认加粗）
br 表示换行
ol 有序列表
ul 无序列表

行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下表：

行内元素 说明
a 超链接
span 常用行级
strong 加粗，强调
b 加粗，不强调
em 斜体，强调
i 斜体，不强调
img 图片
input 输入框
select 下拉列表

HTML 中的各个元素之间是可以互相嵌套的

  • 块元素可以嵌套块元素
  • 块元素可以嵌套行内元素
  • 行内元素可以嵌套行内元素
  • 行内元素可以嵌套块元素

块级元素的宽度是 100%，在浏览器中默认独占一行。
行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时，才会换行显示。
块级元素内部可以嵌套块级元素或行内元素。
建议行内元素里面只嵌套行内元素。

元素的属性

通用属性

几乎所有元素都拥有的属性

id:用于表示页面中唯一元素,唯一性自己保证

class:推荐使用,几乎只用它,用于表示一类元素

  • css:样式复用,class天生具备了样式复用的特征

style:某一个元素样式,直接写在标签里,权重大于外部样式

预置属性

通用属性子集,id/class/style也是预置属性,只不过几乎所有元素都会有

比如a标签的预置属性:href
比如img标签的预置属性:src,alt

事件属性

有一个通用前缀:on+事件名称:事件属性
比如<button onclick="alert('提交成功')">提交</button>

自定义属性

有一个通用前缀:”data-“，可用于保存数据
比如<div data-user-email="498668472@qq.com">我的邮箱是:</div>

语义化布局

id:权重过大,尽量少用或不用
id:主要用在表单元素，锚点

所以出现了语义化布局元素

  • herder标签：相当于div标签属性为header
  • main标签：相当于div标签属性为main
  • footer标签：相当于div标签属性为footer
  1.   <div class="header">header</div>
  2.   <div class="main">main</div>
  3.   <div class="footer">footer</div>
  5.   <hr>
  7.   <!-- html5: 语义化布局元素 -->
  8.   <header>header</header>
  9.   <main>main</main>
  10.   <footer>footer</footer>

为什么还是有大量的开发都, 喜欢用 div + class 模式, 不用语义化布局标签?

  1. 目前项目90%以上是基于移动端的，不在乎不依赖搜索引擎优化，seo
  2. 语义化标签还是数量太少了，不如用class描述更精准

常用标签

图片是外部资源，通过标签引入到当前html中，通常使用“单标签”

列表：相同元素集合，单列多行。ul+li无序列表，il+li有序列表

图片链接：通常不会单独使用，而是与其他元素，如列表组合使用

自定义列表：类似map的键值对，dl开启一个自定义列表，dt相当于key，dd相当于value

  1.   <img src="/images/bear.jpg" alt="图片说明" width="200">
  2.   <a href="/images/download.zip" target="_blank">下载附件</a>
  3.   <a href="https://blog.ours1984.top/" target="_self">网页跳转</a>
  4.   <a href="mailto:xxxx.com" target="_self">发邮件</a>
  5.   <!-- 无序列表 -->
  6.   <ui>
  7.       <li><a href="">item</a></li>
  8.       <li><a href="">item</a></li>
  9.       <li><a href="">item</a></li>
  10.   </ui>
  11.   <!-- 有序列表 -->
  12.   <ol>
  13.       <li><a href="">item</a></li>
  14.       <li><a href="">item</a></li>
  15.       <li><a href="">item</a></li>
  16.   </ol>
  17.   <!-- 自定义列表 -->
  18.   <dl>
  19.       <dt>地址:</dt>
  20.       <dd>合肥市政务新区</dd>
  21.       <dt>email1:</dt>
  22.       <dd>admin@php.cn</dd>
  23.       <dd>498448472@qq.cn</dd>
  24.   </dl>

表格的合并单元格

table标签开启一个表格，width属性指定宽度，border属性指定表格线宽度

caption：标题
thead：表头（可选）
th:预置了居中和加粗的tr
tbody：表体
tfoot：表尾（可选）

tr：行，必须先画行，在一行中划分列（单元格）
td：单元格。colspan属性：水平合并，rowspan属性：垂直合并。合并后注意个数布局

  1.   <table width="500" border="1">
  2.     <!-- 标题 -->
  3.     <!-- <div class="caption">标题</div> -->
  4.     <caption>
  5.       表格标题
  6.     </caption>
  8.     <!-- 表头: 可选 -->
  9.     <thead>
  10.       <tr bgcolor="lightgreen">
  11.         <!-- <td style="text-align: center;font-weight:bold">xxx</td>
  12.              <td style="text-align: center;font-weight:bold">xxx</td>
  13.              <td style="text-align: center;font-weight:bold">xxx</td>
  14.              <td style="text-align: center;font-weight:bold">xxx</td> -->
  16.         <!-- th: 预置了style="text-align: center;font-weight:bold"的td标签 -->
  17.         <th>xxx</th>
  18.         <th>xxx</th>
  19.         <th>xxx</th>
  20.         <th>xxx</th>
  21.       </tr>
  22.     </thead>
  24.     <!-- 表格中的数据必须放在"单元格"中 -->
  25.     <!-- tbody: 必选 -->
  26.     <tbody>
  27.       <!-- tr: 行, 必须先画行, 在一行中划分列(单元格) -->
  28.       <tr>
  29.         <td>xxx</td>
  30.         <!-- ! 水平方向合并: colspan -->
  31.         <!-- col:列, span: 跨越,合并 -->
  32.         <td colspan="3" bgcolor="yellow">xxx</td>
  33.         <!-- <td>xxx</td>
  34.           <td>xxx</td> -->
  35.       </tr>
  36.       <tr>
  37.         <td>xxx</td>
  38.         <td>xxx</td>
  39.         <td>xxx</td>
  40.         <td>xxx</td>
  41.       </tr>
  43.       <!-- rowspan: 垂直方向 -->
  44.       <tr>
  45.         <td>xxx</td>
  46.         <!-- * 从第3行第2列开始,向下/垂直合并3行/单元格 -->
  47.         <td rowspan="3" bgcolor="cyan">xxx</td>
  48.         <td>xxx</td>
  49.         <td>xxx</td>
  50.       </tr>
  51.       <tr>
  52.         <td>xxx</td>
  53.         <!-- <td>xxx</td> -->
  54.         <td>xxx</td>
  55.         <td>xxx</td>
  56.       </tr>
  57.       <tr>
  58.         <td>xxx</td>
  59.         <!-- <td>xxx</td> -->
  60.         <td>xxx</td>
  61.         <td>xxx</td>
  62.       </tr>
  63.     </tbody>
  65.     <!-- 表尾: 可选  -->
  66.     <tfoot>
  67.       <tr>
  68.         <td colspan="4" bgcolor="lightblue">xxx</td>
  69.         <!-- <td>xxx</td>
  70.           <td>xxx</td>
  71.           <td>xxx</td> -->
  72.       </tr>
  73.     </tfoot>
  74.   </table>

课程表示例

  1.     <table border="1">
  2.         <caption>大学课表</caption>
  3.         <tbody>
  4.             <tr>
  5.                 <td rowspan="2">学历层次</td>
  6.                 <td rowspan="2">主考院校</td>
  7.                 <td rowspan="2">专业名称</td>
  8.                 <td colspan="2" align="center">星期六</td>
  9.                 <td colspan="2" align="center">星期日</td>
  10.             </tr>
  11.             <tr>
  12.                 <td align="center">上午</td>
  13.                 <td align="center">下午</td>
  14.                 <td align="center">上午</td>
  15.                 <td align="center">下午</td>
  16.             </tr>
  17.             <tr>
  18.                 <td colspan="3" rowspan="2" align="center">公共课</td>
  19.                 <td>马克思主义基本原理概论 <br> 政治经济学</td>
  20.                 <td>教育学</td>
  21.                 <td>中国近代史纲要<br>大学语文</td>
  22.                 <td>英语（一）<br>英语（二）</td>
  23.             </tr>
  24.             <tr>
  25.                 <td>复变函数与积分变换 <br> 概率论数理统计</td>
  26.                 <td>高等数学（一）<br>高等舒徐（专科）</td>
  27.                 <td>线性代数</td>
  28.                 <td>大学物理<br>物理</td>
  29.             </tr>
  30.             <tr>
  31.                 <td colspan="3" align="center">经济类课程</td>
  32.                 <td></td>
  33.                 <td>国民经济统计概论<br>管理学原理</td>
  34.                 <td>基础跨级学</td>
  35.                 <td>经济法概论<br>管理系统中计算机应用</td>
  36.             </tr>
  37.             <tr>
  38.                 <td align="center">专科</td>
  39.                 <td align="center">新疆财经<br>大学</td>
  40.                 <td align="center">工商企业管理</td>
  41.                 <td>市场营销学<br> 人力资源管理<br>国际贸易实务</td>
  42.                 <td>中国税制<br>国际经济法概论</td>
  43.                 <td>生产与作业管理<br>政府与事业单位<br>刑事诉讼法</td>
  44.                 <td>市政学<br>公共关系学</td>
  45.             </tr>
  46.         </tbody>
  47.     </table>

效果如下

导航栏示例

  1.     <style>
  2.         .a {
  3.             width: 205px;
  4.         }
  6.         .b {
  7.             width: 200px;
  8.             height: 50px;
  9.             background-color: limegreen;
  10.             text-align: center;
  12.             line-height: 50px;
  13.             color: #ffffff;
  14.         }
  16.         .c {
  17.             width: 200px;
  18.             height: 300px;
  19.             background-color: gainsboro;
  20.             display: none;
  22.             /*visibility: hidden;*/
  23.         }
  25.         .d {
  26.             list-style: none;
  27.             margin-left: -40px;
  28.         }
  30.         .e {
  31.             line-height: 50px;
  32.             display: block;
  34.             width: 200px;
  35.             text-align: center;
  36.         }
  38.         .a:hover {
  39.             cursor: pointer;
  40.         }
  42.         .a:hover .c {
  43.             display: block;
  44.         }
  46.         .a:hover .b {
  47.             background-color: green;
  48.         }
  50.         .e:hover {
  51.             background-color: gray;
  52.             color: #FFFFFF;
  53.         }
  54.     </style>
  55.     <div class="a">
  56.         <div class="b">ours1984导航</div>
  57.         <div class="c">
  58.             <ul class="d">
  59.                 <li class="e">
  60.                     <a href="https://blog.ours1984.top/" target="_blank">
  61.                         <img src="/images/bear.jpg" alt="主页" width="100">
  62.                     </a>
  63.                 </li>
  64.                 <li class="e">
  65.                     <a href="https://blog.ours1984.top/archives/" target="_blank">
  66.                         <img src="/images/dog.jpg" alt="归档" width="100">
  67.                     </a>
  68.                 </li>
  69.                 <li class="e">
  70.                     <a href="hhttps://blog.ours1984.top/posts/xnzywl/" target="_blank">
  71.                         <img src="/images/duck.jpg" alt="VPN" width="100">
  72.                     </a>
  73.                 </li>
  74.             </ul>
  75.         </div>
  76.     </div>

效果如下

附录:HTML标签的英文全称以及含义

HTML标签 英文全称 中文释义
a Anchor 锚(定义超链接，用于从一张页面链接到另一张页面)
abbr Abbreviation 缩写词
acronym Acronym 取首字母的缩写词
address Address 地址
alt alter 替用(一般是图片显示不出的提示)
b Bold 粗体（文本）
bdo Direction of Text Display 文本显示方向
big Big 变大（文本）
blockquote Block Quotation 区块引用语
br Break 换行
cell cell 巢
cellpadding cellpadding 巢补白
cellspacing cellspacing 巢空间
center Centered 居中（文本）
cite Citation 引用
code Code 源代码（文本）
dd Definition Description 定义描述
del Deleted 删除（的文本）
dfn Defines a Definition Term 定义定义条目
div Division 分隔
dl Definition List 定义列表
dt Definition Term 定义术语
em Emphasized 加重（文本）
font Font 字体
h1~h6 Header 1 to Header 6 标题1到标题6
hr Horizontal Rule 水平尺
href hypertext reference 超文本引用
i Italic 斜体（文本）
iframe Inline frame 定义内联框架
ins Inserted 插入（的文本）
kbd Keyboard 键盘（文本）
li List Item 列表项目
nl navigation lists 导航列表
ol Ordered List 排序列表
optgroup Option group 定义选项组
p Paragraph 段落
pre Preformatted 预定义格式（文本 ）
q Quotation 引用语
rel Reload 加载
s/ strike Strikethrough 删除线
samp Sample 示例（文本
small Small 变小（文本）
span Span 范围
src Source 源文件链接
strong Strong 加重（文本）
sub Subscripted 下标（文本）
sup Superscripted 上标（文本）
td table data cell 表格中的一个单元格
th table header cell 表格中的表头
tr table row 表格中的一行
tt Teletype 打印机（文本）
u Underlined 下划线（文本）
ul Unordered List 不排序列表
var Variable 变量（文本）
上一条：html常用标签与应用场景下一条：HTMLa标签，img标签配合三种列表标签写出图片导航演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多