HTMl基础

最新推荐文章于 2024-07-18 18:43:34 发布

胖崽呀

最新推荐文章于 2024-07-18 18:43:34 发布

阅读量79

点赞数

文章标签： html5 html css

本文链接：https://blog.csdn.net/weixin_45610572/article/details/120324806

版权

前端:HTML

初始HTML
网页基本标签
图像，超链接，网页布局
列表，表格，媒体元素
表单及表单应用
表单初级验证

什么是HTML

Hyper Text Markup Language（超文本标记语言）
超文本包括：文字、图片、音频、视频、动画等

HTML发展史

在这里插入图片描述

HTML5的优势

在这里插入图片描述

W3C标准

在这里插入图片描述

常见的IDE

在这里插入图片描述

HTML基本结构

在这里插入图片描述

网页基本信息

在这里插入图片描述

<!-- DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">

<!-- head标签代表网页头部 -->
<head>
    <!--meta描述性标签，用来描述网站的一些信息-->
    <!--一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="Java">
    <meta name="description" content="学Java">
    <!--网页标题-->
    <title>我的第一个网页</title>

网页基本标签

在这里插入图片描述

<!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>

<!--换行标签-->
科比<br/>安东尼<br/>

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

<!--字体样式标签-->
粗体：<strong>爱</strong>
斜体：<em>不爱</em>

<!--特殊符号 &..；-->
空格：&nbsp;&nbsp;&nbsp;&nbsp;123<br/>
大于号：&gt;<br/>
小于号：&gt;<br/>
版权：&copy;<br/>
</body>
</html>

图像标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img学习
src:图片地址（必填）
    相对路径、绝对路径
    ../  --上一级目录
alt：图片名字（必填）
-->
<img src="../resources/image/1.jpg" alt="风景" title="悬停文字" >

<!--锚标签-->
<a href="4.链接标签.html#down" target="_blank">顶部</a>
</body>
</html>

在这里插入图片描述

链接标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<h name="top">top</h>

<!--链接标签
href:必填 跳转的那个页面
target：表示在哪个窗口打开
        _blank 在新标签打开
        _self 在自己的网页打开
-->
<a href="3.图像标签.html" target="_blank">跳转</a>
<a href="https://www.baidu.com" target="_self">百度</a>

<a href="3.图像标签.html">
    <img src="../resources/image/1.jpg" alt="风景" title="悬停文字" >
</a>

<!--锚标签
    1.需要一个锚标记
    2.跳转到标记
    #
-->
<a href="#top">顶部</a>

<h name="down">down</h>

<!--功能性链接
    邮箱链接
    QQ
-->
<a href="mailte:17609104420.com">邮箱</a>
<!-- QQ -->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img  src="../resources/image/2.png" alt="我在这里" title="我在这里"/></a>
</body>
</html>

超链接

在这里插入图片描述

行内元素和块元素

在这里插入图片描述

列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>Java</li>
    <li>PHP</li>
    <li>C++</li>
    <li>前端</li>
    <li>测试</li>
</ol>
<!--无序列表-->
<ul>
    <li>Java</li>
    <li>PHP</li>
    <li>C++</li>
    <li>前端</li>
    <li>测试</li>
</ul>
<!--自定义列表
dl 标签
dt 标签名称
dd 标签内容
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>PHP</dd>
    <dd>C++</dd>
    <dd>前端</dd>
    <dd>运维</dd>
</dl>
</body>
</html>

表格

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格 table
行 tr rows
列 td
-->
<table border="1">
    <tr>
        <!--colspan:跨行 -->
        <td colspan="3" >成绩表</td>
    </tr>
    <tr>
        <!--colspan:跨行 -->
        <td rowspan="2">嘟嘟</td>
        <td>15</td>
        <td>13</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>

    </tr>
    五行三列
</table>
</body>
</html>

视频和音频

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体</title>
</head>
<body>
<!--视频和音频
src：资源路径
controls 控制条
autoplay 自动播放
-->
<video src="../resources/video/金玟岐%20-%20不要不要.mp4" controls autoplay></video>
<br/>
<audio src="../resources/audio/张喆%20-%20陷阱.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>

iframe

在这里插入图片描述

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

<!--iframe内联框架
src：地址
w-h 宽度高度
-->
<iframe src="6.表格.html" name="hello" frameborder="" width="500px" height="500px"></iframe>

<a href="https://mp.csdn.net/mp_blog/manage/article?spm=1010.2135.3001.5448" target="hello">走你</a>

<!--<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>-->
</body>
</html>

表单语法

在这里插入图片描述

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

<!-- form表单
action 表单提交的位置，可以是网站，也可以是一个请求地址
method post get 提交方式
get 可以在url中看到我们提交的信息，不安全，高效
post 比较安全，传输大文件   network->headers
-->
<form action="3.图像标签.html" method="get">

    <!--  文本框 input type="text" -->
    <p>
        账号：<input type="text" name="username" placeholder="请输入账号" required>
    </p>

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

    <!--  单选框
        input type="radio"
        value 单选框的值
        name 表示组
        checked 默认选项
     -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>

    <!--  多选框
        checked 默认选项
     -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby" checked>睡觉
        <input type="checkbox" value="game" name="hobby">打游戏
        <input type="checkbox" value="music" name="hobby">听歌
    </p>

    <!--  下拉框 ，列表框
    selected 默认选项
    -->
    <p>国家：
        <select name="列表名称">
            <option value="china" selected>中国</option>
            <option value="usa">美国</option>
            <option value="ETH">瑞士</option>
        </select>
    </p>

    <!--  按钮
        input type="button" 普通按钮
        input type="image"  图像按钮
        input type="submit" 提交按钮
        input type="reset"  重置按钮
     -->
    <p>按钮：
        <input type="button" name="btn1" value="变长">
        <input type="image" src="../resources/image/2.png">
    </p>

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

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

    <!--  邮箱验证  input type="email" name="email"-->
    <p>邮箱：
        <input type="email" name="email" placeholder="请输入">
    </p>

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

    <!--  数字  input type="number" name="number"-->
    <p>商品数量：
        <input type="number" name="number" max="100" min="0" step="0">
    </p>

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

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

    <!-- 正则表达式 https://www.jb51.net/tools/regexsc.htm  -->
    <p>自定义邮箱：
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
            /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>

    <p>
        <input type="submit">
        <input type="reset" value="重置">
    </p>

    <!--   增强鼠标可用性   -->
    <p>
        <label for="mark">点我</label>
        <input type="text" id="mark">
    </p>
</form>
</body>
</html>

表单元素格式

在这里插入图片描述

表单的应用

在这里插入图片描述

表单的初级验证

胖崽呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTMl基础

前端:HTML初始HTML网页基本标签图像，超链接，网页布局列表，表格，媒体元素表单及表单应用表单初级验证什么是HTMLHyper Text Markup Language（超文本标记语言）超文本包括：文字、图片、音频、视频、动画等HTML发展史HTML5的优势W3C标准常见的IDEHTML基本结构网页基本信息<!DOCTYPE html><html lang
复制链接

扫一扫