首页 > 其他分享 >HTML5

HTML5

时间：2023-08-16 22:01:19浏览次数：41  
标签：标签 表单 点击 HTML5 跳转 百度 页面

HTML5

1. 网页基本元素

<!DOCTYPE html><!--告诉浏览器使用什么规范-->

<html lang="en"><!--总标签-->
<head><!--代表网页头部-->
    <meta charset="UTF-8"><!--描述网页的一些信息-->
    <title>我的第一个网页</title><!--网页标题-->
</head>
<body><!--网页主体-->
hello,world
</body>
</html>

2. 基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>一级标签</h1><!--标题标签-->
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<p>两只老虎，两只老虎，</p><!--段落标签-->
<p>跑得快，跑得快，</p>
<hr/><!--水平线标签-->
<p> 一只没有眼睛，</p>
<p>一只没有尾巴，</p>    
<br/><!--换行标签-->

<!--字体标签-->
<strong>真奇怪！真奇怪！</strong><!--加粗-->
<em>两只老虎，两只老虎，</em><!--斜体-->

</body>
</html>

3. 特殊字符

空格：&nbsp;
大于号：&gt;
小于号：&lt;
版权符号：&copy;

4. 图像标签

常见图像格式

  • JPG
  • GIF
  • PNG
  • BMP：位图
  • ...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>

<!--src:图像地址  ../:上一级目录  alt:找不到图片时的替代文字  title:鼠标悬停提示文字-->
<img src="../resources/bd.jpg" alt="图片" title="标题"/>

</body>
</html>

5. 超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
target:默认当前页面打开
        _blank:跳转到新页面
        _self:当前页面打开
<!--文字超链接-->
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<!--图片超链接-->
<a href="https://www.baidu.com" >
    <img src="../resources/bd.jpg">
</a>

</body>
</html>

6. 锚链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚链接</title>
</head>
<body>

<!--
    锚链接：
        1.需要一个标记
        2.跳转到标记
        3.使用#
-->
<!--设置标记-->
<a id="top">我是顶部</a>

<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="https://www.baidu.com" >
    <img src="../resources/bd.jpg">
</a>
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="https://www.baidu.com" >
    <img src="../resources/bd.jpg">
</a>
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="https://www.baidu.com" >
    <img src="../resources/bd.jpg">
</a>
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="https://www.baidu.com" >
    <img src="../resources/bd.jpg">
</a>
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="https://www.baidu.com" >
    <img src="../resources/bd.jpg">
</a>
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="https://www.baidu.com" >
    <img src="../resources/bd.jpg">
</a>

<!--2.跳转到页面-->
<a href="second.html#top">跳转至一个页面指定位置</a>
<a href="#top">跳转至顶部</a>

</body>
</html>

7. 邮件连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邮件链接</title>
</head>
<body>

<a href="mailto:[email protected]">点击联系我</a>

</body>
</html>

8. 列表

分类

  • 有序列表
  • 无需列表
  • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!--有序列表-->
<ol>
    <li>Java</li>
    <li>python</li>
    <li>C</li>
</ol>

<!--无需列表-->
<ul>
    <li>Java</li>
    <li>python</li>
    <li>C</li>
</ul>

<!--自定义列表
    dt:列表名称
    dd:列表内容
-->

<dl>
    <dt>课程</dt>
        <dd>语文</dd>
        <dd>数学</dd>
    <dt>时间</dt>
        <dd>上午</dd>
        <dd>下午</dd>
</dl>
</body>
</html>

9. 表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--
    border:边框
    tr:行
    td:列
    rowspan:跨行
    colspan:跨列
-->
<table border="1px">
    <tr>
        <td colspan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td rowspan="2">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>
</table>

</body>
</html>

10. 媒体标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体标签</title>
</head>
<body>

<!--媒体标签
    controls:滚动条
    autoplay:自动播放
-->

<video src="../resources/video/4.mp4" controls autoplay></video>
<audio src="../resources/video/4.mp3" controls autoplay></audio>

</body>
</html>

11. 页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>

<header>
    这是头部区域
</header>

<section>
    这是主体部分
</section>

<article>
    这是独立文章内容
</article>

<aside>
    这是侧边栏
</aside>

<footer>
    这是脚部区域
