CSS和HTML的基础知识(一)——HTML常用标签的简介及用法

    

  在学习css和HTML过程中,我们会遇到各种各样的标签以及标签属性,并且由于标签的多样性,也使得同一个样式或者同一块区域内容,实现的方式有很多种,这也就造成了代码的多样性。也可以确切的说,我们在新建一个网页的过程中,由于每个人想法的不同,实现方式就会存在多样性。但是,不管使用哪种方法,我们唯一的目的就是建好一个网站。因此,我们在创建网站过程中,基础知识点的合理运用尤为关键。

  我们首先要了解,一个网页是由多种标签堆合而成的,这里面便存在:基本标签、基本行级标签、基本块级标签。如果我们将网页进行划分的话,我们会很清楚的发现,网页其实就是由许多块级标签进行区域分割,再由行级标签进行内容填充。当然这里面还包含了一些浮动、定位等一些基本语法,这一讲主要讲解基本标签的使用。

  对于新接触者来讲,各种标签的熟悉记忆也显得尤为重要。

  从写法上来看,HTML标签可分为“成对标签”和“自闭和标签”。“成对标签”标签成对出现,有开始标签,必须要有结束标签,内容包含在两个标签之间。

  从功能上,HTML标签科分为块级标签和行级标签。二者基本的区别在于:

  (1)块级标签自动换行,前后隔一行;行级标签不会自动换行,从左往右依次排序。

  (2)块级标签默认宽度为100%,行级标签宽度由里面的文字撑开。

  (3)块级标签可以设置宽高、内外边距,行级标签不能设置(在没有设置其他属性的前提下)

  常用的标签:

  link标签,常用于将网页与其他文件进行连接。其中rel属性表示去即将连接的文件与当前网页的关系。

 

     link标签用于将网页和其他文件进行连接。
    rel="icon" rel属性表示即将连接的文件,与当前网页的关系。 属性值选择icon表示即将连接的文件,是当前网页的图标。
     rel 是标签的属性 "icon" 是标签的属性值,属性值必须用引号引起来。

    href="" 表示所要连接的图片地址。

 

  figure:图片组合标签。用于将图片与下方的标题进行包裹,图片使用img表示,标题使用figcaption表示。

  div:网页制作过程中最常用的块级标签,可以包裹任何标签。

  img:图片标签。图片所在的路径,我们通常使用的是相对路径,

  (1)网络图片地址。不建议使用,网络路径

  (2)使用图片在本地的绝对路径,严禁使用。因为使用file://协议引入的图片,
由于网页使用的http协议,所以无法访问图片,但是如果将网址改为file://协议

  (3)使用相对路径,推荐使用的唯一目录
    当图片在当前文件的下一层时,使用“文件名/图片名”表示;
    当图片与当前文件在同一文件夹下,使用图片名表示;
    当图片在当前文件的上一层时。使用“../图片名” 注:../表示返回上层

注意: 1,图片必须包含在项目里面,不可以退出项目根目录。
    2,width height 图片的宽度高度
    3,title 当鼠标指上图片后显示的文字
    4,alt 当图片无法加载时显示的文字,如果省略alt,则图片无法加载时显示title的文字
    5,align:图片两边的文字相对于图片的排列方式
    top 文字居上 ;center 文字居中;bottom 文字居下

 

  a标签:超链接标签

 

  (1)href属性:超链接即将跳转的页面,可以是网络地址,也可以是本地的html;
  (2)target属性:设置页面打开的位置。_self 当前页面打开(为默认)_blank在新页面打开
  (3)title:当鼠标点上后显示打的文字

    功能性连接:

    1,mailto:<a href="mailto://18364316836@163.com">1111</a>

   
 2,tencent:与指定qq聊天

      <a href="tencent://message/?uin=412988805">1111</a>

    3,锚链接:点击超链接跳转到页面的指定位置(锚点)
      a,在页面的指定位置设定一个锚点
      <a name="top"></a>
      b,将超链接的href属性设置为“#锚点名称”
      <a href="#top">点我回到顶部</a>
      c,跳转到其他页面的指定位置

 

  常见的引用标签:blockquote、q、cite
  区别:
  (1)从显示效果上blockquote是块级标签且整段缩进;q显示为加引号;cite为倾斜
  (2)从功能上:blockquote用于引用一整段内容;q用于引用一句话;cite通常用于书画、作品名引用

 

 以上为我所总结的常用的基本标签,不是很详细,不过在学习HTML过程中会遇到许多各种功能性的标签,因此,学习HTML其实就是一个不断积累的过程。

  

    

转载于:https://www.cnblogs.com/Code-ccc/p/8596799.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
电子图书资源服务系统是一款基于 Java Swing 的 C-S 应用,旨在提供电子图书资源一站式服务,可从系统提供的图书资源直接检索资源并进行下载。.zip优质项目,资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松copy复刻,拿到资料包后可轻松复现出一样的项目。 本人系统开发经验充足,有任何使用问题欢迎随时与我联系,我会及时为你解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明(若有),项目具体内容可查看下方的资源详情。 【附带帮助】: 若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步。 【本人专注计算机领域】: 有任何使用问题欢迎随时与我联系,我会及时解答,第一时间为你提供帮助,CSDN博客端可私信,为你解惑,欢迎交流。 【适合场景】: 相关项目设计,皆可应用在项目开发、毕业设计、课程设计、期末/期/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面 可借鉴此优质项目实现复刻,也可以基于此项目进行扩展来开发出更多功能 【无积分此资源可联系获取】 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等,一切后果由使用者承担。 2. 部分字体以及插图等来自网络,若是侵权请联系删除。积分/付费仅作为资源整理辛苦费用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值