HTML-EW帮帮网

1、HTML简介😛

HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。

HTML是由Web的发明者 Tim Berners-Lee（蒂姆·伯纳斯·李）于1990年创立的一种标记语言。

超文本标记语言构成和定义

“超文本”（hypertext）是<div>指连接单</div>个网站内或多个网站间的网页的超链接。超链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。

你可以这样理解，就是为了你建设网站可以通过一个链接和别人建设的网站进行互通互联。
HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如等等。

而这些文本可以通过一些标记也就下面要说的标签，进行标记和修饰。
HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。例如，<title> 标签可以写成 <Title>，<TITLE> 或以任何其他方式。然而，习惯上与实践上都推荐将标签名全部小写。

<h1>
    标题：HTML在一个技术语言
</h1>
<p>
    
</p>HTML 元素通过“标签”（tag）将文本从文档中引出，
标签由在“`<`”和“`>`”中包裹的元素名组成，
HTML 标签里的元素名不区分大小写。<a href="">也就是说，
</a>它们可以用大写，小写或混合形式书写。
例如，`<title>` 标签可以写成 `<Title>`，`<TITLE>` 或以任何其他方式。
然而，习惯上与实践上都推荐将标签名全部小写。

具体的发展历史就不再叙述

感兴趣的同学可以去看大佬的博客：HTML的发展_html发展历程-CSDN博客

总之：我们只需要知道网页的本质就是：（html）超级文本标记语言，再经过结合使用其余的Web技术（如：脚本语言js、css样式列表等），能够创造出功能强大的网页。

2、HTML标签分类😛

1、标签作用：

将不同模块进行区分，可以让html结构变得清晰

2、标签分类：

单标签：

就是没有结束标志，典型的单标签就是<img>标签，也不用写内容体，编写内容体没有意义。

双标签：

有开始和结束的标签<div></div>，可以在双标签中去嵌套，子标签，和文本内容（文字和图像，和音频）。

3、模式分类🫤🫤：

先讲一个概念：文档流：网页从左至右，就会形成一个文档流

块元素：

块元素就是一块，从左至右都属于这个元素的空间，独占文档流，有高度和宽度，默认就自带样式属性：display:block

典型标签有 div 、p 、h1~h6 、table 、 form

行内元素：

就是一行数据，不独占文档流，内容多长行就多长，不可以收到宽度和高度，但是可以收到左右padding和marign的影响，默认自带样式属性：display:inline

典型标签有：a 、 span 、 i 、em 、 strong

行内块元素：

两者结合，可以再一行内放多个块元素（大概这意思）以受到宽度和高度，padding,marign的影响，不独占文档流，默认自带样式属性：display:inline-block。

典型标签有：img 、 input

3、HTML常用标签😛

1、图片标签

图片标签：就是加载一个图片，图片标签也是为数不多的空元素（单标签）的代表，也是块级元素的代表

格式如下：

<img src="" alt=""/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>imgHtml</title>
</head>
<body>
    
    <!--src: 引入图片的地址-->
    <img width="500px" height="300px" src="D:\图片\wallhaven-m3zde8.jpg" alt="如果图片加载失败的话显示的内容">
    <img width="500px" height="300px"src="images\wallhaven-2eq1gy.jpg" alt="引入相对路径下的图片">
    <!--title是图片描述，放到图片上就会看到-->
    <img width="500px" height="300px" src="https://s3.ifanr.com/wp-content/uploads/2023/05/1-12.jpg" title="塞尔达传说-王国之泪" alt="引入网络图片的话必须以http/https开头">

    这里证明了是行内块元素
    <!--图片是行内块元素，有宽高限制，但不独享文档流-->

</body>
</html>

2、超链接标签

超链接：是一种可以把网页和网站相互连接的标签，它可以实现从一个页面连接到另外一个页面，或者一个网站跳转另外一个网站的过程。

标签特点和分类：

cursor:point 鼠标呈现的手势图标
是行内元素，说明不受宽度和高度的影响，只会收到左右内外边距的影响。
元素的宽度和高度是由内容来决定。用于来跳转网页信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接</title>
</head>
<body>

    <!--超链接_行内元素，不受宽度高度影响
        href： 跳转链接
        target：跳转目标
            -self 默认值，可以不写
            -_blank 打开新窗口呈现href呈现的内容
        title：标题提示-->

    <a href="C:\Users\zhangyahui\Desktop\前端study\img.html" target="_blank" title="img Html">超链接一</a>

    <!--访问外网，一定要写完成路径，不能3w....-->
    <a href="https://blog.csdn.net/zyh_2021131030?type=blog" title="My blog">超链接二</a>


