HTML基础

meta标签在HTML中，meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给人看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的。简单来说，meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。在Web技术中，我们一般形象地称搜索引擎为“搜索蜘蛛”或“搜索机器人”。在HTML中，meta标签有两个重要的属性：name和http-equiv。此外，<meta charset="utf-8" />这一句必须放在title标签以及其他meta标签前面。

在HTML中，meta标签有两个重要的属性：name和http-equiv。

name：

<!DOCTYPE html>
<html>
<head>
    <!--网页关键字-->
    <meta name="keywords" content="测试网站"/>
    <!--网页描述-->
    <meta name="description" content="该网站用于测试"/>
    <!--本页作者-->
    <meta name="author" content="helicopter">
    <!--版权声明-->
    <meta name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。"/>
</head>
<body>
</body>
</html>

http-equiv：在HTML中，meta标签的http-equiv属性只有两个重要作用：定义网页所使用的编码；定义网页自动刷新跳转。

语法定义网页所使用的编码
<meta charset="utf-8"/>
定义网页自动刷新跳转
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
//这段代码表示当前页面在6秒后会自动跳转到http://www.baidu.com这个页面。

3.2.3 style标签

在HTML中，style标签用于定义元素的CSS样式。

3.2.4 style标签

在HTML中，script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。

3.2.5 link标签

在HTML中，link标签用于引入外部样式文件（CSS文件）。这也是属于CSS部分的内容，这里不需要深究。

<!DOCTYPE html>
<html >
<head>
    <link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
</body>

3.2.6 base标签

这个标签一点意义都没有，可以直接忽略。知道有这么一个标签就行了，看到了直接忽略处理。

3.3 body标签

<body></body>是网页的“身体”。对于一个网页来说，大部分代码都是在这个标签对内部编写的。

3.4 注释

“”又叫做注释标签。“”表示注释的结束。

//即使你在页面中用了JavaScript，它也不是动态页面，除非你还用到了后端技术。

4.文本

4.1 标题标签

在HTML中，共有六个级别的标题标签：h1、h2、h3、h4、h5、h6。其中h是header的缩写。这六个标题标签在页面的重要性是有区别的，其中h1标签的重要性最高，h6标签的重要性最低。这里要注意一下，一个页面一般只能有一个h1标签，而h2～h6标签可以有多个。

title标签用于显示地址栏的标题，而h1标签用于显示文章的标题.

4.2 段落标签

<p></p>是段落标签，用于定义一段文字。

段落标签会自动换行，并且段落与段落之间有一定的间距。

br标签是用来给文字“换行”的，而p标签是用来给文字“分段”的。

4.3 文本标签

常用标签：

粗体标签：strong、b
斜体标签：i、em、cite
上标标签：sup
下标标签：sub
中划线标签：s
下划线标签：u
大字号标签：big
小字号标签：small

在实际开发中，如果想要对文本实现加粗效果，尽量使用strong标签，而不要使用b标签。这是因为strong标签比b标签更具有语义性。

sup，是“superscripted（上标）”的缩写。sup，是“superscripted（上标）”的缩写。

可以使用s标签来实现文本的中划线效果。对于删除线、下划线效果，一般用CSS来实现，几乎不会用s、u标签来实现。

4.4 div标签

在HTML中，我们可以使用div标签来划分HTML结构，从而配合CSS来“整体”控制某一块的样式。

div，全称“division（分区）”，用来划分一个区域。div标签内部可以放入所有其他标签，例如p标签、strong标签、hr标签等。div标签最重要的用途是划分区域，然后结合CSS针对该区域进行样式控制。

4.5 自闭合标签

一般标签：由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。

自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。

4.6 块元素和行内元素

在浏览器预览效果，有些元素是独占一行的，其他元素不能跟这个元素位于同一行，如p、div、hr等。而有些元素不是独占一行的，其他元素可以跟这个元素位于同一行，如strong、em等。特别注意一下，这里所谓的“独占一行”，并不是在HTML代码里独占一行，而是在浏览器显示效果中独占一行。

4.6.1块元素

在HTML中，块元素在浏览器显示状态下将占据一整行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。

