html.

最新推荐文章于 2024-10-17 15:53:46 发布

祝佳淼

最新推荐文章于 2024-10-17 15:53:46 发布

阅读量382

点赞数 3

文章标签： html 前端

本文链接：https://blog.csdn.net/ZhuJiaMiao/article/details/137105790

版权

本文详细介绍了HTML中的div和span标签的区别，包括它们在布局中的作用，以及CSS的选择器类型如标签选择器、ID选择器、类选择器、伪类选择器等的用法和优先级。

摘要由CSDN通过智能技术生成

知识点-div和span
1.目标知道div和span区别
路径
   1.什么是div和span
   2.div和span的区别
讲解
什么是div和span
   div是html里面的一个标签<div></div>,没有特定含义，作为容器，一般用配合css完成网页的基本布局
   span也是一个标签<span></span>，没有特定含义，一般作为文本容器
div和span的区别
   div是块级元素(eg:h1,p)会独占一行，span是行内元素（eg:b,i,img）不会独占一行,

span标签：span表示跨度，跨距，没有什么特殊含义，常用来装内容，与div不同的是，一行可以放多个span标签。

<!--div标签是容器标签，块级元素，可以嵌入任何标签
span标签是文本容器标签，行内元素，可以嵌入文本标签，图片标签，超链标签

CSS：重叠样式表用来美化页面
CSS语法格式{
       属性名：属性值1 属性值2....;
       属性名：属性值1 属性值2....;
       ....
   }
hrml引入CSS：
内联引入：在style属性中书写样式
内部引入：在style标签中书写样式
外部引入：通过link标签引入外部的CSS文件

如果内联样式，内部样式，外部样式有相同设置，优先级高的就是：内联>内部>外部
常用样式写法：外部

CSS选择器
标签选择器：就是用标签元素的名字。<div> div <p> p <a> a
ID选择器：通过id属性给标签设置的id值。<div id="d1">#d1 <p id="p1">#p1 <a id="a1"> #a1
类选择器：通过class属性给标签设置class值。 <div class="d1"> .d1 <p class="p1">.p1
通过选择器：*{}选择了所有标签

ID选择器>类选择器>标签选择器>通用选择器

层级选择器1 选择器2 选择器n{ } <div><p class="p1"></p><p class="p2"></p><div>
属性选择器：选择器[ 属性名=值]{} <input name="username"><input name="sex">
并级选择器：选择器1，选择器2，选择器n{ } <div class="p1"></div><div class="p2"></div>

伪类选择器：<a>
-->
/

<!DOCTYPE html>
<html>
<head>
   <title> </title>
   <style type="text/css">
       /* 标签选择器*/
       div{
           font-size：24px;
       }
</style>
<link rel="stylesheet" type="text/css" href+"eg7.css"/>
</head>
<body>
<div> style="color:blue;font-size:12px">这是一行文本</div>
</body>
</html>