HTML5学习

本文详细介绍了HTML5的基础知识,包括HTML的定义、优势和常见IDE,以及网页基本标签如标题、段落、换行、水平线和字体样式。接着讲解了图像、超链接、网页布局、列表、表格和媒体元素的使用。重点讨论了表单的结构、属性、不同类型的输入元素,如文本、密码、单选、多选、按钮、文本域和文件域,并展示了如何进行简单的前端验证。此外,还提到了内联框架和表单应用示例。
摘要由CSDN通过智能技术生成

HTML5

概要:

  • 1、初识HTML
  • 2、网页基本标签
  • 3、图像,超链接,网页布局
  • 4、列表,表格,媒体元素
  • 5、表单及表单应用(重点)
  • 6、表单初级验证(重点)

一、 什么是HTML:

1、HTML(Hyper Text Markup Language , 超文本标记语言,超文本包括:文字、图片、音频、视频、动画等)

2、优势:主流游览器厂商都支持HTML5,市场的需求,跨平台

3、W3C标准 World Wide Web Consortium(万维网联盟)

4、常见IDE : 记事本 ;Dreamweaver ;WebStorm ; IDEA(内集成了WebStorm) …

二、网页基本标签

<!-- -->
<!--DOCTYPE:告诉游览器,我们要是用什么规范,默认为html-->
<!DOCTYPE html>
<!--
<html lang="en">
</html>
总的标签,html写在这之间
-->
<html lang="en">

<!--    head标签代表网页头部-->
<head>
<!--    meta描述性标签,他用来描述我们网站的一些信息-->
<!--    meta标签一般用来做SEO-->
    <meta charset="UTF-8">

<!--    title标签指的是网页的标题-->
    <title>Title</title>
</head>
<body>
<!--body标签代表网页主体-->
Hello,World!
</body>
</html>


  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<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>
一只没有耳朵,一只没有尾巴,真奇怪!真奇怪!

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

粗体:<strong>i love you</strong>
斜体:<em>i love you</em>
<br/>
<!--特殊符号-->
空                   格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
&gt; 大于号
<br/>
&lt;  小于号
<br/>

&copy; 版权所有菜鸟

<!--特殊符号记忆方式

    &   ;

-->

</body>
</html>

在这里插入图片描述

三.1 图像标签

常见的图片格式:JPG GIF PNG BMP …

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
src: 图片地址(相对路径(推荐使用))(绝对地址 )
(../ 代表上一级目录)

 -->

<img src="../resources/image/1.jpg" alt="孙悟空" 
     title="齐天大圣"  
     width="100" height="100">

</body>
</html>

在这里插入图片描述

三.2 超链接标签及应用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name做标记-->
<a name = "top">顶部</a>
<!--a标签
href : 必填,表示要跳转的那个页面
target : 表示窗口在哪里打开
    _blank  在新标签中打开
    _self   在自己的网页中打开

-->

<a href = "1.我的第一个网页.html"  target = _blank>  点击我跳转到页面-</a>
<a href = "https://www.baidu.com"  target = _self>点击我跳转到百度</a>
</br>

<a href ="1.我的第一个网页.html">
    <img src = "../resources/image/1.jpg" alt = "我的第一个页面">
</a>

</br>

<a href ="1.我的第一个网页.html">
    <img src = "../resources/image/1.jpg" alt = "我的第一个页面">
</a>


<!--锚标签
1.需要一个锚标记
2.跳转到标记
#

-->

<a href = "4.链接标签.html#top">回到顶部</a>

<!--功能性链接
邮件链接:mailto
QQ链接: QQ推广

-->
<a href = "mailto:990313438@qq.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::51" alt="点击领取小电影" title="点击领取小电影"/></a>

</body>
</html>

在这里插入图片描述

三.3 行内元素和块元素

块元素:无论内容多少,该元素独占一行(p、h1-h6)

行内元素: 内容撑开宽度,左右都是行内元素的可以排在一行(a、strong、em)

四.列表、表格、媒体元素

列表:有序、无序、自定义

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

<!--有序列表-->
<!--应用范围:试卷,问答。。。-->
<ol>
    <li>java</li>
    <li>c++</li>
    <li>运维</li>
    <li>前端</li>

</ol>

</hr>

<!--无序列表-->
<!--应用范围:导航、侧边栏......-->
<ul>

    <li>java</li>
    <li>c++</li>
    <li>运维</li>
    <li>前端</li>

</ul>

</hr>

<!--自定义列表
dl: 标签
dt: 列表名称
dd: 列表内容
应用范围:公司网站底部。。。
-->
<dt>

    <dt>学科</dt>
    <dd>c++</dd>
    <dd>java</dd>

    <dt>老师</dt>
    <dd>张老师</dd>
    <dd>李老师</dd>
    <dd>王老师</dd>


</dt>


</body>
</html>

