HTML常用标签| 青训营笔记

154 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

1. HTML常用标签

 首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了。 不会再给结构标签指定样式了。

 HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,我们可以查下手册就可以了。

1.1 排版标签

排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签。

总结.jpeg

1)标题标签h (熟记)

 单词缩写:  head   头部. 标题       title  文档标题

为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即

标题标签语义:  作为标题使用,并且依据重要性递减

其基本语法格式如下:


<h1>   标题文本   </h1>

<h2>   标题文本   </h2>

<h3>   标题文本   </h3>

<h4>   标题文本   </h4>

<h5>   标题文本   </h5>

<h6>   标题文本   </h6>

小结 :

  • 加了标题的文字会变的加粗,字号也会依次变大

  • 一行是只能放一个标题的

2)段落标签p ( 熟记)

单词缩写:  paragraph  段落  [ˈpærəgræf]    无须记这个单词

作用语义:

可以把 HTML 文档分割为若干段落

 在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是


<p>  文本内容  </p>

是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

3)水平线标签hr(认识)

单词缩写:  horizontal  横线    [ˌhɔrəˈzɑntl]    同上

在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,


就是创建横跨网页水平线的标签。其基本语法格式如下:


<hr />是单标签

 在网页中显示默认样式的水平线。

4)换行标签br (熟记)

单词缩写:  break   打断 ,换行

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签


<br />

这时如果还像在word中直接敲回车键换行就不起作用了。

5)div 和  span标签(重点)

div   span    是没有语义的     是我们网页布局主要的2个盒子   想必你听过  css+div

div 就是  division  的缩写   分割, 分区的意思  其实有很多div 来组合网页。

span   跨度,跨距;范围    

语法格式:


<div> 这是头部 </div>    <span>今日价格</span>

他们两个都是盒子,用来装我们网页元素的, 只不过他们有区别,现在我们记住

  • div标签  用来布局的,但是现在一行只能放一个div

  • span标签  用来布局的,一行上可以放好多个span

后面后面讲显示模式的时候,会告诉大家