HTML5学习笔记

HTML5

1.介绍

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

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

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

2.基本标签

3.图像标签

<!--src:路径-->
<!--alt:替代,当没有图片,就会显示-->
<!--title悬停文字-->
<img src="1.jpg" alt="你好" title="123" width="640" height="640">

4.链接标签

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

<!--a标签
href 必填,表示要跳转到哪个页面
target 表示窗口在哪里打开
--_self 当前窗口打开
--_blank 新窗口打开
-->
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&copy;
<em>我好</em>
</body>
</html>
<!--
锚链接
-->
<a href="project1.html#down">回到顶部</a>
<!--功能性链接
邮件链接:mailto
-->
<a href="mailto:573905257@qq.com">点击联系我</a>

5.行内元素和块元素

• 块元素

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

• 行内元素

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

(strong ,em)

5 列表

<!--ol:order list
    ls:list
    ul:无序 unordered
    -->
<ol>
  <li>java</li>
  <li> C</li>
</ol>
<ul>
    <li>java</li>
    <li>c</li>
</ul>
<!--自定义列表-->
<!--dl:标签-->
<!--dt:列表名称-->
<!--dd:列表内容-->
<dl>
    <dt>123</dt>
    <dd>java</dd>
    <dd>C</dd>
</dl>

6.表格

<!--表格
    tr 行
    td 列
    -->
<table border="1px">

7.视频和音频

<!-- -
 autoplay高版本视频可能无法自动播放，在src前面加muted
 controls 视频控制
 -->
<video  src    ="video/1.mp4" controls autoplay></video>

8. 页面结构分析

9.iframe内联框架

<!--<iframe   src="//player.bilibili.com/player.html?aid=768208334&bvid=BV1Ar4y1H7bk&cid=574525358&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->
<iframe src="" name="hello" frameborder="0" width="64" height="64"></iframe>
<a href="project1.html"target="hello">点击</a>

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

10.表单

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

<!--表单
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post ,get 提交方式
get方式  可以在url里面看到我们提交的信息，不安全，高效
post 比较安全 输入大文件-->
<form action="project1.html" method="post">
    <!--text 文本输入框-->
    <p>名字<input type="text" name="username"></p>
    <!--password密码输入框 用*来代替-->
    <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>
<!--    radio 里面 name应该设为一个组，才能多选单个-->单选框
    

    
    <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表单初级验证

    <!--text 文本输入框-->
<!--    placeholder 提示信息-->
<!--    required 非空判断-->
<!--    pattern 正则表达式-->
    <p>名字<input type="text" name="username" placeholder="请输入用户名" required></p>