</body>
</html>

锚点：

锚点是指：在本页面中定义一个锚点标记，然后通过连接可以跳转到指定的位置。

定义锚点位置

<a name="marker">这里是锚点位置</a>

跳转锚点位置

<a href="#marker">跳转到A位置</href>

3、标题标签

-h1到h6是六个级别的标题标记

-h1为最大,字体笔划最粗.h6为最小,字体笔划最细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <h1>我是一个标题</h1>
    <h2>我是一个标题</h2>
    <h3>我是一个标题</h3>
    <h4>我是一个标题</h4>
    <h5>我是一个标题</h5>
    <h6>我是一个标题</h6>
</body>
</html>

4、段落标签

段落标签p：paragraph的简写。主要用来修饰文章内容的段落。

特点：

自身拥有行高
块元素，会独占文档流，会受到宽度和高度，内外间距的影响
主要用来修饰文章内容的段落。就好比一本书的内容章节一样。

<p>
修饰的文章段落
</p>

5、div、span标签

div、span都是十分纯净的标签，二者本身都不带任何样式，如要需要再手动添加，先分别说明一下，等下再具体讲述。

div：division：分割，用于网页的布局结构。
span：范围，用于修饰文本。

特点：都是结构标签，div是块元素，用来定义网页结构，会独占文档流，会收到宽度高度，span是行内元素，用来修饰文本。

具体作用：

div：

就是将相似一块内容放到一个div中，形成网页布局，这样可以让结构更加公正，后期修改等操作更加方便。（上面只是我认为的划分方法，具体的可以自己看，但应该差不太多😏），具体的划分方法没有明确要求，或许你的比他的还要工整。😏

span：

span标签是使用来组合文档中的行内元素，以便使用样式来对它们进行格式化。span标签本身并没有什么格式表现，需要对它应用样式才会有视觉上的变化。

6、字体标签

字体标签，就是对字体加粗、字体颜色、字体背景色、斜体等字体样式的修改，组合的话，标签包一层就可以了。

加粗：<strong> </strong>

标记：<mark> </mark>

倾斜：<i> </i>

强调：<em> </em>


            <h1>塞尔达传说——王国之泪</h1>
            <div>
                <span>塞尔达传说——王国之泪</span>
            </div>
            <div>
                <em>塞尔达传说——王国之泪</em>
            </div>
            <div>
                <i>塞尔达传说——王国之泪</i>
            </div>
            <div>
                <mark>塞尔达传说——王国之泪</mark>
            </div>
            <div>
                <strong>塞尔达传说——王国之泪</strong>
            </div>

<div>

<span style="border: 1px solid #000;background-color: red;color: #fff;padding:4px ;">究极结合体</span>

</div>

7、列表标签🤌

列表标签：无序列表ul+li、有序列表ol+li和定义列表 dl dt dd 三种，在网页制作中应用非常广泛，列表就是信息资源的一种展示形式。

特点：

它们都是块元素，可以受到宽度，高度，内外间距的影响，独占文档流
列表标签元素可以嵌套：块元素（div,p,h1~h6,自身ul li ），也可以嵌套行内元素(strong,a，span,em ,i) ，图片，表单等等。
li 不能脱离ul | ol 单独使用。

ul\li：（下面这些小点点就是无须列表）🤌

