html入门

Orangeio

已于 2023-07-15 17:27:40 修改

阅读量119

点赞数

文章标签：笔记前端 html

于 2023-07-07 19:58:00 首次发布

本文链接：https://blog.csdn.net/Orangeio/article/details/131603238

版权

我是做的第一个网页

<marquee loop="1">我是做的第一个网页</marquee>
<!-- <标签名>标签体</标签名>-->
<!-- html大小写不分 -->
<input disabled/><!-- 单标签 -->
<!-- 标签可以嵌套 -->
<!-- 属性名=“属性值” 
属性名和属性值相同，只写属性名-->

html骨架：

<!DOCTYPE html>
<!-- 声明文档 html5 -->
<html lang="en">
    <head>
        <meta charset="UTF-8"><!-- UTF万国码 -->
        <title>我是最棒的</title>
    </head>
    <body>
        6666
    </body>
</html>

<!-- 注释：对代码进行解释 -->Ctrl/

标题标签：

我是标题

<body>
    <!--  标题标签 h1-h6逐渐变小 独占一行 -->
    <h1>我是标题</h1>
    <h2>我是标题</h2>
    <h3>我是标题</h3>
    <h4>我是标题</h4>
    <h5>我是标题</h5>
    <h6>我是标题</h6>
</body>

段落标签：

戴尔·卡耐基利用大量普通人不断努力取得成功的故事, 通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。

其在1936年出版的著作《人性的弱点》,70年来始终被西方世界视为社交技巧的圣经之一。他在1912年创立卡耐基训练班,以教导人们人际沟通及处理压力的技巧。

<body>
    <!-- 段落标签 p 行与行之间空  -->
    <p>戴尔·卡耐基利用大量普通人不断努力取得成功的故事,
    通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。</p>
    <p>其在1936年出版的著作《人性的弱点》,70年来始终被西方世界视为社交技巧的圣经之一。
    他在1912年创立卡耐基训练班,以教导人们人际沟通及处理压力的技巧。</p>
</body>

换行标签、水平线标签：

Document

戴尔·卡耐基

戴尔·卡耐基利用大量普通人不断努力取得成功的故事, 通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。
其在1936年出版的著作《人性的弱点》,70年来始终被西方世界视为社交技巧的圣经之一。他在1912年创立卡耐基训练班,以教导人们人际沟通及处理压力的技巧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>戴尔·卡耐基</h2>
    <hr /><!-- 水平线标签 -->
     戴尔·卡耐基利用大量普通人不断努力取得成功的故事,
     通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。<br/><!-- 直接换行 -->
     其在1936年出版的著作《人性的弱点》,70年来始终被西方世界视为社交技巧的圣经之一。
        他在1912年创立卡耐基训练班,以教导人们人际沟通及处理压力的技巧。
</body>
</html>

加粗<strong></strong>或者<b></b>
倾斜<em></em>或者<i></i>
删除线<del></del>或者<s></s>
下划线<ins></ins>或者<u></u>

文本格式化标签：

戴尔·卡耐基利用大量普通人不断努力取得成功的故事, 通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。

其在1936年出版的著作《人性的弱点》,70年来始终被西方世界视为社交技巧的圣经之一。

他在1912年创立卡耐基训练班,以教导人们人际沟通及处理压力的技巧。

~~2999~~9.9
~~11.0~~11.0

<body>
        <p>戴尔·卡耐基利用大量<strong>普通人</strong>不断努力取得成功的故事,
        通过演讲和书唤起无数陷入迷惘者的<b>斗志</b>,激励他们取得辉煌的成功。</p>
        <p>其在<em>1936</em>年出版的<i>著作</i>《人性的弱点》,70年来始终被西方世界视为社交技巧的圣经之一。</p>
        <p>他在1912年创立<ins>卡耐基训练班</ins>,以<u>教导人们</u>人际沟通及处理压力的技巧。</p>
        <del>2999</del>9.9<br />
        <s>11.0</s>11.0
</body>

