search

博客列表 >HTML标签总结

HTML标签总结


原创
2019年12月22日 04:04:091304浏览

Demo1

网页基本标签

<!DOCTYPE html>:声明文档的类型
<html>:网页的根元素
<meta charset="UTF-8">:字符集
<head>:头部元素
<body>:主体内容
<footer>:脚步元素

  1. <!DOCTYPE html>
  2. <!-- 默认语言 -->
  3. <html lang="zh-CN">
  4. <head>
  5.     <!-- 头元素给浏览器搜索引擎看的 -->
  6.     <!-- 字符集 -->
  7.     <meta charset="UTF-8">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  10.     <title>Demo</title>
  11. </head>
  12. <body>
  13.     <!-- 主体元使用者看的 -->
  14. </body>
  15. </html>

Demo2

语义化标签

<header>:类似于<div class="header"></div>
<main>:类似于<div class="main"></div>
<article>:类似于<div class="article"></div>
<aside>:类似于<div class="aside"></div>
<footer>:类似于<div class="footer"></div>

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>语义化标签</title>
  8. </head>
  9. <body>
  10.     <!-- 传统div方式 -->
  11.     <!-- <div class="header">一个页眉</div>
  12.     <div class="main">
  13.         <div class="article">
  14.             <h3>一个标题</h3>
  15.             <p>一个段落</p>
  16.         </div>
  17.         <div class="aisde"><h3>一个AD</h3></div>
  18.     </div>
  19.     <div class="foot">一个页脚</div>
  20.     <hr> -->
  21.     <!-- 语义化标签 -->
  22.     <header>一个页头</header>
  23.         <main>
  24.             <article>
  25.                 <h3>一个标题</h3>
  26.                 <p>一个段落</p>
  27.             </article>
  28.         </main>
  29.     <aside><h3>一个AD</h3></aside>
  30.     <footer>一个页脚</footer>
  31. </body>
  32. </html>

Demo3

图片

<img>:调整大小长宽设置一个就行，图片等比例缩放
alt: 图片描述
title: 鼠标悬浮描述

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>图片</title>
  8. </head>
  9. <body>
  10.     <!-- alt 图片描述  title 悬浮描述   大小长宽设置一个就行，图片等比例缩放-->
  11.     <img src="/front/images/1.jpg" alt="一个图片" width="150" title="一个图片">
  12. </body>
  13. </html>

Demo4

链接

<a href="">:默认在当前页面直接跳转,href=””为要跳转的地址
target="_bland" 新建窗口打开
链接为文件时可直接下载
链接为 mailto: + 有效邮箱 为发送邮件
链接为 tel: + 号码 为拨打电话
链接为标签ID时可快速跳转到该ID所在地

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>链接</title>
  8. </head>
  9. <body>
  10.     <!-- 默认在当前页面直接跳转,target="_bland" 新建窗口打开-->
  11.     <a href="https://magi.com/" target="_bland">Magi</a>
  12.     <br>
  13.     <!-- 下载功能 -->
  14.     <a href="/front/images.7z" target="_bland">下载图片包</a>
  15.     <br>
  16.     <!-- 发邮件 -->
  17.     <a href="mailto: yanzhenhao188@foxmail.com">发邮件</a>
  18.     <br>
  19.     <!-- 打电话 -->
  20.     <a href="tel: 13********21">打电话</a>
  21.     <br>
  22.     <!-- 锚点  当前文档跳转 如回到顶部-->
  23.     <a href="#top">锚点</a>
  24.     <h1 id="top" style="margin-top: 2000px;">锚点</h1>
  25.     <br>
  26. </body>
  27. </html>

Demo5

列表

<ul><li></li></ul>:无序列表
<ol><li></li></ol>:有序列表
<dl><dt></dt><dd></dd></dl>:自定义列表

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>列表</title>
  8. </head>
  9. <body>
  10.     <!-- 列表 -->
  11.     <h4>无序列表</h4>
  12.     <h3>购物车</h3>
  13.     <ul>
  14.         <li>1.相机，1/台， 998，998</li>
  15.         <li>2.泡面，1/0桶， 5，50</li>
  16.         <li>3.可乐，5/瓶， 3，15</li>
  17.     </ul>
  18.     <hr>
  19.     <h4>有序列表</h4>
  20.     <h3>购物车</h3>
  21.     <ol>
  22.         <li>相机，1/台， 998，998</li>
  23.         <li>泡面，10/桶， 5，50</li>
  24.         <li>可乐，5/瓶， 3，15</li>
  25.     </ol>
  26.     <hr>
  27.     <h4>自定义列表</h4>
  28.     <dl>
  29.         <dt>自定义列表</dt>
  30.         <dd>自定义列表数据1</dd>
  31.         <dd>自定义列表数据2</dd>
  32.         <dd>自定义列表数据3</dd>
  34.         <dt>购物车</dt>
  35.         <dd>1.相机，1/台， 998，998</dd>
  36.         <dd>2.泡面，10/桶， 5，50</dd>
  37.         <dd>3.可乐，5/瓶， 3，15</dd>
  38.     </dl>
  39. </body>
  40. </html>

