标签分类

  1. 块元素
    代表元素：h1-h6,p,div,ul,li,ol,li
    特点：
  • 独占一行
  • 没有设置宽度的情况下默认宽度为父元素的百分百
  • 可以设置宽高
  1. 行内元素
    代表元素：span,格式化标签
  • 一行多个
  • 宽度为内容的宽度
  • 不能设置宽高
    特点：
  1. 行内块元素
    代表元素：img,input
    特点：
  • 一行多个
  • 可以设置宽高

超链接

a标签必须有内容才能点击

属性值：

  1. href：链接的路径或者文件
  • 绝对路径（以盘符或者http开头的路径）
  • 相对路径（以本文件出发寻找目标文件）
  • txt文件表示查看
  • pdf文件表示查看
  • zip文件表示下载
  • 电子邮件表示发文件
  • 电话表示打电话
  1. target表示在何处打开链接
  • _self默认值，表示在本窗口打开链接的url
  • _blank表示在新的窗口打开链接的url
  1. title表示鼠标放上元素时的提示文本

四种状态

:link没有被访问时的状态 蓝色
:visited访问之后的一个状态 紫色
:active被激活时候的状态 红色
:hover可以用于所有的标签，表示鼠标浮上去的一个状态

四种状态必须按照:link :visited :hover :active
原则：爱恨原则 l v h a

链接类型

  1. 文本链接
  2. 图片，视频链接
  3. 空链接
  • <a href="#">内容</a>
  • <a href="javascript:;">空链接2</a>
  • <a href="javascript:void(0);" onclick="alert('收藏成功')">收藏</a>
  1. 锚链接
  • 使用a标签的href属性和其他标签的id属性相结合
    给a标签的href属性添加#名称
    给要跳转到的目标标签添加id属性，属性值为a标签的href属性值的#后面的名称
  • 使用a标签的href属性和a标签的name属性相结合
    给a标签的href属性添加#名称
    给要跳转到的目标添加a标签给一个name属性，属性值为a标签的href属性值的#后面的名称

表单元素

form标签

  • 表单元素可以单独使用，但是需要提交数据的时候则需要被form标签进行包裹*

属性

  1. action：数据要提交的服务器地址（一般是php文件）
  2. method:提交的方式（get和post）
  • get默认提交数据的方式
    提交的数据通过?的方式拼接在服务器地址后面 地址?name1=value1&name2=value2…..
  • post

get和post请求方式的区别：

  1. get请求的数据拼接在地址后面，而post请求的数据页面不可见，需要通过F12—-network—-点击服务器请求地址——点击headers的form data中查看到post请求发送的数据
  2. get请求数据不安全，post比较安全
  3. get传输的数据长度有限，而post不限制长度
  1. 定义表单元素

input

属性

  1. type：input输入框的类型

    • text：单行文本框
    • password：密码框
    • radio:单选框（产生互斥效果的话需要给产生关联的单选框加上相同name属性值）
    • checkbox:复选框（产生关联需要添加相同的name属性值）
    • file：文件域
    • hidden：隐藏域
    • image：图片域（必须通过src属性引入图片地址，相当于一个图片按钮，点击时会提交表单数据，数据值为鼠标点击时的坐标）
    • button：普通按钮（不会对数据进行提交）
    • submit：提交按钮（在form标签中点击时会提交表单数据）
    • reset：重置按钮（点击会使表单数据清空恢复最初状态）
  2. name：表示给input框取一个名字
  3. value：表示给表单元素一个默认值

重点：name和value在网络传输中的作用：
name：传输数据的载体
value：传输的数据值，当没有设置value默认值的时候则输入的值就是value值，单选框和复选框没有设置默认值的情况下默认值为on

  1. placeholder和value的区别：

placeholder是输入框的默认提示内容，当聚焦输入框填写内容的时候会自动消失，当输入框中没有值得时候会自动出现，而且不会随着表单进行提交
value是输入框的默认值，当鼠标聚焦输入框的时候value值不会消失，可以进行编辑，而且提交数据时会随着表单进行提交

  1. checked单选框和复选框的默认勾选值，使用checked=”checked”，可以简写为checked
  2. selected下拉列表的默认选项，option的属性
  3. size:表示下拉列表显示的选项个数，添加在select标签上

textarea多行文本框

属性

  1. cols列数
  2. rows行数

下拉列表

  1. select定义下拉列表
  2. option定义列表项

fieldset

  1. 将表单内容的一部分打包，生成一组相关表单的字段。
  2. 当一组表单元素放到 <fieldset> 标签内时，浏览器会以线框来显示它们，
  3. <legend> 标签为 fieldset 元素定义标题。

label

用来与input表单元素产生关联，发生聚焦

  1. 把要聚焦的输入框放在label中
  2. 使用label标签的for属性和input的id属性相结合产生关联