一、标签
- 排版 <h1> - <h6> <hr />行线 <p> <div> span>
- 换行 <br />
- 文本格式化 <b> <strong> 粗体 <i><em>斜体 <s><del>删除 <u><ins>下划线
- 标签属性 <hr color="red" width="666" />
- 图像 <img src="wo1.jpg" alt="这是我的大头贴"/> 没有图片是显示文字。<img src="wo.jpg" title="刘德华的图像" width="300" border="10" />
- 链接 <a href="http://www.baidu.com" target="_blank">百度</a> <a href="#">我的作品地址</a>
- 锚点 <a href="#movie">演艺经历</a> <h3 id="movie">演艺经历</h3>
- base <base target="_blank" />
<head>
<meta charset="utf-8">
<base target="_self" />
</head>
- 特殊标签 < > ©
- 注释 <!-- 注释 -->
- 绝对路径 <img src="C:\Users\apple\Desktop\HTML入门及基础01\案例\wo.jpg" height="220" width="171" /> <img src="http://www.baidu.com/images/logo.png" />
- 无序列表 <ul><li>苹果</li> </ul>
- 有序列表 <ol><li>中国</li></ol>
- 自定义列表
<dl>
<dt>北京</dt>
<dd>昌平</dd>
<dd>通州</dd>
<dd>顺义</dd>
<dd>海淀</dd>
</dl>
- 表格
<table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="right"> <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>19</td> </tr> </tbody> </table> 合并 <table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center"> <caption>火影忍者演员表</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>鸣人</td> <td>男</td> <td rowspan="2">18</td> </tr> <tr> <td>佐助</td> <td>男</td> </tr> </tbody> </table> <table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center"> <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 colspan="2">男</td> </tr> </tbody> </table> -
input 表单控件集合
<!-- <input /> 我们的input是一个单标签 br hr img base input --> 用户名: <input type="text" value="派克钢笔" /> <!-- 这是一个文本框 --> <br /> 密 码: <input type="password" maxlength="6" /> <br /> <!-- 这是一个密码框 ctrl+ / 注释的快捷键 --> 性 别: <input type="radio" name="sex" /> 女 <input type="radio" name="sex" /> 男 <input type="radio" name="sex" checked="checked"/> 人妖 <input type="radio" name="sex1"/> 未知 <br /> <!-- 单选框 如果是一组，我们通过相同的name值 来实现--> 爱 好: <input type="checkbox" name="hobby" checked="checked" /> 足球 <input type="checkbox" name="hobby"/> 篮球 <input type="checkbox" name="hobby"/> 乒乓球 <!-- 复选框 可以同时选择多个 --><br /> 搜索： <input type="button" value="搜索啥"/> <!-- 普通按钮 --><br /> <input type="submit" value="提交表单" /><!-- 提交按钮 --> <input type="reset" value="重置表单" /><!-- 重置按钮 --><br /> <input type="image" src="im.jpg" /><!-- 图像按钮 --><br /> 上传头像: <input type="file" /> <!-- 文件按钮 --> -
label
<label> 输入账号: <input type="text" /> </label> <br /> <label for="two"> 输入账号: <input type="text" /> <input type="text" id="two"/></label> <hr /> 1. 用lalbe 直接进行包裹input 就可以了 2. 如果label里面有多个表单，想定位到某个 可以通过for id 的格式来进行 -
文本域 <textarea>
-
下拉菜单
<select>
<option>点击选择您的籍贯</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected="selected">星星</option>
</select>
-
表单域
<form action="xxx.php" method="get" name="userMessage"> <!-- <input /> 我们的input是一个单标签 br hr img base input --> 用户名: <input type="text" value="派克钢笔" /> <!-- 这是一个文本框 --> <br /> 密 码: <input type="password" maxlength="6" /> <br /> <!-- 这是一个密码框 ctrl+ / 注释的快捷键 --> 性 别: <input type="radio" name="sex" /> 女 <input type="radio" name="sex" /> 男 <input type="radio" name="sex" checked="checked"/> 人妖 <input type="radio" name="sex1"/> 未知 <br /> <!-- 单选框 如果是一组，我们通过相同的name值 来实现--> 爱 好: <input type="checkbox" name="hobby" checked="checked" /> 足球 <input type="checkbox" name="hobby"/> 篮球 <input type="checkbox" name="hobby"/> 乒乓球 <!-- 复选框 可以同时选择多个 --><br /> 搜索： <input type="button" value="搜索啥"/> <!-- 普通按钮 --><br /> <input type="submit" value="提交表单" /><!-- 提交按钮 --> <input type="reset" value="重置表单" /><!-- 重置按钮 --><br /> <input type="image" src="im.jpg" /><!-- 图像按钮 --><br /> 上传头像: <input type="file" /> <!-- 文件按钮 --> </form> -
html 文档类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> html 5版本 </body> </html> -
html5 新语义标签
<header> 语义 :定义页面的头部 页眉</header> <nav> 语义 :定义导航栏 </nav> <footer> 语义: 定义 页面底部 页脚</footer> <article> 语义: 定义文章</article> <section> 语义： 定义区域</section> <aside> 语义： 定义其所处内容之外的内容 侧边</aside> <input type="text" value="输入明星" list="star"/> <!-- input里面用 list --> <datalist id="star"> <!-- datalist 里面用 id 来实现和 input 链接 --> <option>刘德华</option> <option>刘若英</option> <option>刘晓庆</option> <option>郭富城</option> <option>张学友</option> <option>郭郭</option> </datalist> <br /><br /><br /><br /> <fieldset> <legend>用户登录</legend> 用户名: <input type="text"><br /><br /> 密 码: <input type="password"> </fieldset> -
HTML5新增的INPUT type 类型
<fieldset> <legend>HTML5新增的INPUT type 类型 那些表单</legend> <form action=""> 邮箱: <input type="email" /> <!-- aa@aa.com --> <br /> 手机: <input type="tel" /> <!-- 手机格式 数字 --> <br /> 数字: <input type="number" /> <!-- 只能 是 数字 --> <br /> url: <input type="url" /> <!-- 网址格式的 --> <br /> 搜索: <input type="search" /> <!-- 搜索思密达 --> <br /> 区域: <input type="range" /> <!-- 区域 奥哈药 滑块 --> <br /> 时间: <input type="time" /> <!--小时 分钟 --> <br /> 年月日: <input type="date" /> <!--获得年月日 --> <br /> 月份: <input type="month" /> <!--获得年月 --> <br /> 星期: <input type="week" /> <!--获得周 --> <br /> 颜色: <input type="color" /> <!-- 颜色 --> <br /> <input type="submit" /> </form> </fieldset> -
HTML5新增表单属性
用户名: <input type="text" placeholder="请输入用户名" autofocus/> 上传头像: <input type="file" multiple/> <h4> 自动记录完成 </h4> 1.autocomplete 首先需要提交按钮 <br/> 2.这个表单您必须给他名字 <form action=""> 姓名: <input type="text" autocomplete="on" name="userName"/> <input type="submit"/> </form> 昵称: <input type="text" required accesskey="s" /> -
h5 表单案例
<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>java学院</option> <option>前端学院</option> <option>php学院</option> <option>设计学院</option> </datalist> <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> -
视频 <embed src='http://player.youku.com/player.php/sid/XMjg3MzI1MTUzNg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
<!-- <video src="mp4.mp4" autoplay controls></video> -->
我们的视频支持 ogg mp4 webM 三种视频格式
<video controls autoplay>
<source src="mp4.mp4"/>
<source src="movie04.ogg"/>
您的浏览器不支持视频播放
</video>
- 声音
<!-- <audio src="bgsound.mp3" autoplay="autoplay" controls loop="-1"/></audio> -->
为了浏览器兼容， 我们需要做三种声音文件 ogg mp3 wav
<audio controls autoplay>
<source src="bgsound.mp3" />
<source src="music.ogg" />
您的浏览器不支持播放声音
</audio>
-
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
