30分钟入门HTML（超级简单）

最新推荐文章于 2024-10-07 21:52:38 发布

码农写手

最新推荐文章于 2024-10-07 21:52:38 发布

阅读量760

点赞数 1

分类专栏：前端文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_63119830/article/details/129283023

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端路线了解

HTML:就是我们网页的结构

CSS:美化我们的网页结构

JS:可以让我们的网页结构动起来，有交互

jQuery：是一个快速，小型且功能丰富的JavaScript库。更加便于使用

Vue:实现前后端分离，框架

1，HTML是什么

是超文本标记语言

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

标记：可以理解为标签

我们现在常用HTML5

1.优点

只要是浏览器都可用，天然可以跨平台

2.结构

请添加图片描述

2.快速入门

1.注释

<!--  注释内容  -->

2.入门案例

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

<!--html标签是总标签，内容要写在他们中间-->
<html lang="en">
    
<!--head标签代表网页的头部-->
<head>
<!--meta描述性标签，用来描述我们网站的一些信息，方便其他用户可以搜索到我们的网页-->
<!--meta标签一般用来做SEO-->
    <meta charset="UTF-8">
<!--keyswords:代表我们搜这个网站的关键词，content是关键词的内容-->
    <meta name="keyswords" content="老酒学习it">
    <!--description:代表我们搜这个网站的描述，content是描述的内容-->
    <meta name="description" content="来这里学习HTML">
<!--title标签代表网站的标题-->
    <title>我的第一个网页</title>
</head>
    
<!--body标签代表网页的主体-->
<body>
这里面输入内容:hello word
</body>
    
</html>

3.网页基本标签

1.标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--title标签代表网站的标题-->
    <title>标题标签学习</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>

2.段落标签

在html中我们写的文本，如果没有标签提示进行换行，是不会自动换行的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--title标签代表网站的标题-->
    <title>段落标签学习</title>
</head>
<body>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
</body>
</html>

3.换行标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--title标签代表网站的标题-->
    <title>换行标签学习</title>
</head>
<body>
床前明月光 <br/>
疑是地上霜 <br/>
举头望明月
低头思故乡

</body>
</html>

4.水平线标签

<hr/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--title标签代表网站的标题-->
    <title>水平线标签学习</title>
</head>
<body>
床前明月光 <br/>
疑是地上霜 <br/>

<hr/>

举头望明月
低头思故乡

</body>
</html>

5.字体样式标签

学习粗体和斜体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--title标签代表网站的标题-->
    <title>字体样式标签学习</title>
</head>
<body>
<h1>字体样式学习</h1>
粗体：<strong>这是粗体</strong>
<br/>
斜体：<em>这是斜体</em>

</body>
</html>

6.特殊符号

如 > ,< ，空格等

特殊符号都是&开头

4.图像标签

1.常见图像格式

JPG , GIF , PNG , BMP等

2.图片标签内容

请添加图片描述

3.案例

我们加载的图片一般都放在自己的项目里面，我们会在项目中创建一个目录resources目录存放各种资源，然后在其中再创建一个image目录，存放我们图片，我们的img标签中的图像就从image目录中取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--title标签代表网站的标题-->
    <title>图片标签学习</title>
</head>
<body>
<img src="resources/images/9d.jpg" alt="图片加载失败显示文字" title="鼠标悬停文字" width="200px" height="200px">
</body>
</html>

5.链接标签

链接标签的作用，就会可以进行网页的跳转‘

标签
请添加图片描述

1.文本超链接

点击文字，进行图片的跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--title标签代表网站的标题-->
    <title>文本链接标签学习</title>
</head>
<body>
<!--a标签
    href: 必须填，表示我们跳转到哪个标签
    target：
        _blank :点击的时候，新建一个网页打开
        _self :默认，在当前网页打开新的网页
    -->
<a href="index2.html" target="_self">点击我跳转到index2.html网页</a>
<a href="https://www.baidu.com/">点击我跳转到百度网页</a>
</body>
</html>

2.图像超链接

点击图像进行图片的跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--title标签代表网站的标题-->
    <title>图片链接标签学习</title>
</head>
<body>
<!--a标签
    href: 必须填，表示我们跳转到哪个标签
    target：
        _blank :点击的时候，新建一个网页打开
        _self :默认，在当前网页打开新的网页
    -->
<a href="index2.html" target="_self">点击我跳转到index2.html网页
<img src="resources/images/9d.jpg" alt="图片加载失败显示文字" title="鼠标悬停文字" width="200px" height="200px">
</a>
<a href="https://www.baidu.com/">点击我跳转到百度网页
<img src="resources/images/9d.jpg" alt="图片加载失败显示文字" title="鼠标悬停文字" width="200px" height="200px"></a>
</body>
</html>

3.锚链接

可以实现在一个页面内的调整，通常用于网页中回到顶部这一功能

<!--使用a标签中的name作为标记，我们将name赋值为top-->
<a name = "top">顶部</a>
中间是我们网页内容,如p标签，img标签等
<!--#是标记-->
<a href="#top">回到顶部</a>

4.功能链接

如点击这个链接，就可以给我发邮件，或者可以直接联系我

6.行内元素和块元素

1.行内元素

其实就是可以将我们的文本摆在一行里面的标签

如标签中可以放标签，是在一行里面进行的，

2.块元素

无论内容多少，该元素独占一行，一行内是不能放其他元素的

如:

，

7.列表标签

简单的理解方式就是可以把列表标签看做目录那样的结构

1.有序列表

