前端基础——双单标签、行内块级元素、路径、常用标签

爱喝牛奶~

已于 2022-08-31 20:58:27 修改

阅读量3.8k

点赞数 3

文章标签： html5 jquery css chrome css3

于 2022-03-19 21:29:48 首次发布

本文链接：https://blog.csdn.net/qq_52301431/article/details/123600909

版权

一、单标签和双标签：

在HTML基础中，单标签就是由一个标签组成的。

例如<br>、<hr>、<img>、<input>、<param>、<meta>、<link>。

而双标签则是由“开始标签”和“结束标签”两部分构成（这两部分是相同的）。

例如<html>、<head>、<title>、<body>、<table>、<tr>、<td>、<span>、<p>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<object>、<style>、<b>、<u>、<strong>、<i>、<div>、<a>、<script>、<center>（双标签的一部分）。

二、行内元素和块级元素：

行内元素：不可以设施宽高，不会换行

块级元素：可以设置宽高，会换行

三、标签

1、段落标签：（单词缩写：paragraph 段落）

格式：<p>我是一个段落</p>

默认情况下，一个段落中的文字会依据浏览器的大小自动换行，会有段前与段后。

2、水平线标签：（单词缩写：horizontal 横线）

格式：<hr /> 或者 <hr> 单标签，不是块级标签

3、换行标签：（单词缩写：break 打断，换行）

格式：<br /> 或者 <br> 单标签，不是块级标签

4、div （单词缩写：division 分区）

作用与特点：网页布局的盒子，不会修饰文本，会进行换行（块元素）

格式：<div>这是div</div>

5、span标签

作用与特点：网页布局的盒子，不会修饰文本，一般用来放文本，不会进行换行（行内元素）

格式：<span>这是span</span>

6、文本修饰标签

标签	显示效果
<i></i> <em></em>	文字以斜体方式显示（XHTML之后推荐使用em）
<s></s> <del></del>	文字以加删除线方式显示（XHTML之后推荐使用del）
<b></b> <strong></strong>	文字以粗体方式显示（XHTML之后推荐使用strong）
<u></u> <ins></ins>	文字以加下划线方式显示（XHTML之后不赞成使用u）

b i s u没有强调的意思，strong、em、del、ins语义更强烈，有强调的意思

<strong>
        <em>
            加粗且倾斜
        </em>
    </strong>


（strong为父元素或者父标签）
效果为：

嵌套规范：

1、内联（行内元素）不能嵌套块级，块级可以嵌套内联元素

2、有几个特殊的块级元素只能嵌套内联元素：h1-h6、p、dt

p标签只能嵌套行内元素，不能嵌套块级元素，也不能嵌套自己，不然就不会表现块级元素的特点
    <p>
        <div>
            wode hehhh
            vdgwh
        </div>
    </p>

后台检查里面显示的是：
<p>   </p>
<div>  wode hehhh vdgwh</div>
<p></p>
3、<li> <dd> 标签可以嵌套任何元素<li><ul><li><./li></ul></li>

4、<a>标签最好不要嵌套块级元素，可以嵌套内联元素，但是不能嵌套<a>和<input>之类的标签

5、ul和ol的子元素只能是li，不能是别的元素

6、button里面不要嵌套a标签，不然在js里面会有两个事件，还有就是button里面放img要记得给图片添加alt属性

7、图片标签（image图片）

格式： <img src=" 这里放图片的路径 " >

src是img的必须要的属性，还有其它属性：

alt=" 这是一张为加载出来的图片 ” 提示作用：当图片不能显示的时候，就显示此文字

border=“10” 边框，值为数字

width="100" 宽度，值为数字

height="20" 高度，值为数字

（如果只写width或者height属性，对应的另一个属性都会等比例缩放）

<img>标签是行内元素，但是它可以设置宽高，也不会换行，这种特性称为行内块级标签

8、pre标签

此标签出现原因有两种：第一个是换行，就是格式方面可以保持html所写的格式。第二种就是空格会保留。一般不用这个标签，因为很多字体等他会自己改变。

Tips：