HTML5

最新推荐文章于 2024-11-01 15:19:31 发布
最新推荐文章于 2024-11-01 15:19:31 发布
阅读量331 收藏
点赞数
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XXMRXXX/article/details/108398965
版权

文章目录

01 初识HTML

HTML:Hyper Text Markup Language(超文本标记语言)
超文本包括：文字，图片，音频，视频，动画等。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
单个的标签比如

<!DOCTYPE html>
<html lang="en">
 <meta charset="UTF-8">

等叫做自闭合标签。

02 网页的基本信息

DOCTYPE声明

<title>标签

<meta>标签

<!-- 注释 -->
<!-- DOCTYPE：告知浏览器使用的规范 -->
<!DOCTYPE html>

<!--所有内容都必须在<html lang="en"></html>里面写-->
<html lang="en">

<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签，用来描述网站的一些信息-->
    <!--meta标签一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="我的HTML5">
    <meta name="description" content="飞吧，乌鸦">

    <!--title标签代表网页标题-->
    <title>我的第一个网页</title>
</head>

<!--body标签代表网页主体-->
<body>
Hello, World！
</body>
</html>

在这里插入图片描述
在这里插入图片描述

03 网页基本标签

标题标签

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

</body>
</html>

在这里插入图片描述

段落标签

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

<!--段落标签-->
<p>两只老虎，   两只老虎，</p>
<p>跑得快，    跑得快。</p>
<p>一只没有耳朵，     一只没有尾巴，</p>
<p>真奇怪！    真奇怪！</p>


</body>
</html>

在这里插入图片描述

换行标签

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

<!--段落标签-->
<p>两只老虎，   两只老虎，</p>
<p>跑得快，    跑得快。</p>
<p>一只没有耳朵，     一只没有尾巴，</p>
<p>真奇怪！    真奇怪！</p>

<!--换行标签-->
两只老虎，   两只老虎，<br/>
跑得快，    跑得快。<br/>
一只没有耳朵，     一只没有尾巴，<br/>
真奇怪！    真奇怪！<br/>
</body>
</html>

在这里插入图片描述

水平线标签

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

<!--段落标签-->
<p>两只老虎，   两只老虎，</p>
<p>跑得快，    跑得快。</p>
<p>一只没有耳朵，     一只没有尾巴，</p>
<p>真奇怪！    真奇怪！</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
两只老虎，   两只老虎，<br/>
跑得快，    跑得快。<br/>
一只没有耳朵，     一只没有尾巴，<br/>
真奇怪！    真奇怪！<br/>
</body>
</html>

在这里插入图片描述

字体样式标签
在这里插入图片描述

注释和特殊符号

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

<!--段落标签-->
<p>两只老虎，   两只老虎，</p>
<p>跑得快，    跑得快。</p>
<p>一只没有耳朵，     一只没有尾巴，</p>
<p>真奇怪！    真奇怪！</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
两只老虎，   两只老虎，<br/>
跑得快，    跑得快。<br/>
一只没有耳朵，     一只没有尾巴，<br/>
真奇怪！    真奇怪！<br/>

<!--粗体，斜体-->
<h1>字体样式标签</h1>

粗体：<strong>I love you</strong><br/>

斜体：<em>I love you</em><br/>

<!--特殊符号-->
空                    格：中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;国
<br>
大于号：&gt;
<br>
小于号：&lt;
<br>
<!--
    特殊符号
        1.代码提示
        2.百度
-->

</body>
</html>

04 图像标签

JPG
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img标签学习
        src:图片地址
            相对地址(推荐)： ../表示上一级目录
            绝对地址：
-->
<img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300">

</body>
</html>

GIF
PNG
BMP

05超链接标签及应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为锚标记-->
<a name="top">顶部</a>

<!--a标签学习
        herf:必填，表示要跳转到哪个页面
        target:表示窗口在哪里打开，默认在当前网页打开_self
            _bank  在新标签中打开
            _self  在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com">点击我跳转到百度</a>

<br>

<!--图片超链接-->
<a href="1.我的第一个网页.html">
    <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300">
</a>


<p>
    <!--图片超链接-->
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300">
    </a>
</p>

<p>
    <!--图片超链接-->
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300">
    </a>
</p>

<p>
    <!--图片超链接-->
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300">
    </a>
</p>

<p>
    <!--图片超链接-->
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300">
    </a>
</p>

<p>
    <!--图片超链接-->
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300">
    </a>
