补充,html标签

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

标签

  • 单标签

<hr>  水平线
<br>  换行
<img src='图片路径'>
  • 双标签

独占一行
<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  实线  红色
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值