</footer>

</body>
</html>

12. iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>
</head>
<body>

<!--iframe

-->

<iframe src="" name="4399_game" frameborder="0" width="300px" height="200px"></iframe>
<a href="index.html" target="4399_game" >点击跳转</a>

<!--<iframe src="//player.bilibili.com/player.html?aid=914235729&bvid=BV1QM4y1H7QK&cid=1216800580&page=1"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true" >
</iframe>-->

</iframe>

</body>
</html>

13. 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<!-
    method:如何发送数据
    get:可以在url中看到提交的信息
    post:比较安全，可以传输大文件
    action:向何处发送表单数据，可以是一个网站或者一个请求处理地址
--->

<h1>注册</h1>
<form action="index.html" method="get" >
    <!-- 文本输入框 -->
    <p>姓名：<input type="text" name="name"/></p>
    <!-- 密码框 -->
    <p>密码：<input type="password" name="pwd"/></p>
    <!-- 提交 -->
    <input type="submit">
    <!-- 重置 -->
    <input type="reset">
</form>

</body>
</html>

表单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单应用</title>
</head>
<body>
<!--表单
    readonly:只读
    disabled：禁用
    hidden:隐藏
-->

<h1>注册</h1>
<form action="index.html" method="post" >
    <!-- 文本输入框 -->
    <p>姓名：<input type="text" name="name" value="admin" readonly></p>
    <!-- 密码框 -->
    <p>密码：<input type="password" name="pwd" hidden></p>
    <p>性别：
        <radio>
            <input type="radio" value="man" name="sex" checked disabled>男
            <input type="radio" value="women" name="sex">女
        </radio>
    </p>
    <p>搜索:
        <input type="search" name="search">
    </p>
    <p>
        <!-- for = id 绑定事件-->
        <label for="mark">点我啊</label>
        <input type="text" id="mark">
    </p>


    <!-- 提交 -->
    <input type="submit">
    <!-- 重置 -->
    <input type="reset">
</form>

</body>
</html>

14. 下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
</head>
<body>

<!--下拉框
    selected:默认被选中
-->
<p>城市：
    <select name="area">
        <option value="chengdu">成都</option>
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="hangzhou">杭州</option>
    </select>
</p>

</body>
</html>

15. 单选框 && 多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框 多选框</title>
</head>
<body>

<!--单选框
    value:单选框的值
    name:name相同表示是同一个组
    checked:默认被选中
-->


<form method="get" action="index.html">
    <radio>
        <input type="radio" value="man" name="sex" checked>男
        <input type="radio" value="women" name="sex">女
    </radio>

    <!--多选框-->
    <p> 爱好：
        <input type="checkbox" value="sleep" name="hobby" checked>睡觉
        <input type="checkbox" value="reading" name="hobby">看书
        <input type="checkbox" value="sport" name="hobby">运动
        <input type="checkbox" value="swimming" name="hobby" checked>游泳
    </p>
    <input type="submit" value="提交">

</form>
</body>
</html>

16. 按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
</head>
<body>


<form method="get" action="index.html">
    <!--普通按钮-->
    <input type="button" name="btn1" value="登录">
    <!--图片按钮-->
    <input type="image" name="btn2" src="../resources/bd.jpg">
</form>

</body>
</html>

17. 文本域 && 文件域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本域和文件域</title>
</head>
<body>
<!--文本域-->
<p>反馈：
   <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<input type="file" name="files">

</body>
</html>

18. 搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框和简单验证</title>
</head>
<body>

<p>e-mail:
    <input type="email" name="email">
</p>
<p>URL:
    <input type="url" name="url">
<p>number:
    <input type="number" name="number" max="100" min="0" step="10">
</p>
<p>音量:
    <input type="range" name="voice" min="0" max="10">
</body>
<p>搜索:
    <input type="search" name="search">
</html>

19. 表单简单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单简单验证</title>
</head>
<body>

<!-
    placeholder:提示语
    required:不能为空
    pattern:正则表达式
--->