</p>

<p>
    <!--图片超链接-->
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300">
    </a>
</p>

<p>
    <!--图片超链接-->
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300">
    </a>
</p>

<p>
    <!--图片超链接-->
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300">
    </a>
</p>



<!--锚链接
    1.需要一个锚标记
    2.跳转到标记 #加标记名字
-->
<a href="#top">回到顶部</a><br>

<a href="3.图像标签.html#pic">跳转到图像标签页面的图片</a><br>


<!--功能性链接
    邮件链接：mailto
    qq链接：登录不上hp艹
-->
<a href="mailto:763860505@qq.com">点击联系我</a>


</body>
</html>

06 块元素和行内元素

在这里插入图片描述

07 列表标签

在这里插入图片描述

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

<!--有序列表orderlist
    应用范围：试卷，问答
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C/C++</li>
    <li>web</li>
    <li>sql</li>
    <li>ssm</li>
</ol>

<!--分割线-->
<hr/>

<!--无序列表unorderlist
    应用范围：导航，侧边栏
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C/C++</li>
    <li>web</li>
    <li>sql</li>
    <li>ssm</li>
</ul>

<hr/>

<!--自定义列表definitionlist
    dl:自定义列表标签
    dt:列表名称
    dd:列表选项
    应用范围：公司网站底部
-->
<dl>
    <dt>科目</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C/C++</dd>
    <dd>ssm</dd>

    <dt>位置</dt>

    <dd>山东</dd>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>深圳</dd>

</dl>

</body>
</html>

08 表格标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
    行tr
    列td
    边框border
-->
<table border="1px">
    <!--第1行有3列-->
    <tr>
        <!--colspan跨列 -->
        <td colspan="4">1-1</td>
<!--        <td>1-2</td>-->
<!--        <td>1-3</td>-->
<!--        <td>1-4</td>-->
    </tr>

    <!--第2行有3列-->
    <tr>
        <!--rowspan跨行 -->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>

    <!--第3行有3列-->
    <tr>
<!--        <td>3-1</td>-->
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格作业</title>
</head>
<body>
<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>

    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>

    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>

    <tr>
        <td rowspan="2">笨笨</td>
        <td>语文</td>
        <td>99</td>
    </tr>

    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>


</body>
</html>

在这里插入图片描述

09 媒体元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--音频和视频
    src：资源路径
    controls：控制条
    autoplay：自动播放
-->

<video src="../resources/video/动态规划简介.mp4" controls autoplay></video>

<audio src="../resources/audio/xxx.mp3" controls autoplay></audio>

</body>
</html>

10 页面结构分析

在这里插入图片描述

11 iframe内联框架

在这里插入图片描述

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

<!--bilibili分享视频代码-->
<!--<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>-->

<!--iframe内联框架
    src：地址
    w-h：宽度高度
    name：
-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

<!--通过a标签往iframe里面加东西，没有hello则会跳转，不会内联打开-->
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>

</body>
</html>

11 初识表单post和get提交*

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
    action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    method：提交方式
        post:比较安全，可以传输大文件，
        get:get方式提交，我们可以在url中看到我们提交的信息，不安全，高效
-->
<form action="1.我的第一个网页.html" method="post">
    <!--文本输入框<input type="text">-->
    <p>名字：<input type="text" name="username"></p>

    <!--密码框<input type="password">-->
    <p>密码：<input type="password" name="pwd"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>

</body>
</html>

13 文本框和单选框

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
    action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    method：提交方式
        post:比较安全，可以传输大文件，
        get:get方式提交，我们可以在url中看到我们提交的信息，不安全，高效
-->
<form action="1.我的第一个网页.html" method="post">
    <!--文本输入框<input type="text">
    value="否否好帅" 默认初始值
    maxlength="8" 最长能写几个字符
    size="30" 文本框长度
    -->
<!--    <p>名字：<input type="text" name="username" value="否否好帅" maxlength="8" size="30"></p>-->
    <p>名字：<input type="text" name="username"></p>

    <!--密码框<input type="password">-->
    <p>密码：<input type="password" name="pwd"></p>

    <!--单选框标签
        input type="radio"
        value:单选框的值
        name:表示组名
    -->
    <p>性别：
        <input type="radio" value="male" name="gender"/>男
        <input type="radio" value="female" name="gender"/>女
    </p>


    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>

</body>
</html>

