htm基本标签

课程开始,今天学习了html的基本标签:

 div + span:

div和span两个是双标签,html中有双标签和单标签,下文中有单标签介绍 ,双标签成双成对出现例如:

<div>
       <span></span>
</div>

有<div>必定要有</div>这就是双标签的特性。

div和span没有语义它们的作用是进行对页面的布局 。在一个网页中div,span标签用的很多,可以说布局是写好网页的重要一环。

当然两者是有区别的,一个div标签独占一行,而span不同,span随着自身的内容而变换大小,内容有多宽有多高span标签就有多宽当然后续的学习中会有css来进行改变这里只是html。

排版标签:

h1~h6: h是head头部的首字母语义是标题,就如文档编写中的标题~标题6一样。

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

浏览器显示如下:

 

h1最大,从h1到h6依次递减 。

p: paragraph 段落 译为段落,段落标签简单易懂,就是网页中的文字段落不做过多介绍,写法:

<p>我的一个段落,我会自动换行,我是一个双标签</p>

hr+br: 这是两个单标签,单标签这样一个标签,规范写法:<hr /> <br /> 属于自闭合标签,但由于效率问题以及程序员的偷懒,所以现在我们写单标签时看到的是这种的:

<hr>   <br>  

hr标签也同样简单,hr是在浏览器中显示一条直线,如下图所示:

 

 中间的横线就是用hr来写的 后期学了css可以使这条线更加好看实用。

br:br是换行标签,当遇到一个段落很多很多文字,你想讲一段文字截断换行时可以使用 br 另外还可以使用标签之间的嵌套来使文字换行,如下:

  <p> 
        陈岚编剧,赵丽颖、林更新、窦骁、李沁领衔主演,邓伦、<p>我进行了换行</p> 金士杰特邀出演,王彦霖、牛骏峰、
    </p>

如下图所示

 

 

 img: img可以说是单标签中最特殊的一位了,但它的使用的频率也非常之高。img可以使用单表不能使用的属性例如宽高  

      img使用格式:<img src=“url” alt="">   属性中src是不可缺少的。

其他属性如下:

 

    

 

 a(超链接标签):单词缩写: anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的

a标签格式  <a href="要跳转的链接地址 ">点我跳转</a>    a标签是网页之间起到的跳转的作用,所以它的意义不言而喻。

属性作用
href 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能
target 用于指定链接页面的打开方式,其取值有self和blank两种,其中_self为默认值,__blank为在新窗口中打开方式。

 a标签中href可以不写值或者写一个# 号这样代表不跳转,除了给文本添加a标签外,还可以给其他的添加,例如图片,表格,列表,音频等等,后期的使用将会很频繁。

注释标签: 在写代码的过程中,一个页面会写上成百上千行的代码,或许,你写到后面,前面的代码你就不知道各自代表的是什么,这个时候程序员会花费精力去看代码,所以,注释就出现,它的作用就是为了给程序员标明代码的功能为程序员做一个标记标记一串代码是干嘛的,如下:

 

注释快捷键 alt+/  也可以手敲<!-- -->。

 路径写法: 上文中多次提到路径,无论是a标签还是img标签都离不开路径,路径在代码中出现的频率很高路径的写法如下:

想对路径:

路径分类符号说明
同一级路径   只需输入图像文件的名称即可,如<img src="baidu.gif" />
下一级路径 “/” 图像文件位于HTML文件同级文件夹下(例如文件夹名称为:images) 如<img src="images/baidu.gif" />
上一级路径 “../” 在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推, 如<img src="../baidu.gif" />

绝对路径:

     “D:\web\img\logo.gif”,或完整的网络地址,例如“https://www.cnblogs.com/2979100039-qq-con/p/13221456.html”。

 

个人学习,内容简略。

posted @ 2020-07-01 20:55  一生的风景  阅读(619)  评论(0编辑  收藏  举报