HTML思维导图

关于前端学习的思维导图，包括html标签、路径、其他标签、web标准、HTML骨架等内容。

HTML

• html标签
  • 标签分类
    • 双标签
      • <p>段落</p>
    • 单标签（空元素不需要装内容）
      • <br/> <hr/> <img/> <base/> <meta/>
  • 标签关系
    • 嵌套关系（父子）
      • <div><span></span></div>
    • 并列关系（兄弟）
      • <div></div><span></span>
  • 常用标签
    • p：段落
    • br：换行
    • hr：水平线 用的非常少
    • hx：标题 h1~h6
    • div：上下显示：一行一个
    • span：一行显示：一行多个
  • 文本格式化标签
    • 加粗
      • b
      • strong
    • 倾斜
      • i
      • em
    • 下划线
      • u
      • ins
    • 删除线
      • s
      • del
  • 标签属性
    • <标签名 属性1="属性值1"…> 内容 </标签名>
    • 例如：<img src="media/tab.png" />
  • img图片标签
    • src
      • 图片来源路径
    • 属性
    • alt
      • 图片不能正常显示时，用文字替代
    • title
      • 鼠标经过图片的时候显示文字
    • width
      • 宽度
    • height
      • 高度
  • 链接标签
    • 语法格式
      • <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
    • target
      • 当前窗口：_self
      • 新窗口：_blank
    • a href
    • 外部链接
      • http://www.baidu.com
    • 内部链接
      • index.html
    • 锚点定位
      • 拉关系：<a href="#two">
      • 找目标：<h3 id="two">第2集</h3>
• 路径
  • 相对路径
    • 同一级路径
    • 下一级路径/
    • 上一级路径
  • 绝对路径\
    • “D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
• 其他标签
  • base标签
    • 所有网页都在新窗口中打开
    • 写在head中：<base target="_blank" />
  • pre预格式化文本标签：按照我们预先写好的文字格式来显示页面， 保留空格和换行等。
• 特殊字符
• HTML骨架
  • html
  • head
    • 文档头部
    • title
      • 文档标题
  • body
    • 文档主题
  • DOCTYPE
    • 文档类型 html5
  • charset="UTF-8"
    • 字符集
  • lang
    • 语言类型为英文lang="en"
• web标准
  • 结构
    • html
    • 身体
  • 表现（样式）
    • css
    • 穿着打扮
  • 行为
    • JavaScript
    • 动作 技能

HTML

• 列表
  • 目的：布局用的
  • 有序列表：ol li
    • <ol><li></li></ol>
  • 无序列表：ul li
    • <ul><li></li></ul>
  • 自定义列表：dl dt dd
• 表单
  • 目的：收集用户信息的 可以与用户交互
  • 属性
    • type
      • 表单类型：用来指定不同的控件类型
    • value
      • 表单值：表单里面默认显示的文本
    • name
      • 表单名字：页面中的表单很多，name主要作用就是用于区别不同的表单。
    • checked
      • 默认选中：表示那个单选或者复选按钮一开始就被选中
  • 完整表单三部分组成
    • 提示信息
    • form：表单域
    • 表单控件
      • 文本框
        • type="text"
          • 单标签：只能显示一行
      • 密码框
        • type="password"
      • 单选框
        • type="radio"
      • 复选框
        • type="checkbox"
      • 普通按钮
        • type="button"
      • 提交按钮
        • type="submit"
      • 重置按钮
        • type="reset"
      • 图像按钮
        • type="image"
      • 文件域
        • type="file"
      • 文本域
        • <textarea></textarea>
          • 双标签：显示多行
      • 下拉表单
        • select
          • <select><option></option></select>
      • 表单
  • label 标签
    • 目标：label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。
    • 方法1：用label直接包括input表单。
      • <label> 用户名： <input type="text" name="usename" value="请输入用户名"> </label>
    • 方法2：for 属性规定 label 与哪个表单元素绑定。
      • <label for="sex">男</label> <input type="radio" name="sex" id="sex">
• 表格
  • 目的：用来展示数据，可以让数据显示整齐规范
  • 组成
    • table
    • tr 行
    • td 单元格
    • th 表头单元格
  • 属性
    • cellspacing 单元格和单元格之间的距离
    • cellpadding 单元格内容和单元格边框之间的距离
  • 表格标题
    • caption 写到表格里面
  • 合并单元格
    • 上下：跨行合并 rowspan
    • 左右：跨列合并 colspan
    • 三大步骤
      • 1.先确定是跨行还是跨列合并
      • 2.根据先上 后下 先左 后右的原则找到目标单元格
      • 3.删除单元格 删除的个数=合并的个数-1
  • 表格划分结构
    • <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！
    • <tbody></tbody>:用于定义表格的主体放数据本体 。
    • 脚：<tfoot></tfoot>放表格的脚注之类。
    • 以上标签都是放到table标签中。