HTML基础回顾

文主要内容

html 的常见元素
html 元素的分类
html 元素的嵌套关系
html 元素的默认样式和 CSS Reset
html 常见面试题

html 的常见元素

html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。

1、head 区域的 html 元素

head 区域的 html 元素，不会在页面上留下直接的内容。

meta
title
style
link
script
base

base元素的介绍：

<base href="/">

base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。

2、html 元素（body 区域）

body 区域的 html 元素，会直接出现在页面上。

div、section、article、aside、header、footer
p
span、em、strong
表格元素：table、thead、tbody、tr、td
列表元素：ul、ol、dl、dt、dd
a
表单元素：form、input、select、textarea、button

div 是最常见的元素，大多数场景下，都可以用div（实在不行就多包几层div）。可见，div 是比较通用的元素，这也决定了 div 的的语义并不是很明确。

常见标签的重要属性：

a[href,target]
img[src,alt]
table td[colspan,rowspan]。设置当前单元格占据几行几列。在合并单元格时，会用到。
form[target,method,enctype]
input[type,value]
button[type]
selection>option[value]
label[for]

html 文档的大纲

我们平时在写论文或者其他文档的时候，一般会先列出大纲，然后再写具体的内容。

同样，html 网页也可以看成是一种文档，也有属于它的大纲。

一个常见的html文档，它的结构可以是：

    <section>
        <h1>一级标题</h1>

        <section>
            <h2>二级标题</h2>
            <p>段落内容</p>
        </section>

        <section>
            <h2>二级标题</h2>
            <p>段落内容</p>
        </section>

        <aside>
            <p>广告内容</p>
        </aside>

    </section>

    <footer>
        <p>某某公司出品</p>
    </footer>

查看网页大纲的工具

我们可以通过 http://h5o.github.io/ 这个工具查看一个网页的大纲。

使用方法：

（1）将网址 http://h5o.github.io/ 保存到书签栏

（2）去目标网页，点击书签栏的网址，即可查看该网页的大纲。

这个工具非常好用，既可以查看网页的大纲，也可以查看 markdown 在线文档的结构。

html 元素的分类

按照样式分类：

块级元素
行内元素
inline-block：比如form表单元素。对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。

按照内容分类：

html 元素的嵌套关系

块级元素可以包含行内元素。
块级元素不一定能包含块级元素。比如 div 中可以包含 div，但 p 标签中不能包含 div。
行内元素一般不能包含块级元素。比如 span 中不能包含 div。但有个特例：在 HTML5 中， a 标签中可以包含 div。

注意：在 HTML5 中 a > div 是合法的， div > a > div是不合法的；但是在 html 4.0.1 中， a > div 仍然是不合法的。

html 元素的默认样式和 CSS Reset

比如下拉框这种比较复杂的元素，是自带默认样式的。如果没有这个默认样式，则该元素在页面上不会有任何表现，则必然增加一些工作量。

同时，默认样式也会带来一些问题：比如，有些默认样式我们是不需要的；有些默认样式甚至无法去掉。

如果我们不需要默认的样式，这里就需要引入一个概念：CSS Reset。

常见的 CSS Reset 方案

方案一：

CSS Tools: Reset CSS

方案二：

雅虎的 CSS Reset

我们可以直接通过 CDN 的方式引入：

<link rel="stylesheet" type="text/css" href=">

方式三：（比较有争议）

*{
    margin: 0;
    padding: 0;
}

上面何种写法，比较简洁，但也有争议。有争议的地方在于，可能会导致 css 选择器的性能问题。

Normalize.css

上面的几种 css reset 的解决思路是：将所有的默认样式清零。

但是，Normalize.css 的思路是：既然浏览器提供了这些默认样式，那它就是有意义的。既然不同浏览器的默认样式不一致，那么，Normalize.css就将这些默认样式设置为一致。

html 常见面试题

doctype 的意义是什么

让浏览器以标准模式渲染
让浏览器知道元素的合法性

