Day01 Web前端学习笔记

夜深邃星如尘

已于 2024-07-04 16:41:34 修改

阅读量85

点赞数 1

分类专栏： web 文章标签：前端学习笔记

于 2023-07-07 08:53:39 首次发布

本文链接：https://blog.csdn.net/m0_74281884/article/details/131588877

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

html 超文本标记语言

超：超链接，能从一个网页跳转到另一个网页

标记：文本要变超文本，就需要各种标记语言

<开始标签> 标签体（neirong）</结束标签>

html骨架

<!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>
  
</body>
</html>

在body之间是网页的内容

title:鼠标经过时，显示的文字

注：shift+！可帮助我们快速生成html骨架

注释

注释 :对代码进行解释

在VS code中ctrl+/可以帮我们快速添加注释

<!-- 不要看了，这里代码全是bug，得把你气死（ ᗜ ‸ ᗜ ）-->

标题标签

<body>
    <h1>我是标题</h1>
    <h2>我是标题</h2>
    <h3>我是标题</h3>
    <h4>我是标题</h4>
    <h5>我是标题</h5>
    <h6>我是标题</h6>
</body>

标题标签 h1-h6逐渐变小且独占一行

段落标签

段落标签 p 行与行之间空

<body>
    <p>你说的对，但是《原神》是由米哈游自主研发的一款全新开放世界冒险游戏。</p>
    <p>游戏发生在一个被称作「提瓦特」的幻想世界，在这里，被神选中的人将被授予「神之眼」，导引元素之力。
    </p>你将扮演一位名为「旅行者」的神秘角色在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘「原神」的真相。
</body>

效果如图

换行标签、水平线标签

<hr />在上面这段文字下面加上横线

<body>
    <h2>鸡你太美</h2>
    <hr />
   鸡你太美是一句网络流行语，为2016年11月9日SWIN-S发布的歌曲《只因你太美》的空耳。出自于蔡徐坤在综艺节目《偶像练习生》之中的自我介绍表演。
　　鸡你太美(只因你太美)这段表演的配乐在综艺节目《偶像练习生》中正好出现在蔡徐坤转身扔掉篮球的一刹那。这首歌曲的节奏较快，快速说唱时网友将只因二字听成了鸡，部分网友用这段音乐制作鬼畜视频，因此这个梗快速流传开来，获得广泛的关注，同时也在贴吧等平台作为段子流行。

</body>

文本格式化标签

<b>字体加粗</>
<strong>字体加粗</strong>

<em>文字倾斜</em>

<i style="color: pink;">85%</i>---修改字体颜色

<ins>文字下划线</ins>

<u>文字下划线</u>

删除线 <del>小黑子</del> 真爱坤<br />--------划去小黑子
      <s>树枝 </s> 树枝---------------划去树枝

无语义标签

<body>
    <div>
        小黑子
    </div>
    <div>
        苏珊
    </div>
    <div>
        树枝
    </div>
    <span>6</span>
    <span>6</span>
    <span>6</span>
</body>

div 容器，独占一行多用于布局

span一行可存在多个

图片、视频、音频标签

src指向图片位置 alt:图片地址发生错误时，用来提示的字

border 边框 width：宽度 height：高度

controls:控件 autoplay：自动播放 muted:静音播放 poster：等待加载时的显示图片

图片

<body> 
    <img src="./images/cat.gif" alt="我是一只最好看的小狗" title="你个狗" height="700px" border="20">--相对路径
    <img src="C:\Users\夜深邃星如尘\Desktop\web前端\day01\代码\images\dog.gif">-----绝对路径
    <img src="https://img1.baidu.com/it/u=3113560374,3342883877&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt="">---------网上的图片地址
</body>

视频

<body>
    <video src="./images/video.mp4" controls autoplay muted poster="./images/map.jpg"></video>
</body>

音频

<body>
    <audio src="./images/music.mp3" controls muted autoplay loop></audio>
</body>

链接标签、锚标签

链接标签

<body>
    <!-- 默认当前窗口打开 -->
    <a href="http://www.www.csdn.net/" target="_blank">去博客</a>
    <a href="https://www.baidu.com" target="_blank">去百度</a>
    <a href="./09-视频.html">去看小视频了</a>
    <a href="https://www.baidu.com"><img src="./images/dog.gif"></a>
    <a href="http://www.www.csdn.net"><img src="./images/cat.gif"></a>
</body>

不加上target="_blank"就是在当前的页面打开，加上则是跳转到下一个页面

锚标签

 <a href="#one">个人经历</a> --------类似于一个目录跳转，跳转到个人经历那一栏

 <div id="one">个人经历</div>------------- <!-- id属性------身份证号 -->------对个人经历进行一个标记

有序列表、无序列表、自定义列表

<body>
    <!-- 有序列表 ol  li-->
    喜欢的食物
    <ol type="a">-------不对type进行设置的话，默认从1开始排序
        <li>西瓜拌老干妈</li>
        <li>香蕉炒鸡蛋</li>
        <li>雪糕拌饭</li>
        <li>奶茶泡饭</li>
    </ol>
       你喜欢的明星是？
    <ul type="circle">-----无序排序，不对type进行设置的话，默认实心圆，进行标记
        <li>丁真</li>
        <li>法外狂徒张三</li>
        <li>蔡徐坤</li>
    </ul>
    <dl>------------自定义列表
        <dt>
            你们喜欢的明星是？
        <dd>
            张三
        </dd>
        <dd>
            里斯
        </dd>
        <dd>
            张三
        </dd>
        </dt>
    </dl>----------按照所写的顺序显示
</body>

iframe框架

<body>
    这是我的主页面
    <iframe src="https://www.taobao.com" width="900px" height="600px"></iframe>
    ---------内嵌一个框架，在框架中显示该网站

    <a href="https://www.taobao.com" target="nn">去淘宝</a>
    <iframe name="nn" frameborder="0" width="800px" height="200px"></iframe>
    -------------在当前页面上加入一个链接标签，并在当前的界面框架中显示
</body>