【前端】HTML基础2-HTML标签

桃扇骨 2022-11-03 11:58 357阅读 0赞

HTML标签

HTML语法规范

大部分情况下标签都是成对出现的
< /html >是结束

<html></html>

也有单标签，特别少

<br />

标签关系

双标签关系可以分为两类：包含关系和并列关系
在这里插入图片描述

HTML基本结构标签

在这里插入图片描述

<html>
    <head>
          <title></title>
    </head>
    <body>
    </body>
</html>

在这里插入图片描述

vscode开发工具

在这里插入图片描述

DOCTYPE和lang以及字符集的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

DOCTYPE

在这里插入图片描述

lang

提倡用

<html lang="zh-CN">

浏览器会知道你写的lang种类是啥，如果你写fr的话，就是法语，那么浏览器就会认为你这是一个法文网站。
在这里插入图片描述

字符集

在这里插入图片描述
charset就是字符设置啦
不写UTF-8会乱码!!!

HTML常用标签

标签语义

学习标签一定要记得每个标签的语义，就是标签的含义！
在这里插入图片描述

标题标签

标题标签分为六个等级，分为
在这里插入图片描述

段落标签和换行标签

段落标签：

<p> </p>

在这里插入图片描述

换行标签：

<br />

在这里插入图片描述
段落标签会有一行空隙，换行标签不会有空隙。

案例练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>“严”字当头，全面担责！最高法发布长江保护法实施意见</h1>
    <h3>新华社北京2月25日电（记者徐壮、罗沙）</h3>
    <p>
        长江保护法将自3月1日起施行，最高人民法院2月25日发布《最高人民法院关于贯彻〈中华人民共和国长江保护法〉的实施意见》，充分发挥人民法院审判职能作用，依法加强长江流域生态环境保护和修复，促进资源合理高效利用，推进长江流域绿色发展。</p>
    <p>
        实施意见全文分为4个部分，共16条。强调人民法院在司法裁判中应当坚持长江司法保护的理念，即生态优先、绿色发展，统筹协调、系统治理，依法严惩、全面担责。</p>
    <p>作者：人民网 <br />
        2021-2-26
    </p>
</body>
</html>

样式：
在这里插入图片描述

文本格式化标签

对文字做特殊效果，比如加粗体，加斜体等等。
在这里插入图片描述

<body>
    <strong>哈哈哈</strong>
    <em>嘻嘻嘻</em>
    <del>罗罗罗</del>
    <ins>哇哇哇</ins>
</body>

在这里插入图片描述

< div >标签和< span >标签

这俩玩意是没有语义的，就是盒子，用来装内容的，来布局网页。
在这里插入图片描述

<body>
    <div>我是一个div标签，我一个人占一行</div>123
    <div>我是一个div标签，我一个人占一行</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
</body>

样式：
在这里插入图片描述

图像标签和路径

图像标签

<img src="图像URL"/>

在这里插入图片描述

注意啦！你要是想把图片放到网页中，你必须把图片和网页放在一起（一个文件夹里）

<body>
    <h1>看我看我：</h1>
    <img src="111.jpg" height=200 title="qzh真好看"/>
    <h1>alt 替换文本 图片显示不出来的时候：</h1>
    <img src="img.jpg" alt="图片跑走啦"/>
</body>