表格

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

<!--表格table
行  tr
列  td

-->

<table border="1px">
  <tr>
<!-- colspan 跨列   -->
    <td colspan = "4">1-1</td>
    <td>1-2</td>
    <td>1-3</td>
    <td>1-4</td>
  </tr>

  <tr>
<!-- rowspan 跨行   -->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>

  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
    <td>3-4</td>
  </tr>

</table>

</body>
</html>

媒体元素 (视频元素 video 音频元素 audio)

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

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

-->

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

<!--音频
src : 资源路径
controls: 控制条
autoplay: 自动播放

-->

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

</body>
</html>

页面结构分析

在这里插入图片描述

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

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

内联框架

在这里插入图片描述

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

<!--iframe内联框架
    src : 地址
    w-h : 宽度高度
-->

<!--<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 = "https://www.baidu.com" name = "hello" frameborder = "0" width ="500px" height = "600px">

</iframe>

<a href = "1.我的第一个网页.html" target = "hello">点击跳转</a>

</body>
</html>

五、表单及表单应用(重点)

在这里插入图片描述

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

<h1>注册</h1>

<!--表单form

action: 表单提交的位置,可以是网站,也可以是一个请求处理地址
method: post , get 提交方式
        gte方式提交: 我们可以在url中看到我们提交的信息,不安全,高效
        post方式提交: 比较安全,传输大文件
-->

<form action = "1.我的第一个网页.html" method = "post"

<!--      文本输入框  input type = "text"-->

        <p>名字: <input type = "text" name = "username"></p>
<!--        密码框  input type = "password"-->
        <p>密码: <input type = "password" name = "password"></p>

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

</body>
</html>

表单元素格式

在这里插入图片描述

单选框

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

<h1>注册</h1>

<!--表单form

action: 表单提交的位置,可以是网站,也可以是一个请求处理地址
method: post , get 提交方式
        gte方式提交: 我们可以在url中看到我们提交的信息,不安全,高效
        post方式提交: 比较安全,传输大文件
-->

<form action = "1.我的第一个网页.html" method = "post"

<!--      文本输入框  input type = "text"
            value="张三浪迹天涯"  默认初始值
            maxlength="8"       最长能写几个字符
            size="30"           文本框的长度
-->

        <p>名字: <input type = "text" name = "username" value="张三浪迹天涯" maxlength="8"></p>
<!--        密码框  input type = "password"-->
        <p>密码: <input type = "password" name = "password"></p>

<!--       单选框标签
            input type = "radio"
            value : 单选框的值
            name :表示组
    -->
        <p>性别:
            <input type = "radio" value="body" name = "sex"/>男
            <input type = "radio" value="girl" name = "sex"/>女
        </p>

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

</body>
</html>

按钮和多选框

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

<h1>注册</h1>

<!--表单form

action: 表单提交的位置,可以是网站,也可以是一个请求处理地址
method: post , get 提交方式
        gte方式提交: 我们可以在url中看到我们提交的信息,不安全,高效
        post方式提交: 比较安全,传输大文件
-->

<form action = "1.我的第一个网页.html" method = "get"

<!--      文本输入框  input type = "text"
            value="张三浪迹天涯"  默认初始值
            maxlength="8"       最长能写几个字符
            size="30"           文本框的长度
-->

        <p>名字: <input type = "text" name = "username" value="张三浪迹天涯" maxlength="8"></p>
<!--        密码框  input type = "password"-->
        <p>密码: <input type = "password" name = "password"></p>

<!--       单选框标签
            input type = "radio"
            value : 单选框的值
            name :表示组
    -->
        <p>性别:
            <input type = "radio" value="body" name = "sex"/>男
            <input type = "radio" value="girl" name = "sex"/>女
        </p>

<!--    多选框
        input type = "checkbox"
-->

        <p>爱好:
            <input type = "checkbox" value = "swim" name = "hobby"> 游泳
            <input type = "checkbox" value = "sleep" name = "hobby"> 睡觉
            <input type = "checkbox" value = "run" name = "hobby"> 跑步
            <input type = "checkbox" value = "game" name = "hobby"> 游戏
        </p>

<!--    按钮
        input type = "button" 普通按钮
        type = "image"      图片按钮
        input type = "submit"   提交按钮
        type = "reset"      重置
-->
        <p>按钮:
            <input type = "button" value="点击变长" name="btn1">
            <input type = "image" src = "../resources/image/1.jpg">


        </p>


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

</body>
</html>

文本域和文件域

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

<h1>注册</h1>

<!--表单form

action: 表单提交的位置,可以是网站,也可以是一个请求处理地址
method: post , get 提交方式
        gte方式提交: 我们可以在url中看到我们提交的信息,不安全,高效
        post方式提交: 比较安全,传输大文件
-->

<form action = "1.我的第一个网页.html" method = "get"

