1. html文档结构

HTML结构代码如下:

<!-- 告诉浏览器这是一个html5的文档 -->
<!DOCTYPE html>
<!-- <html>...</html>:跟标签,根元素,代表整个html文档 -->
<!-- lang="en":属性,指当前页面主要的语言 -->
<html lang="en">
  <head>
    <!-- 当前文档字符编码集 -->
    <meta charset="UTF-8" />
    <!-- viewport:视口,当前文档在浏览器中可以被用户看见的区域 -->
    <!-- width=device-width:设备高度 -->
    <!-- initial-scale=1.0:显示比例 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 页面标题 -->
    <title>html文档结构</title>
  </head>
  <!-- body,主题元素:这里面才是用户正在看和感兴趣的东西 -->
  <body>
    <h2>html文档结构</h2>
    <!-- 注:所有标签全部小写 -->
  </body>
</html>

2. 元素与属性的关系

元素是用标签表示,标签里面的行为用属性描述.在html文档中有三大属性 style id class 这三大属性可以添加到任何元素里面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素和属性</title>
    <!-- 当前文档的样式 -->
    <style>
      p {
        color: darkgreen;
      }
    </style>
  </head>
  <body>
    <!-- 段落元素:<p><p>标签表示 -->
    <!-- 标签里面的行为用属性描述 -->
    <!-- 三大通用属性：style   id   class    这三大属性可以添加到任何元素里面 -->
    <p id="yuansu">元素和属性</p>
    <!-- 内联样式 -->
    <p style="color: darkred;">元素和属性</p>
    <p class="shuxing">元素和属性</p>
    <!-- 内联样式的级别比当前文档样式高一级别 -->
  </body>
</html>

3. 语义化的结构元素

语义化的结构元素，包括了页眉主体页脚

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>语义化的结构元素</title>
  </head>
  <!-- html文档他是一个树形结构 -->
  <body>
    <!-- 页眉 -->
    <header></header>
    <!-- 主体 -->
    <main></main>
    <!-- 页脚 -->
    <footer></footer>
  </body>
</html>

4. 语义化的文本元素

何为语义化元素? 意思就是只要你看见这个标签就能知道里面的内容.这样更能让我们区分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>语义化的文本元素</title>
    <!-- 每一个标签有它代表的一个意思,这样就更能让我们知道标签里面是什么内容 -->
  </head>
  <body>
    <!-- header:页眉 -->
    <header>
      <!--nav:导航 -->
      <nav>
        <a href="">视频教程</a>
        <a href="">入门教程</a>
        <a href="">社区回答</a>
        <a href="">技术文章</a>
      </nav>
    </header>
    <!--main: 主体 -->
    <main>
      <!-- article:内容 -->
      <article class="content">内容</article>
    </main>
<!-- footer:页脚 -->
    <footer>
      <nav>
        <a href="">关于我们</a>
        <a href="">联系我们</a>
      </nav>
    </footer>
  </body>
</html>

5. 链接元素

链接元素:指你可以从当前页面跳转到另一个页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>链接元素</title>
  </head>
  <body>
    <!-- href:代表链接地址 -->
    <!-- target:目标,表示你跳转的地方(比如可以在当期页面打开.可以在新页面打开) -->
    <!-- blank:新的页面打开 -->
    <!-- self:当前页面打开 -->
    <a href="https://baidu.com" target="_blank">百度</a>
    <a href="img/timg.jpg" target="_self">图片</a>
    <!-- download:代表下载 -->
    <a href="img/timg.jpg" download="html.jpg">下载图片</a>
    <!-- mailto:邮件 -->
    <a href="mailto:289554847@qq.com">发邮件</a>
  </body>
</html>

6. 列表元素

列表元素可分为:1.无序列表<ul> 2.有序列表<ol> 3.自定义列表<dl>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表元素</title>
  </head>
  <body>
    <!-- 无序列表 -->
    <!-- ul:无序列表元素 -->
    <ul>
      <li>列表元素</li>
      <li>列表元素</li>
      <li>列表元素</li>
    </ul>
    <!-- 有序列表 -->
    <!-- ol:有序列表元素 -->
    <ol>
      <li>列表元素</li>
      <li>列表元素</li>
      <li>列表元素</li>
    </ol>
    <ol start="10">
      <!-- start:开始,表示你从多少开始,比如我这里就是从10开始 -->
      <li>列表元素</li>
      <li>列表元素</li>
      <li>列表元素</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
      <dt>一石二鸟:</dt>
      <dd>比喻做一件事情得到两种好处</dd>
      <dt>邮箱地址:</dt>
      <dd>888888888@qq.com</dd>
    </dl>
  </body>
</html>