HTML文档结构、元素与属性的关系、语义化的结构元素与文本元素，链接元素和列表元素 - html5相关

首页 > 博客列表 > HTML文档结构、元素与属性的关系、语义化的结构元素与文本元素，链接元素和列表元素

博主信息

博文 2

粉丝 0

访问量 2162

专题推荐

更多>

Html5 文档结构

<!--第一行告诉浏览器这个是一个html5的文档-->
<!DOCTYPE html>
<!--这个是根标签，也可以叫做根元素。lang=“en”代表属性，表示当前页面所使用的语言-->
<html lang="en">
  <!--头元素，它的内容不在页面中显示，它是给浏览器和搜索引擎使用的。-->
  <head>
    <!--设置字符编码-->
    <meta charset="UTF-8" />
    <!--viewport：表示可显示区域-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>php全栈开发第一节课</title>
  </head>
  <!--主体元素，用户可以看到-->
  <body>
  </body>
</html>

元素与属性的关系

<!--元素由双标签来表示，-->
<!--段落元素，它的样式分为默认样式、内部样式、内联样式三种-->
<style>
  p {
    color: red;
  }
</style>
<p>测试文本</p>
<!--内联样式-->
<p style="color:green">测试文本2</p>

<!--三大通用属性：style\id\class-->
<p style="color:white">style属性</p>
<p id="red">id属性</p>
<p class="green">class属性</p>

语义化的结构元素

<!--页面结构主要分为三大块儿，分别为头部、主体、底部-->
<!--头部（页眉）-->
<header>
  <nav>
    <a href="">index</a>
    <a href="">news</a>
    <a href="">news</a>
  </nav>
</header>
<!--主体-->
<main>
  <section>广告</section>
  <article>内容区</article>
</main>
<!--底部（页脚）-->
<footer>
  <nav>
    <a href="">php中文网</a>
    <a href="">sohu</a>
    <a href="">google</a>
  </nav>
</footer>
<!--分为块元素和内联元素（行内元素）-->
<!--通用的块元素，作为容器来使用，可以放置任何元素-->
<div>
  <p>测试文本></p>
  <!--通用的行内元素，不暴露出来，应该放在一个块元素中-->
  <span>行内元素</span>
</div>

语义化的文本元素

<time>2020/07/31</time>
<!-- 下标 -->
<sub></sub>
<!-- 上标 -->
<sup></sup>
<!-- 地址标签 -->
<address></address>
<!-- 删除标签 -->
<del></del>
<!-- 加粗标签 -->
<strong></strong>
<!-- 代码标签 -->
<code></code>
<!-- 进度条标签 -->
<progress></progress>

链接元素

<body>
  <p>
    <!-- 最常用法 ，在不同的页面中跳转-->
    <a href="https://www.php.cn" target="_blank">php中文网</a>
    <!-- 下载文件 -->
    <a href="测试.pdf" download="file.pdf">测试文档</a>
    <!-- 打电话 -->
    <a href="tel:138103004**">服务热线</a>
    <!-- 发邮件 -->
    <a href="mailto:15898***@qq.com">邮件</a>
    <!-- 锚点（就是在当前页面跳转，也用A标签来写,可以添加多个锚点） -->
    <a href="#anchor">跳转到测试点1</a>
    <h3 style="margin-top:1200px;" id="anchor">测试点1</h3>
      </p>
</body>

列表元素

<!-- 无序列表 -->
<ul>
  <li>html</li>
  <li>css</li>
  <li>javascript</li>
</ul>
<!-- 无序列表的应用场景：导航 -->
<ul style="list-style:none">
  <!-- 作用是取消前面的小黑点 -->
  <li><a a href="">首页</a></li>
  <li><a href="">新闻</a></li>
  <li><a href="">关于我们</a></li>
</ul>
<!-- 有序列表 -->
<ol>
  <li>吃早饭</li>
  <li>上班</li>
  <li>回家</li>
</ol>
<!-- 自定义列表 -->
<dl>
  <!-- 列表项标题 -->
  <dt>php</dt>
  <!-- 列表项内容 -->
  <dd>通用的服务器端编程语言</dd>
  <dt>mysql</dt>
  <dd>免费的开源数据库软件</dd>
</dl>

批改老师：

天蓬老师

批改状态：合格

老师批语：下次写上总结

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML文档结构、元素与属性的关系、语义化的结构元素与文本元素，链接元素和列表元素

2020-07-31 16:59:26