HTML5

1.介绍

1. 是一种超文本标记语言(Hyper Text Markup Language)

2. W3C(万维网联盟)标准

• 结构化标准语言(HTML,XML)
• 表现标准语言(css)
• 行为标准(DOM,ECMAScript)

2.基本标签

3.图像标签

<img src="1.jpg" alt="你好" title="123" width="640" height="640">

4.链接标签

a标签:从一个页面链接到另一个页面

<a href="top"></a><a href="http://www.baidu.com" target="_self"> <img src="1.jpg" alt="你好" title="123" width="640" height="640"></a><p>nihao</p>我好<strong>你好</strong>     ©<em>我好</em></body></html><a href="project1.html#down">回到顶部</a><a href="mailto:573905257@qq.com">点击联系我</a>

5.行内元素和块元素

• 块元素

无论内容多少，该元素独占一行
如(h1-h6 p)

• 行内元素

内容撑开宽度，左右都是行内元素的都可以排在一行

(strong ,em)

5 列表

<ol>  <li>java</li>  <li> C</li></ol><ul>    <li>java</li>    <li>c</li></ul><dl>    <dt>123</dt>    <dd>java</dd>    <dd>C</dd></dl>

6.表格

<table border="1px">

7.视频和音频

<video  src    ="video/1.mp4" controls autoplay></video>

8. 页面结构分析

9.iframe内联框架

<!-- --><iframe src="" name="hello" frameborder="0" width="64" height="64"></iframe><a href="project1.html"target="hello">点击</a>

内联框架可以与标签混合使用，如上的点击按钮在内联框架的右下角(根据宽高来定)

10.表单

例如点击登录弹出的登录框

<form action="project1.html" method="post">        <p>名字<input type="text" name="username"></p>        <p>密码<input type="password" name="userpassword"></p> <p><input type="radio" value="boy" name="sex">男</p>    <p><input type="radio" value="boy" name="sex">女</p>单选框     <p><input type="submit"></p>///提交按钮    <p><input type="reset"></p>///重置按钮</form>

可以在网页检查里面的网络的all里面看到数据

   多选框   <p><input type="checkbox" name="男"> 男    <input type="checkbox" name="男"> 1   <input type="checkbox" name="男"> 2   <input type="checkbox" name="男"> 3</p>多选框

自定义按钮    <p>按钮: <input type="button" name="按钮1" value="点击变成"> <input type="image" src="1.jpg" ></p>    <p><input type="submit"></p>    <p><input type="reset" value="清空表单" name="123"></p>

10.1.下拉框，文件域，文本域

    <p><select name="列表名称" id=" "> <option value="选择的值">中国</option> <option value="选择的值">美国</option> <option value="选择的值" selected>日本</option>    </select></p>    <p><textarea name="textarea" cols="10 " row="20"></textarea></p>    <p><input type="file"name="fils"></p>    <p><input type="button"value="上传" name="upload"></input></p>

10.2.验证，搜索框滑块

    <p> 邮箱<input type="email" name="email"></p>    <p> 网站<input type="url" name="url"></p>    <p><input type="number" name="num" max="10" min="2" step="2"></p>    <p><input type="range" min="0" max="100"></p>    <p><input type="search" name=" search"></p>

10.3应用

只读 readonly警用 disabled隐藏 hidden    <p> <label> 邮箱  <input type="email" name="email" id="mark"></label>      </p><p>    <label for="mark"> 邮箱    </label>    <input type="email" name="email" id="mark"></p>点击邮箱就可以跳转到输入框

10.4表单初级验证

        <p>名字<input type="text" name="username" placeholder="请输入用户名" required></p>