总结：

块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行。
块元素内部可以容纳其他块元素和行内元素。

4.6.2 行内元素

在HTML中，行内元素跟块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的。此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。

总结：

行内元素可以与其他行内元素位于同一行。
行内元素内部可以容纳其他行内元素，但不可以容纳块元素。

4.7 特殊符号

空格&nbsp

5.列表

在HTML中，列表共分为三种：有序列表、无序列表和定义列表。

5.1 有序列表

5.1.1 有序列表简介

在HTML中，有序列表中的各个列表项是有顺序的。有序列表从<ol>开始，到</ol>结束。有序列表一般采用数字或字母作为顺序，默认是采用数字顺序。

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

ol，即ordered list（有序列表）。li，即list（列表项）。

在该语法中，<ol>和</ol>标志着有序列表的开始和结束，而<li>和</li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。
注意，ol标签和li标签是配合一起使用的，不可以单独使用，而且<ol>标签的子标签只能是li标签，不能是其他标签.

5.1.2 type属性

在HTML中，我们可以使用type属性来改变列表项符号。默认情况下，有序列表使用数字作为列表项符号。

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

学了CSS之后，可以放弃type属性，而使用list-style-type属性来取代。

5.2 无序列表

5.2.1无序列表简介

有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。默认情况下，无序列表的列表项符号是●，不过可以通过type属性来改变。ul，即unordered list（无序列表）。li，即list（列表项）。

ul元素的子元素只能是li，不能是其他元素。ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加。

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

5.2.1 type属性

跟有序列表一样，我们也可以使用type属性来定义列表项符号。

5.3 定义列表

在HTML中，定义列表由两部分组成：名词和描述。

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

dl即definition list（定义列表），dt即definition term（定义名词），而dd即definition description（定义描述）。

在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束；dt标签用于添加要解释的名词；而dd标签用于添加该名词的具体解释。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>定义列表</title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>制作网页的标准语言，控制网页的结构</dd>
        <dt>CSS</dt>
        <dd>层叠样式表，控制网页的样式</dd>
        <dt>JavaScript</dt>
        <dd>脚本语言，控制网页的行为</dd>
    </dl>
</body>
</html>

结果

在实际开发中，定义列表虽然用得比较少，但是在某些高级效果（如自定义表单）中也会用到

6. 表格简介

6.1 基本结构

在HTML中，一个表格一般会由以下三个部分组成。表格：table标签行：tr标签单元格：td标签

<table>
    <tr>
        <td>单元格 1</td>
        <td>单元格 2</td>
    </tr>
    <tr>
        <td>单元格 3</td>
        <td>单元格 4</td>
    </tr>
</table>

tr，指的是table row（表格行）。td，指的是table data cell（表格单元格）。

<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，而<td>和</td>表示单元格的开始和结束。在表格中，有多少组<tr></tr>，就表示有多少行。

6.2 完整结构

一个表格的完整结构不仅仅只有table、tr、td这三个部分，还包括caption、th等。

6.3.1 表格标题：

caption在HTML中，表格一般都会有一个标题，我们可以使用caption标签来实现。

<table>
    <caption>BP</caption>
    <tr>
        <td>Rosie</td>
        <td>Lisa</td>
    </tr>
    <tr>
        <td>jisoo</td>
        <td>jennie</td>
    </tr>
</table>

一个表格只能有一个标题，也就是只能有一个caption标签。在默认情况下，标题都是位于整个表格内的第一行。

6.3.2 表头单元格：

th在HTML中，单元格其实有两种：表头单元格，使用th标签；表行单元格，使用td标签。

th，指的是table header cell（表头单元格）。td，指的是table data cell（表行单元格）。

<table>
    <caption>BP</caption>
	<tr>
        <th>Rosie</th>
        <th>Lisa</th>
    </tr>
    <tr>
        <td>jisoo</td>
        <td>jennie</td>
    </tr>
</table>

th和td在本质上都是单元格，但是并不代表两者可以互换，它们之间具有以下两种区别。

显示上：浏览器会以“粗体”和“居中”来显示th标签中的内容，但是td标签不会。
语义上：th标签用于表头，而td标签用于表行。