HTML、XHTML、HTML5的区别

HTML 属于 SGML
XHTML 属于 XML，是 HTML 进行 XML 严格化的结果
HTML5 不属于SGML，也不属于 XML（HTML5有自己独立的一套规范），比 XHTML 宽松。

HTML5 有什么新的变化

新的语义化元素
表单增强
新的API：离线、音视频、图形、实时通信、本地存储、设备能力等。

em 和 i 的区别

共同点：二者都是表示斜体。

区别：

em 是语义化的标签，表示强调。
i 是纯样式的标签，表示斜体。HTML5 中不推荐使用。

语义化的意义是什么

开发者容易理解，便于维护。
机器（搜索引擎、读屏软件等）容易理解结构
有助于 SEO

哪些元素可以自闭和

自闭和的元素中不能再嵌入别的元素。且 HTML5 中要求加斜杠。

表单元素 input
图片 img
br、hr
meta、link

form 表单的作用

直接提交表单
使用 submit / reset 按钮
便于浏览器保存表单
第三方库（比如 jQuery）可以整体获取值
第三方库可以进行表单验证

所以，如果我们是通过 Ajax 提交表单数据，也建议加上 form。

TML元素

这一节以及以后几节我们将对HTML中<body>标签中的各种元素进行一个概述，并对一些基本元素进行练习。

HTML元素：指的是从开始标签到结束标签的所有代码。

举个例子，在《第一个HTML页面如何写？——零基础自学网页制作》这一节中，我们写了这样一个页面"第一个页面.html"。后面的练习我们都在这个文件中进行。

<!DOCTYPE HTML> 
  <html> 
  <head> 
  </head> 
  <body> 
  <h>第一个网页</h>
  <p>千里之行始于足下</p> 
  </body>
  </html>

其中"<h>第一个网页</h>"整个代码就可以看做是一个html元素，<h></h>叫做标题标签，加上"第一个网页"这段文字共同构成一个HTML元素。

HTML元素非常多，因为我们可以在页面中显示各种各样的信息，不同的信息载体对应不同的元素。

下面我们就介绍几个常用的html元素。

HTML常用元素使用练习1

NO.1:<h></h>与<hr>

<h></h>这个用来添加标题的元素大家比较熟悉了，这里要介绍一个新的用法。示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
  </head> 
  <body>
  <h1>第一个网页</h1>
  <h2>第一个网页</h2>
  <h3>第一个网页</h3>
  <h4>第一个网页</h4>
  <h5>第一个网页</h5>
  <h6>第一个网页</h6>
  <p>千里之行始于足下</p>
  </body> 
  </html>

页面显示效果如图：

大家通过观察可以看出h后面的编号用来控制标题字号大小，仅仅是标题有这种预设，其他元素如果要调整字号的话我们放在以后CSS里讲。

下面看<hr>,示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
  </head> 
  <body>
  <h1>第一个网页</h1><hr>
  <h2>第一个网页</h2><hr>
  <h3>第一个网页</h3><hr>
  <h4>第一个网页</h4><hr>
  <h5>第一个网页</h5><hr>
  <h6>第一个网页</h6><hr>
  <p>千里之行始于足下</p><hr>
  </body> 
  </html>

效果如下：

<hr>标签可以为它前面的元素添加分割线，大家注意的是分割线不是下划线，添加下划线的操作我们会在CSS样式表中详细讲解。

NO.2:<p></p>与<br>

<p></p>元素是添加段落的。示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
  </head> 
  <body>
  <h1>第一个网页</h1><hr>
  <p>千里之行始于足下值得注意的是我们没有必要一一讲解HTML中的所有元素以及每个元素的各个属性，
因为每个元素的使用都是大同小异，我们完全可以通过几个常用案例对HTML全部元素及属性的指定形成一
个整体认识，以后可以根据需求通过查询手册来自己学习其他元素及其属性的用法。</p><hr>
</body>
</html>

