HTML学习笔记--初级版

一、网页三大组成

1.html

结构层，个人认为就是对整个网页划分了多少个盒子，然后对盒子进行了布局，盒子内在套盒子，在布局，在套盒子。

2.css

样式层，个人认为就像化妆，一抹一画之间，让整个人成为全场最耀眼的存在。

3.javascript

行为层，个人认为本质就是操作一个个盒子，然后获取他们节点，触发事件，给人一种动态的交互感。

二、HTML

1.定义：超文本标记语言

2.标签：

• 单标签

  • 自己将自己闭合的标签 <img /> <br/>... <hr/> <input/>

• 双标签

  • 需要开标签和闭合标签 <span></span> ...

3.属性：

在标签中除了标签名的都是标签的属性,用于对标签的描述

主要分为：

• 常规属性: 属性名=属性值

• 布尔类型属性: 属性名=属性值

三、常用标签

• 标题标签: h1~h6（换行，加粗）

• 盒子标签：div（换行）

• 段落标签: p（换行）

• 图片标签: img

  • 引入图片的标签

  • 属性

    • src: 图片的路径

    • alt: 图片加载失败时候显示的文本

    • title: 鼠标悬停图片时显示的文本

  • 路径问题

    • 相对路径: 书写的路径就不从根目录开始

    • 绝对路径: 书写的路径会从根目录开始

• 超链接标签

  • 超链接 在href属性中书写跳转地址

  • 锚点链接(页面定位)

    • 锚点定位

    • 需要在href属性中书写定位标签的id值

    • 点击页面会定位到对应id值的标签位置

  • 执行js代码

    • 直接在href属性中执行一段js代码

      • 需要在href属性中书写 href='javascript:一段js代码;'

      • 点击a标签则不会跳转,而是执行这段js代码

• 文本修饰标签

  • font

  • em/i

  • b/strong

  • u/del

  • br

  • hr

  • sub/sup

• 表单标签

  • form

    • 表示表单的范围

    • 属性

      • action: 提交地址

      • method: 提交方式 get/post

      • enctype: 提交数据的格式

  • input

    • 表示单元, 根据属性type类型决定不同的表现形式

      • text

      • password

      • search 搜索框

      • radio

      • checkbox

      • button 按钮,没有任何意义的按钮

      • submit 提交按钮

      • reset 重置按钮

      • file 文件

      • color 颜色选择框

      • date 日期选择框

      • time 时间选择框

      • number 数字框

    • 属性value 表单的值

    • 属性name

      • 配合表单提交使用的,当你使用form表单默认提交功能时候,才需要使用name属性

    • 属性id 配置 label标签使用

    • checked 默认选中 一遍用于单选或复选框(type为radio或checkbox)

    • autofocus: 自动获取焦点, 页面中多个标签有这个属性,则第一个标签才自动获取焦点

    • autocomplete: 自动补全开关

      • 属性值: on/off

    • multiple 多选文件,配合type=file使用

  • select 下拉选择框

    • 需要配合 option标签 使用

      • value表示该选项被选中的值

      • 标签对中书写的文字 是展示的内容

    • 属性

      • selected 给option标签使用的,表示默认选中

      • multiple 表示多选择框, 此时可以给多个option添加selected

  • textarea 文本域

    • col 多少列 宽度

    • row 多少行 高度

  • button 标签对 <button></button>

    • <input type=button /> 不管什么位置都是普通标签

    • <button></button> 在from标签中就是 type=submit提交按钮

• 表格标签

  • table 表格的范围标签

  • thead 表头

  • tbody 表体

  • tfoot 表尾

  • tr 行标签

  • td/th 列标签

    • td 一般在tbody中的列

    • th 一般在thead中的列

  • 相关的属性

    • table 专用属性

      • border 边框宽度

      • width 整个表格的宽度

      • rules 边框显示

        • all 全部边框

        • rows 行边框

        • cols 列边框

        • none 无边框

      • frame 外边框

    • 通用属性

      • align 内容水平对齐方式

      • bgcolor 背景颜色

    • tr/td/th 使用的属性

      • height 单元格或行的 高度

      • valign 内容垂直对齐方式

    • 合并单元格

      • rowspan 上下合并单元格

      • clospan 左右合并单元格