6.4 语义化

一个完整的表格包含：table、caption、tr、th、td。为了更深入地对表格进行语义化，HTML引入了thead、tbody和tfoot这三个标签。

thead、tbody和tfoot把表格划分为三部分：表头、表身、表脚。有了这三个标签，表格语义更加良好，结构更清晰，也更具有可读性和可维护性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>表格语义化</title>
    <!--这里使用CSS为表格加上边框-->
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
    </style>
</head>
<body>
    <table>
        <caption>考试成绩表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>英语</th>
                <th>数学</th>
            <tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小杰</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>平均</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

thead、tbody和tfoot这三个标签也是表格中非常重要的标签，它从语义上区分了表头、表身和表脚，很多人容易忽略这三个标签。

此外，thead、tbody和tfoot除了使得代码更具有语义之外，还有另外一个重要作用：方便分块来控制表格的CSS样式。

6.4 合并行：rowspan

在HTML中，我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。

<td rowspan = "跨越的行数"></td>

所谓的合并行，其实就是将表格相邻的N个行合并。在这个例子中，rowspan="n"实际上是让加上rowspan属性的这个td标签跨越n行。

6.5 合并列：colspan

在HTML中，我们可以使用colspan属性来合并列。所谓的合并列，指的是将“横向的N个单元格”合并。

<td colspan = "跨越的列数"></td>

7. 图片

7.1 图片标签

在HTML中，我们可以使用img标签来显示一张图片。对于img标签，我们只需要掌握它的三个属性：src、alt和title。

<img src="" alt="" title="" />

7.1.1 src属性

src用于指定图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。

<img src="图片路径" />

所谓的图片路径，指的就是图片地址，这两个叫法是一样的意思。任何一个图片必须指定src属性才可以显示。也就是说，src属性是img标签必不可少的属性。

7.1.2 alt属性和title属性

alt和title属性都是用于指定图片的提示文字。一般情况下，alt和title属性的值是相同的。不过两者也有很大的不同。

alt属性用于描述图片，这个描述文字是给搜索引擎看的，并且当图片无法显示时，页面会显示alt中的文字。title属性也用于描述图片，不过这个描述文字是给用户看的，并且当鼠标指针移到图片上时，会显示title中的文字。

下图分别为alt和title属性

src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。

7.2 图片路径

在HTML中，路径分为两种：绝对路径和相对路径。

绝对路径，指的是图片在你的电脑中的完整路径

<img src="D:/website/img/rosie.png" />

相对路径，指的是图片相对当前页面的位置，“../”表示上一级目录。

<img src="img/rosie.png" />

在实际开发中，站内文件不管是图片还是超链接等，我们都使用相对路径，几乎不会用绝对路径。

7.3 图片格式

在网页中，图片格式有两种：一种是“位图”，另外一种是“矢量图”

7.3.1 位图

位图，又叫“像素图”，它是由像素组成的图片。将位图放大后，图片会失真；缩小图片后，位图同样也会失真。

在实际开发中，最常见位图的图片格式有三种（可以从图片后缀名看出来）：.jpp（或.jpeg）、.png和.gif。

如果想要展示色彩丰富而高品质图片，可以使用.jpg格式；
如果是一般图片，为了减少体积或者想要透明效果，可以使用.png格式；
如果是动画图片，可以使用.gif格式。

7.3.2 矢量图

矢量图，又叫“向量图”，它是用计算机图形学中点、直线或多边形等表示出来的几何图像。

矢量图是以一种数学描述的方式来记录内容的图片格式。

举个例子，我们可以使用y=kx来绘制一条直线，当k取不同值时就会绘制不同角度的直线，这就是矢量图的构图原理。

矢量图最大的优点是：图片无论放大、缩小或旋转等都不会失真。最大的缺点是：难以表现色彩丰富的图片效果（非常差）。矢量图常见格式有：.ai、.cdf、.fh、.swf。

对于位图和矢量图的区别

