一. HTML常用标签
1. 标签语义
学习标签是有技巧的,重点是记住每个标签的语义,简单理解就是指标签的含义,即这个标签使用来干什么的。
根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。
2. 标题标签<h1> - <h6>
为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个登机的网页标题。即<h1> - <h6>.
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
执行效果如下:
单词head的缩写,意为头部、标题。
标签语义:作为标题使用,并且依据重要性递减。
特点:
1. 加了标题的文字会变的加粗,字号也会依次变大。
2. 每个标题都是独占一行的。
3. 段落标签和换行标签
3.1 段落标签
在网页中,要把文字有提条理的展示出来,就需要将这些文字分段显示,在HTML标签中,<p>标签用于定义段落,它可以将整个网页分为若干个段落。
<p>我是一个段落标签</p>
单词paragraph的缩写,意为段落。
标签语义:可以把HTML文档分割为若干段落。
特点:
(1)文本在一个段落中会根据浏览器窗口的大小自动换行。
(2)段落和段落之间保有空隙。
3.2 换行标签
在HTML中,一个段落的文字会从左到右依次排列,直到浏览器窗口的右端。然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签<br />。
单词break的缩写,意为打断、换行。
标签语义:强制换行。
特点:
(1)<br />是个单标签。
(2)<br />只是简单的开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
3.3 案例练习
联合使用标题、段落、换行标签。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>如何做一个好的程序员</h1>
<h4>首先解决困难的任务</h4>
<p>在开始为新的软件或应用程序编写代码之前,您需要布置任务计划。有了计划将为您提供最终目标的路线图,从而使编码过程更轻松,更有条理。</p>
<p>一旦完成了攻击计划的制定,您可能会注意到一些比其他任务困难的任务。</p>
<p>您无需尝试解决这些困难的任务,而应首先尝试解决它们。尽管您可能不愿承担编码过程中的这些较困难的方面,但您将很高兴您立即将它们排除在外。一旦完成所有这些具有挑战性的任务,就可以轻松完成项目的其余部分。</p>
<h4>不要忘了运用软技能</h4>
<p>大多数新程序员最大的误解是,要想在这个行业取得成功,他们要做的就是学习流行的编程语言。尽管这些知识将帮助您取得整体成功,但要想跻身行业之巅,还需要做更多的工作。</p>
<p> 作者:不知道
<br /> 田小江抄新闻
<br /> 2020-12-08
<br />
</p>
</body>
</html>
效果如下:
4. 文本格式化标签
在网页中,有时需要为文字设置粗体、斜体或者下划线等效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。
标签语义:突出重要性,比普通文字更重要。
4.1 加粗
<strong>加粗--语义更强烈的加粗标签</strong>
<b>加粗</b>
运行效果如下:
更推荐使用 <strong>标签加粗,语义更强烈。
4.2 倾斜
<em>倾斜--语义更强烈的倾斜标签</em>
<i>倾斜</i>
运行效果如下:
更推荐使用 <em>标签倾斜,语义更强烈。
4.3 删除线
<del>删除线--语义更强烈的删除线标签</del>
<s>删除线</s>
运行效果如下:
更推荐使用 <del>标签表示删除线,语义更强烈。
4.4 下划线
<ins>下划线--语义更强类的下划线标签</ins>
<u>下划线</u>
运行效果如下:
更推荐使用 <ins>标签表示下划线,语义更强烈。
5.<div>和<span>标签
<div>和<span>是没有语义的。它们就是一个盒子,用来装内容的。布局用的。
<div>这是头部</div>
<span>这是另一块</span>
运行效果如下:
div是division的缩写,表示分割、分区。span意为跨度、跨距。
特点:
(1)<div>标签用来布局,但是现在一行只能放一个<div>。大盒子。
(2)<span>标签用来布局,一行上可以多个<span>。小盒子。