14 按钮和多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
    action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    method：提交方式
        post:比较安全，可以传输大文件，
        get:get方式提交，我们可以在url中看到我们提交的信息，不安全，高效
-->
<form action="1.我的第一个网页.html" method="post">
    <!--文本输入框<input type="text">
    value="否否好帅" 默认初始值
    maxlength="8" 最长能写几个字符
    size="30" 文本框长度
    -->
<!--    <p>名字：<input type="text" name="username" value="否否好帅" maxlength="8" size="30"></p>-->
    <p>名字：<input type="text" name="username"></p>

    <!--密码框<input type="password">-->
    <p>密码：<input type="password" name="pwd"></p>


    <!--单选框标签
        input type="radio"
        value:单选框的值
        name:表示组名
    -->
    <p>性别：
        <input type="radio" value="male" name="gender"/>男
        <input type="radio" value="female" name="gender"/>女
    </p>


    <!--多选框
        input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="smoking" name="hobby">抽烟
        <input type="checkbox" value="drink" name="hobby">喝酒
        <input type="checkbox" value="perm" name="hobby">烫头
    </p>


    <!--创建按钮
        input type="button" 普通按钮
        input type="image" 图像按钮
        input type="submit" 提交按钮
        input type="reset" 重置按钮
        value:按钮上面显示的字
        图片也可以作为按钮
    -->
    <p>
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resources/image/T-mac.jpg">
    </p>


    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

</form>

</body>
</html>

15 列表框文本域和文件域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
    action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    method：提交方式
        post:比较安全，可以传输大文件，
        get:get方式提交，我们可以在url中看到我们提交的信息，不安全，高效
-->
<form action="1.我的第一个网页.html" method="post">
    <!--文本输入框<input type="text">
    value="否否好帅" 默认初始值
    maxlength="8" 最长能写几个字符
    size="30" 文本框长度
    -->
<!--    <p>名字：<input type="text" name="username" value="否否好帅" maxlength="8" size="30"></p>-->
    <p>名字：<input type="text" name="username"></p>

    <!--密码框<input type="password">-->
    <p>密码：<input type="password" name="pwd"></p>


    <!--单选框标签
        input type="radio"
        value:单选框的值
        name:表示组名
    -->
    <p>性别：
        <input type="radio" value="male" name="gender"/>男
        <input type="radio" value="female" name="gender"/>女
    </p>


    <!--多选框
        input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="smoking" name="hobby">抽烟
        <input type="checkbox" value="drink" name="hobby">喝酒
        <input type="checkbox" value="perm" name="hobby" checked>烫头  <!--checked表示默认选中-->
    </p>


    <!--创建按钮
        input type="button" 普通按钮
        input type="image" 图像按钮
        input type="submit" 提交按钮
        input type="reset" 重置按钮
        value:按钮上面显示的字
        图片也可以作为按钮
    -->
    <p>
        <input type="button" name="btn1" value="点击变长">
<!--        <input type="image" src="../resources/image/T-mac.jpg">-->
    </p>


    <!--下拉框-->
    <p>国家：
        <select name="列表名称">
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值" selected>日本</option>   <!--selected表示默认选中-->
            <option value="选项的值">英国</option>
        </select>
    </p>


    <!--文本域-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>


    <!--文件域-->
    <p>文件域：
        <input type="file" name="files">
        <input type="button"  value="上传文件" name="upload">
    </p>


    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>


</form>

</body>
</html>

16 搜索框滑块和简单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
    action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    method：提交方式
        post:比较安全，可以传输大文件，
        get:get方式提交，我们可以在url中看到我们提交的信息，不安全，高效
-->
<form action="1.我的第一个网页.html" method="post">
    <!--文本输入框<input type="text">
    value="否否好帅" 默认初始值
    maxlength="8" 最长能写几个字符
    size="30" 文本框长度
    -->
<!--    <p>名字：<input type="text" name="username" value="否否好帅" maxlength="8" size="30"></p>-->
    <p>名字：<input type="text" name="username"></p>

    <!--密码框<input type="password">-->
    <p>密码：<input type="password" name="pwd"></p>


    <!--单选框标签
        input type="radio"
        value:单选框的值
        name:表示组名
    -->
    <p>性别：
        <input type="radio" value="male" name="gender"/>男
        <input type="radio" value="female" name="gender"/>女
    </p>


    <!--多选框
        input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="smoking" name="hobby">抽烟
        <input type="checkbox" value="drink" name="hobby">喝酒
        <input type="checkbox" value="perm" name="hobby" checked>烫头  <!--checked表示默认选中-->
    </p>


    <!--创建按钮
        input type="button" 普通按钮
        input type="image" 图像按钮
        input type="submit" 提交按钮
        input type="reset" 重置按钮
        value:按钮上面显示的字
        图片也可以作为按钮
    -->
    <p>
        <input type="button" name="btn1" value="点击变长">
