1. 首页
  2. 博客
  3. 掉了几根头发，才弄懂了HTML。

掉了几根头发，才弄懂了HTML。

一、初识HTML

1、什么是HTML

  • Hyper Text Markup Language（超文本 标记语言 ）

超文本包括：文字、图片、音频、视频、动画等。

  • HTML发展史

2、HTML5的优势

  1. 世界知名浏览器场上对HTML5的支持
  2. 市场的需求
  3. 跨平台

3、W3C标准

  1. W3C

World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最权威和具影响力的国际 中立性技术标准机构

W3C的网站：
http://www.w3.org/

http://www.chinaw3c.org/

  1. W3C标准包括（ 面试或者笔试会用到 ）

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

３、常见IDE

  • 记事本
  • Dreamweaver
  • IDEA
  • WebStorm
  • ……

4、HTML基本结构

  • < body>、< /body>等成对的标签，分别叫 开放标签 和 闭合标签 单独呈现的标签（空元素），如：< hr/>；意为用 / 来关闭空元素。

代码实现：

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

</body>
</html>
  • 网页运行结果

二、网页的基本信息

  1. DOCTYPE声明

  2. < title> 标签

  3. < meta> 标签

三、网页基本标签

  1. 标题标签
  2. 段落标签
  3. 换行标签
  4. 水平线标签
  5. 字体样式标签
  6. 注释和特殊符号
    • 空格：&nbsp ;
    • 大于号：&gt ;
    • 小于号：&lt ;
    • 版权：&copy ;

代码实现

<!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>
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>

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

<!--换行标签-->
两只老虎 两只老虎 <br/>
跑得快  跑得快 <br/>
一只没有耳朵  一只没有尾巴 <br/>
真奇怪 真奇怪 <br/>
两只老虎 两只老虎 <br/>
跑得快 跑得快 <br/>
一只没有耳朵 一只没有尾巴 <br/>
真奇怪 真奇怪 <br/>

<!--粗体，斜体-->
<h1>字体式标签</h1>

粗体： <strong>i love you</strong>
斜体： <em>i love you</em>

<br/>
<!--特殊符号-->


空    格
空         格

<br/>
>
<br/>
<
<br/>
©版权所有谢小然

<!--
特殊符号记忆方式

&   ;
-->


</body>
</html>
  • 网页运行结果

四、图像标签

常见的图像格式

  1. JPG
  2. GIF
  3. PNG
  4. BMP

代码实现：

<!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="忧郁的文艺青年" width="300" height="300">

</body>
</html>
  • 网页运行结果

五、连接标签

  1. 文本超链接
  2. 图像超链接
  3. 超链接
    • 页面间链接：从一个页面链接到另一个页面
    • 锚链接
    • 功能性链接

代码实现：

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

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

<!--a标签
href : 必填，表示要跳转到那个页面
target : 表示窗口在哪里打开
       _blank   在新标签中打开
       _self    在自己的网页中打开
-->

<a href="1.我的第一个网页.html" target="_blank">点击跳转到页面一</a> <br/>
<a href="http://www.baidu.com" target="_self">点击跳转到百度</a>

<br/>

<a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpg" alt="谢小然头像" title="忧郁的文艺青年" width="300" height="300">
</a>


<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="谢小然头像" title="忧郁的文艺青年" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="谢小然头像" title="忧郁的文艺青年" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="谢小然头像" title="忧郁的文艺青年" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="谢小然头像" title="忧郁的文艺青年" width="300" height="300">
    </a>
</p>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->

<a href="#top">回到顶部</a>

<a href="down"></a>

<!--功能性链接

邮件链接 ：mailto:
-->

<a href="mailto:3519657537@qq.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=3519657537&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:3519657537:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>


</body>
</html>
  • 运行结果

六、行内元素和块元素

1.块元素

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

2.行内元素

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

七、列表标签

1.什么是列表？

  • 列表就是信息资源的一种展示形式。

2.分类

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

代码实现

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

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

<hr/>