位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片。
位图的组成单位是“像素”，而矢量图组成单位是“数学向量”。
位图受分辨率影响，当图片放大时会失真；而矢量图不受分辨率影响，当图片放大时不会失真。
网页中的图片绝大多数都是位图，而不是矢量图。

8. 超链接

8.1 超链接简介

超链接随处可见，可以说是网页中最常见的元素。超链接，英文名是hyperlink。每一个网站都是由非常多的网页组成，而页面之间通常都是通过超链接来相互关联的。超链接能够让用户在各个独立的页面之间方便地跳转。

8.1.1 a标签

在HTML中，我们可以使用a标签来实现超链接。

<a href="链接地址">文本或图片</a>

8.1.2 target属性

默认情况下，超链接都是在当前浏览器窗口打开新页面的。在HTML中，我们可以使用target属性来定义超链接打开窗口的方式。

<a href="链接地址" target="打开方式"></a>

一般情况下，我们只会用到_blank这一个值。_blank属性是以下划线（_）开头，而不是中划线-。

8.2 内部链接

在HTML中，超链接有两种，一种是“外部链接”，另外一种是“内部链接”。外部链接指向的是“外部网站的页面”，而内部链接指向的是“自身网站的页面”。

8.3 锚点链接

有些页面内容比较多，导致页面过长，用户需要不停拖动浏览器上的滚动条才可以查看内容。

为了方便用户操作，我们可以使用锚点链接来优化用户体验。

在HTML中，锚点链接其实是内部链接的一种，它链接地址（也就是href）指向的是当前页面的某个部分。所谓的锚点链接，简单来说，就是点击某一个超链接，然后它就会跳到“当前页面”的某一部分。

想要实现锚点链接，需要定义两个。

目标元素的id。
a标签的href属性指向该id。

9 表单

9.1 表单简介

前面，我们学习了各种各样的标签。不过使用这些标签做出来的都是静态页面，没办法实现动态页面。如果想要做出一个动态页面，我们就需要借助表单来实现。其中表单最重要的作用就是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理。

从外观上来划分，表单可以分为以下八种。

单行文本框
密码文本框
单选框复选框
按钮
文件上传
多行文本框
下拉列表

9.2 form标签

9.2.1 form标签简介

必须要把所有表单标签放在form标签内部。常说的表单，指的是文本框、按钮、单选框、复选框、下拉列表等的统称。

<form>
    //各种表单标签
</form>

1. name属性

为了区分表单，使用name属性来给表单进行命名。

<form name="myForm"></form>

2. method属性

在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个，一个是get，另外一个是post。get在安全性较差，而post安全性较好。所以在实际开发中，我们都是使用post。

<form method="post"></form>

3. action属性

在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。

<form action="index.php"></form>

4. target属性

在form标签中，target属性与a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，只会用到_blank这一个属性值。

<form target="_blank"></form>

5. enctype属性

在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下不需要设置，除非用到上传文件功能。

9.3 input标签

在HTML中，大多数表单都是使用input标签来实现的。

<input type="表单类型" />

nput是自闭合标签，它是没有结束符号的。其中type属性取值如表所示。

9.4 单行文本框

9.4.1 单行文本框简介

在HTML中，单行文本框是使用input标签来实现的，其中type属性取值为text。单行文本框常见于注册登录功能。

<input type="text" />

效果：

9.4.2 单行文本框属性

value属性用于设置单行文本框中默认的文本，如果没有设置，就是空白。

9.5 密码文本框

9.5.1 密码文本框简介

密码文本框在外观上与单行文本框相似，两者也拥有相同的属性（value、size、maxlength等）。不过两者也有着本质上的区别：在单行文本框中输入的字符可见，而在密码文本框中输入的字符不可见。

<input type="password" />

文本框属性同单行文本框。

9.6 单选框

在HTML中，单选框也是使用input标签来实现的，其中type属性取值为radio。

<input type="radio" name="组名" value="取值" />

name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        性别:
		<input type="radio" name="gender" value="男" />男
        <input type="radio" name="gender" value="女" />女
        <input type="radio" name="gender" value="男" checked />男
        <input type="radio" name="gender" value="女" />女
    </form>
</body>
</html>

