回顾html5
初识HTML
-
HTML : Hyper Text Markup Language(超文本标记语言)
-
W3C:world wide web consortion(万维网联盟),成立于1994年,国际中立性技术标准机构
-
W3C标准包括:结构化标准语言(html、xml),表现标准语言(css),行为标准(dom、ECMAScript)
-
基本结构
<!DOCTYPE html><!--告诉浏览器,我们要使用的规范 --> <html lang="en"> <head><!--头部 --> <meta charset="UTF-8"><!--描述性标签 --> <title>Title</title><!--页面标题 --> </head> <body><!--网页主体 --> </body> </html> <!--注释 -->
HTML标签
-
标题标签:
-
短路标签:
-
换行标签:
-
水平线标签:
-
字体样式标签:粗体 , 斜体
-
特殊符号:空格  ; > > ;< <; © 版权符号;可以通过&+字母去查看其它特殊符号
-
图像标签: img ;src:可以给相对地址或绝对地址
<img src="path" alt="text" title="name" width="100" height="100">
-
链接标签:
<a href="path" target="目标窗口位置">链接文本或者图片</a> <!--锚链接 也可以进行页面直接的条件--> <a href="#top">回到顶部</a> <!--功能性链接 邮件链接:mailto --> <a href="mailto:邮箱地址">点击联系我</a>
-
行内元素和块元素
- 块元素:无论内容多少,该元素独占一行;例如:p、h1-h6…
- 行内元素:内容撑开宽度,左右都是行内元素的可以在排在一行;例如:a、strong、em …
-
列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能够更快捷地获得相应的信息
- 列表分为:无序列表、有序列表、定义列表;
<!--有序列表--> <ol> <li>Java</li> <li>Python</li> <li>C++</li> </ol> <!-- 无序列表--> <ul> <li>Java</li> <li>Python</li> <li>C++</li> </ul> <!-- 自定义列表--> <dl> <dt>学科</dt> <dd>Java</dd> <dd>Python</dd> <dd>C++</dd> <dt>位置</dt> <dd>洛阳</dd> <dd>深圳</dd> <dd>上海</dd> </dl>
-
表格
- 结构稳定,简单通用
- 基本结构:单元格,行,列,跨行,跨列
<!-- 表格 行 tr 列 td--> <table border="1px"> <tr> <!--跨列 colspan--> <td colspan="4">1-1</td> </tr> <tr> <!--跨列 colspan--> <td rowspan="3">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> <tr> <td>4-2</td> <td>4-3</td> <td>4-4</td> </tr> </table>
-
视频和音频
<!-- 音频和视频 src : 资源路径 controls :控制条 autoplay :自动播放 --> <video src="../resources/video/你的答案.mkv" controls ></video> <audio src="../resources/video/清空.mp3" controls></audio>
-
页面结构分析
元素名 描述 header 标题头部区域的内容(用于页面或页面中的一块区域) footer 标记脚部区域的内容(用于整个页面或者页面的一块区域) section Web页面中一块独立区域 article 独立的文章内容 aside 相关内容或应用(常用于侧边栏) nav 导航类辅助内容 -
iframe内联框架
<!--src:引用页面地址,name:框架标识名 --> <iframe src="path" name="mainFrame" frameborder="0"></iframe> <iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
-
表单语法
- get方式提交:我们可以在url中看到我们提交的信息,不安全,高效。
- post:比较安全,传输大文件。
属性 说明 type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text name 指定表单元素名称 value 元素的初始值。type为radio时必须指定一个值 size 指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 maxlength type为text或password时,输入的最大字符数 checked type为radio或checkbox时,指定按钮是否是被选中 <!-- method:规定如何发送表单数据常用值:get|post, action:表示向何处发送表单数据 radio:单选框,text:文本输入框, password:密码框,checkbox:多选框--> <from method="post" action="MyHome.html"> <p>名字:<input type="text" name="name"></p> <p>密码:<input type="password" name="pass"></p> <p>性别: <input type="radio" value="boy" name="sex">男 <input type="radio" value="girl" name="sex">女</p> <p>爱好: <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby" checked="checked">敲代码 <input type="checkbox" value="chat" name="hobby">聊天 </p> <!-- 按钮 --> <p> <input type="button" name="btn1" value="点击变长"/> <input type="image" name="" src="../resources/image/1.jpg"/> </p> <!-- 下拉框,列表框 --> <p> <select name="列表名称" id=""> <option value="选项的值" selected>中国</option> <option value="选项的值">美国</option> <option value="选项的值">俄罗斯</option> <option value="选项的值">英国</option> </select> </p> <!-- 文本域 --> <p>反馈: <textarea name="textarea" id="te" cols="50" rows="50">文本内容</textarea> </p> <!-- 选中文件 --> <p>反馈: <input name="file" type="file">选中文件</input> <input type="button" value="上传" name="upload"></input>> </p> <!-- 邮件验证 --> <p>邮箱: <input type="email" name="email"></input>> </p> <!-- URL --> <p>url: <input type="url" name="url" ></input>> </p> <!-- 数字 --> <p>商品数量: <input type="number" name="num" max="100" min="0"></input>> </p> <!-- 滑块--> <p>滑块: <input type="range" name="voice" max="100" min="0" step="2"></input>> </p> <!-- 搜索框--> <p>搜索: <input type="search" name="search" ></input>> </p> <p> <input type="submit" name="Button" value="提交"/> <input type="reset" name="Reset" value="重填"/> </p> </from>
-
表单的应用
- 隐藏域:hidden
- 只读:readonly
- 禁用:disabled