Day01 Web前端学习笔记

杨俊杰-YJ

已于 2023-07-05 21:37:40 修改

阅读量317

点赞数

文章标签：前端学习笔记

于 2023-07-05 21:34:49 首次发布

本文链接：https://blog.csdn.net/weixin_74227828/article/details/131564356

版权

html 超文本标记语言

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

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

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

1、html的框架

<meta charset="utf-8">

此处填写网页的标题

在body之间是网页的内容（写什么就显示什么）

2.快速生成框架、注释

shift+1生成！之后+Enter回车

快速注释：CTRL+/

3.标题标签

<html lang="en">
<head>
    <meta charset="utf-8">
  <title>此处填写网页的标题</title>
</head>
<body>
在body之间是网页的内容（写什么就显示什么）
</body>
</html>

4.段落标签

<body>
    <!-- 段落标签   p 行与行之间空 -->
    <p>戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。</p>
    <p>此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。</p>
    《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
</body>

5.换行标签、水平线标签

<body>
    <h2>戴尔·卡耐基</h2>---------改变字体大小
    <hr />---------------------在上面这段文字下面加上横线
    戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />------------换行处理
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少
</body>

6.文本格式化标签

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

<em>文字倾斜</em>

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

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

删除线 <del>2999</del> 9.9<br />--------划去2999
      <s>11.0 </s> 11.0---------------划去11.0

7.无语义标签

<body>
    <!--容器，独占一行   多用于布局-->
    <div>
        nkdscldscdscdcnkdcds
    </div>
    <div>
        nkdscldscdscdcnkdcds
    </div>
    <div>
        nkdscldscdscdcnkdcds
    </div>
    <!-- span一行可存在多个 -->
    <span>a</span>
    <span>a</span>
    <span>a</span>
</body>
显示的结果为
nkdscldscdscdcnkdcds 
nkdscldscdscdcnkdcds
nkdscldscdscdcnkdcds
a a a

8.图片、视频、音频标签

图片

<body>
    <!-- src指向图片位置  alt:图片地址发生错误时，用来提示的字 
    title:鼠标经过时，显示的文字
    border  边框 
    width：宽度
    height：高度   
-->
    <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>
    <!-- width="1800px" height="50px"
    controls:控件
    autoplay：自动播放
    muted:静音播放
    poster：等待加载时的显示图片
    -->
    <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>

9.链接标签、锚标签

链接标签

<body>
    <!-- 默认当前窗口打开 -->
    <a href="http://www.xianoupeng.com/" 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.xianoupeng.com"><img src="./images/cat.gif"></a>
</body>
不加上target="_blank"就是在当前的页面打开，加上则是跳转到下一个页面

锚标签

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

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

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

<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>
        <li>罗翔</li>
    </ul>
    <dl>------------自定义列表
        <dt>
            你们喜欢的明星是？
        <dd>
            张三
        </dd>
        <dd>
            里斯
        </dd>
        <dd>
            张三
        </dd>
        </dt>
    </dl>----------按照所写的顺序显示
</body>

11.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>