HTML 标签

作者: xiaoshengMar | 来源:发表于2021-05-18 00:06 被阅读0次
    • HTML 标签是由尖括号包围的关键词
    • HTML 分成单标签和双标签
      • 双标签会多一些,一般都是成对出现的,如 <div></div>, 左边的是开始标签,右边的是结束标签
      • 单标签 <br>
    • 标签关系
      • 有包含关系,也有并列关系

    基本结构标签

    • <!DOCTYPE> : 文档类型的声明标签,作用是告诉浏览器使用哪种 HTML 版本来显示网页
      <!DOCTYPE html> 表示的是使用 HTML5 版本
    • <html></html> : 页面中最大的标签,称为根标签
    • <head></head> : 文档的头部标签,在该标签中需要设置 title 标签
    • <title></title> : 设置网页的标题
    • <body></body> : 页面的主要内容都是放在该标签下面的

    head 标签中的内容

    • <meta charset="UTF-8"> : 设置 HTML 文件应该使用哪种字符编码,常用的有 GB2312 (简体中文),BIG5(繁体中文),GBK(包含简体和繁体),utf-8,其中 utf-8 被称为万国码,基本包含了全世界所有国家需要用到的字符

    常见标签

    标签语义

    • 根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰
    • 标题标签
      • 双标签
      • <h1> - <h6> 一共 6 级标签
      • 标签语义:作为标题使用,表示重要性,并且依据重要性递减
      • 一个标题独占一行

    • 段落标签
      • 双标签
      • 可以用来定义段落,使文字显得更有条理
      • 会根据浏览器窗口的大小自动换行
      • 段落和段落之间留有空隙

    • 换行标签
      • 单标签
      • 强制文本换行
      • 是单词 break 的缩写,意为打断,换行

    • 文本格式化标签
      • 双标签
      • 标签语义:突出重要性,比普通文字更重要
      • strong 或者 b:加粗标签,推荐使用 strong
      • em 或者 i:倾斜标签,推荐使用 em
      • del 或者 s:删除线标签,推荐使用 del
      • ins 或者 u:下划线标签,推荐使用 ins

    • divspan
      • 双标签
      • 这两个标签都没有语义,只是一个盒子,用来装内容的
      • div
        • 单独占一行
      • span
        • 一行可以放很多个 span

    img 标签

    • 单标签
    • <img src=""/>
    • 标签属性:
      • src : 图片路径
      • alt:当图片显示不出来的时候显示的该属性里面的内容
      • title:当鼠标放上去的时候,显示的是该属性中的内容
      • width:设置图片的宽度,单位是像素
      • height:设置图片的高度,单位是像素
      • border:设置图片的边框粗细

    a 标签(超链接)

    • 双标签
    • 标签属性
      • href:跳转目标
      • target:默认为 _self,表示在当前窗口打开,_blank 表示在新窗口中打开
    • 链接分为以下几种:
      • 外部链接:跳转到外部网页中,此时 href 写域名
      • 内部链接:在网站内部页面之间进行跳转,此时 href 写页面的路径即可
      • 空链接:如果当时没有确定链接目标的话,href 可以写 #
      • 下载链接:当 href 的值是一个文件或者压缩包的时候,会下载这个文件
      • 网页元素链接:在网页的各种元素中,如文本,图像,表格,音频,视频等都可以添加链接
      • 锚点链接:点击链接,可以快速定位到页面中的某个位置
        • 具体案例
         <h3 id="two">顶部</h3>
         <a href="#top">回到顶部</a>
        

    相关文章

      网友评论

        本文标题:HTML 标签

        本文链接:https://www.haomeiwen.com/subject/leisjltx.html