前端Html的简单学习

1：什么是Html

　　超文本标记语言

　　W3C:万维网联盟

 

复制代码
<!--这是html的注释的写法-->
<!--DOCTYPE:告诉游览器，我们需要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head：代表网页的头部-->
<head>
    <!--  meta：描述性标签，它用来描述我们网站的一些基本信息  -->
    <meta charset="UTF-8">

    <!-- 网页的标题   -->
    <title>Title</title>
</head>
Hello World！
<!--body：表示网页主体-->
<body>
</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>

<!--段落标签-->
<p>这是第一段落</p>
<hr>
<!--hr：水平线标签-->
<p>这是第二段落</p>
<!--br：换行标签-->
<p>这是 <br>
    第三段落</p>
<p>这是第四段落</p>
<!--换行标签-->

<h1>
    <strong>字体粗体标签</strong>
    <em>字体斜体标签</em>
</h1>

<!--特殊符号：空格-->
空&nbsp;&nbsp;&nbsp;&nbsp;格：
<!--特殊符号：大于小于-->
&gt; &lt;
<!--版权符号-->
&copy;
</body>
</html>
复制代码

3：图像标签

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<!--img的学习
    src:图片路径：相对路径，绝对路径
    alt:当图片没有加载出来，或者地址错误的时候，会显示这个文字
    title：表示鼠标的悬停文字
-->
<img src="../resources/img/1.jpg" alt="测试图像" title="悬停文字">
</body>
</html>
复制代码

4：链接标签

复制代码
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--a标签：表示超链接标签
    href：必填，表示跳转的页面
    target:表示窗口在哪打开
            _self：在自己的标签中打开
            _blank：表示在新页面中打开
-->
<a href="图片标签.html" target="_blank">点击跳转到图片标签</a>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a>

<a href="基本的标签.html">

    <img src="../resources/img/1.jpg" alt="测试图像" title="悬停文字">

</a>
<a href="mailto:1345428977@qq.com">点击给我发送邮件</a>

<!--锚链接
    1：需要一个标记<a name = "top"></a>
    2：跳转到标记<a href = "#top"></a>
-->
<!--功能性链接
    邮件链接：mailto<a href="mailto:1345428977@qq.cm">点击给我发送邮件</a>
-->
</body>
</html>
复制代码

5：行内元素和块级元素

　　（1）块元素：无论内容多少，该元素独占一行，

　　（2）行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

6：列表标签：无序列表，有序列表

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表:ol表示-->
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ol>
<hr>
<!--无序列表:ul表示-->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<!--列表
    dl:标签
    dt:列表名称
    dd:列表内容
-->
<dl>
    <dt>学科</dt>
    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
    <dt>位置</dt>
    <dd>重庆</dd>
    <dd>四川</dd>
    <dd>北京</dd>
</dl>
</body>
</html>
复制代码

7：表格标签

复制代码
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签的学习</title>
</head>
<body>
<!--表格标签：
    tr：行
    td：列
    border:表格的边框
-->
<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="4">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
</table>

</body>
</html>
复制代码

8：视频音频的学习

复制代码
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--音频和视频
    src:资源路径
    controls:控制视频的播放
    autoplay:自动播放属性
-->
<video src="视频的地址" controls autoplay>
</video>
<!--音频
    src:音频地址
    controls：控制音频的播放
    autoplay:自动播放属性
-->
<audio></audio>
</body>
</html>
复制代码

9：页面结构分析

复制代码
<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>
复制代码

10：表单的认识

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的学习</title>
</head>
<body>
<!--form
    action:表单提交的位置，可以是网站，也可以是一个请求处理地址
    method:post,get 提交的方式
        post:提交方式比较安全，传输大文件
        get:不安全，可以看到信息，高校
-->
<!--input
        name：表示输入框的类型
        value：表示输入框的初始值
        maxlength：输入的最大字符
-->
<!--单选框标签
    input type="radio"
    value:表示选的值
    name：表示分组
    -->
<!--多选框
    input type="checkbox"
    value:表示选的值
    name:表示分的组
-->
<form action="我的第一个网页.html" method="post">
    <!--    文本输入框-->
    <h1>注册</h1>
    <p>名字：<input type="text" name="userName"></p>
    <p>密码：<input type="password" name="passWord"></p>
    <p><input type="submit">
    </p>
    <!--   重置-->
    <p><input type="reset"></p>
    <!--    按钮
        input type="button"
        value：按钮的名字
    -->
    <input type="button" name="btn" value="点击">
    <!--    下拉框，列表框
                value:下拉框的值
                selected:默认选中的值
    -->
    <p>下拉框 ：
    </p>
    <select value="中国">
        <option value="中国">中国</option>
        <option value="美国" selected>美国</option>
        <option value="德国">德国</option>
    </select>
    <!--    文本域

    -->
    <p>反馈：
        <textarea name="textarea">文本内容</textarea>
    </p>
    <!--    文件域
        type="file"
        name=""files(name表示表单中的键)
    -->
    <input type="file" name="files">
</form>

</body>
</html>
复制代码

11：表单的初级验证

　　（1）placeholder：提示信息，用于提示表单的输入的信息

　　（2）required：非空判断（必须填写值）

　　（3）pattern：正则表达式去判断输入的值

　　

　　

 

posted @   程序员XiaoXie  阅读(25)  评论(0)  编辑  收藏  举报
相关博文：
·  前端CSS的简单学习
·  前端JavaScript的简单学习
·  前端基础_HTML笔记
·  HTML学习
·  html学习
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手