search

博客列表 >html基础知识

html基础知识

乐作人生
乐作人生原创
2020年08月04日 00:09:48610浏览

  1. html文档结构

    1. <!-- 告诉浏览器这是一个html5的文档 -->
    2. <!DOCTYPE html>
    3. <!-- <html></html>:跟标签，根元素，代表整个html文档 -->
    4. <!-- lang="en":属性，表示当前页面的主要语言。en表示英文；zh-CN表示中文 -->
    5. <html lang="en">
    6. <!-- 头元素：它的内容不在页面中显示，给浏览器和搜索引擎使用 -->
    7. <head>
    8.  <!-- 当前文档字符的编码集 -->
    9.  <meta charset="UTF-8" />
    10.  <!-- viewport：视口，当前文档在浏览器中可以被用户看到的部分 -->
    11.  <!-- width=device-width：表示设备宽度；initial-scale表示初始缩放比例 -->
    12.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    13.  <title>0725HTML基础知识</title>
    14. </head>
    15. <!-- 主体元素：用户看到和感兴趣的内容 -->
    16. <body>
    17.  <!-- 所有标签全部小写，html不区分大小写 -->
    18.  <!-- 标题 -->
    19.  <h4>html文档结构</h4>
    20. </body>
    21. </html>

  2. 元素与属性的关系

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>0725HTML基础知识</title>
    7. </head>
    8. <style>
    9.  nav ul li {
    10.    float: left;
    11.    list-style: none;
    12.    margin-right: 20px;
    13.  }
    14.  nav ul {
    15.    display: inline-block;
    16.  }
    17. </style>
    18. <body>
    19.  <!-- header：头部 -->
    20.  <header>
    21.    <!-- nav:导航 -->
    22.    <nav>
    23.      <!-- 有序列表 -->
    24.      <ul>
    25.        <li><a href="">首页</a></li>
    26.        <li><a href="">关于我们</a></li>
    27.        <li><a href="">联系我们</a></li>
    28.      </ul>
    29.    </nav>
    30.  </header>
    31.  <!-- main:内容 -->
    32.  <main>
    33.    <!-- 三大通用属性：style,id,class -->
    34.    <div style="background-color: #dbdbdb; margin-top: 500px;">
    35.      <span>学习</span>
    36.      <p id="as">2<sup>4</sup>=16</p>
    37.      <p id="xa">3<sub>4</sub></p>
    38.    </div>
    39.  </main>
    40.  <!-- footer：底部 -->
    41.  <footer>
    42.    <ul>
    43.      <li><a href="">网站首页</a></li>
    44.      <li><a href="">友情链接</a></li>
    45.    </ul>
    46.  </footer>
    47. </body>
    48. </html>

  3. 语义化的结构元素

    1. <!-- 头部 -->
    2. <header></header>
    3. <!-- 主体内容 -->
    4. <main></main>
    5. <!-- 底部 -->
    6. <fotter></fotter>
  4. 语义化的文本元素
    1. <section class="ads" style="color: red;" id="mj">广告</section>
    2. <article class="content">内容区</article>
    3. <section class="recommend">推荐</section>
    4. <address>地址</address>
    5. <!-- 进度条 -->
    6. <progress value="60" max="100">已完成60%</progress>
    7. <hr />
    8. <!-- 删除线 -->
    9. <p>原价：<del>16元</del>，现价<strong>8元</strong></p>
  5. 链接元素
    1.  <div>
    2.    <!-- _blank:在新页面中打开；_self:当前页面打开 -->
    3.    <a href="" target="_blank">中文网</a>
    4.    <!-- 下载文件 -->
    5.    <a href="0725.md" download="html.md">下载</a>
    6.    <!-- 打电话 -->
    7.    <a href="tel:13898****87">热线电话</a>
    8.    <!-- 发送邮件 -->
    9.    <a href="mailto:4898734@qq.com">发送邮件</a>
    10.    <!-- 锚点 -->
    11.    <a href="#mj">广告</a>
    12.  </div>
  6. 列表元素
    1.  <div>
    2.    <!-- 有序列表 -->
    3.    <ul>
    4.      <li>星期一</li>
    5.      <li>星期二</li>
    6.      <li>星期三</li>
    7.    </ul>
    8.    <!-- 无序列表 -->
    9.    <ol start="3">
    10.      <li>周一</li>
    11.      <li>周二</li>
    12.      <li>周三</li>
    13.    </ol>
    14.    <!-- 自定义列表 -->
    15.    <dl>
    16.      <dt>学号</dt>
    17.      <dd>20200102</dd>
    18.      <dt>姓名</dt>
    19.      <dd>周雪</dd>
    20.      <dt>性别</dt>
    21.      <dd>女</dd>
    22.    </dl>
    23.  </div>
上一条：７月２５日作业下一条：7-26作业-form
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议