web01-html and html5

一、标签

排版 <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>



我们的视频支持 ogg mp4 webM 三种视频格式

<video controls autoplay>

<source src="mp4.mp4"/>

<source src="movie04.ogg"/>

您的浏览器不支持视频播放

</video>
声音


为了浏览器兼容，我们需要做三种声音文件 ogg mp3  wav

<audio controls autoplay>

<source  src="bgsound.mp3" />

<source  src="music.ogg" />

您的浏览器不支持播放声音

</audio>

web01-html and html5相关推荐

Day 49 Nginx
Day 49 Nginx 1.1 http原理 DNS解析 TCP三次握手 TCP四次挥手 HTTP请求头信息 HTTP响应头信息 1.1.1 用户访问网站流程: 1.用户输入域名->浏览器跳转 ...
nginx基础（七）
文章目录 1. Nginx基础概述 2. Nginx安装启动 3. Nginx配置文件 4. Nginx搭建一个静态资源web服务器 5. Nginx虚拟主机 5.1 多网卡多IP的方式 5.2 基于 ...
html5代码转换为视频,HTML5中的视频代码详解
摘要腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
HTML5调用手机的Datepicker(日期选择器)
HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证,包含了如下新的输入类型: email url number range Date pickers (date, month, ...
android h5弹窗,Android嵌套html5页面中alert 弹出框问题
最近项目中遇到一个头疼的问题,那就是在安卓里嵌套html5的时候发现alert弹出框出现了问题那就是弹出的时候会出现串来自http://xxxxx 网页的提示然后下面出来具体的弹出信息,还有更奇 ...
HTML5 本地文件操作之FileSystemAPI整理（二）
一.文件目录操作 1.DirectoryEntry对象属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...
Notepad++支持jQuery、html5、css3
Notepad++里的代码提示文件是以XML文件存放于目录 ....\Notepad++\plugins\APIs\下的. 将这三个文件:html.xml, css.xml, javascript.x ...
使用按钮控制HTML5背景音乐开关
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
[重磅] 让HTML5达到原生的体验系列之中的一个避免切页白屏
非常多人都想.甚至曾使用HTML5开发跨平台App.而且想达到原生App的体验. 最后的结果都是无奈的放弃.HTML5貌似美好,但坑太多.想做到原生App的体验差点儿不可为. 也曾有过著名的faceb ...

web01-html and html5

web01-html and html5相关推荐

最新文章

热门文章