W3C标准

W3C
World Wide Web Consortium 万维网联盟
中立性技术标准机构

W3C标准包括
结构化标准语言(HTML XML)
表现标准语言(CSS)
行为标准(DOM ECMAScript)

在idea创建一个工程 开始学习HTML基础

<!--注释   DOCTYPE:告诉浏览器我们使用什么规范  -->
<!DOCTYPE html>

<html lang="en">
<!-- head代表网页头部 -->
<head>
    <!--meta描述标签 用来描述网站的一些信息 一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="lmh" content="学一些前端基础">

    <!--title 网页标题 -->
    <title>我的第一个网页</title>
</head>
<!--body 为标签主题 -->
<body>
<!--标题标签 -->
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>

<!--段落标签 -->
<p>hahahaha</p>
<p>lall    alal</p>

<!--换行标签 -->
<br/>

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

<!--粗体 斜体 -->
粗体:<strong>HELLO</strong>
<br>
斜体:<em>WORLD</em>
<!--特殊符号 &nbsp空格 &gt >  &lt <  &自己去找 -->

</body>
</html>

插入图片格式
在这里插入图片描述
在这里插入图片描述
链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--使用name作为一个锚标记-->
<a name="top">TOP</a>
<br>

<!--a标签
href 表示跳转到某个页面
 _blank 在新标签中打开
 _self 在自己的网页中打开
-->

<a href="first%20html.html" target="_blank">点击可跳转到另一个页面</a>
<br>
<a href="https://www.baidu.com" target="_self">点击可跳转到百度</a>
<br>

<img src="../resource/w.gif" alt="薇尔莉特" title="设置鼠标悬停在图片在的文章">
<br>
<!--锚标签
1.需要一个标记
2.跳转到标记
-->
<a href="#top">下拉到最低点击后可以回到顶部</a>

</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表
 应用:考试 问答 等形式
 -->
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
<hr>
<!--无序列表
应用: 导航 侧边栏等
-->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<!--自定义列表 <dt>标签 <dd>列表名称 <dt>列表内容
应用:公司网站底部
-->
<dl>
    <dt>cj</dt>
    <dd>123</dd>
    <dd>1</dd>
</dl>
</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--
表格table
行 tr
列 td
-->
<table border="lpx">
    <tr>
        <!--colspan 跨行-->
        <td colspan="4">1-1</td>
        <td>3-5</td>

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

   </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
        <td>3-5</td>
    </tr>
</table>

</body>
</html>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="" controls autoplay></video>

<br>

<audio src=""  ></audio>

</body>
</html>

在这里插入图片描述
内联框架

<iframe src=" " name="hello" frameborder="0" width="1000px" height="800px"></iframe>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置,可以是网站,也可以是请求处理的地址
method:post get 提交方式
    get提交方式:可以在url中看到提交的信息,高效但不安全
    post:比较安全,传输大文件 url看不到
-->
<form action="first%20html.html" method="get" >
    <!--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>
<!--value="选项的值" 获取值-->
    <p>下拉框:
        <select 列表名称>
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值">英国</option>
        </select>
    </p>

<!--value="选项的值" 获取值-->
    <p>下拉框:
        <select 列表名称>
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值">英国</option>
        </select>
    </p>

    <!--文本域
    textarea name="textarea"-->
    <p>反馈:
        <textarea name="textarea" cols="30" rows="10">text</textarea>
    </p>
    <br>
    <!--文件域
    input type="file" name="files"-->
    <p>反馈:
        <input type="file" name="files">
        <input type="button" value="上传" name="up">
    </p>

    <!--邮政验证-->
    <p>邮箱:
        <input type="email" name="email">
    </p>
    <!--URL-->
    <p>URL:
        <input type="url" name="url">
    </p>
    <!--数字-->
    <p>商品数量:
        <input type="number" name="num" min="0" max="100" step="1" >
    </p>
    <!--滑块-->
    <p>音量大小:
        <input type="range" name="voice" min="0" max="100" step="1" >
    </p>
    <!--搜索框-->
    <p>搜索:
        <input type="search" name="sea"  >
    </p>

</form>

</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
表单的初级验证
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