黑马-前端-常用的标签即基本语句

起风的蛋挞

已于 2023-04-15 20:45:13 修改

阅读量160

点赞数

文章标签：前端 java javascript

于 2023-04-14 20:57:51 首次发布

本文链接：https://blog.csdn.net/m0_65163985/article/details/130111072

版权

四.<div>和<span>盒子标签

一、自带的基本语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

二、常用的标签

1. 标题标签

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

<h1>我是一级标题</h1>

特点∶

加了标题的文字会变的加粗，字号也会依次变大
一个标题独占一行。

效果如下

2. 段落和换行标签

<p> </p>

它可以将整个网页分为若干个段落

<p>我是一个段落标签</p>

特点︰

文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。

<br />

如果希望某段文本强制换行显示，就需要使用换行标签<br/>。
特点∶

<br />是个单标签。
<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

代码展示

某个例题

三、文本格式化标签

标签语义:突出重要性,比普通文字更重要.

1. 加粗

<strong></strong> 或者 <b></b>

更推荐使用<strong>标签加粗语义更强烈

2. 倾斜

<em></em> 或者 <i></i>

更推荐使用<em>标签加粗语义更强玄

3. 删除线

<del></del 或者 <s></s>

更推荐使用<del>标签加粗语义更强柔

4. 下划线

<ins></ins>或者<u></u>

更推荐使用<ins>标签加粗语义更强烈

代码展示

四. <div>和<span>盒子标签

<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的。

特点:

<div>标签用来布局，但是现在一行只能放一个<div>。大盒子
<span>标签用来布局，一行上可以多个<span>。小盒子

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

代码即效果展示

五、图像标签和路径

1. 定义用法

<img>标签用于定义HTML页面中的图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

<img src="图像URL"/>

2. 对于路径

学习路径首先需要知道的知识

相对路径

绝对路径

3. 图片属性的定义

代码

</head>
<body>
    <h4>图像标签的使用:</h4>
    <img src="img.jpg"/>
    <h4>alt替换文本图像显示不出来的时候用文字替换:</h4>
    <img src="img1.jpg" alt我是pink老师”/>
</body>
</html>

六、链接标签

关于target

打开方式有两种

_self 在当前窗口打开
_blank 另起一个新窗口打开链接

<h3>在当前窗口打开</h3>
<a href="https://www.bilibili.com/" target="_self"> 哔哩哔哩 </a>
<h3>另起一个窗口打开</h3>
<a href="https://www.bilibili.com/" target="_blank"> 哔哩哔哩 </a>