<h1>注册</h1>
<form action="index.html" method="post" >
    <!-- 文本输入框 -->
    <p>姓名：<input type="text" name="name" placeholder="请输入姓名：" required></p>
    <!-- 密码框 -->
    <p>密码：<input type="password" name="pwd" required></p>
    <p>性别：
        <radio>
            <input type="radio" value="man" name="sex" checked disabled>男
            <input type="radio" value="women" name="sex">女
        </radio>
    </p>
    <p>邮箱:
        <input type="email" name="email" required pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

    <!-- 提交 -->
    <input type="submit">
    <!-- 重置 -->
    <input type="reset">
</form>

</body>
</html>

标签：标签,表单,点击,HTML5,跳转,百度,页面
From： https://www.cnblogs.com/yqquinn/p/17636298.html

相关文章

  • HTML5总结
    一、认识HTML5      （1）H5即是HTML的一个最新的版本，也是web的一个标准。（2）结合CSS3中的内容如:圆角、动画、过渡等效果，提高用户的体验。    （3）新增了javascript的api，使得操作dom更加的方便。（4）还增加了与硬件结合的功能:定位、重力感应.硬件访问......
  • html5中的file控件支持多文件选择上传
    在前两天的博文中刚介绍了一款基于jquery的多文件上传控件uploadify，原理是基于flash达到上传效果的另外，还有一种基于隐藏iframe来实现多文件上传的方法（iframe中放一个form）。但是其实在Html5中，file控件已经支持多文件选择了。file控件元素支持多文件选择，其隐藏的玄机就是下面代码......
  • windows下各个浏览器用html5进行h.264大视频播放的性能对比说明
    最近在调查windows下哪种浏览器进行大视频播放时候稳定性比较高。举h.264的4g的视频为例。选用的浏览器有ie10，firefox，chrome。（因为opera不支持h.264所以没有考虑。safali在windows上的用户不是很多，也暂不考虑）先说明一下，机器的内存是2G。使用的都是最新版本的各个浏览器。采用的是h......
  • uni-app中html5+开发记录
    代码示例：1、创建dom并绑定click事件 btnBack=newplus.nativeObj.View('btnBack',{top:systemInfo.statusBarHeight+'px',//此处top和left是相对于手机屏幕左上角为基准，不支持rightleft:'10px',height:&......
  • 基于HTML5的ssm框架果蔬经营平台
    系统设计目标果蔬经营平台主要是为了用户方便查看商品信息，也是为了更好的让管理员进行更好存储所有数据信息及快速方便的检索功能，对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定考虑用户的可操作性，遵循开发的系统优化的原则，经过全面的调查和研究。系统所要实现的功......
  • HTML5 技术在风电、光伏等新能源领域的应用
    随着新一轮工业革命兴起，应对气候变化日益成为全球共识，能源技术正在成为引领能源产业变革、实现创新驱动发展的源动力。从全球到中国，以风能、光伏发电为代表的新能源产业发展迅速，可再生能源发电与现代电网的融合成为了世界能源可持续转型的核心，发电技术继续沿着大规模、高效率和低成......
  • 基于 HTML5 OpenLayers3 实现 GIS 电信资源管理系统
    前言通过结合HTML5和OpenLayers可以组合成非常棒的一个电信地图网络拓扑图的应用，形成的效果可以用来作为电信资源管理系统，美食定位分享软件，片区找房，绘制铁轨线路等等，各个领域都能够涉及的一款应用。虽然这个Demo是结合OpenLayers3的，其实还可推广到与ArcGIS、百度地图以及......
  • python 使用BeautifulSoup的 html5lib爬取网站内容
    1、使用BeautifulSoup的'html5lib'能像网页工具一样渲染内容。缺点：运行比较慢2、安装包pipinstallhtml5lib3、直接获取网页的所有有效内容importrequests#数据请求模块第三方模块pipinstallrequestsfrombs4importBeautifulSoupheads={'User-Agen......
  • 微信公众号HTML5如何预览EXCEL、word、ppt、pdf等文件
    1、pfile文件预览   很简单一句话window.open('http://www.pfile.com.cn/api/profile/onlinePreview?url='+encodeURIComponent(“文档地址”));使用了一段时间，简单完美，强烈推荐！！！ 2、 officeonlineleturl="https://view.officeapps.live.com/op/view.aspx?src="+......
  • HTML5CSS3提高
    1HTML5新特性1.1概述HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。1.2语义化标签（★★）以前布局，我们基本用div来做......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99