ul\li(unordered list）无序列表
li - 英文全称是：list item 意思是：列表项
无序默认情况下是：一个圆点

<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>

ol\li:（下面的1. 2. 3. 就是有序列表）🤌

ol英文全称是：ordered list 意思是：排序的列表
li - 英文全称是：list item 意思是：列表项
有序默认情况下是：一个数字

<ol>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ol>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ul\li</title>
</head>

<body>
    <ul>
        <li>
            <h1>biaoti</h1>
        </li>
        <ul>
            <li>
                <h3>lOvE==1</h3>
            </li>
            <li>
                <h3>lOvE==1</h3>
            </li>
            <li>
                <h3>lOvE==1</h3>
            </li>
            <li>
                <h3>lOvE==1</h3>
            </li>
        </ul>
    </ul>
</body>
</html>

8、表格标签🦉🦉🦉

下面的一段html里面有一些大体的介绍，可以复制打开网页看一下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签学习-ul/ol/li</title>
    <style>
        .container {
            width: 960px;
            margin: 0 auto;
            background-color: #fafafa;
            padding: 20px;
        }

        table tr th,
        table tr td {
            border: 1px solid #ccc;
            text-align: center;
            padding: 10px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }
    </style>
</head>

<body>

    <div class="container">

        <h1>表格概述</h1>
        <p>表格：是一种行和列组合而成的单元格。一般应用于后台网页设计管理数据使用。</p>

        <ul>
            <h1>table</h1>
            <li>
                <ul>
                    <h2>表格的架构部分</h2>
                    <li>table head 表格头 thead</li>
                    <li>table body - 表格体 tbody</li>
                    <li>table foot -表格的页脚 tfoot</li>
                </ul>
            </li>


            <li>
                <ul>
                    <h2>表格的基本组成部分：</h2>
                    <li>table row - tr 表格中的行</li>
                    <li>table data cell - td 表格中的单元格</li>
                    <li>table header cell -th 表格中的头部的单元格</li>
                </ul>
            </li>
        </ul>


        <hr />

        <ul>
            <li>
                <h1>表格的注意事项</h1>

                <ul>
                    <li>默认情况下table没有边框，需要使用border="1"来指定</li>
                    <li>如果想要去掉边框，使用样式:table{border-collapse: collapse;}</li>
                    <li>tr: 是管行</li>
                    <li>td/th: 是管列 h：header，表头，th默认就加粗和剧中，td默认：不加粗，居左</li>
                </ul>

            </li>
        </ul>


        <table>
            <!--单独为列组控制样式，一行即为一列-->
            <colgroup>
                <col />
                <col style="width: 500px" />
            </colgroup>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mario</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Link</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Zerda</td>
                    <td>18</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">分页</td>
                </tr>
            </tfoot>
        </table>
    </div>


</body>

</html>

表格还有很多样式操作，就不再说了，使用起来也不难，表格相对来说也不那么重要，更加重要的的是form表单。

9、Form表单

表单标签：标签用于创建供用户输入的 HTML 表单。有了表单可以让静态网页进行数据的交流和沟通，也就有了后续的b/s架构。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>登录</h1>
    <form action="http://localhost:8080/toLogin" method="post">

        <!--text类型输入后为明文，可以复制-->
        <p>账号: <input type="text" name="username" /></p>

        <!--password类型输入后为密文，并且不可复制-->
        <p>密码: <input type="password" name="password" /></p>
        <p><input type="submit" value="登录" /></p>

    </form>

    <h1>注册</h1>
    <form action="http://localhost:8080/Register" method="post">
        <p>省份:
            <select name="province">
                <option value="1" selected>北京</option>
                <option value="2">上海</option>
                <option value="3">天津</option>
            </select>
        </p>
        <p>账号: <input type="text" name="username" maxlength=20 placeholder="请输入账号" /></p>
        <p>密码: <input type="password" name="password" /></p>
        <p>年龄: <input type="text" name="age" /></p>
        <p>性别:
            <label><input type="radio" name="sex" value="1" checked /> 男</label>
            <input type="radio" name="sex" value="0" /> 女
            <input type="radio" name="sex" value="2" /> 其他
        </p>
        <p>介绍:<textarea name="intro"></textarea></p>
        <p>兴趣爱好:
            <input type="checkbox" checked name="hobbyd" value="1" />听歌
            <input type="checkbox" name="hobbyd" value="2" />学习
            <label><input type="checkbox" name="hobbyd" value="3" />玩耍</label>
        </p>

    </form>

    <form action="http://localhost:8080/upload/file" enctype="multipart/form-data" method="post">
        <p><input type="file" name="file" /></p>
        <p><input type="submit" value="上传文件" /></p>
    </form>

</body>

</html>

label标签：

label标签页属于：form元素的成员之一，它有啥意义呢？它主要用来修饰文本和form元素的指向和体验问题。我们只需要把文本和form元素使用label标签包裹，就可以产生一个奇妙的化学反应。就是：我们点击文本页可以让文本获取焦点。语法如下：

# 方式1
<label>文本：<input></label>
# 方式2
<label for="username">文本：<input type='text' id="username"></label>

<!--重置按钮-->
<label for="username">用户名：<input  type="text" id="username" name="username" ></label>
<label for="password">密码：<input  type="text" id="password" name="password" ></label>

文本元素

文本类型表单元素是最丰富，也是使用最多的元素标签，

它的类型有如下：

text ：文本框
- email （html5新增）
- number （html5新增）
- range（html5新增）
- search（html5新增）
- url（html5新增）
hidden : 隐藏的文本框
password：密码框

通用属性：

type=“类型”
placeholder：文本元素默认显示（html5新增）
value : 文本元素的默认值
maxlength: 文本元素最多输入字符（html5新增）
size : 文本框长度，一般不建议使用，后续都通过css进行精准控制。（html5废弃）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        <!--隐藏的文本框-->
        <input type="hidden" name="id" id="100"/>
        <!--最简单的文本框-->
        <p>最简单的文本框：<input/></p>
        <!--有类型和名字和id-->
        <p>有类型和名字和id：<input type="text" name="username" id="username" /></p>
        <!--密码输入框-->
        <p>请输入密码：<input type="password" name="password" id="password" /></p>
        <!--邮箱 会自动验证Email地址格式是否正确-->
        <p>请输入邮箱：<input type="email" name="email" /></p>
        <!--网址 会自动验证URL地址格式是否正确-->
        <p>请输入网址：<input type="url" name="url" /></p>
        <!--数字
min：最小值
max：最大值
step：步长 
-->
        <p> 请输入数字:<input type="number" name="num" min="0" max="100" step="10" /></p>
        <!--滑块 type值为range即为滑块。-->
        <p>
            请输入数字:<input type="range" name="range1" min="0" max="10" step="2" /></p>
        <!--type值为search即为搜索框。-->
        <p>请输入搜索的关键词:<input type="search" name="sousuo" /></p>
        <!--有默认提示和限制输入大小的文本框-->
        <p>请输入内容:<input type="text" placeholder="请输入内容" maxlength="20" /></p>
        <input type="submit" value="提交">
    </form>

</body>

</html>

按钮

button按钮的作用：主要是用于提交表单处理。

<!--重置按钮-->
<input  type="reset" name="butReset" value="reset按钮">
<!--提交按钮-->
<input  type="submit" name="butSubmit" value="submit按钮">
<!--按钮-->
<button  type="submit">提交</button>
<button  type="reset">重置</button>

多行文本域

textarea属性：

cols：显示的列数
rows：显示的行数

<textarea name="showText" cols="x" rows="y">文本内容 </textarea>

文件域

概述

在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。

enctype：表单编码属性

<form action="" method="post" enctype="multipart/form-data">
    <p>
        <!--type="file"  文件域-->
        <input type="file" name="files" />
        <input type="submit" name="upload" value="上传" />
    </p>
</form>

表单的高级应用

隐藏域

在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器

<input type="hidden" value="666" name="userid">

只读、禁用

W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略

<input name="name" type="text" value="张三" readonly>
<input type="submit" disabled value="保存" >

10、音视频标签🐕🐕🐕

HTML5新增了音频和视频标签分别是：<audio>和<video>

audio标签属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL*	规定音频文件的 URL。

<audio controls>
  <source src="mp3/669484.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>
或者
<audio src="mp3/669484.mp3" controls>您的浏览器不支持 audio 元素。</audio>

    <audio controls>
        <!--本地音频-->
        <source src="D:\去月球\To.the.Moon.Build.11614846\To.the.Moon.Build.11614846\To the Moon\Audio\BGM\To The Moon (For River) - Piano Version - KanRG.ogg">
    </audio>

video标签属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

<video width="320" height="240" controls>
        <source src="mp4/movie.mp4" type="video/mp4">
        您的浏览器不支持 video 标签。
    </video>
    或者
    <video width="320" height="240" src="mp4/movie.mp4" controls>您的浏览器不支持 video 标签。</video>

11、iframe标签🐻🐻🐻

iframe: 是文档中的文档。iframe元素会创建包含另外一个文档的内联框架（即行内框架）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--内嵌本地地址-->
    <iframe src="audio.html"></iframe>
    <!--使用超链接指定iframe打开-->
    <iframe name="mainFrame"></iframe>
    <a href="https://blog.csdn.net/zyh_2021131030?type=blog" target="mainFrame">加载</a>
</body>

</html>

html的介绍就到此为止吧，本来能快速完成的，结果中间发烧了，耽误了好多天，身体才是第一位的！！！😷😷😷

HTML