<!--        <input type="image" src="../resources/image/T-mac.jpg">-->
    </p>


    <!--下拉框-->
    <p>国家：
        <select name="列表名称">
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值" selected>日本</option>   <!--selected表示默认选中-->
            <option value="选项的值">英国</option>
        </select>
    </p>


    <!--文本域-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>


    <!--文件域-->
    <p>文件域：
        <input type="file" name="files">
        <input type="button"  value="上传文件" name="upload">
    </p>


    <!--邮件验证-->
    <p>邮件验证：
        <input type="email" name="email">
    </p>

    <!--URL验证-->
    <p>URL验证：
        <input type="url" name="url">
    </p>

    <!--数字验证-->
    <p>数字验证：
        <input type="number" name="number" max="100" min="0" step="1">
    </p>


    <!--滑块-->
    <p>音量：
        <input type="range" name="voice" min="0" max="10">
    </p>


    <!--搜索框-->
    <p>搜索框：
        <input type="search" name="search">
    </p>


    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>


</form>

</body>
</html>

17 表单的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
    action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    method：提交方式
        post:比较安全，可以传输大文件，
        get:get方式提交，我们可以在url中看到我们提交的信息，不安全，高效
-->
<form action="1.我的第一个网页.html" method="post">
    <!--文本输入框<input type="text">
    value="否否好帅" 默认初始值
    maxlength="8" 最长能写几个字符
    size="30" 文本框长度
    -->
<!--    <p>名字：<input type="text" name="username" value="否否好帅" maxlength="8" size="30"></p>-->
    <p>名字：<input type="text" name="username" value="admin" readonly></p> <!--默认admin，只读不可修改-->

    <!--密码框<input type="password">-->
    <p>密码：<input type="password" name="pwd" hidden value="123456"></p>  <!--hidden隐藏选项-->


    <!--单选框标签
        input type="radio"
        value:单选框的值
        name:表示组名
    -->
    <p>性别：
        <input type="radio" value="male" name="gender" disabled/>男  <!--disabled禁用选项-->
        <input type="radio" value="female" name="gender"/>女
    </p>


    <!--多选框
        input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="smoking" name="hobby">抽烟
        <input type="checkbox" value="drink" name="hobby">喝酒
        <input type="checkbox" value="perm" name="hobby" checked>烫头  <!--checked表示默认选中-->
    </p>


    <!--创建按钮
        input type="button" 普通按钮
        input type="image" 图像按钮
        input type="submit" 提交按钮
        input type="reset" 重置按钮
        value:按钮上面显示的字
        图片也可以作为按钮
    -->
    <p>
        <input type="button" name="btn1" value="点击变长">
<!--        <input type="image" src="../resources/image/T-mac.jpg">-->
    </p>


    <!--下拉框-->
    <p>国家：
        <select name="列表名称">
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值" selected>日本</option>   <!--selected表示默认选中-->
            <option value="选项的值">英国</option>
        </select>
    </p>


    <!--文本域-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>


    <!--文件域-->
    <p>文件域：
        <input type="file" name="files">
        <input type="button"  value="上传文件" name="upload">
    </p>


    <!--邮件验证-->
    <p>邮件验证：
        <input type="email" name="email">
    </p>

    <!--URL验证-->
    <p>URL验证：
        <input type="url" name="url">
    </p>

    <!--数字验证-->
    <p>数字验证：
        <input type="number" name="number" max="100" min="0" step="1">
    </p>


    <!--滑块-->
    <p>音量：
        <input type="range" name="voice" min="0" max="10">
    </p>


    <!--搜索框-->
    <p>搜索框：
        <input type="search" name="search">
    </p>


    <!--增强鼠标可用性
        点击选项可以锁定到文本输入框或选择框
    -->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>


    <!--提交重置-->
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>


</form>

</body>
</html>

18 表单初级验证

常用方式
placeholder 提示信息
required 非空判断
pattern 正则表达式判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
    action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    method：提交方式
        post:比较安全，可以传输大文件，
        get:get方式提交，我们可以在url中看到我们提交的信息，不安全，高效