无语义标签：

ykghljghjl

</div>
<div>
        ykghljghjl
</div>
<!-- span一行可存在多个 -->
<span>a</span>
<span>a</span>
<span>a</span>

<body>
    <!-- 无语义标签 容器 独占一行 多用于布局-->
    <div>
        ykghljghjl
        <img src="../图/QQ图片20221127200524.png" alt=""><!-- 绝对路径：在电脑上的链接 -->
    </div>
    <div>

    </div>
    <div>
            ykghljghjl
    </div>
    <!-- span一行可存在多个 -->
    <span>a</span>
    <span>a</span>
    <span>a</span>

</body>

图片标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
    <!-- src指向图片位置  alt图片地址发生错误时用来提示的字 title：鼠标经过时显示的文字 border边框 width宽度 height高度-->
<!-- 相对路径：相对于html文件夹的链接 -->
    <img src="./图/QQ图片20221127200524.png" alt="我啃啃啃啃" title="我啃你屁股" width="500px" height="400px" border="5">
    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.2QpKqRTIVw_n-9Ubqq-tOwHaEK?w=283&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"><!-- 网络上的绝对路径 -->
</body>
</html>

视频标签：

视频标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频标签</title>
</head>
<body>
    <video src="./images/f2f95d6f933ae90c7ef92a8e8a23b95e.mp4" controls autoplay muted loop width="400px" poster="./images/微信图片_20230516194331.jpg"><!-- controls控件 autoplays自动播放 muteds静音播放 loop循环播放 poster加载等待的画面-->
</body>

音频标签：

Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <audio src="./images/卫衣上的发条.mp3"controls autoplay muted loop></audio>
</body>
</html>

链接标签：

Document 去欧鹏去百度去视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- href:跳转的位置 -->
    <!-- target:打开方式 默认：_self 新窗口打开_blank -->
    <a href="http://www.xianoupeng.com/" >去欧鹏</a><!-- 默认当前窗口打开 -->
    <a href="http://www.baidu.com/" target="_blank">去百度</a><!-- target="_blank"保留原页面 -->
    <a href="./images/f2f95d6f933ae90c7ef92a8e8a23b95e.mp4">去视频</a>
    <a href="http://www.baidu.com/" target="_blank"><img src="./images/微信图片_20230516194331.jpg" ></a>
    <a href="http://www.xianoupeng.com/" target="_blank"><img src="./images/QQ图片20221127200524.png" ></a>
</body>
</html>

锚链接：

锚链接

