HTML常用标签

(一)a

1.属性:

  • href(hyper reference:超级链接)
  • target
  • download
  • rel=noopener

2.作用

  • 跳转到外部页面
  • 跳转内部锚点
  • 发邮件、打电话

3.取值:

  • href:

    • 网址:①http(s)://www.baidu.com ②//google.com
    • 路径:① /a/b/c以及a/b/c ②index.html
    • 伪协议:①javascript: 代码 ; ②mailto: 邮箱 ③tel: 手机号
    • id:href="# xxx" (跳转内部锚点)
  • target:

    • _blank:在新窗口打开
    • _top:在最上层的窗口打开
    • _parent:在上一层窗口打开
    • _self:默认设置,在当前窗口打开
    • xxx(自己命名):原理:新建一个页面,命名为xxx,此后再打开一个target=“xxx”的网页时,会覆盖当前的xxx网页。
    • xxx 举例:

(二)table

  • 相关标签:

    <table>
        <thead>
        <tbody>
        <tfoot>
        <tr>  table row
        <td>  table data
        <th>  table head
  • 相关的样式:

    table-layout:
       auto:表格及单元格根据其包含的内容自动调整宽度
       fixed:表格和列的宽度通过表格的width值来设置
       border-collapse:
       collapse; 相邻单元格之间边缘合并
       border-spacing:单元格之间的空隙宽度
  • 正确结构:
<table>
        <thead>
            <tr>
                <th>title 1</th>
                <th>title 2</th>
            </tr>
            <tr>
                <td>sth 1</td>
                <td>sth 2</td>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>
  • 画表格的方法:先在纸上画出表格图形,再对照着敲代码。

(三)img

  • 作用:发出GET请求,展示一张图片

    • 属性:

      • alt:若图片加载失败,则显示alt的内容
      • height:若只给定高度,则宽度自适应
      • width:若之给定宽度,则高度自适应
      • src(sourc):图片地址
    • 事件:

      • onload:js相关
      • onerror:js相关
    • 响应式:

      • max-width:100%,则在移动端图片也会根据比例缩放,充满屏幕
    • 为img 可替换元素
    • !! 永远不要让图片变形

(四)form

  • 作用:发送GET或POST请求,然后刷新页面
  • 属性:

    • action:发送请求的路径
    • autocomplete(是否自动填充):默认为off,给出取值建议
    • method(请求类型):POST/GET,默认值为GET
    • target(打开方式):_blank / xxx
  • 基本格式:
<form action="/xxx">
    <input type="text">
    <input type="submit">
</form>
  • 事件:onsubmit:
  • <button type="submit">xxx</button>和<input type="submit" value="xxx">区别:
    前者双标签,中间可以加其他内容,后者单标签

(五)input:

  • 作用:让用户输入内容
  • 属性:

    • type:

      • text(默认):普通文本
      • button:按钮
      • email
      • file:提交文件

        • <input type="file">上传一个文件
        • <input type="file" multiple>上传多个文件
      • hidden:供计算机使用,使用js输入提交
      • number
      • password:不展示具体内容(以小圆点代替)
      • radio:单选

        • (实现方法:多个type="radio" 的input标签,使用相同的name)
      • checkbox:多选

        • (实现方法:多个type="checkbox"的input标签并列,使用相同的 选项名称跟在标签后边 )
        • 如:<input type="checkbox" name="hobby"> 唱 <input type="checkbox" name="hobby"> 跳
      • search:查找
      • submit:提交
      • tel
      • color:颜色
    • name:
    • autofocus
    • checked
    • disabled
    • maxlength
    • pattern
    • value
    • placeholder
  • 事件:

    • onchange
    • onfocus
    • onblur
  • 验证器:HTML5的新功能
  • 注意事项:

    • 一般不监听input的click事件
    • form里的input要有name
    • form里要放一个type=submit才能触发submit事件

(六)一些感触

  • HTML+CSS+JS是前端的三大支柱,从入门的第一天就重复不断的听到这句话,随着学习深入,越来越能体会到为什么说“HTML=结构,CSS=样式,JS=行为”
  • HTML提供了很好的web网页架构,但是其标签内置的属性风格单一,操作繁杂,而且与css共同使用易使得代码可读性变差,样式重叠,给后期修改造成很大负担,所以HTML尽量只用来进行网站结构的搭建,而对于外观的美化交由css和js来做。
  • HTML不是一项难以理解的技术,它的难度在于布局的合理有效性,和大量标签的理解度、记忆度和运用程度,我认为HTML相关的学习是一个经验积累的过程,在不难的技术里重复打磨进而精通,也可称匠人。
  • 越努力越幸运。

相关推荐