<!--      文本输入框  input type = "text"
            value="张三浪迹天涯"  默认初始值
            maxlength="8"       最长能写几个字符
            size="30"           文本框的长度
-->

        <p>名字: <input type = "text" name = "username" value="张三浪迹天涯" maxlength="8"></p>
<!--        密码框  input type = "password"-->
        <p>密码: <input type = "password" name = "password"></p>

<!--       单选框标签
            input type = "radio"
            value : 单选框的值
            name :表示组
    -->
        <p>性别:
            <input type = "radio" value="body" name = "sex"/>男
            <input type = "radio" value="girl" name = "sex"/>女
        </p>

<!--    多选框
        input type = "checkbox"
-->

        <p>爱好:
            <input type = "checkbox" value = "swim" name = "hobby"> 游泳
            <input type = "checkbox" value = "sleep" name = "hobby" checked> 睡觉
            <input type = "checkbox" value = "run" name = "hobby"> 跑步
            <input type = "checkbox" value = "game" name = "hobby"> 游戏
        </p>

<!--    按钮
        input type = "button" 普通按钮
        type = "image"      图片按钮
        input type = "submit"   提交按钮
        type = "reset"      重置
-->
        <p>按钮:
            <input type = "button" value="点击变长" name="btn1">
            <input type = "image" src = "../resources/image/1.jpg">


        </p>

<!--    下拉框,列表框

-->

        <p>下拉框:
            <select name = "列表名称">
                <option value = "Chinese">中国</option>
                <option value = "USA">美国</option>
                <option value = "India">印度</option>
                <option value = "Japan">日本</option>
            </select>

        </p>

<!--        文本域

    -->
        <p>反馈:
            <textarea name = "textarea" cols = "20" row = "20">文本内容</textarea>
        </p>

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


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

</body>
</html>

搜索框滑块和简单验证

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

<h1>注册</h1>

<!--表单form

action: 表单提交的位置,可以是网站,也可以是一个请求处理地址
method: post , get 提交方式
        gte方式提交: 我们可以在url中看到我们提交的信息,不安全,高效
        post方式提交: 比较安全,传输大文件
-->

<form action = "1.我的第一个网页.html" method = "get"

<!--      文本输入框  input type = "text"
            value="张三浪迹天涯"  默认初始值
            maxlength="8"       最长能写几个字符
            size="30"           文本框的长度
-->

        <p>名字: <input type = "text" name = "username" value="张三浪迹天涯" maxlength="8"></p>
<!--        密码框  input type = "password"-->
        <p>密码: <input type = "password" name = "password"></p>

<!--       单选框标签
            input type = "radio"
            value : 单选框的值
            name :表示组
    -->
        <p>性别:
            <input type = "radio" value="body" name = "sex"/>男
            <input type = "radio" value="girl" name = "sex"/>女
        </p>

<!--    多选框
        input type = "checkbox"
-->

        <p>爱好:
            <input type = "checkbox" value = "swim" name = "hobby"> 游泳
            <input type = "checkbox" value = "sleep" name = "hobby" checked> 睡觉
            <input type = "checkbox" value = "run" name = "hobby"> 跑步
            <input type = "checkbox" value = "game" name = "hobby"> 游戏
        </p>

<!--    按钮
        input type = "button" 普通按钮
        type = "image"      图片按钮
        input type = "submit"   提交按钮
        type = "reset"      重置
-->
        <p>按钮:
            <input type = "button" value="点击变长" name="btn1">
            <input type = "image" src = "../resources/image/1.jpg">


        </p>

<!--    下拉框,列表框

-->

        <p>下拉框:
            <select name = "列表名称">
                <option value = "Chinese">中国</option>
                <option value = "USA">美国</option>
                <option value = "India">印度</option>
                <option value = "Japan">日本</option>
            </select>

        </p>

<!--        文本域

    -->
        <p>反馈:
            <textarea name = "textarea" cols = "20" row = "20">文本内容</textarea>
        </p>

<!--        文件域
            input type = "file" name = "files"
-->
        <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 = "num" max="100" min="0" step="10">
        </p>

<!--    滑块-->
        <p>音量:
            <input type = "range" name="voice" min="0" max="100" step="1">

        </p>

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


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

</body>
</html>

五. 2 表单应用

在这里插入图片描述

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled
  • 默认值 checked
<!--        增强鼠标可用性-->

        <p>
            <label for="mark">你点我试试</label>
            <input type = "text" id = "mark">
        </p>

六、表单初级验证

作用:在前端进行简单的验证,减轻服务器压力,保证数据的安全性。

常用方式:

  • placeholder 提示信息 用在输入框中
  • required 不能为空,非空判断
  • pattern 正则表达式
<!--    pattern 正则表达式-->
        <p>自定义邮箱:(可以从网上查到常用正则表达式)
            <input type = "text" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
        </p>

总结

在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值