HTML第四章 常用标签

最新推荐文章于 2023-05-25 14:06:34 发布
最新推荐文章于 2023-05-25 14:06:34 发布
阅读量222 收藏
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27924553/article/details/121505298
版权

1、标题标签

  • 作为标题使用，每个标题独占一行
<head></head>
  • 代码实战
<!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>大数据技术栈</title>
</head>

<body>
    <h1>数据库</h1>
    <h2>mysql</h2>
    <h2>oracle</h2>
    <h1>开发语言</h1>
    <h2>sql</h2>
    <h2>java</h2>
    <h2>sql</h2>
</body>

</html>
  • 运行结果

在这里插入图片描述

2、段落标签

  • 定义段落
<p>
    段落
</p>
  • 代码实战
<!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>大数据技术栈</title>
</head>

<body>
    <h1>数据库</h1>
    <h2>mysql</h2>
    <p>mysql在互联网应用较多</p>
    <p>mysql是一个开源软件</p>
    <h2>oracle</h2>
    <h1>开发语言</h1>
    <h2>sql</h2>
    <h2>java</h2>
    <h2>sql</h2>
</body>

</html>
  • 运行结果

在这里插入图片描述

3、换行标签

  • 强制文字另起一行显示
<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>大数据技术栈</title>
</head>

<body>
    <h1>数据库</h1>
    <h2>mysql</h2>
    <p>mysql在<br />互联网应用较多</p>
    <p>mysql是一个开源软件</p>
    <h2>oracle</h2>
    <h1>开发语言</h1>
    <h2>sql</h2>
    <h2>java</h2>
    <h2>sql</h2>
</body>

</html>
  • 运行结果
    在这里插入图片描述

4、文本格式化标签

  • 设置文字以特殊方式显示
语义标签
加粗
倾斜
删除线
下划线
  • 代码实战
<!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>大数据技术栈</title>
</head>

<body>
    <h1>数据库</h1>
    <h2>mysql</h2>
    <p>mysql在<br /><em>互联网</em>行业应用较多</p>
    <p>mysql是一个<strong>开源</strong>软件</p>
    <h2>oracle</h2>
    <h1>开发语言</h1>
    <h2>sql</h2>
    <h2>java</h2>
    <h2>sql</h2>
</body>

</html>
  • 运行结果

在这里插入图片描述

5、图像标签

  • 定义HTML页面中的图像
<img src="图像url" title="提示文本(鼠标放上去显示)" alt="替换文本" width="500" height="100">

注意：宽度和高度一般只设置其中一个

  • 代码实战
<!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>大数据技术栈</title>
</head>

<body>
    <h1>数据库</h1>
    <h2>mysql</h2>
    <p>mysql在<br /><em>互联网</em>行业应用较多</p>
    <p>mysql是一个<strong>开源</strong>软件</p>
    <h2>oracle</h2>
    <h1>开发语言</h1>
    <h2>sql</h2>
    <img src="img.jpg" alt="替换文本" title="提示文本(鼠标放上去显示)" width="500" /><br />
    <img src="img1.jpg" alt="替换文本" title="提示文本(鼠标放上去显示)" height="100" />
    <h2>java</h2>
    <h2>sql</h2>
</body>

</html>
  • 运行结果：

在这里插入图片描述

6、路径标签

  • 路径：绝对路径&相对路径
相对路径:图片相对于html文件的位置
绝对路径:文件的绝对路径

注意：一般都使用相对路径

  • 代码实战
<!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>大数据技术栈</title>
</head>

<body>
    <h1>数据库</h1>
    <h2>mysql</h2>
    <p>mysql在<br /><em>互联网</em>行业应用较多</p>
    <p>mysql是一个<strong>开源</strong>软件</p>
    <h2>oracle</h2>
    <h1>开发语言</h1>
    <h2>sql</h2>
    <img src="img.jpg" alt="替换文本" title="提示文本(鼠标放上去显示)" width="500" /><br />
    <img src="E:\前端基础\html\img.jpg" alt="替换文本" title="提示文本(鼠标放上去显示)" height="100" />
    <h2>java</h2>
    <h2>sql</h2>
</body>

</html>
  • 运行结果

在这里插入图片描述

7、超链接标签

  • 从一个页面链接到另一个页面链接，分为内部连接&外部链接
<a href="url地址" target="目标网页打开方式"> 链接命名<a>
target含义
_self在当前窗口打开页面
_blank新窗口打开页面
  • 代码实战
<!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>大数据技术栈</title>
</head>

