HTML常用标签(1) | 青训营笔记

171 阅读6分钟

DAY 3

标题标签(h1~h6)

HTML提供了6个等级的网页标题标签是,h1~h6,标题依次从大到小,h1最大,h6最小。

特点:加了标题的文本字体会变粗,字号变大,一个标题独占一行。

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

image.png

段落标签:p

在html中,p标签用于定义段落,可以将网页分为若干个段落。

特点:

  1. 文本在一个段落中会自动换行。
  2. 段落之间保留一定的空隙。
<p>《骆驼祥子》通过人力车夫“祥子”一生几起几落、最终沉沦的故事,揭露了半殖民地半封建的中国社会底层人民的悲苦命运。祥子的遭遇,证明了半殖民地、半封建的时代里的劳动人民想通过自己的勤劳和个人奋斗来改变处境,是根本不可能的。</p>
    <p>小说刻画了许多像祥子一样的小人物形象。那些小人物中有的因战乱导致家人离散而不得不相依为命,有的不堪家庭重负,有的为养活兄弟而出卖肉体。社会底层的劳苦大众的悲剧是整整一个时代的悲剧,身处其中的每一分子到头来都逃脱不了祥子一样的命运,除非他们认清楚自己的现状,联合起来推翻那吃人的社会与制度。</p>
    <p>祥子的一生,反映了20世纪20年代中国破产农民在“市民化”过程中的沉沦,因而祥子的悲剧不仅仅是他个人的悲剧,而是包含着更为深刻的文化和时代因素。作者带着对民族、文化的出路的关切来剖析祥子的命运,既从传统文明中的积极因素出发批判现代畸形文明的负面效应,为传统美德的沦落而痛惜,又不满于祥子身上所积淀的民族文化的劣根性,既诅咒那个“把人变成鬼”的黑暗的社会和制度,又痛心于无知、愚昧的善良民众在病态的旧社会的堕落。</p>

image.png

换行标签:br

如果希望某段文本在某个位置强制换行,就可以用换行标签br。

注意:br元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签,是单标签。br跟p不一样,p分出来的段落之间会有一些间距,但是简单的换行不会。

<p>这是一个段落,我在这里强制换行<br>这里就会另起一行,但跟上一行是同一个段落</p>
<p>这是另一个段落</p>

image.png

文本格式化标签

网页中可以对文字设置加粗、斜体、下划线等效果,需要用到文本格式化标签

加粗:strong或者b,推荐用string

斜体:em或者i,推荐用em

删除线:del或者s,推荐用del

下划线:ins或者u,推荐用ins

    <strong>粗体:今晚吃什么?</strong>
    <b>粗体:今晚吃什么?</b>
    
    <em>斜体:今晚吃什么?</em>
    <i>斜体:今晚吃什么?</i>
    
    <del>删除线:今晚吃什么?</del>
    <s>删除线:今晚吃什么?</s>
    
    <ins>下划线:今晚吃什么?</ins>
    <u>下划线:今晚吃什么?</u>

image.png

分组标签

div:division的缩写,表示分割,分区;指定渲染HTML的容器,配合css完成网页的基本布局。块级元素。

span:span表示跨度,跨距。指定内嵌文本容器,配合css修改网页的局部信息。行内元素。

<span>这是span,行内元素,一行可有多个span</span>
<div>这是div,块级元素,一行只能放一个div,一个div独占一行</div>

div和span标签都用来布局,但是它两都没有语义,就是一个盒子。 可以这样理解:

div是一个大盒子,它在网页中,独自一个人占一行。

span是一个小盒子,它在网页中,一行可以有几个span。

div里可以嵌套span。

二者区别:

  1. div是块级元素,span是行内元素。
  2. div只能单独在一行,span可以不单独在一行。
  3. div是一个容器级别的标签(可以嵌套其它所有的标签 ,div,h,ul,ol,dl,li等),span是文本级别的标签(能嵌套文字,超链接(a),图片(img),span,p,strong,em等)。

二者的使用场景?

div一般用于网页布局,span一般用于局部文字的样式。

图像标签

在HTML中,img标签用于定义网页图像。

<img src="url">

src是源属性,也是img标签的必须属性。源属性的值是图像的 URL 地址,用于指定图像文件的路径和文件名。 src相当于一把钥匙,打开存放图片的抽屉。没有这把钥匙,连图片都拿不出来,就无法对图片进行宽高度、边框粗细调整等的处理。

讲到这里,你可能有些疑惑,属性是什么?

所谓属性,就是这个图像标签的特征。除了src,img标签还有其他的属性:

屏幕截图 2023-04-15 103929.jpg

图像标签要注意以下几点:

  1. 可有多个属性,但都要写在img后面
  2. 属性之间不分先后顺序,属性之间用空格分开,不要写逗号
  3. 采取 键值对 的格式,即key="value"

图像标签的路径

图像文件的路径用路径表示,路径又分为相对路径绝对路径

相对路径: 从该HTML代码文件所在位置出发,到目标文件的位置。

image.png 这里的同一级、上一级、下一级是目标图像针对该HTML页面代码文件所在位置而言的。

绝对路径: 目录下的绝对位置,即从盘开始的完整路径。 例如:C:\Users\Hloton\Pictures\kun\stage.jpg

超链接标签

HTML使用标签a来设置超文本链接,在标签a中使用了href属性来描述链接的地址。

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href和target两个属性的作用如下: image.png

链接分类

1.外部链接:

<a href="http://www.baidu.com">百度一下</a>

2.内部链接: 网站内部页面的相互链接,直接连接内部页面名称即可。

<a href="index.html">返回首页</a>

3.空链接: 没有确定链接目标时,href的值直接用#表示。

<a href="#">返回首页</a>

4.锚点链接: 点击某链接可以快速定位到页面中的某个位置

第一步: 在链接文本的href属性中,设置属性值为“#id名”的形式

<a href="#live">个人生活</a>

比如这里将“个人生活”设置为链接,该链接的href属性设置了一个锚点,名字是“live”

第二步: 设置目标位置,在对应的标签里添加id属性,属性值即为链接里的id名,即可将链接定位到这里

<h3 id="live">个人生活介绍如下:</h3>

那么当点击“个人介绍”的链接时,即可快速定位到“个人生活介绍如下”这个标题位置。

注释标签

添加注释快捷键:ctrl+/

<!--这是一条注释语句-->

特殊字符

HTML中有一些特殊字符不方便直接打上去,就有以下字符可以替代:

image.png 其中,空格、大于号、小于号用的比较多,需要记住,其他字符查阅即可。