文章目录
写在前面
HTML 笔记系列源自于 bilibili av15241731 黑马程序员培训视频，感谢UP主上传精彩学习视频
第二部分内容来源 p34 - p66，建议1.5倍速，一天时间
刚刚接触前端学习，如有错误、疑问以及任何其他问题，欢迎一起探讨学习
HTML学习笔记 2
1 表格
用来显示数据，比如股票行情表
<table>
<tr>
<td> 单元格文字 </td>
</tr>
</table>
- table 用于定义一个表格
- tr 用于定义表格中的一行，嵌套在<table> 标签中，有几个 <tr> 就有几行
- <td> 用于定义表格中的单元格，嵌套在 标签中，可以放任何东西
2 表格属性
| 属性名 | 含义 | 属性值 |
|---|---|---|
| border | 设置表格边框，默认为0 | 像素值 |
| cellspacing | 设置单元格与单元格边框之间空白距离 | 默认2px |
| cellpadding | 设置单元格内容与边框之间距离 | 默认1px |
| width | 表格宽度 | px |
| height | 表格高度 | px |
| align | 设置表格在网页中的对齐方式 | left，center，right |
3 表头标签
<th> 表头 </th>
与 <td> 同级别
4 表格结构
<table>
<caption>表头</caption> <--- 表格标题
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
</table>
5 单元格合并
跨行合并 rowspan ，跨列合并 colspan
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td rowspan="2">18</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
6 表单
+----------------------+ <--- 表单域
| |
| PHONE |XXXXXXX| |
| | | |
| +提示文本 表单 |
| |
| |
+----------------------+
6.1.input 控件
用户名：<input type="属性"/>
<!--通过name属性来控制单选，默认选中使用checked属性-->
性别：<input type="radio" name="sex"/> 女 <input type="radio" name="sex"/> 男 <br/>
搜索：<input type="button" value="搜索"/>
上传头像：<input type="file" /> 点击后弹出上传文件对话框
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text | 单行文本输入框 |
| type | password | 密码输入框 |
| type | radio | 单选按钮 |
| type | checkbox | 复选框 |
| type | buttom | 普通按钮 |
| type | submit | 提交按钮 |
| type | reset | 重置按钮 |
| type | image | 图像形式提交按钮 |
| type | file文件域 | |
| name | 用户自定义 | 控件名称 |
| value | 用户自定义 | input控件中默认文本值 |
| size | 正整数 | input控件在页面中显示的的宽度 |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |
6.2.textarea 控件（文本域）
输入大量信息，比如论坛回帖的输入框
<textarea clos="每行字符数" rows="显示行数">
文本内容
</textarea>
6.3.select 下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
- <select></select> 中至少包含一对 <option></option>
- 在 option 中定义 selected=“selected” 时，当前项即为默认选中项
6.4.表单域
<form action="url地址" method="提交方式" name="表单名称">
表单内容
</form>
- action：在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接受并处理表单数据的服务器程序的url地址
- method：用于设置表单数据的提交方式，其取值为 get 或 post
- name：用于指定表单名称，以区分同一个页面中的多个表单
每个表单应该有自己的表单域
7 HTML5 新增标签
7.1.新增普通标签
<header></header>
定义文档页眉头部
<nav></nav>
定义导航栏连接部分
<\footer></footer>
定义页面底部
<article></article>
文章标签，大段文字
<section></section>
定义文档中的节，区段
<aside></aside>
定义侧边内容
7.2.datalist 标签
<datalist></datalist>
标签定义选项列表，与input元素配合使用
通过 id 建立连接
<input type="text" value="输入明星" list="star"/>
<datalist id="star">
<option>刘德华</option>
<option>郭富城</option>
</datalist>
7.3.fieldset 标签
<fieldset></fieldset>
元素可将表单内的相关元素分组打包
类似于 QGroupBox（QT中）
<fieldset>
<legend>用户登录</legend>
用户名：<input type="text">
密码 ：<input type="text">
</fieldset>
8 input type 属性值
<form action="">
邮箱：<input type="email"/> <br/>
手机：<input type="tel"/> <br/>
数字：<input type="number"/> <br/>
网址：<input type="url"/> <br/>
搜索：<input type="serach"/> <br/>
</form>
| 类型 | 示例 | 含义 |
|---|---|---|
| <input type=“email”> | 输入邮箱格式 | |
| tel | <input type=“email”> | 输入电话号码格式 |
| url | <input type=“email”> | 输入url格式 |
| number | <input type=“number”> | 输入数字格式 |
| serach | <input type=“search”> | 搜索框 |
| range | <input type=“range”> | 滑块 |
| time | <input type=“time”> | 小时分钟 |
| date | <input type=“date”> | 年月日 |
| datetime | <input type=“datetime”> | 年月日时分秒 |
| month | <input type=“month”> | 月年 |
| week | <input type=“week”> | 星期年 |
| color | <input type=“color”> | 弹出颜色框 |
9 常用新属性
| 类型 | 示例 | 含义 |
|---|---|---|
| placeholder | <input type=“text” placeholder=“请输入用户名”> | 占位符提供可描述输入字段预期值得提示信息 |
| autofocus | <input type=“text” autofocus> | 规定当页面加载时 input 元素应该自动获得焦点 |
| multiple | <input type=“file” multiple> | 多文件上传 |
| autocomplete | <input type=“text” autocomplete=“off”> | 规定表单是否应该启用自动完成功能。1.需要提交按钮；2.需要表单名字 |
| required | <input type=“text” required> | 必填项目 |
| accesskey | <input type=“text” accesskey=“s”> | 规定元素快捷键，alt + 字母 |
10 综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<form action="">
<fieldset>
<legend> 学生档案 </legend>
<label>
姓名：<input type="text" placeholder="请输入学生姓名"/>
</label>
<br/><br/>
<label>
手机：<input type="tel" />
</label>
<br/><br/>
<label>
邮箱：<input type="email"/>
</label>
<br/><br/>
<label>
学院：<input type="text" placeholder="请选择学院" list="xueyuan">
<datalist id="xueyuan">
<option>信息</option>
<option>文法</option>
<option>体育</option>
</datalist>
</label>
<br/><br/>
<label>
生日：<input type="date"/>
</label>
<br/><br/>
<label>
成绩：<input type="number"/>
</label>
<br/><br/>
<label>
毕业时间：<input type="date"/>
</label>
<br/><br/>
<input type="submit"/>
<input type="reset"/>
</fieldset>
</form>
</body>
</html>
11 多媒体标签
11.1.embed
例如在 youku ，分享给朋友，html 方式
11.2.audio
<audio src="xxx.mp3" autoplay="autoplay" controls loop="2"></audio>
src：歌曲文件地址
autoplay：打开网页就开始唱
controls：是否显示播放器控件
loop：控制循环次数，-1 为无限循环
为了兼容性，需要准备多种格式音频
<audio controls autoplay>
<source src="xxx.mp3"/>
<source src="xxx.ogg"/>
</audio>
| 格式 | IE9 | 火狐3.5 | 欧朋10.5 | Chrome3.0 | Safari3.0 |
|---|---|---|---|---|---|
| Ogg Vorbis | ok | ok | ok | ||
| mp3 | ok | ok | ok | ||
| wav | ok | ok | ok |
11.3.video
<video src="xxx.mp4" autoplay controls width="500"></video>
为了兼容性，需要准备多种格式视频
<video controls autoplay>
<source src="xxx.mp4"/>
<source src="xxx.ogg"/>
</video>
扫一扫
9024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
