HTML基础

发表于 | 分类于
字数统计: 3,181

学习笔记源自：绿叶

常用标签速览

在HTML中，一般来说，只有6个标签能放在head标签内。

  • meta标签：定义页面的特殊信息，如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛。
    两个重要的属性：name和http-equiv。

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

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 在HTML5标准中，简写为<meta charset="utf-8"/>必须放在title标签以及其他meta标签前面

    <meta http-equiv="refresh" content="6;url=..."/> 当前页面在6秒后会自动跳转，很多“小广告”网站就是用这种方式来实现页面定时跳转的。

  • title标签：定义网页的标题。

  • style标签：定义元素的CSS样式

  • script标签：定义页面的JavaScript代码

  • link标签：用于引入外部样式文件（CSS文件）

  • base标签

body

静态页面和动态页面的区别在于是否与服务器进行数据交互。

文本


在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。其中h是header的缩写。一个页面一般只能有一个h1标签，而h2到h6标签可以有多个。其中，h1表示的是这个页面的大标题。h1~h6标题标签看起来很简单，但是在搜索引擎优化中却扮演着非常重要的角色。

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

使用“p标签”来显示一段文字。段落标签会自动换行，并且段落与段落之间有一定的间距。

换行，有两种方法：一种是“使用两个p标签”，另外一种是“使用br标签”。其中<br/>是自闭合标签，br是break（换行）的缩写。使用p标签会导致段落与段落之间有一定的间隙，而使用br标签则不会。br标签是用来给文字换行的，而p标签是用来给文字分段的。如果你的内容是两段文字，则不需要使用br标签换行那么麻烦，而是直接用两个p标签就可以了。

常用的文本标签有以下8种

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

  • 斜体标签：i、em、cite。尽量使用em标签emphasized

  • 上标标签：sup。superscripted（上标）的缩写

  • 下标标签：sub。subscripted（下标）的缩写

  • 中划线标签：s。

  • 下划线标签：u。

  • 大字号标签：big。

  • 小字号标签：small。

    后面4种完全可以使用CSS来代替

使用“hr标签”来实现一条水平线的效果。hr，是horizon（水平线）的缩写。

使用“div标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式。div，全称division（分区），内部可以放入绝大多数其他的标签，如p标签、strong标签和hr标签等。

自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。

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

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

HTML中，空格是需要用代码来实现的。其中，空格的代码是 &nbsp;3个相当于一个字

特殊符号对应的代码，都是以“&”开头，并且以“;”（英文分号）结尾的。

列表

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

有序列表ol标签和li标签需要配合一起使用，不可以单独使用，而且

    标签的子标签也只能是li标签，不能是其他标签。但是子标签内部可以有其他标签

可以使用type属性来改变列表项符号。在默认情况下，有序列表使用数字作为列表项符号。CSS之后，我们可以不再使用type属性，而应使用liststyle-type属性。

无序列表ul与ol类似

在实际的前端开发中，无序列表比有序列表更为实用。

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

1
2
3
4
5
<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

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

HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义。例如，p标签，表示的是paragraph，标记的是一个段落；h1标签，表示的是header1，标记的是一个最高级标题。但div和span是无语义的标签，我们应该优先使用其他有语义的标签。

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table>
	<caption>表格标题</caption>
	<!--表头-->
	<thead>
		<tr>
        	<th>表头单元格1</th>
            <th>表头单元格2</th>
        </tr>
     </thead>
     <!--表身-->
     <tbody>
     	<tr>
        	<td>表行单元格1</td>
            <td>表行单元格2</td>
        </tr>
        <tr>
        	<td>表行单元格3</td>
            <td>表行单元格4</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
    	<tr>
        	<td>标准单元格5</td>
            <td>标准单元格6</td>
        </tr>
     </tfoot>
</table>

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

tr指的是table row（表格行），th指的是table header cell（表头单元格），td指的是table data cell（表格单元格）。
显示上：浏览器会以“粗体”和“居中”来显示th标签中的内容，但是td标签不会。

表脚（tfoot）往往用于统计数据。对于thead、tbody和tfoot标签，不一定需要全部都用上，如tfoot就很少用。thead、tbody和tfoot除了可以使代码更具有语义，还有另外一个重要作用：方便分块来控制表格的CSS样式。

