HTML初识(标签、路径)

  1. 什么是HTML
    Hyper Text Markup Language 超 文本 标记 语言
    通过给文字添加标签的方式增加原文字在网页中的语义

  2. HTML 编辑工具
    01、DreamWeaver 、
    02、Sublime 占内存小 方便操作
    03、记事本
    04、webStorm
    05、Hbuilder

  3. HTML的基本骨架

    <!--文档类型生声明 h5-->
    <!DOCTYPE html>
    <!--html的文档开始-->
    <html>
    <!--html的头部  常用来引入外部文件-->
    <head lang="en">
        <!--meta:元-->
        <!--UTF-8:国际通用字库  里面涵盖了所有国家的所有语言-->
        <!--gbk  gb2312:国标字库 里面涵盖了汉字和少数外文-->
        <meta charset="UTF-8">
        <!--标题标签  显示在浏览器TAB栏-->
        <title>标题</title>
    </head>
    <!--HTML  文档的主体部分-->
    <body>
       主体、内容
    </body>
    </html>
    
  4. 基本标签

    1. 标题标签
      h : headline 标题的意思

      	<h1>我是标题1号</h1>
      	<h2>我是标题1号</h2>
      	<h3>我是标题1号</h3>
      	<h4>我是标题1号</h4>
      	<h5>我是标题1号</h5>
      	<h6>我是标题1号</h6>
      
    2. 段落标签


      p: paragraph 段落标签

      	<p>段落</p>
      
    3. 图片标签
      单双标签的区别:看标签中间是否需要添加内容
      img: image

      `<!--src:source  资源的意思-->
      <img src=”图片所在路径” alt=”图片找不到替代的文字” title=”鼠标悬停提示的字符” width=”图片的宽度” height=”图片的高度”/>
      
  5. 、锚点标签 a anchor
    a标签的几种跳转方式

    <a href =”路径” target=”跳转的窗口”>aaa</a>
    
    1. 不同页面之间的跳转

      <a href="html/money.html">我要钱</a>
      
    2. 跳转到外部页面

      <a href="http://www.baidu.com">去百度</a>
      
    3. 、页面内部跳转
      (1) 从底部跳到顶部

      <a href="#">去顶部</a>
      

      (2) 从页面的一个点到另一个点

      <a href="#here">去here</a>
      <a name="here">我在这里</a>
      
  6. 媒体标签

    1. 音频标签 audio
    2. 视频标签 video
      <!--controls :添加控制器  让音频能够被显示控制-->
      <!--loop :循环播放-->
      <!--autoplay:自动播放-->
      <audio src="../audio/2.mp3" controls loop autoplay >您的浏览器版本过低  扔了吧</audio>
      <video src="../video/1.mp4" controls>您的浏览器版本过低</video>
      
  7. 列表标签(组标签)

    1. 无序列表
      Unordered list

      • 无序列表
        List item
      • 列表项

      <style>
              * {
                  margin: 0;
                  padding: 0;
              }
              ul {
                  list-style: none
              }
              li {
                  float: left;
                  width: 100px;
                  height: 50px;
                  background-color: red;
                  line-height: 50px;
                  text-align: center;
              }
              a {
                  display: block;
                  text-decoration: none;
                  color: green;
              }
              li a:hover {
                  color: black;
                  background-color: yellow;
              }
          </style>
      </head>
      <body>
      <ul>
          <li><a href="#">南京</a></li>
          <li><a href="#">扬州</a></li>
          <li><a href="#">无锡</a></li>
          <li><a href="#">徐州</a></li>
          <li><a href="#">宿迁</a></li>
          <li><a href="#">盐城</a></li>
      </ul>
      </body>
      
    2. 有序列表
      ordered list

      1. 无序列表
        List item
      2. 列表项

      <ol>
          <li>交换余生</li>
          <li>告白地球</li>
          <li>句号</li>
      </ol>
      
    3. 自定义列表
      Definition list dl 定义列表
      Definition title dt 定义标题
      Definition description dd 定义表诉词

      <!--dl>dt+dd-->
      <dl>
          <dt>扬州</dt>
          <dd>咸鸭蛋 阳春面 狮子头</dd>
          <dt>宿迁</dt>
          <dd>面皮 凉皮 包子</dd>
          <dt>徐州</dt>
          <dd>地锅鸡 擀面皮 板面</dd>
          <dt>连云港</dt>
          <dd>豆丹 凤鹅 煎饼</dd>
          <dt>盐城</dt>
          <dd>蛋饼 鱼泡面 麻花</dd>
      </dl>
      
  8. div span
    Div : division 表示大范围的分割
    Span : 表示小范围的区域

    <style>
            div {
                width: 200px;
                height: 200px;
                background-color: red;
            }
            span {
                width: 200px;
                height: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
    </body>
    

    区别:

    1. 两者都表示分割的意思,在HTML里面根据语义没有任何样式
    2. Div在html里面是容器级元素
      Span 是文本级元素
    3. div 在CSS里面是块级元素
      Span 在css里面是行内元素

    HTML标签分类
    A、容器级元素:里面什么都可嵌套 包括自己
    Div ul li ol li dl dt dd
    B、文本级元素:标签里面只可以放 文字图片 表单元素 a p img

  9. 表单元素
    表单就是用来收集用户信息 让用户填写或者选择的

  10. 路径

    1. 相对路径
      (1) 同级比较 直接写
    <img src="2.jpg" alt=""/>
    
    1. 从外向内
    <img src="img/2.jpg" alt=""/>
    
    1. 从内向外
    <img src="../img/timg%20(2).jpg" alt=""/>
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值