Demo6

表格

<table>:表格
<caption>:标题
<tr>:行
<td>:单元格
<th>:单元格加粗居中
<cellspacing>单元格间距
<colspan>列合并
<rowspan>行合并

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>表格</title>
  8. </head>
  9. <body>
  10.     <!-- 表格 -->
  11.     <!-- tr行 td单元格 th单元格加粗居中 cellspacing单元格间距 colspan列合并 rowspan行合并-->
  12.     <table border="" width=500 cellpadding=10 cellspacing=0>
  13.         <caption><h3>购物车</h3></caption>
  14.         <thead>
  15.             <tr bgcolor="#ddd">
  16.                 <th>序号</th>
  17.                 <th>品名</th>
  18.                 <th>数量</th>
  19.                 <th>单价</th>
  20.                 <th>总价</th>
  21.             </tr>
  22.         </thead>
  23.         <tbody>
  24.             <tr>
  25.                 <td>1</td>
  26.                 <td>相机</td>
  27.                 <td>1/台</td>
  28.                 <td>998</td>
  29.                 <td>998</td>
  30.             </tr>
  31.             <tr>
  32.                 <td>2</td>
  33.                 <td>泡面</td>
  34.                 <td>10/桶</td>
  35.                 <td>5</td>
  36.                 <td>50</td>
  37.             </tr>
  38.             <tr>
  39.                 <td>3</td>
  40.                 <td>可乐</td>
  41.                 <td>5/瓶</td>
  42.                 <td>3</td>
  43.                 <td>15</td>
  44.             </tr>
  45.         </tbody>
  46.         <tfoot>
  47.             <tr>
  48.                 <td colspan="2" rowspan="2" >合计</td>
  49.                 <td rowspan="2" >16</td>
  50.                 <td></td>
  51.                 <td rowspan="2" >1063</td>
  52.             </tr>
  53.             <tr>
  54.                 <td></td>
  55.             </tr>
  56.         </tfoot>
  57.     </table>
  58. </body>
  59. </html>
  60. <style type="text/css">
  61.     td{text-align: center;}
  62. </style>

Demo7

内联框架

<iframe>：内联框架标签
<frameborder>:设置边框
<src>：设置显示的网页的URL地址，可设置为>：设置显示的网页的URL地址，可设置为 srcdoc：可填写HTML标签
<name>:实现点击链接<a>，显示不同的页面，需要提前设置<a>的target属性

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>内联框架</title>
  8. </head>
  9. <body>
  10.     <!-- <a href="demo6.html" target="shopcar">购物车</a> -->
  11.     <!-- <iframe src="demo6.html" frameborder="0" width="400" height="400" ></iframe> -->
  12.     <!-- frameborder 边框 -->
  13.     <!-- <iframe src="" frameborder="0" width="400" height="400" name="shopcar"></iframe> -->
  14.     <hr>
  15.     <!-- <iframe src="https://j.map.baidu.com/82/Rf" frameborder="0" width="600" height="400"></iframe> -->
  17.     <ul style="float: left;margin-right: 20px;">
  18.         <li><a href="demo2.html" target="content">内联页面1</a></li>
  19.         <li><a href="demo3.html" target="content">内联页面2</a></li>
  20.         <li><a href="demo4.html" target="content">内联页面3</a></li>
  21.     </ul>
  22.     <!-- srcdoc 可写HTML代码 默认src -->
  23.     <iframe srcdoc="<h3 style='text-align: center;'>内联页面</h3>" frameborder="1"  width="400" height="400" name="content"></iframe>
  24. </body>
  25. </html>


表单知识点抄写



上一条：12月19号作业 jquery选择器下一条：1220作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多