个人经历戴尔·卡耐基利用大量普通人不断努力取得成功的故事, 通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。其在1936年出版的著作《人性的弱点》,70年来始终被西方世界视为社交技巧的圣经之一。他在1912年创立卡耐基训练班,以教导人们人际沟通及处理压力的技巧。戴尔·卡耐基利用大量普通人不断努力取得成功的故事, 通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。戴尔·卡耐基利用大量普通人不断努力取得成功的故事, 通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。其在1936年出版的著作《人性的弱点》,70年来始终被西方世界视为社交技巧的圣经之一。他在1912年创立卡耐基训练班,以教导人们人际沟通及处理压力的技巧。戴尔·卡耐基利用大量普通人不断努力取得成功的故事, 通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>锚链接</title>
</head>
<body>
    <div>
        <a href="#one">个人经历</a>
        戴尔·卡耐基利用大量普通人不断努力取得成功的故事,
        通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。
        其在1936年出版的著作《人性的弱点》,70年来始终被西方世界视为社交技巧的圣经之一。
        他在1912年创立卡耐基训练班,以教导人们人际沟通及处理压力的技巧。
        戴尔·卡耐基利用大量普通人不断努力取得成功的故事,
        通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。
        戴尔·卡耐基利用大量普通人不断努力取得成功的故事,
        通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。
        其在1936年出版的著作《人性的弱点》,70年来始终被西方世界视为社交技巧的圣经之一。
        他在1912年创立卡耐基训练班,以教导人们人际沟通及处理压力的技巧。
        戴尔·卡耐基利用大量普通人不断努力取得成功的故事,
        通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。
        <!-- id属性---身份证号 -->
        <div id="one">个人经历</div>
        戴尔·卡耐基利用大量普通人不断努力取得成功的故事,
        通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。
        其在1936年出版的著作《人性的弱点》,70年来始终被西方世界视为社交技巧的圣经之一。
        他在1912年创立卡耐基训练班,以教导人们人际沟通及处理压力的技巧。
        戴尔·卡耐基利用大量普通人不断努力取得成功的故事,
        通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。
        戴尔·卡耐基利用大量普通人不断努力取得成功的故事,
        通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。
        其在1936年出版的著作《人性的弱点》,70年来始终被西方世界视为社交技巧的圣经之一。
        他在1912年创立卡耐基训练班,以教导人们人际沟通及处理压力的技巧。
        戴尔·卡耐基利用大量普通人不断努力取得成功的故事,
        通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。
        戴尔·卡耐基利用大量普通人不断努力取得成功的故事,
        通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。
        其在1936年出版的著作《人性的弱点》,70年来始终被西方世界视为社交技巧的圣经之一。
        他在1912年创立卡耐基训练班,以教导人们人际沟通及处理压力的技巧。
        戴尔·卡耐基利用大量普通人不断努力取得成功的故事,
        通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。
        戴尔·卡耐基利用大量普通人不断努力取得成功的故事,
        通过演讲和书唤起无数陷入迷惘者的斗志,激励他们取得辉煌的成功。
                            
    </div>
</body>
</html>

有序列表：

喜欢的食物

type可以选择前面标号
屁股
油饼
猫饼
可乐泡饭

<body>
    <!-- 有序列表 -->
    喜欢的食物
    <ol type="A">           type可以选择前面标号
        <li>屁股</li>
        <li>油饼</li>
        <li>猫饼</li>
        <li>可乐泡饭</li>
    </ol>
</body>

无序列表：

你喜欢的明星是

法外狂徒
好好好
对对对
行行行

<body>
    你喜欢的明星是
    <ul type="circle">
        <li>法外狂徒</li>
        <li>好好好</li>
        <li>对对对</li>
        <li>行行行</li>
    </ul>
</body>

自定义列表：

你们喜欢的明星是？

张三

李四

弦五

<body>
    <dl>
        <dt>
            你们喜欢的明星是？
        </dt>
        <dd>
            张三
        </dd>
        <dd>
            李四
        </dd>
        <dd>
            弦五
        </dd>
    </dl>
    
</body>

iframe框架：

Document 这是我的主页面去淘宝

<body>
    这是我的主页面
    <iframe src="https://www.taobao.com" width="900px" height="600px" ></iframe>
    <iframe src="https://www.baidu.com" ></iframe>
    <a href="https://www.taobao.com" target="nn">去淘宝</a>
    <iframe name="nn" frameborder="0" width="800px" height="400px"></iframe>
</body>

特殊字符：

Document

< >
我最喜欢的人是张三 31°

<body>
    <div>
        &lt;
        &gt;
        <br />
        我最喜欢的人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是张三
        31&deg;
    </div>
</body>

作业：

Document

欢迎您来到登录页

首页列表页详情页登录页

请登录。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>欢迎您来到登录页</h1>
    <a href="https://www.baidu.com" target="_blank">首页</a>
    <a href="https://www.baidu.com" target="_blank">列表页</a>
    <a href="https://www.baidu.com" target="_blank">详情页</a>
    <a href="https://www.baidu.com" target="_blank">登录页</a>
    <h1>请登录。</h1>
    
</body>
</html>

请添加图片描述

Orangeio

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html入门

你们喜欢的明星是？张三李四弦五< body > < dl > < dt > 你们喜欢的明星是？< /dt > < dd > 张三 < /dd > < dd > 李四 < /dd > < dd > 弦五 < /dd > < /dl > < /body >
复制链接

扫一扫