HTML基础篇（二、HTML文档结构）

本章概要：

1.认识HTML文档结构

2.认识HTML常用标签

从上一篇文章中提到的HTML是超文本标记语言，一种用来结构化web网页及其内容的标记语言。那么其中的结构化究竟是怎样的呢？我们来看下面一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>hello, World!</p>
</body>
</html>

HTML的主要工作是编辑文本结构和文本内容，以便浏览器能正常的显示。浏览器解析HTML文件是从上之下的顺序，具体的解析流程我们下一篇再学习。现在主要认识一下HTML文件中的基础结构。

<! DOCTYPE html> 是HTML5标准网页声明，支持HTML5标准的主流浏览器都认识这个声明，表示该网页采用HTML5 。<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。而<！DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

<html>标签：主要作用告知浏览器这是一个HTML文档，该标签是除<!DOCTYPE>外所有其他HTML元素的容器。在上面标签中添加了lang="en"

这个属性，定义该网页为英文页面，lang是language的简写，定义为中文页面可以写成：lang="zh"。

<head>标签：该标签是所有头部元素的标签，其中的头部元素必须包含文档的标题（title），可以包含文档脚本（script），样式（style），meta信息以及更多的其他信息。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
<meta charset="UTF-8">

<title>标签：该标签它可以用来给 html 文档添加一个标题。你可能会将它和给 body 添加标题的 <h1> 元素混淆，有些时候 h1 也会被称作网页标题。但是它们是不同的。它是定义浏览器工具栏中的标题，也可以是提供页面被添加到收藏夹时的标题和显示在搜索引擎结果中的页面标题（注意：一个 HTML 文档中不能有一个以上的 <title> 元素）。

<body>标签：该标签定义文档的主体，称为内容主体标签，一般网页内容均放入到该标签组中。通常我们在浏览器中看到的内容体都是在该标签内的。该标签元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

讲解完HTML的主体结构之后，下面将为大家介绍一下在开发中常用到的标签。

标题和段落

大部分的文本结构由标题和段落组成。不管是小说、报刊、教科书还是杂志等。

在HTML中，每个段落是通过<p>元素标签进行定义的, 比如下面这样：

<p>hello，world！</p>

每个标题（Heading）是通过“标题标签”进行定义的：

<h1>我是文章标题</h1>

这里有六个标题元素标签 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容; <h1> 表示主标题（the main heading），<h2> 表示二级子标题（subheadings），<h3> 表示三级子标题（sub-subheadings），等等。

元素组合

div标签用于组合其他HTML元素，本身无实际意义，常用于页面的布局，比如一个常用的页面布局架构如下：

<div class="container">
    <h1>三国演义</h1>
    <p>罗贯中</p>
    <h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
    <p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……</p>
</div>

表示列表

ul、li、ol、dl、dt、dd 此类标签用于设置带有列表内容的，比如导航栏的下拉菜单，多视频的缩略图等：

<ul class="nav-tools-list">
    <li>
        列表1
    </li>
    <li>
        列表2
    </li>
</ul>

表单相关

页面中涉及到表单时候，需要使用到form相关标签，form表单标签中主要包含有：单行文本输入框<input/>，多行文本输入区域<textarea></textarea>，提交按钮<button></button>，单选或多选<select></select>等。一个常用的form表单结构如下：

<form action="#">
        <label id="username">
            <input name="username" placeholder="请输入"/>
        </label>
        <select>
            <option value="1">廖某某</option>
            <option value="2">廖某某</option>
            <option value="3">廖某某</option>
        </select>
        <textarea placeholder="描述">

        </textarea>
        <button>
            提交
        </button>
    </form>

表格相关

页面中涉及到table结构，需要使用到table相关标签，table中包含表示表格中的行<tr>，一个<tr>中包含一个或多个的表头<th>和标准单元格<td>。

一个简单的 HTML 表格，带有两个单元格：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

图像显示

用于图像显示。一般不直接操作img,canvas标签，而是在它的外层包裹一层父级元素（可以为div等)，img标签中带有src属性，src=""后面可以写入图片的绝对路径和相对路径，这样图片就可以被引用了。canvas标签没有src属性，只有一些简单的属性：定义宽高（with，height），但是可以在JavaScript中操作canvas来显示图片，这里先不讲，放到JavaScript的基础篇中再讲。

<div class="avatar-icon">
    <img src="../images/a_1.png" alt="">
</div>
<!-- or -->
<div class="avatar-icon">
    <canvas width="460" height="130"></canvas>
</div>

超链接

在web网页开发中，你可以将一些内容转换为链接，甚至是块级链接。例如你想要将一个图像转换为链接，你只需把图像元素放到<a></a>标签中间。

<a href="http://www.xxxx.com/">
  <img src="http://www.xxx.com/images/a.png" alt="廖某某前端日志">
</a>

----HTML常用标签就先介绍到这里，当然，现实开发中不可能只是用到上述讲到这些常用的标签，进入HTML5标准的时代后，对于网页的排版布局也更专业起来了，比如有定义文档中的一个章节<section>，定义只包含导航链接的章节<nav>，定义可以独立于内容其余部分的完整独立内容块<article>等等，有需要用到可以国内的专业的技术网站查看（菜鸟教程、w3c等）。

好了，HTML的文档讲解篇到这里就告一段落了，下一篇将为大家讲解浏览器是怎么解析HTML的，下期再见。

posted @ 2020-01-12 16:19 padding2020 阅读(788) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

padding2020