Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html基础知识
Blogger Information
Blog 15
fans 0
comment 0
visits 11169
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
616 people have browsed it

  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>
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