效果如图所示：

通过观察发现，即使我们在代码中对段落的文字进行回车操作，但是出现在页面中是没有回车的效果的，文字按照顺序长长的排列在显示器上，非常不利于阅读，因此我们就要介绍常常和p标签连用的<br>换行标签。

示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head>
  <title>第一个网页</title>
</head> 
<body>
  <h1>第一个网页</h1><hr>
<p>千里之行始于足下<br>
  值得注意的是我们没有必要一一讲解HTML中的所有元素以及每个元素的各个属性，<br>
  因为每个元素的使用都是大同小异，我们完全可以通过几个常用案例对HTML全部元<br>
  素及属性的指定形成一个整体认识，以后可以根据需求通过查询手册来自己学习其他<br>
  元素及其属性的用法。</p><hr>
</body>
</html>

效果如图所示：

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

大家在浏览网页的时候，是否思考过这样一个问题：怎样才能制作出一个网页呢？制作出一个网页是很简单的，只要知道什么是HTML并掌握HTML的基础知识就可以制作出一个简单的网页，今天我就为讲解HTML的入门及结构组成。

一、什么是HTML?

1、在我们开始学习HTML之前我们需要知道什么是HTML？

HTML的全称为Hyper Text Markup Language，中文名称为超文本标记语言，阅览方式为网页浏览器，同时HTML也被称为网页。

2、一个简单的HTML文档

二、HTML编辑器

我们在可以使用TXT文本文档或者专业的HTML编辑器来编辑HTML。

1、记事本

①　创建一个TXT文本

②　输入HTML代码

③　点击文件—另存为—输入名称+“html”的后缀名即可得到你的第一个HTML文件。

④　然后双击这个文件运行。

运行结果

2、专业编辑器

①　Sublime Text

②　HBuilder

③　Adobe Dreamweaver

④　CoffeeCup HTML Editor

这其中我比较推荐HBuilder这款编辑器，界面简单，编辑起来很快。

三、HTML的组成部分

在上面的案例中我们可以看到HTML是由头部（head）和身体（body）所组成的。

1、头部（head）

通常包含标题（title），也就是一个网页的名称

网页标题

2、身体（body）

body的部分是整个网页的重要内容部分，让人一眼就浏览到这个网页的内容，可以插入文本、图片、多媒体等内容。

四、HTML元素

l HTML元素是指以开始标签起始，以结束标签终止的元素：元素内容即为开始标签与结束标签之间的内容。

l <head></head>、<body></body>、<p></p>、<h1></h2>等这些都是HTML元素，在上面的案例中就有六个元素。

l 也有部分元素只有开始标签，例如<br>,以开始标签的结束而结束。

五、HTML的属性

l 一般来说HTML的属性就是HTML元素的属性，属性可以在元素中添加附加信息。

l 属性总是以名称/值对的形式出现，比如：name=”value”。

l 属性一般描述于开始标签。

l style中会有更多的属性。

六、HTML格式化

HTML可定义很多供格式化输出的元素，比如粗体字和斜体字。

HTML文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

运行结果示意图

HTML“计算机输出”标签

标签	描述
<code>	定义计算机代码
<kdd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

HTML引文、引用及标签定义

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目

七、HTML超链接

超链接可以是图片、文字、多媒体也可以是一个网址

示例：

结果：

点击带有下划线的两个字就可以进入某度的网站

八、HTML CSS

1、CSS是一种层叠样式表，可以修饰html元素的样式并可以精确地进行排版

2、CSS有三种方式：

l 内部样式，在HTML元素中使用“style”属性

l 内部样式表，在头部<head>区域使用<style>元素来包含CSS

l 外部引用，引用带有后缀css的文件，示例：

html文档

css文档

如果你看到了这里，就说明你已经打开了制作网页的大门啦~

在线咨询

上一篇：SOLIDWORKS PDM系统中如何实现PDF文件
下一篇：HTML <label>

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商