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

一、初识HTML

1、什么是HTML

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

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

HTML发展史

在这里插入图片描述

2、HTML5的优势

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

3、W3C标准

W3C> World Wide Web Consortium（万维网联盟）> 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构> W3C的网站：> http://www.w3.org/> > http://www.chinaw3c.org/
W3C标准包括（面试或者笔试会用到）- 结构化标准语言（HTML、XML）- 表现标准语言（CSS）- 行为标准（DOM、ECMAScript）

３、常见IDE

记事本
Dreamweaver
IDEA
WebStorm
……

4、HTML基本结构

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mNoojmr1-1644472272730)(C:\Users\35196\AppData\Roaming\Typora\typora-user-images\image-20220210113926264.png)]$

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

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

</body>
</html>

网页运行结果 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cmhEOPJp-1644472272731)(C:\Users\35196\AppData\Roaming\Typora\typora-user-images\image-20220210125900053.png)]$

二、网页的基本信息

DOCTYPE声明
< title> 标签
< meta> 标签

三、网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号 - 空格：&nbsp ;- 大于号：&gt ;- 小于号：&lt ;- 版权：&copy ;

代码实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="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/><!--特殊符号-->

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

<br/>&gt;<br/>&lt;<br/>&copy;版权所有谢小然

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

&   ;
--></body></html>

网页运行结果 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KoBYurg0-1644472272731)(C:\Users\35196\AppData\Roaming\Typora\typora-user-images\image-20220210130009998.png)]$

四、图像标签

常见的图像格式

在这里插入图片描述

代码实现：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>图像标签学习</title></head><body><!--img学习
src ：图片地址  (必填)
      相对地址(推荐使用)，绝对地址
      ../ --上一级目录

alt: 图片名字 (必填)

--><imgsrc="../resources/image/1.jpg"alt="谢小然头像"title="忧郁的文艺青年"width="300"height="300"></body></html>

网页运行结果

五、连接标签

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mfXMvCrf-1644472272733)(C:\Users\35196\AppData\Roaming\Typora\typora-user-images\image-20220210131809388.png)]$

文本超链接
图像超链接
超链接 - 页面间链接：从一个页面链接到另一个页面- 锚链接- 功能性链接

代码实现：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>链接标签学习</title></head><body><!--使用name作为标记--><ahref="top">顶部</a><!--a标签
href : 必填，表示要跳转到那个页面
target : 表示窗口在哪里打开
       _blank   在新标签中打开
       _self    在自己的网页中打开
--><ahref="1.我的第一个网页.html"target="_blank">点击跳转到页面一</a><br/><ahref="http://www.baidu.com"target="_self">点击跳转到百度</a><br/><ahref="1.我的第一个网页.html"><imgsrc="../resources/image/1.jpg"alt="谢小然头像"title="忧郁的文艺青年"width="300"height="300"></a><p><ahref="1.我的第一个网页.html"><imgsrc="../resources/image/1.jpg"alt="谢小然头像"title="忧郁的文艺青年"width="300"height="300"></a></p><p><ahref="1.我的第一个网页.html"><imgsrc="../resources/image/1.jpg"alt="谢小然头像"title="忧郁的文艺青年"width="300"height="300"></a></p><p><ahref="1.我的第一个网页.html"><imgsrc="../resources/image/1.jpg"alt="谢小然头像"title="忧郁的文艺青年"width="300"height="300"></a></p><p><ahref="1.我的第一个网页.html"><imgsrc="../resources/image/1.jpg"alt="谢小然头像"title="忧郁的文艺青年"width="300"height="300"></a></p><!--锚链接
1.需要一个锚标记
2.跳转到标记
#
--><ahref="#top">回到顶部</a><ahref="down"></a><!--功能性链接

邮件链接 ：mailto:
--><ahref="mailto:[email protected]">点击联系我</a><atarget="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=3519657537&site=qq&menu=yes"><imgborder="0"src="http://wpa.qq.com/pa?p=2:3519657537:53"alt="点击这里给我发消息"title="点击这里给我发消息"/></a></body></html>

运行结果 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GsKUIson-1644472272734)(C:\Users\35196\AppData\Roaming\Typora\typora-user-images\image-20220210134916306.png)]$

六、行内元素和块元素

1.块元素

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

2.行内元素

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

七、列表标签

1.什么是列表？

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

2.分类

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

代码实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="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.基本结构

单元格
行
列
跨行
跨列

代码实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>表格学习</title></head><body><!--表格 table
行 tr
列 td
--><tableborder="1px"><tr><!-- colspan 跨列--><tdcolspan="4">1-1</td></tr><tr><!-- rowspan 跨行--><tdrowspan="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）

代码实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>媒体元素学习</title></head><body><!--音频和视频
src : 资源路径
controls : 控制条
autoplay : 自动播放
--><videosrc="../resources/video/视频.mp4"controlsautoplay></video><audiosrc="../resources/audio/音频.mp3"controlsautoplay></audio></body></html>

运行结果
在这里插入图片描述

十、页面结构分析

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>页面结构分析</title></head><body><header><h2>网页头部</h2></header><section><h2>网页主体</h2></section><footer><h2>网页脚部</h2></footer></body></html>

十一、iframe内联框架

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XvznsvXt-1644505171791)(C:\Users\35196\AppData\Roaming\Typora\typora-user-images\image-20220210195417905.png)]$
代码实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>内联框架学习</title></head><body><!--iframe内联框架
src ： 地址
w~h ： 宽度高度
--><iframesrc=""name="hello"frameborder="0"width="1000px"height="800px"></iframe><ahref="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.初识表单

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YBOR6sX4-1644647529322)(C:\Users\35196\AppData\Roaming\Typora\typora-user-images\image-20220211130758252.png)]$