使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。
使用colspan属性来合并列。

图片

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

alt属性用于图片描述，这个描述文字是给搜索引擎看的。当图片无法显示时，页面会显示alt中的文字。
title属性也用于图片描述，不过这个描述文字是给用户看的。当鼠标指针移到图片上时，会显示title中的文字。
在实际开发中，对于img标签，src和alt这两个是必选属性。一般都使用相对路径，几乎不会使用绝对路径。

位图，又叫作“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。
最常见的位图的图片格式有3种（可以从图片后缀名看出来）：jpg（或jpeg）、png、gif。

  • jpg格式可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg格式的图片体积较大，并且不支持保存透明背景。
  • png格式是一种无损格式，可以无损压缩以保证页面打开速度。此外，png格式的图片体积较小，并且支持保存透明背景，不过不适合存储颜色丰富的图片。
  • gif格式的图片效果最差，不过它适合制作动画。支持透明背景。实际上，小伙伴们经常在QQ或微信上发的动图都是gif格式的。
    这里来总结一下：如果想要展示色彩丰富的高品质图片，可以使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png格式；如果是动画图片，可以使用gif格式。

矢量图，又叫作“向量图”，是以一种数学描述的方式来记录内容的图片格式。举个例子，我们可以使用y=kx来绘制一条直线，当k取不同值时可以绘制不同角度的直线，这就是矢量图的构图原理。
矢量图最大的优点是图片无论放大、缩小或旋转等，都不会失真。最大的缺点是难以表现色彩丰富的图片
矢量图的常见格式有“.ai”“.cdr”“.fh”“.swf”。其中“.swf”格式比较常见，它指的是Flash动画

网页中的图片绝大多数都是位图，而不是矢量图。

现在的切图，指的是前端工程师拿到UI设计师的图稿时，需要分析页面的布局，哪些用CSS实现，哪些用图片实现，哪些用CSS Spirit实现等。

超链接

使用a标签来实现超链接。即anchor锚点 <a href="链接地址">文本或图片</a>

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

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

锚点链接，简单地说，就是单击某一个超链接，它就会跳到当前页面的某一部分。
需要定义以下2个参数：

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

表单

表单最重要的作用就是在浏览器端收集用户的信息，然后将数据提交给服务器来处理。表单，指的是文本框、按钮、单选框、复选框、下拉列表等的统称。

在HTML中，表单标签有5种：form、input、textarea、select和option。必须要把所有表单标签放在form标签内部。

form

  • method属性取值有两个：一个是“get”，另外一个是“post”。get的安全性较差，而post的安全性较好。所以在实际开发中，大多数情况下我们都是使用post。
  • target属性与a标签的target属性是一样的
  • enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。
input

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


加上value属性，是为了方便JavaScript或者服务器操作数据。

密码文本框中输入的字符不可见，是一种特殊的单行文本框。密码文本框只能使周围的人看不见你输入的内容是什么，实际上它并不能保证数据的安全。

单选框<input type="radio" name="组名" value="取值" />
name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。对于这一组单选按钮，只能选中其中一项，而不能同时选中两项。这就是所谓的“单选框”。
可以使用checked属性来实现默认选中

复选框与单选框类似。

常见的按钮有3种：普通按钮（button），提交按钮（submit），重置按钮（reset）。
普通按钮一般情况下都是配合JavaScript来进行各种操作的。
提交按钮一般都是用来给服务器提交数据的。
重置按钮一般用来清除用户在表单中输入的内容。

textarea

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

select和option

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

1
2
3
4
5
<select>
	<option>选项内容</option>
    ……
    <option>选项内容</option>
</select>


如果想要同时选取多项，首先要设置multiple属性，然后使用“Ctrl+鼠标左键”来选取。
将size取值设置为1、2或3时，会发现Chrome浏览器无效。这是因为Chrome浏览器要求最低是4个选项


selected属性表示列表项是否被选中

框架

使用iframe标签来实现一个内嵌框架。内嵌框架，是指在当前页面再嵌入另外一个网页。
<iframe src="链接地址" width="数值" depth="数值"></iframe>