时间戳

首页 > 技术文章 > HTML 基础 day02

HTML 基础 day02

article-record 2020-01-29 18:02 原文

表格 （table）

学习目标
  • 表格是用来做什么的？ 展示数据， 可以让数据显示整齐规范；
  • 列表是用来做什么的？ 列表用来布局，可以让页面布局整齐规范；
  • 表单用来做什么的？ 表单用来收集用户数据。
创建表格
<tbble>
 <caption>标题</caption>
 <thead>
   <tr>
     <th>表头单元格</th>   
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>内容单元格</td>
   </tr>
 </tbody>
 <tfoot></tfoot>
</table>
标签名 属性名
table 表格标签
caption 表格标题标签
thead 表格头部标签
tr 行标签
td 单元格标签
th 单元格标签，表头
tbody 表格主题标签
tfoot 脚注标签
表格属性
属性名 含义 常用属性值
border 这是表格的边框 border="1" 像素值
cellspacing 设置单元格与单元格之间的空白间距 像素值（默认2像素）
cellpadding 设置单元格内容与单元格边框之间的空白间距 像素值（默认1像素）
width 设置表格的宽度 像素值
height 设置表格的高度 像素值
align 设置表格在网页中的的水平居中方式 left，center，right

注意 平时开发的过程中我们这三个参数为0 ； border，cellspacing ，cellpadding

合并单元格
  • 跨行合并：rowspan="合并单元格的个数"
  • 跨列合并：colspan="合并单元格的个数"
合并单元格三部曲
  • 先确定是跨行还是跨列合并；
  • 根据 先上后下 先左后右的原则找到目标单元格 然后写上合并方式 还有要合并的单元格数量 例：<td rowspan="2"> </td>
  • 删除多余的单元格

列表标签

学习目标

  • 无序列表语法；ul

  • 自定义列表语法；ol

  • 有序列表语法；

无序列表 ul

无序列表的各个列表项之间没有顺序级别之分，都是并列的

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
  1. <ul> </ul> 中只能嵌套<li> </li>， 直接在 <ul> </ul>标签中输入其他的标签或者文字是被允许的。
  2. <li> 与 </li>之间相当于一个容器， 可以容纳所有元素
  3. 无序列表会带有自己的样式属性
有序列表 ol
<ol>
  <li>列表项1</li>
  ...
</ol>
自定义列表
<dl>
  <dt>上海市</dt>
  <dd>闵行区</dd>
  <dd>松江区</dd>
</dl>

使用场景

表单标签

input 控件
<input type="" value="" />
属性属性值说明
typepassword密码输入框
radio单选按钮
checkbox复选框
button普通按钮
submit提交按钮
reset重置按钮
image图像形式提交按钮
file文件域
name用户自定义控件的名称
value用户自定义input控件中默认的文本值
size正整数input在页面中显示的宽度
checkedchecked定义选择控件默认被选中的项
maxlength正整数控件允许被输入的最多字符数
image 控件
<!-- image 一定要加上 src 属性 -->
<input type="image" src="../.png" />

注意: 页面中表单很多 , name主要作用就是用于区别不同的表单

<!-- 如果要实现单选的话, 就需要指定相同的 name 属性 -->
男 <input type="radio" name="sex" /> <br />
女 <input type="radio" name="sex" />
label 标签

label 标签主要目的是为了提高用户体验

**概念 : **label 标签为 input 元素定义标注 (标签)

**作用 : **用于绑定一个表单元素 , 当点击 label 标签的时候 , 被绑定的表单元素就会获取输入焦点 .

如何绑定元素 ?

  1. 用 label 直接包裹 input 表单

    <label> 用户名: <input type="text" value="" /></label>

  2. 用 for 和 id 属性规定 label 与哪个表单元素绑定

    <label for="username"></label>
用户名: <input type="text" value="" id="username" />
textarea 文本域
<!-- cols: 一行最多显示的字数
     rows: 最多显示的行数 -->
<textarea cols="30" rows="10">
</textarea>
select 下拉列表
<select name="" id="">
  <options value="">北京</options>
  <options vaule="">上海</options>
  <!-- selected 表示默认选中 -->
  <options vaule="" selected>郑州</options>
  <options vaule="">南京</options>
</select>

form 表单域

  • 收集用户的信息怎么传递给服务器 ?

    通过 form 表单域

  • 在 HTML 中 , form 标签被用于定义表单域 , 以实现用户信息的手机与传递 , form 中的所有内容都会被提交给服务器 .

<form action="" method="" name="">
  各种表单控件
</form>
属性 属性值 作用
action url 地址 用于指定接收并处理表单数据的服务器程序的 url 地址
method get/post 用于设置表单数据的提交方式, 其取值为 get / post
name 名称 用于指定表单的名称 , 以区分同一个页面中的多个表单 .

**示例 : **

<form action="" method="get" name="">
  <input type="text" name="username"/>
  <input type="password" name="password"/>
</form>

查资料

W3C : http://www.w3school.com.cn/

MDN : https://developer.mozilla.org/zh-CN/

推荐阅读