Html---超文本标记语言

Html---超文本标记语言

网页:包含文字、图片、音频、视频、超链接(点击进入另一个网页)

超链接:可以从一个网页跳转到另一个网页的链接快速笔记

查询html相关元素、属性和用法相关知识:MDN网站

  1. html骨架

<!DOCTYPE html>

<html lang="en">-----------英语

<head>

    <meta charset="UTF-8">

    <title>Document</title>------------浏览器网页标签的名称

</head>

<body>

    我是一段文字

</body>

</html>

!------文档声明,使用的是H5

添加注释快捷键:ctrl+/   -----注释只会显示在代码中,不会出现在网页中

编写html骨架的快捷键:!+回车

lang:编码语言(en:英语)

Charset:字符编码格式

UTF-8:万国码

2.标题标签

   <h>内容</h> :

         <h1~h6>  逐级递减,独占一行

                   <h1>我是一个标题</h1>

              <h2>我是一个标题</h2>

              <h3>我是一个标题</h3>

              <h4>我是一个标题</h4>

              <h5>我是一个标题</h5>

              <h6>我是一个标题</h6>

   嵌套在<body></body>中(除了标题标签外其他标签都在body中

3.段落标签

    <p>段落内容</p>

         <p>有人曾经说过,我们赚得所有钱都比不过我们所拥有的知识。在生活中,如果想成为真正厉害的人,我们必须首先学会观察那些成功者的行为和思维。必须首先了解对方的认知,思考对方的底层思维密码,这是提高我们做事能力的重要途径。

        人的一生中,有很多事情是无法改变的。与其自怨自艾,不如学会放手,顺势而为。也许可以得到更好的结果。

        真正的厉害从不需要证明和表现,就像一座高山,即使寂静,也会受到无数人的崇拜。

    </p>

文本格式化标签:<b>加粗

                                   <i>倾斜

                                   <sub>下标

                                   <sup>上标

<br/>单标签------换行标签,加在要换行的后面

<hr/>单标签------水平线标签,添加水平线

4.路径标签

   相对路径:  ./ ----当前级

                      ../----返回上一级

    绝对路径:   /----精确路径

 <img src="./bg03.jpg">

 

5.图片

      <img src="../灰太狼.jpg" alt="我是灰太狼" title="我要去抓羊了" width="500px" border="20px" align="center">

img:图片

src:指向图片地址

alt:图片地址发生错误时用来对图片作提示

title:当鼠标移动到图片上时,显示的文字

width:图片大小

border:设置图片边框大小

align:设置图片与文字的对齐方式

6.视频

    <video src="images/video.mp4" controls="controls" loop="loop" autoplay muted></video>

controls:控键(播放)-----加上后视频才可以播放

loop:自动循环,可设置次数

autoplay:自动播放

muted:静音播放

7.音频

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

audio:音频

8.超链接

   <a></a>

          <a href="./11-超链接2.html" target="_blank">点击我进行跳转</a>

    <a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_8781526532986121071%22%7D&n_type=-1&p_from=-1 target="_blank">去百度</a>

href:跳转路径,可以是本地的,也可以是其他地址

target:控制链接打开方式(在新的页面打开,如果没有target则在当前页面打开)

9.锚链接

    id:相同网页不能重复,一个元素只能有应该id,相当于元素身份证

<a href="#one">h1那里</a>

<h1 id="one">03、拥有了值得追求的梦想,现在没有时间说话</h1>

(不同段)

   href后面是当前页面的某一个段落或位置

   锚链接相当于网页中的目录

10.特殊字符

    用代码无法在网页中直接显示的字符,则需要其他的字符在代码中表示进而显示在网页中

爱好: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;唱歌</p>

若有连续的多个特殊字符,每个用“;”分隔开

11.列表标签

     有序列表:<ol>

                           <li>内容</li>----------<li></li>中间可以嵌套任何标签

                      </ol>

                     网页显示默认列表序号为1、2、3、、、

    无序列表:<ul>

                           <li>内容</li>

                     </ul>

                     网页显示默认是小圆点,可用type修改

   自定义列表:<dl>

                           <dt>内容</dt>-----于<li>相同用法

                        </dl>

                     网页显示默认没有任何序号

12.框架标签

    <iframe src="https://www.taobao.com" frameborder="1" width="800px" height="600px"></iframe>

  <iframe src="./08-视频.html" frameborder="1" width="800px" height="600px"></iframe>

iframe:嵌套页面,可多个

frameborder:设置框架边框

width、height:设置宽和高

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值