HTML全局架构标签-常用标签-多媒体标签

    Python编程 wuya 116次浏览 已收录 0个评论

    HTML简介

    • 说明:HTML是Hyper Text Markup Language的缩写,即超文本标记语言,所见即所得的文本。
    • 后缀:.html.htm,现在统一使用.html
    • 标签:是HTML文件的基本组成部分
      • 格式:属性值统一写在双引号中
      <标签名 属性1="值1" 属性2='值2' 属性3=值3>标签内容</标签名>
      <标签名 属性1="值1" 属性2='值2' 属性3=值3 />
      • 特点:
        • 双边标签都是成对出现的,单边标签加上自闭和的/
        • 标签的容错性比较强,有时即使写错了浏览器也能正确解析
        • 所有标签已经预定义,不是随意使用的
        • 标签名不区分大小写,建议统一使用全小写

    全局架构标签

    • 示例:
      <html>
          <head>
              <meta charset="utf-8" />
              <title>全局架构标签</title>
          </head>
          <body>
              <!--注释内容-->
              真正显示的内容
          </body>
      </html>
    • 说明:
      标签 说明
      html HTML文件中最大的标签,所有的内容都要放在其中
      head 头部,通常存放显示之外的内容,如:对于页面的说明、限制等
      body 身体,存放页面中需要显示的内容,其中的内容都会显示在页面上
    • 常用的属性:
      • nameclassidstyle
      • 后面经常结合CSS与JS一起使用

    常用标签(文本修饰)

    • 标题:h1~h6,字体从大到小,h1标签一个页面中最多一个,不能为了调整字体大小而使用
    • 加粗:<b></b>、<strong></strong>
    • 斜体:<i></i>、<em></em>、<cite></cite>
    • 下划线:<u></u>
    • 删除线:<s></s>
    • 标注:<sup></sup>、<sub></sub>
    • 字体:<font></font>size设置字体大小,color设置字体颜色,face设置字体类型

    常用标签(格式控制)

    • 换行:<br />,无论多少个回车和空格,浏览器都会解析成一个空格
    • 段落:<p></p>,表示一个段落
    • 滚屏:<marquee></marquee>
    • 原样:<pre></pre>,浏览器中的显示与文档中的格式一致
    • 无序列表:<ul></ul>,其中的每个元素都是一个<li></li>
      • typedisc实心圆,默认类型,cirlce空心圆,square实心方框
    • 有序列表:<ol></ol>,其中的每个元素都是一个<li></li>
      • typeA、a、I、i、1,1是默认的
      • start:起始序号

    字符实体

    • 说明:在HTML中预留的字符必须替换为实体才能显示
    • 提醒:不要刻意记录这些,需要的时候查询一下即可
    • 示例:
      &nbsp;          空格
      &lt;            小于
      &gt;            大于
      &amp;           &

    URL(非常重要)

    • 说明:统一资源定位符,是URI的一种,可以唯一的定位一个网络资源。
    • 示例:http://www.baidu.com:80/s?username=dahua&password=123456
    • 解析:协议://主机:端口/文件?参数1=值1&参数2=值2&参数3=值3
      • http:80端口,会自动省略
      • https:443端口,会自动省略

    超链接(a)

    • 标签:<a></a>
    • 说明:可以进行页面的跳转
    • 属性:
      属性 说明
      href 指定跳转地址
      title 光标放上去的提示信息
      target 目标页面的打开方式
      锚点,用于页面内部的定位
      • target属性取值
      取值 说明
      _self 覆盖当前标签栏
      _blank 创建新的标签栏
      _parent 覆盖父级标签栏
      _top 覆盖顶层标签栏

    多媒体标签

    • 图片标签:<img />,非常重要
    • 属性:
      属性 说明
      src 指定资源地址
      title 光标放上去的提示信息
      width 宽度
      height 高度
    • 说明:
      • 图片资源可以是本地的,也可以是网络资源
      • 宽和高单独设置图片会进行等比缩放,同时设置会进行拉伸变形

    学海无涯 , 版权所有丨如未注明 , 均为原创丨转载请注明HTML全局架构标签-常用标签-多媒体标签
    喜欢 (0)
    发表我的评论
    取消评论
    表情 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址