H5笔记
1.基础
1.HTML标题通过<h1>至<h6> 2.段落用标签<p></p>定义 3.链接通过<a>定义例如：
<a href="http://www.runoob,com">这是一个链接</a>
4.图像标签
<img> eg:<img src="/images/logo.png" width="258"height="39"/>
5. 换行
2.属性
1.class 为元素定义一个或者多个类名 2.id 定义元素的唯一id 3.style 规定元素的行内样式 4.title规定元素的额外信息 5.html水平线标签<hr> 6.注释<!--这是一个注释-->
3.文本格式化
<b>定义粗体文本 <em>定义着重文字 斜体 <i>定义斜体字 <small>定义小号字 <strong>定义加重语气 <sub>定义下标字 <sup>定义上标字 <ins>定义插入字 <del>定义删除字
<img src:"地址"alt:"图片不显示时显示的文字"title:"图片悬停文字"
<a href:“地址” target=“_blank”></a>跳转地址 target表示窗口在哪里打开 _blank在新页面打开 默认_self在本页面跳转
3.1锚链接
先定义一个name <a name="顶部"></a>
1.需要一个锚链接标记
2.然后跳转到标记
<a href：“#顶部”></a> 页面间跳转
3.2邮件连接
mailto：<a href="mailto:839486172@qq.com>点击联系我</a>
qq链接：<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好请联系我" title="你好请联系我"/>
。
3.3块元素
无论内容多少，该元素独占一行（p.h1-h6）
3.4行内元素
内容撑开宽度，左右都是行内元素的可以排在一行（a.strong.em）
3.5列表
无序列表<ul></ul>应用范围 ：导航 侧边栏 有序列表<ol></ol>应用范围 ：试卷 问答
自定义列表 ：
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>linux</dd>
<dd>python</dd>
</dl>
<!--描述：dl:标签 dt：列表名称 dd：列表内容 应用范围：公司 列表里都用<li></li>-->
行 tr 列 td 跨行：rowspan 跨列：colspan
<table border="1px" cellspacing="" cellpadding="">
<tr>
<td rowspan="2">范</td>
<td>腾</td>
<td>龙</td>
</tr>
<tr>
<td colspan="2">谷</td>
<td>雨</td>
<td>荷</td>
</tr>
4.视频音频学习
4.1视频标签
src：资源路径 controls：控制条 autoplay：自动播放
谷歌需要：muted=muted 添加这个自动播放
viedo{width height} 设置高度宽度
loop=“loop”循环播放
poster=“imgurl（显示未加载完成的图片）”
<video src="sources/录课1.mp4" controls autoplay></video>
4.2音频文件标签
<audio src="" autoplay="autoplay" controls="controls" loop="loop"></audio>
5.页面结构分析
header 标题头部区域内容 footer脚部区域内容 section web页面中的一块独立区域 article独立的文章内容 aside相关内容或应用常用于侧边栏 nav导航类辅助内容
iframe内联框架 ：
<iframe src="http://www.baidu.com" width="1000px" height="800px"></iframe>
src：地址 w-h：宽度高度 name：写名字 可以用超链接标签跳转
6.表单
form表单
action：表单提交的位置 可以是网站，也可以是一个请求处理地址 method：post get 提交方式 get方式提交：我们可以在url中看到我们提交的信息 不安全 但是高效 post方式提交：比较安全，传输大文件 type：指定元素类型 text password checkbox radio submit rest file hidden image button默认为text name：指定表单元素的名称 vlaue：元素的初始值，type为radio时必须指定一个值 size：指定表单元素的初始宽度 当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 maxlength：type为text或者password时。，输入的最大字符数 checked：type为radio或者checked时，指定按钮是否被选中
账号密码框：
<h1>注册</h1>
<form action="2.html" method="get">
名字：<input type="text" name="username"/>
密码：<input type="password" name="pwd" /><br />
<input type="submit" value=“提交”/>
<input type="reset" vlaue=“重置”/>
单选框：
性别：<input type="radio" value="男" name="sex"/>男
<input type="radio" value="女" name="sex"/>女
多选框：
爱好： <input type="checkbox" value="sleep" name="hobby" />睡觉
<input type="checkbox" value="code" name="hobby"/>敲代码
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏
<input type="submit" />
<input type="reset" />
<input type="button" name="btn1"value="点击变长" />
<input type="image" src=".."/>
checked默认选中
下拉框：
<select name="列表名称">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="ruishi" selected>瑞士</option>
<option value="yindu">印度</option>
</select>
selected 默认选中
文本域：
反馈：<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
文件域:
文件域：<input type="file" />
<input type="button" value="上传" name="upload" />
验证：
邮件验证：<input type="email" name="email"/>
url验证：<input type="url" name="url"/>
数字验证：<input type="number" name="num" max="100" step="10"/>
滑块验证： <p>
<input type="range" min="100" name="voice" max="100" step="2"/>
</p>
<input type="data"></input>
<input type="tel"></input>
<input type="time"></input>
<input type="color"></input>
搜索框：
<p>
<input type="search" name="search"/>
</p>
表单的应用：只读 realyonly 禁用 disabled 隐藏 hidden
增加鼠标可用性：label标签
表单验证：placeholder 提示信息 required 非空判断 不能为空 pattern 正则表达式：随查询随用
autofocus：自动获得焦点
autocomplete 浏览器根据你之前输入成功过的值记录
autocomplete：on/off
multiple 可以多选文件提交
<style>
修改提示字体
input::placeholder{
color: pink;
}
</style>
</head>
<body>
<div>
<form action="">
<input type="search" name="sear" id="" placeholder="范腾龙" autofocus autocomplete="off">
<input type="file" name="" id="" multiple>
</form>
浙公网安备 33010602011771号