【HTML】从零学习HTML本文简单介绍了HTML的基本结构和常用标签，包括head中的meta、link、style等

实践出真知，以最快、最简洁的方法先跑起来

一、HTML必要结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    页面内容
  </body>
</html>

桌面新建一个记事本
将这段代码复制进去
将记事本的txt后缀改为html
在浏览器中打开
至此，我们已经开发了第一个HTML页面

二、简单解释必要结构

<!DOCTYPE html>：定义文档类型为HTML5
<html>：HTML文档的根元素
<head>：定义文档的头部
- <meta charset="UTF-8">：指定字符编码为UTF-8
- <title>：定义文档的标题
<body>：定义文档的主体内容

以上页面的基础结构，可以呈现一个简单的网页

三、<head>里常用标签

<title>:声明html的标题，显示在标签页
<meta>:定义元数据
- <meta charset="字符编码" ...>:必要，一般是utf-8
- <meta name="viewport" ...>:设置不同设备的展示
- <meta name="keyword" ...>:设置关键词
- <meta http-equiv="Cache...">缓存相关
- <meta http-equiv="refresh" ...>刷新页面相关
- <meta name="author" ...>定义作者和版权归属
- 以上没写全，提供想象力，有需自查
<link>:引入资源，css等样式表，字体文件等
<style>:定义css样式
<script>:引入或定义js脚本
<noscript>:网站不支持或禁用js时显示的内容
<base>:用于设置基准URL，细节自查

四、<body>里常用标签

<h1>-<h6>:定义标题（文档内，不是干title的活），h1字体最大，h6最小复制以下代码到<body>中

<h1>一级文档标题</h1>
<h2>二级文档标题</h2>
<h3>三级文档标题</h3>
<h4>四级文档标题</h4>
<h5>五级文档标题</h5>
<h6>六级文档标题</h6>

<p>:定义段落，会分行复制以下代码到<body>中

<p>我要练习两年半</P>
<p>我要成为前端高手</p>

<a>:创建链接；可以href指向，也可以包裹元素复制以下代码到<body>中

<a href="https://juejin.com">掘金</a>
<a href="https://juejin.com"><h1>掘金</h1></a>

<img>:插入图片复制以下代码到<body>中

<img src="https://bkimg.cdn.bcebos.com/pic/5fdf8db1cb134954d3dd657a584e9258d0094ae9?x-bce-process=image/resize,m_lfit,h_1000,limit_1">

    <!-- img标签无须闭合,附上我胡帅照一张 -->

<ul>包裹<li>:无序列表复制以下代码到<body>中

<ul>
	<li>只</li>
	<li>因</li>
	<li>你</li>
	<li>太</li>
	<li>美</li>
</ul>

<ol>包裹<li>:有序列表复制以下代码到<body>中

<ol>
	<li>唱</li>
	<li>跳</li>
	<li>rap</li>
	<li>篮球</li>
</ol>

<div>:标签容器；块级元素（之前的代码段都可以用容器元素来包裹，变成一个小模块）
<span>:标签窗口；（同div，不过它是行级元素）
<table>:表格元素复制以下代码到<body>中

    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>女</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>28</td>
            <td>男</td>
        </tr>
    </table>
    <!-- 学到css的时候，就可以给表格加上边框了 -->

简单解释下： <table> 标签用于创建表格。 <tr> 标签用于创建表格中的行。 <th> 标签用于创建表头单元格。 <td> 标签用于创建普通的数据单元格。

<form>:表单元素复制以下代码到<body>中

    <form>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required><br><br>

        <label for="message">留言：</label><br>
        <textarea id="message" name="message" required></textarea><br><br>

        <input type="submit" value="提交">
    </form>

简单解释下： 1. <label>描述输入框，看网页展示就明白了；for属性与input标签输入数据相关联 2. <input>创建输入框常见属性(type:)： - text:文本输入框 - password:不可见输入内容 - number:限制输入数值 - email:邮箱输入框 - tel:电话输入框 - date:日期选择框 - time:时间选择框 - color:选择颜色用 - file:文件上传框 - checkbox:复选框 - radio:单选按钮 - submit:提交按钮 - reset:重置按钮，用于重置表单所填写数据 - button:普通按钮，通常和js配合使用 input框还有很多属性，自查熟悉一下 3. <textarea>:多行文本输入框

前端这条路，会写无数个表单。最基础的form要仔细看一下，后续与后端的数据流转表单组件极为常用

<header>和<footer>:文档页眉与页脚，提供语义化结构等作用
<nav>:主要和导航链接凑对
<section>:主要用于把文档拆分成若干逻辑区块
<article>:独立、完整的内容单元，小文章这些
<aside>:页面主内容外的附属信息，引用、广告这些
<blockquote>:用于引用他人的内容，会缩进复制以下代码到<body>中

<blockquote>
	<p>这是一个引用的段落。</p>
</blockquote>
<p>这是一个与引用对比的段落。</p>

<pre>:预定义文件，可以保留文本中的空格和换行符复制以下代码到<body>中

<pre>
这是一个预     定义文本块，

   可以保留    空 格 和   换  行符。

</pre>

<strong>或<em>:粗体或斜体展示文本复制以下代码到<body>中

<strong>我粗</strong>
<em>我斜</em>
<p>哥们，我正常段落</p>

<br>:插入换行符复制以下代码到<body>中

<span>只</span>
<span>因</span>
<br>
<span>你</span>
<span>太</span>
<span>美</span>

<del>文字中划线复制以下代码到<body>中

<div><del>鸡哥</del>坤哥永存</div>

五、结语

本篇讲解了HTML文档的必要结构、html标签、head中的常用标签、body的常用标签。

建议每个标签都用一遍，对它有个大概印象就行。现在工作环境文本我都是div走天下的（笑哭），今天搜集常用标签再试了下，有不少收获。

诸如头次知道meta标签里竟然还能玩响应式适配；

头次知道pre这类能保留空格和换行符的文本标签，之前都是无脑 的，惭愧惭愧。

与君共勉。