HTML5学习笔记

最新推荐文章于 2023-09-02 22:42:10 发布

Hanxiaomo_

最新推荐文章于 2023-09-02 22:42:10 发布

阅读量176

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/Hanxiaomo_/article/details/118161589

版权

前端笔记专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了HTML的基本结构和常用标签，包括标题、段落、链接、图片、表格、媒体元素、页面结构、内联框架、列表、表单等。特别强调了表单元素如文本框、单选框、多选框、按钮、下拉框、文本域和文件域的使用，以及简单的表单验证方法。通过实例展示了如何创建和控制网页元素，为网页设计初学者提供了全面的基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页基本信息与标签

在这里插入图片描述

<!-- DOCTYPE告诉浏览器使用什么规范，默认为html-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签，用来描述网站信息-->
    <meta charset="UTF-8">
    <meta name="keywords" content="韩">
    <meta name="keywords" content="我的第一个网页">

    <!--title网页标题-->
    <title>第一个网页</title>
</head>
<!--head标签代表网页主体-->
<body>
Hello,World!
</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/>

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

<!--粗体 、斜体-->
粗体 :  <strong>i love you</strong>
斜体 :  <em>i love you</em>

<!--特殊符号-->
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:

<br/>
大于&gt;
<br/>
小于&lt;
&copy;版权符号

</body>
</html>

图片标签学习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签学习</title>
</head>
<body>
<!--
src:图片地址  必填
alt:图片名字  必填

title悬停文字
w-h
-->

<img src="../resouces/image/QQ图片20210202163338.jpg" alt="此图片没找到">

</body>
</html>

链接标签

在这里插入图片描述

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

<a name="top"></a>

<!-- a标签
href：必填，表示要跳转到那个页面
target:表示窗口在哪里打开
        _blank 在新标签中打开
        _self 在自己的网页中打开
-->
<a href="1.第一个网页.html" target="_blank">点击跳转到页面</a>
<br>
<a href="https://www.bilibili.com/video/BV1x4411V75C?p=5&spm_id_from=pageDriver">点击跳转到狂神说java</a>
<br/>

<!--图片超链接效果-->
<p>
<a href="1.第一个网页.html"><img src="../resouces/image/QQ图片20210202163338.jpg" alt="此图片没找到" ></a>
</p>
<!--锚链接
1.需要一个锚标记
2.可以跳转到标记
#
-->
<br/>
<a href="#top">回到顶部</a>

<a href="2.基本标签.html#down">跳转</a>

<!--功能性连接
    邮件连接：mailto：
    qq连接
-->
<a href="mailto:754615430@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::53" alt="点此联系我" title="点此联系我"/>
</a>

</body>
</html>

行内元素和块元素

在这里插入图片描述

列表标签

列表分类：

无序列表
有序列表
定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
使用范围：试卷，问答
-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>后端</li>
    <li>c</li>
    <li>前端</li>
</ol>

<hr>
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>后端</li>
    <li>c</li>
    <li>前端</li>
</ul>

<!--自定义列表
dl;标签
dt：列表名称
dd：列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>python</dd>
    <dd>后端</dd>
    <dd>c</dd>
    <dd>前端</dd>
    
    <dt>位置</dt>
    
    <dd>安徽</dd>
    <dd>广东</dd>
</dl>


</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--
表格 用 table
行 tr row
列 td
border 宽度
-->
<table border="1px" width="800" height="400">
    <tr>
        <!--colspan跨列-->
        <td colspan="4">1-1</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-2</td>
        <td>3-3</td>
        <td>3-4</td>
</tr>

</table>

</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</title>
</head>
<body>
<!--
iframe内联框架
src：地址
w-h：宽高
-->
<iframe src="" name="hello" frameborder="0" width="1000" height="800"></iframe>

<a href="https://www.baidu.com/"  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：比较安全，提交大文件
-->
<form action="1.第一个网页.html" method="get">
    <!--文本输入框 :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>

文本框和单选框

在这里插入图片描述

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

<h1>注册</h1>
<form action="1.第一个网页.html" method="get">
    <!--文本输入框 :input type ="text"
    value="韩明枫"  默认初始值
    maxlength=“20”  最长能写20个字符
    size=“30”  文本框长度为30
    -->
    <p>名字：<input type="text" name="username" value="韩明枫" maxlength="20" size="30"></p>
    <!--密码框 : input type ="password"-->
    <p>密码：<input type="password" name="pwd"></p>

    <!--单选框标签
    input type="radio"
    value:单选框的值
    name : 所属的组，如果组一样，只能选择一个
    -->
    <p>性别：
    	 <!--checked 默认选中-->
        <input type="radio" value="boy" name="sex" checked />男
        <input type="radio" value="girl" name="sex"/>女

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

</body>
</html>

多选框和按钮

   <!--多选框
    input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="eat" name="hobby">吃饭
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="game" name="hobby">打游戏
        <input type="checkbox" value="code" name="hobby">敲代码
    </p>

    <!--按钮

    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
        <!--图片按钮有自动提交功能-->
        <input type="image" src="../resouces/image/QQ图片20210202163338.jpg">

    </p>

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

下拉框文本域和文件域

    <!--下拉框，列表框
        selected 默认选中
    -->
    <p>国家:
        <select name="county" >
            <option value="z">中国</option>
            <option value="r">日本</option>
            <option value="h">韩国</option>
            <option value="m">美国</option>
        </select>

    </p>

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

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

input 需要有name属性

搜索框滑块和简单验证

<!--邮箱验证-->
    <p>
        <input type="email" name="email">
    </p>
    <!--url验证-->
    <p>
        <input type="url" name="url">
    </p>

    <!--数字
    max min 最大最小
    step步长 一次+10
    -->
    <p>数字:
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

    <!--滑块
    input type="range"
    -->
    <p>音量:
        <input type="range" min="0" max="100" step="2">
    </p>
    
    <!--搜索框-->
    <p>搜索:
        <input type="search" name="search" >
    </p>

表单的应用

只读 readonly
禁用 disable
隐藏 hidden

表单初级验证

placeholder 提示信息
在这里插入图片描述

required 非空判断
没有填写无法提交

pattern 正则表达式

脚本之家常用正则表达式工具：
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>