name取值一样时，实现单选效果；如果name取值不一样、可多选。

为了得到更好的语义化，表单元素与后面的文本一般都需要借助label标签关联起来。

value属性取值一般跟后面的文本相同，之所以加上value属性，是为了方便JavaScript或者服务器操作数据。所有表单元素的value属性的作用都是一样的。

9.7 复选框

在HTML中，复选框也是使用input标签来实现的，其中type属性取值为checkbox。单选框只能选择一项，而复选框可以选择多项。

<input type="checkbox" name="组名" value="取值" />

name属性表示复选框所在的组名，而value表示复选框的取值。单选框一样，这两个属性也必须要设置。

两者都设置name属性，为什么单选框只能选中一项，而复选框可以选择多项呢？

因为浏览器会自动识别这是“单选框组”还是“复选框组”（其实就是根据type属性取值来识别）。如果是单选框组，就只能选择一项；如果是复选框组，就可以选择多项。

想在默认情况下，让复选框某几项选中，也可以使用checked属性来实现。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        你喜欢的水果：<br/>
        <input type="checkbox" name="fruit" value="苹果" checked/>苹果
        <input type="checkbox" name="fruit" value="香蕉"/>香蕉
        <input type="checkbox" name="fruit" value="西瓜" checked/>西瓜
        <input type="checkbox" name="fruit" value="李子"/>李子
    </form>
</body>
</html>

9.8 按钮

在HTML中，常见的按钮有三种：普通按钮button、提交按钮submit和重置按钮reset。

9.8.1 普通按钮

button在HTML中，普通按钮一般情况下都是配合JavaScript来进行各种操作的。

<input type="button" value="取值" />

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function ()
        {
            var oBtn = document.getElementsByTagName("input");
            oBtn[0].onclick = function ()
            {
                alert("I ❤ HTML ！");
            };
        }
    </script>
</head>
<body>
    <form method="post">
        <input type="button" value="表白"/>
    </form>
</body>
</html>

9.8.2 提交按钮submit

在HTML中，提交按钮一般用来给服务器提交数据。我们可以把提交按钮看成是一种特殊功能的普通按钮。

<input type="submit" value="取值" />

9.8.3 重置按钮reset

在HTML中，重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮。

重置按钮只能清空它所在form标签内表单中的内容，对于当前所在form标签之外的表单清除无效。提交按钮也是针对当前所在form标签而言的。

总结：

普通按钮一般情况下都是配合JavaScript来进行各种操作的。
提交按钮一般都是用来给服务器提交数据的；
重置按钮一般用来清除用户在表单中输入的内容。

9.9 文件上传

在HTML中，文件上传也是使用input标签来实现的，其中type属性取值为file。

<input type = "file"/>

9.10 多行文本框

在HTML中，多行文本框使用的是textarea标签，而不是input标签。

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

多行文本框的默认显示文本是在标签对内部设置，而不是在value属性中设置的。一般情况下，不需要设置默认显示文本。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        个人简介：<br/>
        <textarea rows="5" cols="20">请介绍一下你自己</textarea>
    </form>
</body>
</html>

HTML有三种文本框：单行文本框、密码文本框、多行文本框。

单行文本框和密码文本框使用的都是input标签，多行文本框使用的是textarea标签。

9.11 下拉列表

9.11.1 下拉列表

在HTML中，下拉列表由select和option这两个标签配合使用来表示的。

<select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

9.11.2 select标签属性

在HTML中，select标签常用属性有两个， select标签常用属性

9.11.3 option标签属性

10. 框架

10.1 iframe标签

在HTML中，我们可以使用iframe标签来实现一个内嵌框架。内嵌框架，就是在当前页面再嵌入另外一个网页。

<iframe src="链接地址" width="数值" height="数值"></iframe>

src是必选的，用于定义链接页面的地址。width和height这两个属性是可选的，分别用于定义框架的宽度和高度。（位于body内）

iframe实际上就是在当前页面嵌入另外一个页面，我们也可以同时嵌入多个页面。

Rrenr

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

总结的html基础知识，便于复习，原知识源于WEB前端开发精品课。
复制链接

扫一扫