<!--无序列表
应用范围 ： 导航，侧边栏……
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>

<!--定义列表
dl:标签
dt:列表名称
dd:列表内容

应用范围：公司网站底部
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>python</dd>
    <dd>运维</dd>
    <dd>前端</dd>

    <dt>地方</dt>

    <dd>揭阳</dd>
    <dd>普宁</dd>
    <dd>江门</dd>
</dl>

</body>
</html>

运行结果

八、表格标签

1.为什么使用表格

  • 简单通用
  • 结构稳定

2.基本结构

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列

代码实现

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

<!--表格 table
行 tr
列 td
-->

<table border="1px">
    <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-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>


</body>
</html>

运行结果

九、媒体元素

1、视频元素（video）

2、音频元素（audio）

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--音频和视频
src : 资源路径
controls : 控制条
autoplay : 自动播放
-->

<video src="../resources/video/视频.mp4" controls autoplay></video>

<audio src="../resources/audio/音频.mp3" controls autoplay></audio>

</body>
</html>

运行结果

十、页面结构分析

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

代码实现

<!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="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

<a href="https://blog.csdn.net/Ping_Love_?spm=1000.2115.3001.5343" 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>

十二、表单语法（post和get提交）

1.初识表单

代码实现

<!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="post">

    <!--文本输入框：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>

运行结果

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

🔴button 如何加入超链接？

<!--第一种
    在<input type="button" name="btn1" value="按钮">中加入onclick事件，location.href表示在当前页面打开新页面。
-->
<p>
    <input type="button" name="btn1" value="按钮" onclick="ocation.href'这里加链接'">
</p>

<!--第二种
    使用 a 标签
    把<input type="button" name="btn1" value="按钮">放在 a 标签里面。
-->
    <a href="这里加链接">
         <input type="button" name="btn" value="按钮" id="btn1">
    </a>

<!--如何弹出注册成功的提示框
    在button或submit标签中加入onclick"alert('注册成功')"即可
-->
<p>
    <input type="submit" name="sub" value="注册" onclick="alert('注册成功')">
</p>

2.文本框和单选框

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>

    <!--单选框标签
    input type="radio"
    value : 单选框的值
    name : 表示组
    -->

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



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

</form>

</body>
</html>

运行结果

3.文本框和多选框

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>

    <!--多选框
    <input type="checkbox">
    -->

    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="code" name="hobby"/>敲代码
        <input type="checkbox" value="chat" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby"/>游戏
    </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/1.jpg" width="200" height="200"/>
    </p>

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

</form>

</body>
</html>

运行结果

4.列表框、文本域和文件域

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>

    <!--下拉框， 列表框
    -->
    <p>国家
        <select name="国家">
            <option value="China" selected>中国</option>
            <option value="USA">美国</option>
            <option value="UK">英国</option>
            <option value="Fresh">法国</option>
        </select>
    </p>


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

    </p>


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

</form>

</body>
</html>

运行结果

5.搜索框、滑块和简单验证

代码实习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
    <!--邮件验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
    <!--URL-->
    <p>URL:
        <input type="url" name="url">
    </p>

    <!--数字-->
    <p>商品数量:
        <input type="number" name="number" 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>

</form>

</body>
</html>

运行结果

十三、表单的应用

🔹隐藏域 hidden

🔹只读 readonly

🔹禁用 disabled

十四、表单初级验证

🔹用户提示 placeholder

🔹非空判断 required

🔹正则表达式 pattern

🟡HTML总结思维导图

点击跳转

配套视频
点击跳转视频

谢谢观看😘欢迎大家点赞👍收藏🎉
有不足的地方请大家指正❤，一起学习。

原文链接：https://blog.csdn.net/Ping_Love_/article/details/122859348?utm_medium=distribute.pc_feed_blog.none-task-blog-hot_rank_bottoming-18.nonecasedepth_1-utm_source=distribute.pc_feed_blog.none-task-blog-hot_rank_bottoming-18.nonecase

热门标签