HTML基础知识小结

1.HTML文档结构

HTML文档是一个倒置的”树型”结构，基本结构如下：

<!-- 告诉浏览器这是一个HTML文件 -->
<!DOCTYPE html>
<!-- html 根标签、元素，代表整个HTML文档 -->
<!-- lang = "en" 是一个属性，表示当前页面的主要语言 -->
<html lang="en">
  <!-- 头元素 内容不显示在当前页面，这是给浏览器或者搜索引擎（百度，谷歌等）使用-->
  <head>
    <!-- 字符编码集为 UTF-8 -->
    <meta charset="UTF-8" />
    <!-- viewport 字面意思 视口，当前文档在浏览器可以被用户看到的部分，通常小于文档， -->
    <!-- 当前视口大小为设备宽度，初始显示大小比例为：1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML文档的结构</title>
  </head>
  <!-- 主元素 页面主体，这是用户真正看到的 -->
  <body>
    <!-- 标题 -->
    <h2>正在学习html基础知识</h2>
    <!-- HTML标签不区分大小写  建议所有标签全部小写 -->
  </body>
</html>

2.元素与属性的关系

元素是由双标签描述，标签是由属性表示，属性通常是以名值对的形式出现，如 name="test"。标签的通用三大属性：class、id、style,id在html里一般不常用，具有唯一性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素与属性的关系</title>
  </head>
  <!-- 当前文档的样式，只在当前文档有效 -->
  <style>
    p {
      color: green;
    }
  </style>
  <body>
    <!-- 元素：由双标签描述 标签 由属性表示 属性通常是以名值对的形式出现 -->
    <!-- 段落元素： 用`<p></p>`描述 -->
    标签有默认样式，当前文档样式，内联样式
    <!-- style 这个属性是内联样式，只在当前标签生效 -->
    <p style="color: red;" name="p1">正在学习html元素和标签的关系</p>
    <p class="test">正在学习html元素和标签的关系</p>
    <p id="study">正在学习html元素和标签的关系</p>
    <!-- 标签的三大通用属性 style、id、class -->
  </body>
</html>

3.语义化的结构元素

语义元素清楚地向浏览器和开发者描述其意义。语义化的结构元素，基本包括页眉，页脚，主体，大致如下：

<!-- 页眉 -->
<header></header>
<!-- 主体  -->
<main></main>
<!-- 页脚 -->
<footer></footer>

4.语义化的文本元素

语义化文本元素，都有自身的意义，从字面上是输出文本类型的元素。如<article>标签，用来输出文章，<address>标签用来输出地址

<!DOCTYPE html>
<!-- nav 定义导航链接集合 -->
<nav>
<a href="">导航01</a>
<a href="">导航02</a>
<a href="">导航03</a>
<a href="">导航04</a>
<a href="">导航05</a>
</nav>
<!-- section 定义文档中的部分 -->
<section>推荐</section>
<!-- article 独立于网站其他内容进行阅读 -->
<article>内容</article>
 <!-- detailss输出详细内容   mark 对关键词做标记 -->
<details> 详细<mark>内容</mark> </details>
<!-- address 输出一个地址格式 -->
<address>地址</address>
<!-- progress 输出一个进度条 -->
<progress value="80" max="100">80%</progress>

5.链接元素

链接元素可以通过使用 href 属性 - 创建指向另一个文档的链接,使用 Target 属性，可以定义被链接的文档在何处显示,链接元素还可以实现打电话，下载文件，发送邮件，和站内跳转等功能

<!-- 从当前页面 链接跳转一个外部链接 跨域 -->
<a href="www.baidu.com">百度</a>
<!-- 从新窗口打开一个链接 -->
<a href="php.cn" target="_blank">PHP中文网</a>
<!-- 下载某一个文件 -->
<a href="demo.md" download="demo.md">下载文档</a>
<!-- 打电话 -->
<a href="tel:188****4135">致电</a>
<!-- 发邮件 -->
<a href="mailto:39529**60@qq.com">给xx发邮件</a>
<!-- 在当前页面跳转 -->
<a href="#another">找到锚点</a>
<h2 id="another" style="margin-top: 1000px;">这是一个大标题</h2>
<a href="#">回到顶部</a>

6.列表元素

列表分为无序列表，有序列表和自定义列表

<!-- 无序列表 -->
<ul>
  <li>香蕉</li>
  <li>苹果</li>
  <li>梨</li>
  <li>西瓜</li>
  <li>哈密瓜</li>
</ul>
<!-- 分页功能显示 -->
<ul style="list-style: none;">
  <li>
    <a href="">首页</a>
    <a href="">上一页</a>
    <a href="">下一页</a>
  </li>
</ul>
<!-- 有序列表 -->
<ol start="3">
  <!-- <li>起床</li> -->
  <!-- <li>洗漱</li> -->
  <li>
    上课
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>PHP</li>
    </ul>
  </li>
  <li>下课</li>
</ol>
<!-- 自定义列表   -->
<dl>
  <!-- 自定义标题 -->
  <dt>手机</dt>
  <!-- 内容 -->
  <dd>打电话</dd>
  <dd>发短信</dd>
  <!-- 标题 -->
  <dt>电脑</dt>
  <!-- 内容 -->
  <dd>上网</dd>
  <dd>看电影</dd>
  <dd>上课</dd>
</dl>