代码实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>登陆注册</title></head><body><h1>注册</h1><!--表单form

action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
method : post ， get  提交方式
     get 方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
     post 方式提交：比较安全，传输大文件
--><formaction="1.我的第一个网页.html"method="post"><!--文本输入框：input type="text" --><p>名字：<inputtype="text"name="username"></p><!--密码框：input type="password"--><p>密码：<inputtype="password"name="pwd"></p><p><inputtype="submit"><inputtype="reset"></p></form></body></html>

运行结果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F7xLNGim-1644647529337)(C:\Users\35196\AppData\Roaming\Typora\typora-user-images\image-20220211135113425.png)]$

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

🔴button 如何加入超链接？

<!--第一种
    在<input type="button" name="btn1" value="按钮">中加入onclick事件，location.href表示在当前页面打开新页面。
--><p><inputtype="button"name="btn1"value="按钮"onclick="ocation.href'这里加链接'"></p><!--第二种
    使用 a 标签
    把<input type="button" name="btn1" value="按钮">放在 a 标签里面。
--><ahref="这里加链接"><inputtype="button"name="btn"value="按钮"id="btn1"></a><!--如何弹出注册成功的提示框
    在button或submit标签中加入onclick"alert('注册成功')"即可
--><p><inputtype="submit"name="sub"value="注册"onclick="alert('注册成功')"></p>

2.文本框和单选框

代码实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>登陆注册</title></head><body><!--单选框标签
    input type="radio"
    value : 单选框的值
    name : 表示组
    --><p><inputtype="radio"value="boy"name="sex"/>男
        <inputtype="radio"value="girl"name="sex">女
    </p><p><inputtype="submit"><inputtype="reset"></p></form></body></html>

运行结果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v2VBcpi2-1644647635101)(C:\Users\35196\AppData\Roaming\Typora\typora-user-images\image-20220211141143723.png)]$

3.文本框和多选框

代码实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>登陆注册</title></head><body><!--多选框
    <input type="checkbox">
    --><p>爱好:
        <inputtype="checkbox"value="sleep"name="hobby"/>睡觉
        <inputtype="checkbox"value="code"name="hobby"/>敲代码
        <inputtype="checkbox"value="chat"name="hobby"/>聊天
        <inputtype="checkbox"value="game"name="hobby"/>游戏
    </p><!--按钮
    input type="button"   普通按钮
    input type="image"    图像按钮
    input type="submit"   提交按钮
    input type="reset"    重置按钮
    --><p>按钮
        <inputtype="button"name="btn1"value="点击变长"/><inputtype="image"src="../resources/image/1.jpg"width="200"height="200"/></p><p><inputtype="submit"><inputtype="reset"value="清空表单"></p></form></body></html>

运行结果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mHoq9MGe-1644647529338)(C:\Users\35196\AppData\Roaming\Typora\typora-user-images\image-20220211142329588.png)]$

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

代码实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>登陆注册</title></head><body><!--下拉框， 列表框
    --><p>国家
        <selectname="国家"><optionvalue="China"selected>中国</option><optionvalue="USA">美国</option><optionvalue="UK">英国</option><optionvalue="Fresh">法国</option></select></p><!--文本域
         cols="50" rows="10"
    --><p>反馈：
        <textareaname="textarea"cols="50"rows="10">文本内容</textarea></p><!--文件域
    input type="file"  name="files"
    --><p><inputtype="file"name="files"><inputtype="button"value="上传"name="upload"></p></form></body></html>

运行结果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yhEluMkd-1644647529339)(C:\Users\35196\AppData\Roaming\Typora\typora-user-images\image-20220211144121795.png)]$

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

代码实习

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>登陆注册</title></head><body><!--邮件验证--><p>邮箱：
        <inputtype="email"name="email"></p><!--URL--><p>URL:
        <inputtype="url"name="url"></p><!--数字--><p>商品数量:
        <inputtype="number"name="number"max="100"min="0"step="1"></p><!--滑块--><p>音量：
        <inputtype="range"name="voice"min="0"max="100"step="2"></p><!--搜索框--><p>搜索:
        <inputtype="search"name="search"></p></form></body></html>

运行结果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J11tHpPS-1644647529339)(C:\Users\35196\AppData\Roaming\Typora\typora-user-images\image-20220211145912710.png)]$

十三、表单的应用

🔹隐藏域 hidden

🔹只读 readonly

🔹禁用 disabled

十四、表单初级验证

🔹用户提示 placeholder

🔹非空判断 required

🔹正则表达式 pattern

🟡HTML总结思维导图

点击跳转

配套视频
点击跳转视频

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

标签： html 前端 html5

本文转载自: https://blog.csdn.net/Ping_Love_/article/details/122859348
版权归原作者 谢小然 所有，如有侵权，请联系我们删除。

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

一、初识HTML

1、什么是HTML

2、HTML5的优势

3、W3C标准

３、常见IDE

4、HTML基本结构

二、网页的基本信息

三、网页基本标签

四、图像标签

常见的图像格式

五、连接标签

六、行内元素和块元素

1.块元素

2.行内元素

七、列表标签

1.什么是列表？

2.分类

八、表格标签

1.为什么使用表格

2.基本结构

九、媒体元素

1、视频元素（video）

2、音频元素（audio）

十、页面结构分析

十一、iframe内联框架

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

1.初识表单

🔴button 如何加入超链接？

2.文本框和单选框

3.文本框和多选框

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

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

十三、表单的应用

🔹隐藏域 hidden

🔹只读 readonly

🔹禁用 disabled

十四、表单初级验证

🔹用户提示 placeholder

🔹非空判断 required

🔹正则表达式 pattern

🟡HTML总结思维导图

发表评论

“掉了几根头发，才弄懂了HTML。”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航