HTML基础
文本标签
1、页面组成元素
一个静态页面,通常由以下4种元素组成:文本、图片、超链接、音频和视频。
这里还要强调以下,静态页面和动态页面的区别在于是否与服务器进行数据交互。
2、HTML文本
文本:标题、段落、换行、文本、水平线、特殊符号。
- 标题标签
在HTML中,共有6个级别的标题标签:h1、h2、h3、h4、h5、h6,6个标签在页面中的重要性以此降低。一个页面一般只能有一个h1标签。
标签的级别越大,字体也越大。标题标签h1~h6也是有一定顺序的,h1用于大标题,h2用于二级标题……以此类推。
<body>
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>
</body>
title标签与h1标签:title标签用于显示地址栏的标题,而h1标签用于显示文章的标题。
- 段落标签
在HTML中,我们可以使用“p标签”来显示一段文字。
<p>段落内容</p>
段落标签会自动换行,并且段落与段落之间有一定的间距。
- 换行标签
换行标签:<br/>
<h3>静夜思</h3>
<p>床前明月光,疑是地上霜。<br/>举头望明月,低头思故乡。</p>
使用p标签会导致段落与段落之间有一定的间隙,而使用br标签则不会。
br标签是用来给文字换行的,而p标签是用来给文字分段的。
- 文本标签
常用的文本标签有以下8种:
- 粗体标签:strong、b
- 斜体标签:i、em、cite
- 上标标签:sup
- 下标标签:sub
- 中划线标签:s
- 下划线标签:u
- 大字号标签:big
- 小字号标签:small
strong标签和b标签的加粗效果是一样的,但在实际开发中,如果想要对文本实现加粗效果,尽量使用strong标签,而不要使用b标签,因为strong标签比b标签更具有语义性。
在实际开发中,如果想要实现文本的斜体效果,尽量使用em标签。
- 水平线标签
<hr />
- div标签
div,全称division(分区),用来划分一个区域。div标签内部可以放入绝大多数其他的标签,如p标签、strong标签和hr标签等。
div标签最重要的用途是划分区域,然后结合CSS针对该区域进行样式控制。
<div id="">
</div>
- 自闭合标签
在HTML中,标签分为两种:一般标签和自闭合标签。
- 一般标签:由于有开始符号和结束符号,因此可以在内部插入其他标签或文字。如:div、p、strong
- 自闭合标签:由于只有开始符号而没有结束符号,因此不可以在内部插入标签或文字。如:meta、br、hr
- 块元素和行内元素
在HTML中,根据元素的表现形式,可将元素分为两类:块元素和行内元素。
- 块元素在浏览器显示状态下将占据整一行,并且排斥其他元素与其位于同一行。一般情况下,块元素内部可以容纳其他块元素和行内元素。如:h1~h6、p、div、br、hr
- 行内元素是可以与其他行内元素位于同一行的。此外,行内元素内部(标签内部)只可以容纳其他行内元素,不可以容纳块元素。如:strong、em、a、span
- 特殊符号
- 空格:
1个汉字约等于3个
。
列表标签
在HTML中,列表共有3种:有序列表、无序列表和定义列表。
- 有序列表
ol,即ordered list(有序列表)。li,即list(列表项)。
<!-- 有序列表 -->
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项1</li>
</ol>
<ol>和</ol>标志着有序列表的开始和结束,而<li>和</li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。
ol标签和li标签需要配合一起使用,不可以单独使用,而且<ol>标签的子标签也只能是li标签,不能是其他标签。
type属性:‘1’、‘a’、‘A’、‘i’、‘I’。对于有序列表的列表项符号,等学了CSS之后,我们可以不再使用type属性,而应使用liststyle-type属性。
- 无序列表
默认情况下,无序列表的列表项符号是●,我们可以通过type属性来改变其样式。
<!-- 无序列表 -->
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
ul,即unordered list(无序列表)。li,即list(列表项)。<ul>和</ul>标志着一个无序列表的开始和结束,<li>表示这是一个列表项。一个无序列表可以包含多个列表项。
ul标签和li标签也需要配合一起使用,不可以单独使用,而且ul标签的子标签也只能是li标签,不能是其他标签。文本也不能直接放在ul元素内。
type属性:‘disc’、‘circle’、‘square’。对于无序列表的列表项符号,等学了CSS之后,我们可以不再使用type属性,而应使用liststyle-type属性。
在实际的前端开发中,无序列表比有序列表更为实用。更准确地说,一般使用的都是无序列表,几乎用不到有序列表。
- 定义列表
在HTML中,定义列表由两部分组成:名词和描述。
<!-- 定义列表 -->
<dl>
<dt>名词</dt>
<dd>描述</dd>
</dl>
dl即definition list(定义列表),dt即definition term(定义名词),而dd即definition description(定义描述)。
在该语法中,<dl>标记和</dl>标记分别定义了定义列表的开始和结束,dt标签用于添加要解释的名词,而dd标签用于添加该名词的具体解释。
- HTML语义化
HTML的精髓就在于标签的语义。在HTML中,大部分标签都有它自身的语义。例如,p标签,表示的是paragraph,标记的是一个段落;h1标签,表示的是header1,标记的是一个最高级标题。但div和span是无语义的标签,我们应该优先使用其他有语义的标签。
在HTML中,语义化是非常重要的一个思想。语义化提高了代码的可读性,语义化对于搜索引擎优化(即SEO)来说,也是极其重要的。
我们学习HTML的目的并不是记住所有的标签,而是在你需要的地方能使用正确的语义化标签。把标签用在对的地方,这才是学习HTML的目的所在。
表格标签
表格的作用:使用表格可以更清晰地排列数据。
- 基本结构
在HTML中,一个表格一般由以下3个部分组成:
- 表格:**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>”,就表示有多少行。
- 完整结构
一个表格的“完整结构”不是只有table、tr、td,还包括caption、th等。
- 在HTML中,表格一般都会有一个标题,我们可以使用caption标签来实现。
<caption>表格标题</caption>
一个表格只能有一个标题,也就是只能有一个caption标签。在默认情况下,标题位于整个表格的第一行。
- 在HTML中,单元格其实有两种:一种是“表头单元格”,使用的是th标签;另一种是“表行单元格”,使用的是td标签。
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
th和td的区别:
显示上:浏览器会以“粗体”和“居中”来显示th标签中的内容,但是td标签不会。
语义上:th标签用于表头,而td标签用于表行。
- 表格语义化
一个完整的表格包含:table、caption、tr、th、td。为了更进一步地对表格进行语义化,HTML引入了thead、tbody和tfoot这3个标签。
thead、tbody和tfoot把表格划分为3部分:表头、表身、表脚。有了这些标签,表格语义更加良好,结构更加清晰,也更具有可读性和可维护性。
表脚(tfoot)往往用于统计数据。对于thead、tbody和tfoot标签,不一定需要全部都用上,如tfoot就很少用。一般情况下,我们根据实际需要来使用这些标签。
- 合并行:rowspan
在HTML中,我们可以使用rowspan属性来合并行。所谓的合并行,指的是将“纵向的N个单元格”合并。
<tr>
<td rowspan="2">合并行</td>
<td>单元格</td>
</tr>
- 合并列:colspan
在HTML中,我们可以使用colspan属性来合并列。所谓的合并列,指的是将“横向的N个单元格”合并。
<tr>
<td colspan="2">单元格</td>
</tr>