HTML ~ 从入门到入坑。

原创已于 2023-02-12 22:05:51 修改 · 326 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

于 2020-06-18 13:36:33 首次发布

前端。专栏收录该内容

9 篇文章

订阅专栏

本文全面介绍了HTML的基础知识，包括HTML5的优势、结构标签、图片与链接处理、表单设计及多媒体元素的使用，适合HTML初学者快速上手。

HTML ~ 从入门到入坑。

Hyper Text Markup Language。

HTML 5。

优势。

世界知名浏览器厂商对 HTML 5 的支持。

微软
Google
苹果
Opera
Mozilla

市场的需求。
跨平台。

w3c。

万维网联盟创建于 1994 年，是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C 已发布了 200 多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言 HTML（标准通用标记语言下的一个应用）、可扩展标记语言 XML（标准通用标记语言下的一个子集）以及帮助残障人士有效获得 Web 信息的无障碍指南（WCAG）等，有效促进了 Web 技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

https://www.w3.org/

https://www.chinaw3c.org/

结构化标准语言。（HTML、XML）。
表现标准语言（CSS）。
行为标准（DOM、ECMAScript）。

HTML。

开放标签。

闭合标签。

入门。

<!-- !DOCTYPE：告诉浏览器，我们要使用什么规范。-->

<!DOCTYPE html>
<html lang="en">
<!-- head 网页头部。-->
<head>
    <!-- meta 描述型标签。ta 用来描述网站的一些信息。-->
    <!-- 一般用来做 SEO。-->
    <meta charset="UTF-8">
    <meta name="keywords" content="Geek。">
    <meta name="description" content="Geek。">
    <!-- 窗口标题。-->
    <title>Title</title>
</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>1</p>
<p>2</p>
<p>3</p>

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

<!-- 换行标签。-->
1<hr>

<br>
2<hr>

<br>
3<hr>

<br>

<h1>字体样式标签。</h1>
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>

<hr>

<br>
<h1>特殊符号。</h1>

空    格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<hr>

<br>
&gt;
<hr>

<br>
&lt;
<hr>

<br>
&copy;版权所有 Geek。

</body>
</html>

图片标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- src 图片地址。-->
<!-- 相对路径。-->
<!-- 绝对路径-->
<!-- alt 图片加载不出来就会显示 alt 中的文字。-->
<img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字">

</body>
</html>

链接标签 & 锚链接。

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

<!-- 使用 name 作为标记。-->
<a href="" name="top"></a>

<!-- href 要中转的页面。-->
<!-- target 窗口在哪打开。
    _blank：在新标签页中打开。
    _self：在自己的内面中打开。
-->

<a href="我的第一个网页。.html" target="_blank">点击我中转页面1</a>

<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>

<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>

<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>

<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>

<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>

<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>

<a href="https://www.baidu.com/"><img src="../resources/image/0.jpg" alt="小程序码。" title="悬停文字"></a>

<!-- 锚链接。
需要一个锚标记。
-->
<a href="#top">回到顶部</a>

<a name="down">down</a>

</body>
</html>

在这里插入图片描述

<a name="down">down</a>

可以在其他的页面的 a 标签中写

<a href="链接标签。.html #down">
    跳转
</a>

邮件链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<a href="mailto:YifanLiGeek@gmail.com">联系我</a>

</body>
</html>

QQ 推广。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<a href="mailto:YifanLiGeek@gmail.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>

行内元素 & 块元素。

块元素。

无论内容多少，该元素独占一行。
（p、h1 ~ h6）

行内元素。

内容撑开宽度，左右都死行内元素的可以排在一行。
（a、strong、em…）

列表。

无序列表。

有序列表。

自定义定义列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 有序列表。-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>

<!-- 无序列表。-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

<!-- 自定义列表。-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>运维</dd>
    <dd>前端</dd>
    <dd>C/C++</dd>

    <dt>位置</dt>
    <dd>武汉</dd>
    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>新疆</dd>
</dl>

</body>
</html>

表格标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1px">
    <tr>
        <!-- 跨列。-->
        <td colspan="4">1-1</td>
        <!--<td>1-2</td>-->
        <!--<td>1-3</td>-->
        <!--<td>1-4</td>-->
    </tr>
    <tr>
        <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>

