search

博客列表 >HTML文档、链接、表格和列表标签

HTML文档、链接、表格和列表标签

Leo的博客
Leo的博客原创
2021年09月22日 16:51:35620浏览

html文档

1.文档的类型

  1. <!DOCTYPE html>

1.1 根元素

  1. > <html lang="en">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />

1.2 设置窗口:可视化窗口

  1.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

1.3 网页名称，在两个title标签里面

  1.     <title>XXX</title>

1.4 用户关注的内容

输入的内容基本都在body标签里面

  1.   </head>
  2.   <body>
  3.     <!-- 用户关注内容 -->
  4.   </body>
  6. </html>

标签的介绍

2.1 代表头部也称页眉

header即视为头部

  1. <div id="header">header</div>

2.2 块，代表主体

mian视为主题理解为身体

  1.    <div id="main">main</div>

2.3 页脚

fonter视为尾部

  1.     <div id="fonter">fonter</div>

2.4 id权重太大

删掉id加入class
class等级比id要低
class权重小于id，有利于样式复用
绝大多数程序员用div+class模式

  1.     <div class="header">header</div>
  2.     <div class="main">main</div>
  3.     <div class="fonter">fonter</div>

2.5 语义化布局标签

目前至少90%的项目都基于移动端如:小程序、公众号、手机端、APP等等..PC端项目很少，基本是后台管理之类的，如拼多多、抖音就没有PC网站。
移动端不依赖不在乎搜索引擎
完全是个人习惯，主要原因是布局的语义化标签太少了，不如语义更明确的class

  1. <header>header</header>
  2. <main>main</main>
  3. <footer>footer</footer>

2.6 语义化标签示例

div + class语化标签
.article-header{我是文章头部}

  1. <div class="article-header">我是文章头部</div>

链接与图像

3.1 跳转到站外

在<a>标签中的href输入想要跳转的网站即可进行跳转

  1. <a href="https://www.baidu.com">百度</a>

3.2 在指定的窗口打开页面

iffame标签为画中画标签，可在当前页面中再打开一个页面。frameborder标签则是框架边矿。

  1. <iframe src="http://www.tmall.com" frameborder="2" ></iframe>

输出：

同时还可以用<a>标签来实现效果,输出效果同上。代码如下，在href中输入要进入的网站，以及加入target指明哪个窗口打开这个网站。如当前网站加入”_self”,如t说说要在指定窗口打开，就要打开内嵌窗口name的值”tmall”进行绑定即可实现功能。ps：有个别网站是无法用内链窗口打开！

  1. <a href="http://www.tmall.com" target="_self">天猫</a>

3.3 站内跳转

使用锚点/书签来实现
在大标题中输入名称，然后加入上外边距”margin-top:”

  1. <h2 style="margin-top:1000px">找我</h2>

输出：

进行跳转在h2标签中加入id=”hello”然后在<a>标签中的href中加入”#hello”,#即视为锚点。此功能叫站内跳转也叫快捷入口以及楼层。

  1. <a href="#hello">找你</a>
  2.     <h2 id="hello" style="margin-top: 2000px">找我</h2>

3.4 回到顶部

给个空的锚点即可跳转回顶部在href加入”#”即可

  1. <a href="#">回到顶部</a>

3.5 图片跳转

img是图片标签，可以引入图片元素。<img src="" alt="" />也被称为可替换元素。在img标签中的src中加入图片，alt标签则是输入图片的内容若图片加载失败则会显示出文字。把填好的<img>标签加入<a>标签中,在href标签中输入你图片想跳转到的网址即可实现图片跳转。

  1. <img src="dog.jpg" alt="小狗" />
  2. <a href="https://baidu.com"><img src="dog.jpg" alt="小狗" /></a>

3.6 可点击的图片及文本链接

第三行为图片跳转链接，第四行则是文字跳转链接。在href标签中输入要跳转的网址即可进行跳转。

  1. <h2>动物世界</h2>
  2. <div class="box"></div>
  3.  <a href=""><img src="dog.jpg" alt="dog" /></a>
  4.  <a href="">今晚有小狗了</a>

列表与导航

有序列表、无序列表若这两种列表无法满足你的要求可以使用自定义列表。

4.1 有序列表

<h3>东京奥运会奖牌</h3>
在<ol></ol>标签中输入若干个<li>标签。有序列表 ,极少用，如果要用请求无序列表+css代替。

  1.  <ol>
  2.       <li>美国:113</li>
  3.       <li>中国:88</li>
  4.       <li>日本:58</li>
  5.  </ol>

输出：

4.2 无序列表

无序列表一般用在导航比较多

  1. <h3>
  2.       <ul>
  3.         <li>小米手机</li>
  4.         <li>华为手机</li>
  5.         <li>一加手机</li>
  6.       </ul>
  7.     </h3>