列表前面是有序号的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表标签学习</title>
</head>
<body>
<!--ol：是有序列表，o是order有序，l是list-->
<ol>
<!--中间用li-->
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

</body>
</html>

2.无序列表

用圆圈表示的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表标签学习</title>
</head>
<body>
<!--ul：是无序列表，u是无序，l是list-->
<ul>
<!--中间用li-->
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ul>
</body>
</html>

3.自定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表标签学习</title>
</head>
<body>
<!--dl：是自定义列表，d是define自定义，l是list-->
<dl>
    <dt>列表名称标题</dt>
    <dd>1.列表内容1</dd>
    <dd>2.列表内容2</dd>
    <dd>3.列表内容3</dd>
    <dd>4.列表内容4</dd>
</dl>

</body>
</html>

8.表格标签

1.为什么有表格

简单通用，结构稳定

2.基本结构

单元格

行

列

跨行

跨列

3.不跨行不垮列案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>
<!--表格的标签是table
    行 ： tr
    列 ： td
-->
<!--三行四列-->
<!--border :是给表格添加边框-->
<table border="1px">
<!--第一行-->
    <tr>
<!-- 第一行第一列-->
        <td>1-1</td>
        <!-- 第一行第二列-->
        <td>1-2</td>
        <!-- 第一行第三列-->
        <td>1-3</td>
        <!-- 第一行第四列-->
        <td>1-4</td>
    </tr>
<!--第二行-->
    <tr>
        <td>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>

4.跨列案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>
<!--表格的标签是table
    行 ： tr
    列 ： td
-->
<!--三行四列-->
<!--border :是给表格添加边框-->
<table border="1px">
<!--第一行-->
    <tr>
<!-- 第一行第一列-->
<!--    colspan:是跨列-->
        <td colspan="4">第一行跨四列</td>
    </tr>
<!--第二行-->
    <tr>
        <td>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>

5.跨行案例

无论是跨行还是跨列都是在td标签下进行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>
<!--表格的标签是table
    行 ： tr
    列 ： td
-->
<!--三行四列-->
<!--border :是给表格添加边框-->
<table border="1px">
<!--第一行-->
    <tr>
<!-- 第一行第一列-->
        <td rowspan="4">第一列中跨四行</td>
        <!-- 第一行第二列-->
        <td>1-2</td>
        <!-- 第一行第三列-->
        <td>1-3</td>
        <!-- 第一行第四列-->
        <td>1-4</td>
    </tr>
<!--第二行-->
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
<!--第三行-->
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

9.视频和音频

我们的视频和音频图片一般都存放在我们项目的resourse目录下，视频存放在audio目录下，音频存放在vedio目录下

1.视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体标签学习</title>
</head>
<body>
<!--src ：存放资源路径-->
<!--controls:显示进度条-->
<!--autoplay ：自动播放-->
<video src="resources/audio/这才是体育精神.mp4" controls autoplay></video>
</body>
</html>

2.音频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体标签学习</title>
</head>
<body>
<!--src ：存放资源路径-->
<!--controls:显示进度条-->
<!--autoplay ：自动播放-->
<audio src="resources/audio/这才是体育精神.mp3" controls autoplay></audio>
</body>
</html>

10.页面结构分析

请添加图片描述

<!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>

11.iframe内联框架

可以理解为在一个网站内，嵌入另外一个网站

如在我们的网站页面内，可以展示百度这个网页

请添加图片描述

案例入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe标签学习</title>
</head>
<body>
<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>

12，初识表单post和get提交

1.是什么

如登录页面提交的输入账号和密码等信息或者提交文件

2.标签结构

使用form标签

请添加图片描述

3.案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习-登录注册</title>
</head>
<body>
<h1>登录页面</h1>
<!--表单form-->
<!--action:表单提交的位置，可以是一个网站，也可以是一个请求处理地址，我们这里将请求提交到了index2.html网页-->
<!--method:有post和get两种提交方式-->
<!--    get方式提交：我们可以在提交的页面index2.html中的url中看到，是非常不安全的，但是其比较高效，但是其不能传输大文件-->
<!--    post方式提交;我们不能在提交页面的index2.html中的url中看到，相对比较安全，非常适合大文件-->
<form action="index2.html" method="post">
<!--    name是给input起个名字-->
    <p>名字： <input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <p>
<!--     input中的submit是提价表单-->
        <input type="submit">
<!--        input中的reset是重置表单-->
        <input type="reset">
    </p>
</form>
</body>
</html>

13.文本框和单选框

学习的是input标签中的type属性

1.input标签属性

请添加图片描述

当type为radio时，是一个单选框，必须指定一个value值和一个name值

14、按钮和多选框

多选框也是input标签中的，type选择CheckBox，也必须指定一个value和name注意，同一组checbox中，name必须一样

按钮是使用input标签中type选择button，设置value可以在按钮上添加文字，必须有一个name给按钮命名

当input标签中type选择image，则设置图片为一个按钮，此时需要一个src设置图片路径，需要name命名，等效于type=submit,可以提交的那种

15，列表框文本域或文件域

1.下拉框

使用select标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
</head>
<body>
<select name="下拉框名称" >
<!--    selected是默认选择-->
    <option value="选项的值" selected>中国</option>
    <option value="选项的值">瑞士</option>
    <option value="选项的值">美国</option>
</select>
</body>
</html>

2.文本域

使用textarea标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本域</title>
</head>
<body>
<!--cols是文本域多少列，rows是文本域多少行-->
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</body>
</html>

3.文件域

即上传文件

使用的是input标签中的type=file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件域</title>
</head>
<body>
<input type="file" name="file">
</body>
</html>