学习笔记----web前端常用标签

图片标签img

• src: 资源路径:

  • 相对路径: 
    • 资源和页面在同一目录: 直接写图片名即可
    • 资源在页面的上级目录: ../图片名
    • 资源在页面的下级目录: 文件名/图片名
  • 绝对路径: 一般访问站外资源时使用, 也称为图片盗链(存在找不到图片的风险)

• alt: 图片不能显示时显示的文本

• title: 图片标题, 鼠标停在图片上显示的文本

• width/height:设置图片宽高 , 如果只设置宽度,高度会等比例缩放 

  • 像素值
  • 百分比

超链接a

• href: 资源路径 作用类似图片标签中的src属性
• a标签包裹文本为文本超链接,包裹图片为图片超链接
• 页面内部跳转, 在目的地位置元素里面添加id属性 在超链接里面href="#id"

表格table

• 包含标签: table tr表示行 td表示列 th表头 caption表格标题
• 属性: table(border边框) td(跨行rowspan 跨列 colspan)

表单form

• 作用: 获取用户输入的信息,并且把信息提交给服务器 

• 学习form表单主要学习的就是有哪些控件

• 控件包括: 文本框,密码框,按钮,单选,多选,下拉选,日期,文件等

• 相关代码:

  <form action="http://www.tmooc.cn">
      <!--placeholder站位文本 maxlength最大字符长度
      value设置默认值 readonly只读-->
      用户名:<input type="text" name="username"
                 placeholder="请输入用户名" maxlength="5"
                 value="abc" readonly="readonly"><br>
      密码:<input type="password" name="password"><br>
      <!--checked默认选中 value必须添加 否则提交的是on -->
      性别:<input type="radio" name="gender"
                value="m" id="r1">
      <label for="r1">男</label>
      <input type="radio" checked="checked"
             name="gender" value="w">女<br>
      兴趣爱好:<input type="checkbox" name="hobby"
                  value="cy">抽烟
      <input type="checkbox" checked="checked"
             name="hobby" value="hj">喝酒
      <input type="checkbox" name="hobby" value="tt">烫头<br>
      生日:<input type="date" name="birthday"><br>
      靓照:<input type="file" name="pic"><br>
      所在地:<select name="city">
      <option>北京</option>
      <option selected="selected">上海</option>
      <!--value设置提交内容 如果没有则提交标签体内容-->
      <option value="guangzhou">广州</option>
  </select><br>
      <input type="reset">
      <input type="submit" value="注册">
      <!--自定义按钮-->
      <input type="button" value="按钮">
      <hr>
      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">自定义</button>
  </form>
  

分区标签

• 作用: 类似容器, 对多个相关标签进行统一管理 

• 一个页面至少分为三大区,头/体/脚 每个大区里面又有n个小的分区 

• 有哪些分区标签?

  • 块级分区标签: div, 特点:独占一行

    HTML5标准中新增分区标签(header头,footer脚,article正文/文章, nav导航, section区域)作用和div一样

    HTML5之前版本:
    <div>头</div>
    <div>体</div>
    <div>脚</div>
    HTML5版本后: 提高了代码可读性 
    <header>头</header>
    <article>体</article>或<section>体</section>
    <footer>脚</footer>  
    

  • 行内分区元素: span 共占一行