基础标签及使用介绍

p标签

段落标签
双标签
块级标签
此时p标签的父元素是body标签
特点：
1.在没有设置宽度的情况下，p标签的宽度给父元素的宽度一样
2.在没有设置高度的情况下，p标签的高度由内容撑开
3.垂直布局，独立成行（一个p标签占一行）
4.自带外间距（两个盒子之间的距离）
​
应用场景：文章中的段落
​
注意： p标签不能嵌套块级标签(div p h1-h6)
​
语法：
<p></p>
<p>昨天北京官方辟谣：北京将进行2天静默</p>
​
​

hr标签

hr标签
水平分割线
单标签  
语法：
<hr> 或者  <hr />
​
块级标签
1.在没有设置宽度的情况下，hr标签的宽度给父元素的宽度一样
​
2.垂直布局，独立成行（一个p标签占一行）
3.自带外间距（两个盒子之间的距离） 
4.自带边框
​
常用场景：
在页面中显示一条水平线
​
​
​
文本对齐小技巧：
1.选中需要操作的文字
​
按shift+tab
对齐
​
2.或者选中换行的文字，按tab

br标签

    br标签
    强制换行的作用
    单标签
    语法：
    <br> 或者   <br />
    应用场景：
    用于强制换行
    注意：br标签不参与标签分类（了解）

图片标签

 语法：
     <img src="" alt="">
     <img src="" alt="" />
​
     单标签
    行内块标签
   src属性：图片的路径
   alt属性：指定替换文本，当图片路径错误的时候或者图片加载不出来的时候显示的文字
   title属性：当鼠标悬停在图片上显示的文字
   水平布局（多个图片在一行显示，一行放不下会自动折行）
   width:宽度  width=""  px单位，可以省略
   height：高度
   在图标标签里设置宽高
​
​
<!-- 路径错误  1111.jpg没有这张图片，无法显示-->
  <img src="./image/1111.jpg" alt="">
  <!-- alt属性，当图片路径错误的时候显示的文字 -->
  <img src="./image/1111.jpg" alt="打架吗">
​
  <!-- title属性  在图片标签添加title=''-->
​
  <img src="./image/moluoge_03.jpg" alt="moluoge" title="摩洛哥图片">