前端自学day01：html5标签的使用（1）

一、标题

1.标题标签定义

（1）标题标签通过<h1></h1> 、 <h2></h2>、<h3></h3>、 <h4></h4>、<h5></h5>、<h6></h6>表示

 运行效果：

 （2）自动生成h1~h6 标题标签快捷键 ：h$*6+回车

2.VSCode插件 快速打开浏览器

（1）VSCode扩展-->搜索open in brower-->安装 

（2）右键VSCode编辑框

         会弹出open in default browser

                     open in other  browser

      选择即可  （电脑截屏快捷键 windows+shift+s）

3.正确使用标题标签

   （1）正确使用标题有益于SEO，根据标题级别选择合适的标题标签。

   （2）在标题标签中添加 “align=left/center/right”  可以修改标题的位置

二、段落（p）、换行(br)、水平线(hr)

1.段落标签 p

   双标签，通常不会把文字单独放在外层，而是写在段落标签p里面

<p>我是一个段落标签</p>
<p>我是另一个段落标签</p>

2.换行标签 br

  单标签，文本中不产生一个新的段落而实现换行 

<p>我是一个段落标签</p>
<p>我是另一个段落标签在 <br>这句话之前我希望能够换行实现和前一句的分隔</p>

3.水平线标签 hr

   单标签，在页面中创建一条水平线 

   可以设置它的四个属性：color、width、size（高度）、align（对齐方式）

<hr color="red" width="500px" size="20px" align="right">
<hr color="black" width="500px" size="20px" align="left">
<hr color="green" width="500px" size="20px" align="">

三、图片 

（1） 图片标签 img 单标签

         图片和代码找到需要插入的图片的路径，写在src中（示例放在和该代码的统一文件目录下，直接写图片的名称即可）

 （2）属性

    src：路径

   ① 图片和代码在同一目录下

            src中直接写图片的名称即可

      ②绝对路径

          电脑的盘符存储与访问的具体地址

     ③相对路径

       子级关系(子侄）：/

            父级关系：../

       同级关系：

     ④网络路径 在src中写入网址

 

  alt：规定图片的替代文本（当图片不能正常显示时）

   <img src="study har.jpg" alt="this is a hard-working boy" >

  width：宽度 

  height：高度

  title：鼠标悬停在图片上的提示

  <img src="study hard.jpg" alt="this is a hard-working boy" width="300px" height="300px" title="我的封面">
  <img src="lovely girl.jpg" alt="this is a lovely girl " width="300px" title="lovely girl">