-->
<form action="1.我的第一个网页.html" method="post">
    <!--文本输入框<input type="text">
    value="否否好帅" 默认初始值
    maxlength="8" 最长能写几个字符
    size="30" 文本框长度
    -->
<!--    <p>名字：-->
<!--        <input type="text" name="username" value="否否好帅" maxlength="8" size="30">-->
<!--    </p>-->
<!--    -->
<!--    <p>名字：-->
<!--        <input type="text" name="username" value="admin" readonly>&lt;!&ndash;默认admin，只读不可修改&ndash;&gt;-->
<!--    </p> -->

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

    <!--密码框<input type="password">-->
    <p>密码：
        <input type="password" name="pwd" hidden value="123456" required>
    </p>  <!--hidden隐藏选项-->


    <!--单选框标签
        input type="radio"
        value:单选框的值
        name:表示组名
    -->
    <p>性别：
        <input type="radio" value="male" name="gender" disabled/>男  <!--disabled禁用选项-->
        <input type="radio" value="female" name="gender"/>女
    </p>


    <!--多选框
        input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="smoking" name="hobby">抽烟
        <input type="checkbox" value="drink" name="hobby">喝酒
        <input type="checkbox" value="perm" name="hobby" checked>烫头  <!--checked表示默认选中-->
    </p>


    <!--创建按钮
        input type="button" 普通按钮
        input type="image" 图像按钮
        input type="submit" 提交按钮
        input type="reset" 重置按钮
        value:按钮上面显示的字
        图片也可以作为按钮
    -->
    <p>
        <input type="button" name="btn1" value="点击变长">
<!--        <input type="image" src="../resources/image/T-mac.jpg">-->
    </p>


    <!--下拉框-->
    <p>国家：
        <select name="列表名称">
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值" selected>日本</option>   <!--selected表示默认选中-->
            <option value="选项的值">英国</option>
        </select>
    </p>


    <!--文本域-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10" required>文本内容</textarea>
    </p>


    <!--文件域-->
    <p>文件域：
        <input type="file" name="files">
        <input type="button"  value="上传文件" name="upload">
    </p>


    <!--邮件验证-->
    <p>邮件验证：
        <input type="email" name="email" required>
    </p>

    <!--URL验证-->
    <p>URL验证：
        <input type="url" name="url" required>
    </p>

    <!--数字验证-->
    <p>数字验证：
        <input type="number" name="number" max="100" min="0" step="1">
    </p>


    <!--滑块-->
    <p>音量：
        <input type="range" name="voice" min="0" max="10">
    </p>


    <!--搜索框-->
    <p>搜索框：
        <input type="search" name="search">
    </p>


    <!--增强鼠标可用性
        点击选项可以锁定到文本输入框或选择框
    -->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>


    
    <!--自定义邮箱-->
    <p>
        <!--pattern正则表达式验证-->
        <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>
    <!--提交重置-->
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>


</form>

</body>
</html>

19 HTML总结

在这里插入图片描述

