前端笔记（三）

目录

超链接

作用

属性

锚点跳转

列表

布局标签

表格

属性

表单

form

input

textarea

下拉菜单

label

---

超链接

与网络的另一个位置的文档进行跳转

双标签(容器标签)

<a></a>

里面多放文本

作用

1. 跨页面跳转
2. 跳转指定位置

属性

1. href属性
   1. 目标地址
2. target属性
   1. 跳转页面在那个地方显示
   2. _self 当前窗口打开
   3. _blank 其他窗口设置
3. title属性
   1. 鼠标悬停文本

锚点跳转

1. 当前页面跳转指定位置
   1. 通过id属性跳转
   2. <a href="#id"></a>
2. 跨页面
   1. 通过地址+id
   2. <a href="link#id"></a>

列表

1. 无序列表

   1. <ul></ul>
   2. 无序列表
   3. <li></li>(容器级)
   4. ul ===> 嵌套li
   5. 无顺序的列表结构

2. 有序列表

   1. <ol></ol>
   2. 有序列表
   3. <li></li>（容器级)
   4. ol ===> 嵌套li
   5. 有顺序的列表结构

3. 定义列表

   1. dl
      1. 自定义列表大结构
   2. dt
      1. 主题
   3. dt
      1. 解释主题

   <dl>
       <dt>西瓜</dt>
       <dd>西瓜的解释</dd>
       
       <dt>苹果</dt>
       <dd>苹果的解释1</dd>
       <dd>苹果的解释2</dd>
   
       <dt>香蕉</dt>
       <dd>香蕉的解释</dd>
   </dl>

   5. dd和dt容器级别

布局标签

1. div

   1. 盒子
   2. 双标签
   3. 块元素
   4. 没有限制

   <div>
       <dl>
       <dt>西瓜</dt>
       <dd>西瓜的解释</dd>
       
       <dt>苹果</dt>
       <dd>苹果的解释1</dd>
       <dd>苹果的解释2</dd>
   
       <dt>香蕉</dt>
       <dd>香蕉的解释</dd>
   </dl>
   </div>

2. span

   1. 小盒子
   2. 双标签容器级
   3. 行内元素

表格

表格的内容

1. table
   1. 表格结构
2. tr
   1. 表格的行
3. td
   1. 表格的数据
4. th
   1. 表头单元格

5. ---

6. caption
   1. 表格标题
7. thead
   1. 表格的头部
8. tbody
   1. 表格主题

属性

1. border
   1. 边框属性
2. style
   1. 设置标签样式
3. rowspan
   1. 跨上下两行合并
4. colspan
   1. 跨左右列

表单

收集用户信息

form

<form>

<form>

1. 双标签
2. 容器级别

属性

1. action
   1. url
   2. 服务器地址
2. method
   1. 提交数据的方式
3. name
   1. 表单的名字

input

单标签

属性

1. text
   1. 单行文本输入框
2. value
   1. 提示内容
   2. hint
3. type
   1. password
      1. 输入内容有掩饰
   2. radio
      1. 单选框
      2. name属性
         1. 相同的name值表示属于同一个集合
      3. checked ===》 默认选中
   3. checkbox
      1. 多选框
      2. 通过name属性进行分组
      3. checked ===》 默认选中
   4. button
      1. 普通按钮
   5. reset
      1. 重置按钮
      2. 清空已经填写form的数据，恢复初始状态
   6. submit
      1. 提交按钮
      2. 提交数据===》后端服务器
   7. image
      1. 图片按钮
      2. 同submit一样
      3. src ===> 图片路径
   8. file
      1. 上传文件的按钮
      2. multiple="multiple"
      3. 可选多个文件

textarea

1. 多行文本的输入框
2. 双标签
3. rows
   1. 垂直方向
4. cols
   1. 水平方向

下拉菜单

select 整个菜单

option 菜单的选项

<select>
<option>苹果</option>
<option>西瓜</option>
<!--- 默认选中 ---->
<option selected="selected">橘子</option>
<option>桃子</option>
<option>水蜜桃</option>
</select>

label

属性绑定

<label for="绑定元素id" ></label>

<label >

<div>内容</div>

</label>