视频和音频。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 视频和音频。-->
<video src="../resources/vedio/hecheng.mp4" controls autoplay></video>

<audio src="../resources/audio/mojito.mp3"></audio>

</body>
</html>

页面结构分析。

元素名	描述
header	标记头部区域内容（用于页面或页面中的一块区域）。
footer	标记脚部区域内容（用于页面或页面中的一块区域）。
section	Web 页面中的一块独立区域。
article	独立的文章内容。
aside	相关内容或应用（常用于侧边栏）。
nav	导航类辅助内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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="https://www.baidu.com/" frameborder="0" width="1000px" height="1000px"></iframe>-->

<!--<iframe src="//player.bilibili.com/player.html?aid=31228602&bvid=BV1tW411d7Ta&cid=54561887&page=1" scrolling="no"-->
<!--border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>-->

<iframe src="" name="hello" frameborder="0"></iframe>

<a href="https://www.baidu.com/" target="hello">点击跳转</a>

</body>
</html>

表单。post & get 请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>注册</h1>

<!-- 表单 form。
 action。表单提交的位置。可以是网站，也可以是一个请求处理地址。
 method。POST GET 请求方式。
 get 方式提交可以在 url 中看见提交的内容，不安全但高效。
 post 方式提交不能在 url 中看见提交的内容，安全，可以传输大文件。
 -->

<form action="我的第一个网页。.html" method="get">
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>

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


</body>
</html>

文本框和单选框。

属性	说明
type	指定元素的类型。text、password 、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text。
name	指定表单元素的名称。
value	元素的初始值。type 为 radio 时必须指定一个值。
size	指定表单元素的初始宽度。当 type 为 text 或 password 时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlength	type 为 text 或 password 时，输入的最大字符数。
checked	type 为 radio 或 checkbox 时，指定按钮是否是被选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>注册</h1>

<!-- 表单 form。
 action。表单提交的位置。可以是网站，也可以是一个请求处理地址。
 method。POST GET 请求方式。
 get 方式提交可以在 url 中看见提交的内容，不安全但高效。
 post 方式提交不能在 url 中看见提交的内容，安全，可以传输大文件。
 -->

<form action="我的第一个网页。.html" method="get">
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>

    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

    <p>
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
        <!--<input type="image" src="../resources/image/0.jpg">-->
    </p>

    <p>下拉框。
        <select name="列表名称" id="">
            <option value="china">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值" selected>瑞士</option>
            <option value="选项的值">印度</option>
        </select>
    </p>

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

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

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


</body>
</html>

搜索框 & 滑块 & 简单验证。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>注册</h1>

<!-- 表单 form。
 action。表单提交的位置。可以是网站，也可以是一个请求处理地址。
 method。POST GET 请求方式。
 get 方式提交可以在 url 中看见提交的内容，不安全但高效。
 post 方式提交不能在 url 中看见提交的内容，安全，可以传输大文件。
 -->

<form action="我的第一个网页。.html" method="get">
    <!-- 邮件验证。-->
    <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="1">
    </p>

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

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

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


</body>
</html>

表单应用。

readonly。

  <p>名字：<input type="text" name="username" value="geek" readonly></p>

disabled。
hidden。

界面不显示，但点击提交后 name 和 value 会提交。

增强鼠标可用性。label。

点击文字“你点我试试”，text 输入框会激活，出现光标。

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

表单验证初级。

placeholder。提示信息。
required。非空。
pattern。正则。

HTML ~ 从入门到入坑。

HTML ~ 从入门到入坑。

文章目录

Hyper Text Markup Language。

HTML 5。

w3c。

HTML。

开放标签。

闭合标签。

入门。

标签。

图片标签。

链接标签 & 锚链接。

邮件链接。

QQ 推广。

行内元素 & 块元素。

列表。

无序列表。

有序列表。

自定义定义列表。

表格标签。

视频和音频。

页面结构分析。

iframe 内联框架。

表单。post & get 请求。

文本框和单选框。

搜索框 & 滑块 & 简单验证。

表单应用。

表单验证初级。