html基础入门（二）

2019.09.10

入门基础

表格

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

• 表格由table标签来定义。tr标签为行，td标签为单元格
• th标签为一般位于表格的第一行或第一列，其文本加粗居中，即为设置了表头的表格

<table>
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>赵武</td>
<td>男</td>
</tr>
<tr>
<td>李红</td>
<td>女</td>
</tr>
</table>

表格属性

border	边框 默认值为0	像素值(px)
cellspacing	设置单元格和单元格之间的间距	像素
cellpadding	设置单元格内容和单元格的间距	像素
width	表格的宽度	像素值
height	表格的高度	像素
align	设置表格的水平对齐方式	left，center，right

表格标题

• caption标签用于定义表格标题

<table>
   <caption>我是表格标题</caption>
</table>

合并单元格

跨行合并：rowspan 跨列合并：colspan

<table border="1px" cellspacing="10px" cellpadding="10px" align="center">
		<caption>中国男篮</caption>
		<thead>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</thead>
		<tbody>	
			<tr>
				<td>周琦</td>
				<td>男</td>
				<td>23</td>
			</tr>
			<tr>
				<td>易建联</td>
				<td>男</td>
				<td>35</td>
			</tr>
			<tr>
				<td colspan="3"></td>
			</tr>
		</tbody>
</table>

• 在使用表格进行布局时，可以将表格划分为头部、主体和页脚
• thead：用于定义表格的头部。
  必须位于table标签中，一般包含网页的logo和导航等头部信息。
• tbody标签用于定义表格的主体。
  位于table标签中，一般包含网页中除头部和底部之外的其他内容。

表单

表单控件：
​ 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
​ 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
​ 相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义

input控件

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	多选按钮
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
name	由用户自定义	控件的名称
value	由用户自定义	input控件中的默认值
size	正整数	控件在页面中显示的宽度
checked	checked	定义选择控件中默认被选中的项
maxlength	正整数	控件允许输入的最大字符数

label标签

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

textarea控件

如果需要输入大量的信息，就需要用到textare标签

<textarea cols="每行的字符数" rows="显示的行数">
			
</textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

<select>
		<option></option>
	</select>

• 在option 中定义selected =" selected "时，当前项即为默认选中项。

表单域

form标签被用于定义表单域，以实现用户信息的收集和传递

action:  url地址
method:  提交方式
name :  表单的名称，区分同一界面的多个表单

常用新标签

• header：定义文档的页眉 头部

• nav：定义导航链接的部分

• footer：定义文档或节的页脚 底部

• article：定义文章。

• section：定义文档中的节（section、区段）

• aside：定义其所处内容之外的内容 侧边

• datalist 标签定义选项列表。请与 input 元素配合使用该元素

• fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

<input type="text" placeholder="输入球员姓名" list="star" >
	<datalist id="star">
		<option>易建联</option>
		<option>周琦</option>
		<option>翟晓川</option>
		<option>郭艾伦</option>
		<option>蔡徐坤</option>
	</datalist>

legend:标题

<fieldset>
		<legend>用户登录</legend>
		用户名: <input type="text" /><br />
		密码: <input type="password" />
</fieldset>

新增的input type属性值：

类型	含义
email	输入邮箱格式
tel	输入手机号码格式
url	输入url格式
number	输入数字格式
search	搜索框（体现语义化）
range	*拖动滑块
time	小时分钟
date	年月日
datetime	时间
month	月年
week	星期 年

常用新属性

属性	含义
placeholder	占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
autofocus	规定当页面加载时 input 元素应该自动获得焦点
multiple	多文件上传
autocomplete	规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字
required	必填项 内容不能为空
accesskey	规定**（使元素获得焦点）元素的快捷键 采用 alt + s的形式

<form action="#" name="login">
		<input type="text" autofocus>
		<input type="text" required>
		<input type="text" accesskey="s">
</form>

多媒体

通过audio标签来解决音频播放的问题。

• autoplay 动播放
• controls 是否显不默认播放控件
• loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环

同音频播放一样，video使用也相当简单

• autoplay 自动播放
• controls 是否显示默认播放控件
• loop 循环播放
• width 设置播放窗口宽度
• height 设置播放窗口的高度

(๑•̀ㅂ•́)و✧终于结束了，给自己鼓鼓掌