<body>
    <h1>数据库</h1>
    <h2>mysql</h2>
    <p>mysql在<br /><em>互联网</em>行业应用较多</p>
    <p>mysql是一个<strong>开源</strong>软件</p>
    <h2>oracle</h2>
    <h1>开发语言</h1>
    <h2>sql</h2>
    <img src="img.jpg" alt="替换文本" title="提示文本(鼠标放上去显示)" width="500" /><br />
    <img src="E:\前端基础\html\img.jpg" alt="替换文本" title="提示文本(鼠标放上去显示)" height="100" />
    <h2>java</h2><br />
    <a href="https://www.csdn.net/" target="_self">CSDN</a> <br />
    <a href="../第一个.html" target="_blank">第一个内部html连接</a>
    <h2>sql</h2>
</body>

</html>
  • 运行结果

在这里插入图片描述

随缘清风殇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
PHP全站开发工程师-第01章 HTML基础
04-05
1. 了解什么是HTML 2. 掌握HTML标签、元素的概念 3. 掌握HTML常用头部元素的使用 4. 掌握HTML标题、段落、文本、图片等排版 5. 掌握HTML超链接的使用
几乎被设计师遗忘了的标签fieldset legend
10-30
在 HTML 中，fieldset 和 legend 标签是两个常用的标签，用于组织和描述表单元素。但是，这两个标签经常被设计师遗忘或忽视，本文将重点介绍这两个标签的使用、样式设置和在实际开发中的应用。 一、fieldset 标签 ...
html头部中各式各样的meta
weixin_30668887的博客
06-05 213
在写网页的过程中，第一步就是创建一个html文档。如下是最简单的 html5 文档。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="wid...
HTML快速入门
weixin_49226949的博客
07-21 356
HTML快速入门 HTML是超文本标记语言，是由很多预定义的标签组成的，每一种标签有其特殊的含义，这些标签能被浏览器识别并且渲染出不同的显示效果。HTML文档也俗称网页，是网站的重要组成部分。 HTML文档结构 <html lang="en"> <head> <meta charset="utf-8"> <title>入门案例</title> <style> /*
HTML——语法
Alyson_jm的博客
02-19 3464
文章目录页面结构一、文档声明头二、页面语言头标签meta 标签title 标签base 标签link 标签三、body 标签语义为什么要语义化写HTML 代码要注意些什么 页面结构 一个标准的HTML页面如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i
HTML基础--CSS样式表（一）
m0_50315078的博客
08-04 4178
HTML基础之CSS样式表（一）
html全局属性
十三阿哥的博客
05-25 1339
【代码】html全局属性。
第6章HTML+CSS教学课件.ppt
09-15
本资源是HTML+CSS教学课件，共41页，涵盖了HTML的基本结构、HTML5的发展史、W3C标准、网页编辑工具、HTML基本结构、网页基本信息、标题标签、文本标签、图像标签、超链接标签、列表标签、表格标签、表单标签、CSS...
HTML5+CSS3+JavaScript
05-28
第二部分：详细地介绍了CSS 3的绝大部分常用选择器、属性，并为这些 选择器、属性提供了示例，方便广大读者参考本书全面、系统地掌握CSS 3的 功能和用法。这部分内容也可以作为前端开发者的参考手册。 第三部分：...
html标题的使用
weixin_63607527的博客
03-08 284
<!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>王薪.
web---HTML基础知识
Allure泽宇的博客
06-11 5401
HTML基础知识内容总结
[36]javascript入门
周小董
06-10 1323
入门程序 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;JS入门——
HTML基础
weixin_43752912的博客
04-24 3070
HTML介绍 客户端和服务端 基础标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是一个网页</title> </head> <body> Hello World<br>你好 <p>这是第一个段落</p> <p>这是第二个段落</p>
Html基础学习
十二间记，知不足而奋斗，望远山而前行。千里不辞行路远，时光早晚到天涯。
11-05 952
HTML基础
【HTML5】1.语法入门总结（第一部分）
qq_44078824的博客
04-17 2090
0.思维导图 1.HTML5基本框架 HTML5 是HyperText Markup Language 5 的缩写，是一种标记语言。 第一个程序，基本框架。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
响应式布局模板
06-01 172
效果图： HTML 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&g...
起步
weixin_34279184的博客
10-20 58
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont...
html常用标签给出html示例
最新发布
06-02
常用的HTML标签如下： 1. 标题标签（h1~h6）：用于定义标题，h1为最高级别标题，h6为最低级别标题。 示例：```这是一个h1标题</h1>``` 2. 段落标签（p）：用于定义段落。 示例：```这是一个段落。</p>``` 3. 图片...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

随缘清风殇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值