补充，html标签

最新推荐文章于 2025-12-05 21:25:13 发布

原创最新推荐文章于 2025-12-05 21:25:13 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3

本文深入解析HTML、CSS、JavaScript等前端标签的用法，探讨独占与非独占元素布局，以及如何灵活运用align、type属性。同时涵盖了样式定制与div、span的区别，助力理解基础网页设计。

独占一行
<h1>标题</h1>
<p>段落标签</p>
<hr>   水平线
<ul>      
    <li>无序列表</li>
</ul>
<ol>
    <li>有序列表</li>
</ol>
<dl>
    <dt>城市</dt>
    <dd>北京</dd>
    <dd>上海</dd>
</dl>
------------------------------------------------------------------------------------------
不独占一行，可以和其他元素排列在一起的
<u>下划线</u>  下划线
<s>删除</s>  删除 
<em>倾斜 </em> 
<i>倾斜</i>   
<b>加粗 </b>  
<strong> 加粗</strong> 
<sub>下标</sub>  
<sup> 上标</sup> 
<a href=''></a>
<span></span>   效果上没有特殊的效果，但是可以包裹文字进行更改样式
----------------------------------------------

a标签
<a href='' title=''  target='_new'></a>
<a href='' title=''  target='_blank'></a>
<a href='' title=''  target='_self'></a>

--------------------------------------------
<img src='' alt=‘图片加载失败的提示信息’  title='鼠标移入的提示文字'>

路径：
  绝对路径  C:\Users\94560\Desktop\qf_project1\day01\code\taobao\images\pig.jpg
  相对路径  相对于当前文件的路径
            ./    访问同级目录
            ../    访问上级目录
            ./images/1.jpg  访问下级目录




------------------------------------------------------------------
注意：
独占一行的这些标签内部可以嵌套 不独占一行的标签

<p>
   <a href=''></a>
</p>

<h1>
   <a href=''></a>
</h1>


<h1>
   <span></span>
</h1>

标签的属性

独占一行的标签的共有属性：align（水平方向对齐方式）：left、center、right
<h1 align='center'>标题</h1>
<p align='center'>段落标签</p>
<ul>      
    <li align='center'>无序列表</li>
</ul>

-----------------------------------------------------------
列表属性：type（类型）

无序列表：type='circle'
         type='disc'
         type='square'

有序：type='a'
     type='A'
     type='i'
     type='I'

span标签

span 标签用来定义文本内容，可以是单独的一句话，一些内容，也可以是段落里面的内容。如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。span 标签是不带任何默认样式的，所以它极大的提高了我们可以对文本内容自定义样式的需求。

span标签的特点：

不独占一行，可以和其他元素排列在一起
span标签不支持align属性
span不能设置宽度和高度
span标签设置背景时，字的宽度就是span的宽度
span标签可以嵌套在div或者p等标签内

div标签

div 标签，称为盒子。作用是设定内容的摆放位置。div 标签可以把文档分割为独立的、不同的部分。div 就相当于一个区域，我们把我们网页内容的都放在这个区域里面。

div的特点：

独占一行
支持align属性
可以设置宽度和高度
div 没有任何的默认样式，所以它不会像 P 标签和 H 标签一样，有上下间距
div 标签里面可以嵌套其他任意标签。
我们可以给某些单独的标签外层包裹一个 div，比如 img 标签，a 标签，这样方便我们后续为其设置样式。

单词总结：

width：宽度
height：高度
color：字体颜色
background-color：背景颜色
font-size:字体大小
font-weight:字体大小
font-family:字体类型
text-align:center字体水平居中
line-height:(当它等于height是字体垂直居中，大于偏下，小于偏上)
padding：内边距
margin：外边距

padding-top：上内边距
padding-bottom：下内边距
padding-left：左内边距
padding-right：右内边距

margin-top：上外边距
margin-bottom：下外边距
margin-left：左外边距
margin-right：右外边距

border：边框

边框有三个属性值： 
border：1px solid red; 粗细1px  实线  红色