Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML文档结构和常用标签
Blogger Information
Blog 3
fans 0
comment 0
visits 1857
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
HTML文档结构和常用标签
骏沃
Original
584 people have browsed it

基本构成

  1. <!--文档类型-->
  2. <!DOCTYPE html>
  3. <!--根元素 页面语言-->
  4. <html lang="zh-CN">
  5.   <head>
  6.     <meta charset="UTF-8" />
  7.     <!-- 为ie提供兼容模式，可写可不写 -->
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  9.     <!-- 设置视口：可视窗口 -->
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  11.     <title>Document</title>
  12.   </head>
  13.   <body>
  14.   <!-- 经典模式 -->
  15. <div class="header"></div>
  16. <div class="main"></div>
  17. <div class="footer"></div>
  18. <!-- class权重小于id，有利于样式复用 -->
  19. <!-- 语义化布局标签 -->
  20. <header></header>
  21. <main></main>
  22. <footer></footer>
  24. <!-- 绝大多数还是用div+class模式 -->
  25. <!-- 个人习惯，标签可使用太少，不如div+class更丰富 -->
  26.   </body>
  27. </html>

常用标签

a标签

1.跳转

<a href="https://www.php.cn" target=_blank>PHP中文网</a>

target属性值：

属性 描述
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

2.站内跳转 锚点（指定id，href值为对应id）

<a href="#hello">点我快速直达</a>
<h2 id="hello" style="margin-top: 1000px">我是h2</h2>
<a href="#">回到顶部</a>

3.指定窗口打开 嵌入iframe指定name a标签添加target指定

<a href="https://tmall.com" target="tmall">天猫</a>
<iframe frameborder="1" name="tmall"></iframe>

img标签

<img src="链接" alt="文字描述以及图片失效时显示的文字" />
img标签无闭合

列表与导航

1.有序列表（使用较少）标签为<ol>

<h3>奥运奖牌榜</h3>
<ol>
<li>美国：113</li>
<li>中国：88</li>
<li>日本：58</li>
</ol>

输出效果

2.无序列表 标签为<ul> 可借助css实现更多样式

<h3>无序奖牌榜</h3>
<ul>
<li>美国：113</li>
<li>中国：88</li>
<li>日本：58</li>
</ul>

输出效果

3.自定义列表(一般页尾等描述部分使用比较多)

<dl style="display: grid; grid-template-columns: 3em 16em">
<dt>标题：</dt>
<dd>这里是内容</dd>
<dt>标题：</dt>
<dd>这里是内容2</dd>
</dl>

4.无序+css实现导航

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

效果和下面语义化类似

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

表格相关

1.构成

table+caption(表格标题)+thead(表头)+tbody(表格主题)+tr(表行)+td(单元格)+tfoot(表尾)

2.注意点

tbody为主体，一个表中可以存在多个
td需要在tr中，所有数据都是写在td内
单元格的合并，一定要写到起始单元格

3.案例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <style>
  8.       * {
  9.         text-align: center;
  10.       }
  11.       table {
  12.         border: 1px solid rgba(41, 39, 39, 0.329);
  13.         width: 700px;
  14.         margin: 0 auto;
  15.       }
  16.       td {
  17.         border: 1px solid rgba(41, 39, 39, 0.329);
  18.         height: 20px;
  19.       }
  20.     </style>
  21.     <title>Document</title>
  22.   </head>
  23.   <body>
  24.     <h1>个人简历表</h1>
  25.     <table>
  26.       <tbody>
  27.         <tr>
  28.           <td width="80">姓名</td>
  29.           <td width="100"></td>
  30.           <td width="80">性别</td>
  31.           <td width="100"></td>
  32.           <td width="80">出身年月</td>
  33.           <td width="100"></td>
  34.           <td rowspan="3">照片</td>
  35.         </tr>
  36.         <tr>
  37.           <td>身份证号码</td>
  38.           <td></td>
  39.           <td>民族</td>
  40.           <td></td>
  41.           <td>政治面貌</td>
  42.           <td></td>
  43.           <!-- <td></td> -->
  44.         </tr>
  45.         <tr>
  46.           <td>婚姻状况</td>
  47.           <td></td>
  48.           <td>健康状况</td>
  49.           <td></td>
  50.           <td>身高</td>
  51.           <td></td>
  52.           <!-- <td></td> -->
  53.         </tr>
  54.       </tbody>
  55.     </table>
  56.     <table>
  57.       <tbody>
  58.         <tr>
  59.           <td width="80">现户口所在地</td>
  60.           <td></td>
  61.           <td width="80">所学专业</td>
  62.           <td></td>
  63.           <td width="80">学历</td>
  64.           <td></td>
  65.         </tr>
  66.         <tr>
  67.           <td width="80">最后毕业学校</td>
  68.           <td></td>
  69.           <td width="80">毕业时间</td>
  70.           <td></td>
  71.           <td width="80">技术职称</td>
  72.           <td></td>
  73.         </tr>
  74.         <tr>
  75.           <td width="80">现工作单位</td>
  76.           <td></td>
  77.           <td width="80">参加工作时间</td>
  78.           <td></td>
  79.           <td width="80">现从事专业</td>
  80.           <td></td>
  81.         </tr>
  82.       </tbody>
  83.     </table>
  84.     <table>
  85.       <tbody>
  86.         <tr>
  87.           <td width="100" rowspan="6">主要简历</td>
  88.           <td>起止年月</td>
  89.           <td>在何单位（学校）</td>
  90.           <td>任何职务</td>
  91.         </tr>
  92.         <tr>
  93.           <!-- <td></td> -->
  94.           <td></td>
  95.           <td></td>
  96.           <td></td>
  97.         </tr>
  98.         <tr>
  99.           <!-- <td></td> -->
  100.           <td></td>
  101.           <td></td>
  102.           <td></td>
  103.         </tr>
  104.         <tr>
  105.           <!-- <td></td> -->
  106.           <td></td>
  107.           <td></td>
  108.           <td></td>
  109.         </tr>
  110.         <tr>
  111.           <!-- <td></td> -->
  112.           <td></td>
  113.           <td></td>
  114.           <td></td>
  115.         </tr>
  116.         <tr>
  117.           <!-- <td></td> -->
  118.           <td></td>
  119.           <td></td>
  120.           <td></td>
  121.         </tr>
  122.       </tbody>
  123.     </table>
  124.   </body>
  125. </html>

输出效果

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
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
0 comments
Author's latest blog post