HTML学习笔记 2
文章目录
- 写在前面
- HTML学习笔记 2
- 1 表格
- 2 表格属性
- 3 表头标签
- 4 表格结构
- 5 单元格合并
- 6 表单
- 6.1.input 控件
- 6.2.textarea 控件(文本域)
- 6.3.select 下拉菜单
- 6.4.表单域
- 7 HTML5 新增标签
- 7.1.新增普通标签
- 7.2.datalist 标签
- 7.3.fieldset 标签
- 8 input type 属性值
- 9 常用新属性
- 10 综合案例
- 11 多媒体标签
- 11.1.embed
- 11.2.audio
- 11.3.video
写在前面
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>
HTML学习笔记 2相关推荐
- PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置 首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 发布: 2017年8月4日 7,195阅读 ...
- 容器云原生DevOps学习笔记——第三期:从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 容器云原生DevOps学习笔记——第二期:如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 2020年Yann Lecun深度学习笔记(下)
2020年Yann Lecun深度学习笔记(下)
- 2020年Yann Lecun深度学习笔记(上)
2020年Yann Lecun深度学习笔记(上)
- 知识图谱学习笔记(1)
知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用 知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...
- 计算机基础知识第十讲,计算机文化基础(第十讲)学习笔记
计算机文化基础(第十讲)学习笔记 采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...
- Go 学习推荐 —(Go by example 中文版、Go 构建 Web 应用、Go 学习笔记、Golang常见错误、Go 语言四十二章经、Go 语言高级编程)
Go by example 中文版 Go 构建 Web 应用 Go 学习笔记:无痕 Go 标准库中文文档 Golang开发新手常犯的50个错误 50 Shades of Go: Traps, Gotc ...
- MongoDB学习笔记(入门)
MongoDB学习笔记(入门) 一.文档的注意事项: 1. 键值对是有序的,如:{ "name" : "stephen", "genda" ...
- NuGet学习笔记(3) 搭建属于自己的NuGet服务器
文章导读 创建NuGetServer Web站点 发布站点到IIS 添加本地站点到包包数据源 在上一篇NuGet学习笔记(2) 使用图形化界面打包自己的类库 中讲解了如何打包自己的类库,接下来进行最重 ...
最新文章
- Fade 数字切换动效
- Redis基本数据类型
- python数据结构基础知识点二分查找
- vue从入门到精通之基础篇(二)组件
- python绘画_python学画画(上)
- 训练日志 2019.4.14
- 单机android游戏排行榜,安卓单机手机游戏推荐_十大必玩单机手机游戏
- C#设计模式之22-模板方法模式
- python获取时间秒数_Python获取秒级时间戳与毫秒级时间戳
- 最强面试题整理第三弹:Python 后台开发面试题(附答案)
- Centos指令mysql安装报错为“ Failing package is: mysql-community-client-5.7.38-1.el7.x86_64”
- noip普及组2007 守望者的逃离
- 总结了一下小半辈子发现三点:
- Android 调起系统相机拍照
- 电力系统谐波影响及治理
- android 7.0 Settings 省电模式
- MySQL 利用xtrabackup进行增量备份详细过程汇总
- 2019.10.8 多校赛Day1【including 流量,个人练习生,假摔
- R语言-ggplot基础绘图参数设置
- 我和小伙伴们一起学Unity3D(六)碰撞与触发器
热门文章
- 基于STM32的超声波雷达项目【可拟合构建平面地图】(代码开源)
- Kaggle赛题-Synthetic Financial Datasets For Fraud Detection
- python如何更新包_python如何更新包
- 非正弦周期信号的傅里叶级数展开式
- 需求文档 | 产品需求文档(PRD)
- 判断一个年份是否是闰年
- 洛谷 U41571 Agent2
- 『正睿OI 2019SC Day3』
- 应用程序连接hbase报错:java.net.SocketTimeoutException: callTimeout=60000
- 向来痴,从此醉,先生一路走好。