为了能到远方，脚下的每一步都不能少|
收藏闪存小组博问

Morita-desin

园龄：2年粉丝：0关注：2

📂前端小技巧 / html前端小技巧 / css
🔖HTMLHTML5IDEAjava
2023-08-16 21:50阅读: 9评论: 0推荐: 0

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:12345678@qq.com">点击联系我</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>

本文作者：Quinn

本文链接：https://www.cnblogs.com/yqquinn/p/17636298.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Morita-desin  阅读(9)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起