GrandNovice
关注
专栏目录
Grand-HTML5:软工大作业
05-13
Grand-HTML5 软工大作业 需求分析 该网站服务的三个对象 教师,助教,学生 教师的需求 上传课件 修改展示内容 查看作业提交情况和给分情况 发布作业 批量下载作业 助教的需求 发布作业 录入成绩 批量创建学生账号 批量删除学生账号 批量下载作业文件 学生的需求 下载课件 提交作业 查看作业是否提交 查看作业得分
html grid插件,grid.html
weixin_36397256的博客
06-29 179
Bootstrap网格 - Bootstrap后台管理系统模版Ace下载.center {text-align:center;}.center [class*="col-"] {margin-top:2px;margin-bottom:2px;padding-top:4px;padding-bottom:4px;position:relative;text-overflow:ellipsis;}....
HTML网页大作业代码【免费代码已上传】
网页设计与制作
12-08 189
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构
HTML5 常见的几种新特征
QIANDXX的博客
06-21 186
语义标签 html5语义标签，可以使开发者更方便清晰构建页面的布局 标签 描述 <header> 定义了文档的头部区域 <footer> 定义了文档的尾部区域 <nav> 定义文档的导航 <section> 定义文档中的节 <article> 定义文章 <aside> 定义页面以外的内容 <details> 定义用户可以看到或者隐藏的额外细节 <summary> 标签包
100套大数据可视化炫酷大屏Html5模板
DreamCoders
07-31 23万+
100套大数据可视化炫酷大屏Html5模板；包含行业：社区、物业、政务、交通、金融银行等，全网最新、最多，最全、最酷、最炫大数据可视化模板。 源码地址 giteehttps://gitee.com/iGaoWei/big-data-view githubhttps://github.com/iGaoWei/BigDataView 使用说明 直接下载，使用浏览器访问静态页面即可。 git拉取代码 $ git clonehttps://gitee....
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
一个简单的网页设计HTML5作业
好好读书
06-26 9万+
简单的html设计作业，初次学习，希望指正！
前端HTML5十大新特性详细总结
weixin_45709829的博客
04-04 1万+
前端HTML5十大新特性总结 一 必须知道 写前端的都知道，在代码最前面都有这一行代码，大家都知道一定要把这东西写上去。 <!DOCTYPE html> 但是！这是什么玩意儿？为什么要写上去?不写上去会怎么样？很少人去注意到，反正就照写就可以了。 所以，这是个啥玩意儿?这是声明！这是HTML5声明的新特性！ 既然有HTML5，那肯定有HTML4是吧，那HTML4是怎么声明的呢？ HTML4有三种声明方式：Strict（严格模式），Transitional（过渡模式），Frameset（框架模式
HTML5快速设计网页
小人物
06-23 3万+
HTML5快速设计网页 目录 一、认识web开发和软件安装 二、使用HTML/HTML5搭建页面骨架 一、认识web开发和软件安装 1、认识网页：商城网页比较经典，比如京东，淘宝、小米商城还有锤子官网等有图片、文字还有一些多媒体组合而成的。我们还需要善于观察然后模仿成自己的 2、网站：由多个网页组织在一起而成的，网页和网页之间是有联系的。就像蜘蛛网一样织成一张大网 3、用户眼中...
HTML5 标签大全笔记，用到的时候翻一下，百度都省了！
龙叔的博客
08-24 2万+
HTML标签大全，前端方向必备
HTML5图表框架echarts实战项目(50套源码)，大数据平台展示可视化效果
02-09
最近接了个任务需要用H5在前台两个大电视上做两页数据展示公司的产品数据，效果要高大上，还好之前接触过HTML5，所以第一时间想到就是echarts，这个框架对于数据展示尤其图表类处理的还是非常强大和炫酷的。...
程序员给女朋友用HTML5制作的3D相册
04-21
HTML5是一种强大的网页开发技术，它为网页开发者提供了丰富的功能和接口，使得创建交互式、动态和响应式的网站成为可能。在这个"程序员给女朋友用HTML5制作的3D相册"项目中，我们可以看到HTML5如何被巧妙地利用来...
50余款手机页面模版源码html5
11-16
50余款手机页面模版源码html5 1.1【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 2【32赞HTML5响应式系列之订餐模板】微官网美食订餐html5触屏响应式手机wap网站订餐模板 5【32...
纯HTML5拓扑图编辑器源代码
04-07
屌爆的纯HTML5拓扑图编辑器源代码，找了很久终于申请到，运行就是这个效果 http://www.hightopo.com/blog/wp-content/uploads/2014/08/Screen-Shot-2014-08-12-at-8.57.11-PM.png 可参考这篇博客 ...
html5-表格练习题
tester92的博客
04-18 6094
纯html编写（仅供参考，并非完美答案）：&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;title&gt;&lt;/title&gt;    &lt;/head&gt;    &lt;body&gt;        
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
HTML 基础标签——元数据标签 ＜meta＞
最新发布
Allen-
11-01 200
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2063
【代码】炫酷的登录框!(附源码)
HTML小阶段二维表和思维导图
2301_79075752的博客
10-29 914
下面是对标签、元素、属性的对比二维表，通过对比3w1h（what是什么、where用在哪、why为什么要用、how如何用）来学习区分学习标签、元素、属性标签元素属性what（Tags）标签是用来标记内容块或标明元素内容意义（Element）网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。（Attribute）与元素相关的特性，用于提供额外的信息或配置选项。where开始标签：位于元素的开头，用于标记一个元素的开始。
HTML5Plus移动应用开发详解
"HTML5Plus应用开发指南，移动应用开发，HBUILDER开发文档" HTML5Plus是一种扩展了HTML5标准的规范，旨在增强HTML5在移动应用开发中的功能，弥补其在处理系统能力和设备能力上的不足。这个规范由www.html5plus.org...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值