HTML5学习 note2

目录

1.表格标签

  1.1 表格属性（要在table标签里写）

1.2 合并单元格

2. 列表标签

2.1无序列表

2. 2有序列表

2.3自定义列表

3.表单标签

3.1 表单域

 3.1.1各种表单元素控件

3.2 表单元素

3.2.1  input输入表单元素

3.2.2 label 标签

3.2 select 表单元素（下拉列表）

3.3  textarea表单元素

3.4 button 元素

---

1.表格标签

表格	描述
<table>	定义表格
<caption>	定义表格标题
<th>	定义表格不同
<tr>	定义表格的行
<td>	定义表格单元
<thead>	定义不表格的页眉
<tbody>

  1.1 表格属性（要在table标签里写）

属性	值	描述
align	left center right	表格对齐方式
border		表格边框，默认无
cellpadding	行像素值	单元边沿与内容之间的空白，默认1像素
cellspacing	像素值	单元格之间的空白，默认2像素
width	像素值或百分比	表格的宽度

浏览器会把<th>标签内容加粗居中显示

<table border="1">

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

<td>row 1, cell 1</td>

</tr>

</table>

caption标题示例

<table border="6">

<caption>我的标题</caption>

<tr>

  <td>100</td>

  <td>200</td>

  <td>300</td>

</tr>

<tr>

  <td>400</td>

  <td>500</td>

  <td>600</td>

</tr>

</table>

1.2 合并单元格

        跨行合并：rowspan=“合并单元格的个数”

        跨列合并：colspan=“合并单元格的个数”

  三步

• 确定跨行还是跨列合并
• 找到目标单元格，写上合并方式=合并单元格的数量<td colspan=”2”></td>
• 删除多余单元格

2. 列表标签

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

2.1无序列表

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

2. 2有序列表

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

2.3自定义列表

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>tea</dd>

<dd>Milk</dd>

</dl>

3.表单标签

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。

3.1 表单域

表单域是一个包含表单元素的区域。

在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。

<form> 会把它范围内的表单元素信息提交给服务器

<form action=“url地址” method=“提交方式” name=“表单域名称"></form>

 3.1.1各种表单元素控件

属性	值	说明
action	url地址	表单数据将发送到服务器上的文件中，文件包含处理表单数据的服务器端脚本
target	_blank	响应显示在新窗口或选项卡中。
	_self	响应显示在当前窗口中。
	_parent	响应显示在父框架中。
	_top	响应显示在窗口的整个body 中
	framename	响应显示在命名的 iframe 中。
method	get/post	设置表单数据提交的方式
name	名称	用于指定表单的名称，区别同一页面其他表单域

3.2 表单元素

1. input输入表单元素

2. select下拉表单元素

3. textarea 文本域元素

3.2.1  input输入表单元素

<input> 元素根据不同的 type 属性，可以变化为多种形态。

<input type="属性值" />

     -----type 属性的属性值及其描述如下：

属性值	描述
checkbox	定义复选框
file	输入字段和“浏览按钮”，上传文件
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，字符会被掩码
radio	定义单选按钮
reset	定义重置按钮，会清除表单所有数据
submit	提交按钮，把表单数据发送到服务器
text	定义单行的输入字段，可输入文本。默认宽度为20个字符

---------其他属性

属性	属性值	描述
name	由用户自定义	定义input元素名称
value	用户自定义	规定input元素的值（刚打开页面就默认显示的文字）
checked	checked	表示此input元素首次加载被选中
maxlength	正整数	规定输入字符中的字符最大长度

• 1value 和name是每个表单元素都有的属性值,主要给后台人员使用
•  name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值（单选按钮若无name值，可多选）
•  checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
•  maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用

<!-- text 文本框 用户可以里面输入任何文字 -->

      user name: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br>

<!-- password 密码框 用户看不见输入的密码 -->

      password: <input type="password" name="pwd" >  <br>

<!-- radio 单选按钮  可以实现多选一 -->

<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->

<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->

     sex: male <input type="radio" name="sex" value="male"> 
          female  <input type="radio" name="sex" value="female" checked="checked"> 
          third gender   <input type="radio" name="sex" value="third gender">   <br>

 <!-- checkbox 复选框  可以实现多选 -->

       hobby: eat <input type="checkbox" name="hobby" value="eat"> 
          sleep <input type="checkbox" name="hobby" checked="checked">
          sports <input type="checkbox" name="hobby" ><br>


 <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->

     <input type="submit" value="sign up">

 <!-- 重置按钮可以还原表单元素初始的默认状态 -->

     <input type="reset" value="fill again">

 <!-- 普通按钮 button  后期结合js 搭配使用-->

     <input type="button" value="obtain verification code"> <br>

 <!-- 文件域 使用场景 上传文件使用的 -->

        上传头像:  <input type="file" >

3.2.2 label 标签

<label> 标签为 input 元素定义标注（标签）。

<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验

语法：

<label for="sex">male</label>

<input type="radio" name="sex" id="sex" />

3.2 select 表单元素（下拉列表）

• 至少包含一对<option>
•  在 中定义 selected =“ selected " 时，当前项即为默认选中项

语法：

<select>

 <option>选项1</option>

 <option>选项2</option>

 <option>选项3</option>

…

</select>

<select>

 <option>选项1</option>

 <option>选项2</option>

 <option>选项3</option>

…

</select>

3.3  textarea表单元素

定义多行输入字段（文本域），该控件常见于留言板，评论。

<textarea name="message" >

文本内容

</textarea>

3.4 button 元素

<button> 元素定义可点击的按钮：

<button >文本内容</button>