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

最新推荐文章于 2024-08-09 10:42:44 发布

真的吃很多

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量203

点赞数

分类专栏：前端文章标签：前端 html5 html

本文链接：https://blog.csdn.net/m0_51631639/article/details/114230592

版权

前端专栏收录该内容

3 篇文章 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>

样式：
在这里插入图片描述
这里img.jpg显示不出来，因为和我源代码一起的文件夹中没有这个图片。
俺的文件夹：

图像标签的其他属性：

在这里插入图片描述
width和height的单位是像素

一般情况下，高度宽度只修改一个就好了，另外一个会等比例缩放的

border其实多用CSS来设定。

图像标签注意点

在这里插入图片描述

属性和属性之间一定要用空格隔开

alt是替换文本，title是提示文本

路径

目录文件夹和根目录：
在这里插入图片描述
路径可以分为：
相对路径
绝对路径

相对路径

在这里插入图片描述
上一级路径

下一级路径

绝对路径

在这里插入图片描述

真的吃很多

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
【前端】HTML基础2-HTML标签

HTML标签HTML语法规范大部分情况下标签都是成对出现的是结束```html```也有单标签，特别少<br />标签关系双标签关系可以分为两类：包含关系和并列关系HTML基本结构标签<html> <head> <title></title> </head> <body> </body></html>vscode开发工具DOCTYPE和lang以
复制链接

扫一扫

专栏目录