标签
-
单标签
<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 实线 红色