一名前端小白的学习笔记(1/N)--HTML标签

HTML标签（hyper text markdown language）（h5新增 红）(h5删除 绿)

• 内容标签显示模式(块级/行内、行内块)
  • 块级元素
    • 特性
      • 高度，宽度、外边距以及内边距都可以控制
      • 自己独占一行
      • 宽度默认是容器（父级宽度）的100%
      • 是一个容器及盒子，里面可以放行内或者块级元素
      • 只有 文字才 能组成段落 因此 文字标签p、hx、dt里面不能放块级元素，特别是 p 不能放div
    • div
    • h1-h6
    • tr
    • hr
    • p
    • dl
    • ul
    • ol
    • li
    • dt
    • dd
    • table
    • form
    • artcile
    • footer
    • header
    • nav
    • section
  • 行级元素
    • 特性
      • 相邻行内元素在一行上，一行可以显示多个
      • 高、宽直接设置是无效的
      • 默认宽度就是它本身内容的宽度
      • 行内元素只能容纳文本或则其他行内元素
      • 链接里面不能再放链接
      • 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全
    • span
    • b
    • strong
    • u
    • ins
    • s
    • del
    • i
    • em
    • a
    • lable
  • 行内块元素
    • 特性
      • 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
      • 默认宽度就是它本身内容的宽度
      • 高度，行高、外边距以及内边距都可以控制
      • 缺点
        • 它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题
        • 不能实现盒子左右对齐
    • input
    • img
    • td
• 标签分类
  • 单标
    • br hr input link
  • 双标
• 标签关系
  • 嵌套
  • 并列
• 标签功能
  • 格式
  • 表单
  • 框架
  • 图像
  • 音频
  • 视频
  • 链接
  • 列表
  • 表格
  • 样式/节
  • 元信息
    • head
    • meta
    • base
    • basefont
  • 编程
• 列表标签
  • ul
    • 无序列表
      • li列表项
  • ol
    • 有序列表
      • li列表项
  • dl
    • 自定义列表
      • dt
      • dd
      • dt和dd同级
• 常用标签
  • 标题标签h
  • 段落标签p
  • 水平线标签hr
  • 换行标签br
  • div
  • span
  • 链接标签a
    • href
    • target
  • 表格标签table
    • 表格特性
      • 常用，但不是用来布局
      • 常见显示、展示表格式数据（后台显示数据）
      • 可以让数据显示的非常规整，可读性非常好
    • 表格构成
      • table定义一个表格标签
      • tr定义表格中的行
      • th表头单元格
        • 代替相应的单元格标签td即可
      • caption表格标题
        • 通常会被居中且显示于表格之上
        • 必须紧跟table标签之后
      • td定义表格中的单元格
    • 表格属性
      • border
      • cellspacing
        • 设置单元格与单元格之间的空白间距
      • cellpadding
        • 设置单元格内容与单元格边框之间的空白间距
      • width
      • height
    • 合并单元格
      • 跨行合并rowspan
        • rowspan=“合并单元格的个数”
      • 跨列合并colspan
        • colspan=“合并单元格的个数”
      • 顺序
        • 先上下行，在左右列
      • 注意删除多余单元格
    • 表格划分结构（必须都放在table标签中）
      • thead
        •  
      • tbody
        • 用于定义表格的主体。放数据本体
      • tfoot
        • 放表格的脚注之类
    • 表格的细线边框
      • table {border-collapse:collapse;}
  • 图像属性img
    • src
    • img
    • title
    • width
    • height
    • border
  • 文本格式化标签
    • b和strong
    • i和em
    • s和del
    • u和ins
  • 注释标签
  • ol/ul/dl列表标签
    • ol有序列表order list（之间只能放li）
      • li(块级元素)
    • ul无序列表unordered list（之间只能放li）
      • li(块级元素)
    • dl
      • dt
      • dd
      • important：dl和dt是并列关系
  • 表单标签
    • 表单目的
      • 收集用户信息
    • 表单组成
      • 表单控件（表单元素）
      • 提示信息
      • 表单域
        • 相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用的url地址，以及数据提供到服务器的方法
    • 表单控件
      • input控件
        • type
          • text
            • 单行文本输入框
          • password
            • 密码输入框
          • radio
            • 单选按钮
          • checkedbox
            • 复选框
          • button
            • 普通按钮
          • submit
            • 提交按钮
          • reset
            • 重置按钮
          • image
            • 图像的形式的提交按钮
          • file
            • 文件域
        • name
          • 用来区分表单
        • value
          • 默认的文本值
        • size
          • input控件在页面中的显示宽度
        • checked
          • 默认选中状态
        • maxlength
          • 控件允许输入的最大字符数
      • label标签
        • 目的
          • 为了提高用户体验
        • 作用
          • 用来绑定表单元素，当点击1表单元素时，被绑定的表单元素就会获得焦点
        • 方式
          • 用label标签直接包裹input标签
          • for属性规定label与哪个表单元素绑定
      • textarea文本域
        • cols每行中的字符数
        • rows显示的行数
      • select下拉列表
        • option
        • selected=“selected”即为默认选中
• web标准
  • struture结构
  • presentation表现
  • Behavior行为
• 常用浏览器内核
  • IE
    • Trident
  • firefox
    • Gecko
  • Safari
    • webkit
  • chrome
    • Chromiun
  • opera
    • Presto
• HTML超文本标记语言
  • 超文本可以加入图片、声音、动画、多媒体等内容
  • 可以从一个文件调到另一个文件
• 骨架
  • html
  • head
  • title
  • body
• 页面语言lang
• 字符集Charset="UTF-8"
  • 字符集Charset="UTF-8"
• 语义化
  • 当页面样式加载失败的时候能够让页面呈现出清晰的结构
  • 有利于 seo 优化
  • 利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）
  • 便于项目的开发及维护，使 html 代码更具有可读性，
  • 便于其他设备解析  
• 路径
  • 相对路径
    • 同级
    • 下一级
    • 上一级
  • 绝对路径
• 锚点定位
  • 使用相应的id名标注目标的位置
  • 使用链接文本创建链接文本(被点击的)
• base标签设置整体链接的打开状态
• 预格式化文本pre标签
  • 被包围在标签元素中的文本 通常会保留空格和换行符。而文本也会为等宽字体
• XTHML
  • XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
  • XHTML 的目标是取代 HTML。
  • XHTML 与 HTML 4.01 几乎是相同的。
  • XHTML 是更严格更纯净的 HTML 版本
  • XHTML 是作为一种 XML 应用被重新定义的 HTML
  • XHTML 是一个 W3C 标准。
  • html与XHTML区别
    • XHTML 指的是可扩展超文本标记语言
    • XHTML 与 HTML 4.01 几乎是相同的
    • XHTML 是更严格更纯净的 HTML 版本
    • XHTML 是以 XML 应用的方式定义的 HTML
    • XHTML 是 2001 年 1 月发布的 W3C 推荐标准
    • XHTML 得到所有主流浏览器的支持
    • XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。
• 特殊字符(非标签)
  • 空格符 
  • 小于号<
  • 大于号>
• !DOCTYPE 告诉浏览器使用哪种html或XHTMl规范