输出：

首页导航
输入：ul.menu>li.item*5>a{item$}得出下面效果在ul加入css样式style=”display: flex; place-content: space-around”。

  1. ul.menu>li.item*5>a{item$}
  2. <ul class="menu"style="display: flex; place-content: space-around" >
  3.       <li class="item"><a href="">首页</a></li>
  4.       <li class="item"><a href="">教学视频</a></li>
  5.       <li class="item"><a href="">社区问答 </a></li>
  6.       <li class="item"><a href="">资源下载</a></li>
  7.       <li class="item"><a href="">关于我们</a></li>
  8.     </ul>

输出：

以上的模式是常见的模式 <ul+li+a>，但是布局的时候不利于用css控制。所以更多时候用<nav+a>。

  1. <nav class="menu" style="display: flex; place-content: space-around">
  2.       <a href="">首页</a>
  3.       <a href="">教学视频</a>
  4.       <a href="">社区问答</a>
  5.       <a href="">资源下载</a>
  6.       <a href="">关于我们</a>
  7.     </nav>

输出：

4.3自定义列表

自定义列表比较低调，语义化较好。一般用来编写地址、电话、邮箱号。用最外层的dl来表示自定义列表，两个子标签。

  1. <dl style="display: grid; grid-template-columns: 2.3em 15em">
  2.       <dt>地址:</dt>
  3.       <dd>合肥市政务新区蔚蓝商务港</dd>
  4.       <dt>邮箱:</dt>
  5.       <dd>admin@php.cn</dd>

输出：

表格与布局

若是整行要加入颜色就在tr标签加入，若是单个格子要加颜色则是在tr内部的td标签加入。在内部输入bgcolor=”想要加入的颜色”

  1. <caption>表格标题</caption>
  2. <thead>
  3.         <tr bgcolor="red">
  4.           <td>时间</td>
  5.           <td>星期一</td>
  6.           <td>星期二</td>
  7.           <td>星期三</td>
  8.           <td>星期四</td>
  9.           <td>星期五</td>
  10.         </tr>
  11.       </thead>
  1.    表格中的所有数据必须放在单元格的元素中 
  2.    所有的单元格要放入到tr里面去 
  3.    网页会自动帮你纠错 
  4.    还要加入tbody 
  5.    表格主体为tbody 
  1.       <tbody>
  2.         <tr>
  3.           <td rowspan="3">上午</td>
  4.           <td>x</td>
  5.           <td>x</td>
  6.           <td>x</td>
  7.           <td>x</td>
  8.           <td>x</td>
  9.         </tr>
  10.         <tr>
  11.           <td>x</td>
  12.           <!-- <td>x</td> -->

从体表2行3列 开始水平方向合并三列
合并是一定发生在单元格上面的
合并属性colspan=””(横着合并)，rowspan=””（竖着合并）一定要写在起始的单元格上

  1.           <td>x</td>
  2.           <td>x</td>
  3.           <td>x</td>
  4.           <td>x</td>
  5.         </tr>
  6.         <tr>
  7.           <td>x</td>
  8.           <!-- <td bgcolor="violet" rowspan="">x</td> -->
  9.           <td rowspan="">x</td>
  10.           <td>x</td>
  11.           <td>x</td>
  12.           <td>x</td>
  13.         </tr>
  14.         <tr>
  15.           <td rowspan="3">下午</td>
  16.           <td>x</td>
  17.           <td>x</td>
  18.           <td>x</td>
  19.           <td>x</td>
  20.           <td>x</td>
  21.         </tr>
  22.         <tr>
  23.             <td>x</td>
  24.             <!-- <td>x</td> -->
  25.             <td>x</td>
  26.             <td>x</td>
  27.             <td>x</td>
  28.             <td>x</td>
  29.           </tr>
  30.           <tr>
  31.             <td>x</td>
  32.             <!-- <td>x</td> -->
  33.             <td>x</td>
  34.             <td bgcolor="lightgreen">x</td>
  35.             <td>x</td>
  36.             <td>x</td>
  37.           </tr>
  38.         </tr>
  39.       </tbody>

可以有多个tbody ,tbody也叫做表格主体

  1.       <!-- 表尾 -->
  3.       <tfoot>
  4.         <tr>
  5.           <td colspan="6">备注：</td>
  6.           <!-- <td>x</td>
  7.           <td>x</td>
  8.           <td>x</td>
  9.           <td>x</td>
  10.           <td>x</td> -->
  11.         </tr>
  12.       </tfoot>
  13.     </table>

输出：

上一条：HTML中常用标签学习示例代码下一条：HTML文档结构和常用标签
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议