html5-排版标签（黑马程序员 超详细 学习笔记 已完结 ）

已于 2022-10-19 11:41:51 修改
阅读量591 收藏 8
点赞数 1
分类专栏： 前端 文章标签： html5 学习 前端
于 2022-10-17 09:18:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50935546/article/details/127244572
版权

视频链接

目录

排版标签

标题标签

h系列标签

请添加图片描述

<!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>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>
</html>

请添加图片描述

段落标签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>Document</title>
</head>
<body>
    <p>在平平淡淡的学习、工作、生活中，大家都有写作文的经历，对作文很是熟悉吧，作文一定要做到主题集中，围绕同一主题作深入阐述，切忌东拉西扯，主题涣散甚至无主题。写起作文来就毫无头绪？下面是小编精心整理的高二语文作文，供大家参考借鉴，希望可以帮助到有需要的朋友。</p>
    <p>你为改变命运所做的一切努力，也没有得到回报。似乎你已无法跨越前方的障碍，但请相信没有过不去的火焰山，只要你坚持到底，永不放弃，你就能到达成功的彼岸。有的人胸怀大志，并且很有天赋，却因为家庭环境不好而没有一些条件来助他们取得成功。他们一次又一次地努力拼搏，却遭到一次又一次的失败打击，在多次的打击后，终于他们丧失了信心，意志也被磨灭，那改变命运的梦想也随之破灭。</p>
</body>
</html>

请添加图片描述

换行标签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>
    <p>在平平淡淡 <br> 的学习、工作、生活中，大家都有写作文的经历，对作文很是熟悉吧，作文一定要做到主题集中，围绕同一主题作深入阐述，切忌东拉西扯，主题涣散甚至无主题。写起作文来就毫无头绪？下面是小编精心整理的高二语文作文，供大家参考借鉴，希望可以帮助到有需要的朋友。</p>
    <p>你为改变命运所做的一切努力，也没有得到回报。似乎你已无法跨越前方的障碍，但请相信没有过不去的火焰山，只要你坚持到底，永不放弃，你就能到达成功的彼岸。有的人胸怀大志，并且很有天赋，却因为家庭环境不好而没有一些条件来助他们取得成功。他们一次又一次地努力拼搏，却遭到一次又一次的失败打击，在多次的打击后，终于他们丧失了信心，意志也被磨灭，那改变命运的梦想也随之破灭。</p>
</body>
</html>

请添加图片描述

水平线标签hr

请添加图片描述

<!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>
    <p>在平平淡淡 <hr> 的学习、工作、生活中，大家都有写作文的经历，对作文很是熟悉吧，作文一定要做到主题集中，围绕同一主题作深入阐述，切忌东拉西扯，主题涣散甚至无主题。写起作文来就毫无头绪？下面是小编精心整理的高二语文作文，供大家参考借鉴，希望可以帮助到有需要的朋友。</p>
    <p>你为改变命运所做的一切努力，也没有得到回报。似乎你已无法跨越前方的障碍，但请相信没有过不去的火焰山，只要你坚持到底，永不放弃，你就能到达成功的彼岸。有的人胸怀大志，并且很有天赋，却因为家庭环境不好而没有一些条件来助他们取得成功。他们一次又一次地努力拼搏，却遭到一次又一次的失败打击，在多次的打击后，终于他们丧失了信心，意志也被磨灭，那改变命运的梦想也随之破灭。</p>
</body>
</html>

请添加图片描述

文本格式化标签

请添加图片描述
请添加图片描述

```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>Document</title>
</head>
<body>
    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>
</body>
</html>```

请添加图片描述

媒体标签

图片标签

src

请添加图片描述

<!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>
    <img src="风景.jpg" alt="">
</body>
</html>

请添加图片描述
请添加图片描述

alt

当图片不存在时，显示替换文本。

请添加图片描述

<!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>
    <img src="风景7.jpg" alt="(⊙o⊙)？5">
</body>
</html>

请添加图片描述

title

请添加图片描述

<!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>
    <img src="风景.jpg" alt="(⊙o⊙)？5" title="你好">
</body>
</html>
width height

请添加图片描述

<!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>
    <img src="风景.jpg" alt="(⊙o⊙)？5" title="你好" width="220" >
</body>
</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>Document</title>
</head>
<body>
    <img src="F:\桌面\web练习\exercise1\风景.jpg" alt="" height="500">
</body>
</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>Document</title>
</head>
<body>
    <img src="风景.jpg" alt="" height="200">
    <img src="./风景.jpg" alt="" height="200">
</body>
</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>Document</title>
</head>
<body>
    <img src="fengjing/风景.jpg" alt="" height="200">
   
</body>
</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>Document</title>
</head>
<body>
    <img src="../风景.jpg" alt="" height="200">
   
</body>
</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>Document</title>
</head>
<body>
    <img src="../image/风景.jpg" alt="" height="200">
   
</body>
</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>Document</title>
</head>
<body>
    <audio src="./灰灰 - 绿茶.mp3" controls></audio>
   
</body>
</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>Document</title>
</head>
<body>
    <video src="./视频.mp4" controls height="400"></video>
   
</body>
</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>Document</title>
</head>
<body>
    <a href="https://www.bilibili.com/">跳转b站</a>
    <br>
    <a href="https://www.bilibili.com/">跳转b站</a>
    <br>
    <a href="#">空链接</a>
   
</body>
</html>

请添加图片描述
请添加图片描述

综合案例1-招聘

<!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>腾讯科技高级web前端开发岗位</h1>
    <hr>
    <h2>职位描述</h2>
    <p>负责重点项目的前荤技术方案和架构的研发和维护工作; </p>
    <h2>岗位要求</h2>
    <p>5年以上前端开发经验，<strong>精通html5/css3/javascript等</strong> web开发技术;</p>
    <p>熟悉bootstrap，vue，angularjs，reactjs等框架，熟练学探一种以上;</p>
    <p>代码风格严谨，能高保真还原没计稿，能兼容各种浏览器;
    </p>
    <p>
        web前斌的性能优化l以及web常见漏洞有一定的理解和相关实践;
    </p>
    <p>
        具备良好的分析解决问棚能力，能独承担任务。有开发进度把控能力;
    </p>
    <p>
        责任心强，思路路清晰，抗压能力好，只备良好的对外沟通和团队动作能力。
    </p>

    <h2>工作地址</h2>
    <p>上海市-徐汇区-腾云大厦</p>
    <img src="./map.png" alt="" height="500">
</body>

</html>

请添加图片描述

综合案例2-跳转

index.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>index</title>
</head>
<body>
    <h1>今日热点</h1>
    <hr>
    <h2>1.灰灰-绿茶音乐</h2>
    <p>
        《绿茶》是歌手灰色编曲、演唱的歌曲，歌曲由天边和不不配音，平纱落雁出品。
    </p>
    <p>
        <strong>音频示例：</strong>
        <a href="./one.html" target="_blank">绿茶-灰灰</a>
    </p>
    <h2>
        2.自选耳钉
    </h2>
    <p> <strong>视频示例：</strong>
        <a href="./two.html" target="_blank ">自选耳钉</a>
    </p>
</body>
</html>

请添加图片描述
one.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>Document</title>
</head>
<body>
    <h1>灰灰-绿茶音乐</h1>
    <hr>
    <h2>音频</h2>
    <audio src="./灰灰 - 绿茶.mp3" controls></audio>
</body>
</html>

在这里插入图片描述
two.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>Document</title>
</head>
<body>
    <h1>自选耳钉</h1>
    <hr>
    <h2>视频</h2>
    <video src="./视频.mp4" height="500" controls></video>
</body>
</html>

在这里插入图片描述

FAUX123455
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML学习-图表排版部分
10-28
HTML学习-图表排版部分
HTML学习-文本排版部分/TextSection.html
10-28
HTML学习三大部分之文本排版部分
Netty全面学习笔记（非常详细具体，排版很好）
09-15
技术分享：Netty全面学习笔记（非常详细具体，排版很好）
前端基础篇-深入了解用 HTML 与 CSS 实现正文排版、正文布局
最新发布
小扳手
03-12 1170
HTML：HTML 是一种标记语言，用于描述网页的结构和内容。通过使用 HTML 标签，可以定义网页中的文本、图像、链接等元素的结构和排版。HTML 提供了一种标准化的方式来创建网页内容，并且是构建网页的基础。CSS：CSS 是一种样式表语言，用于控制网页的外观和布局。通过使用 CSS 样式规则，可以定义网页元素的样式，如字体、颜色、大小、间距、布局等。CSS 可以将样式和结构分离，使得网页设计更加灵活和易于维护。
HTML5 文字变化和排版技巧
热门推荐
小菜鸟的博客
08-25 4万+
文字变化和排版技巧 1.1段落效果——使用排版标签 1.1.1设置段落样式的标签 在HTML中利用标签来区分段落，换行可以用标签完成。 1.标签 标签是成对的标签，将置于段落起始初，置于段尾，这样不但具有分段功能还具有设置段落居中或靠右对齐的功能。 语法： ... 2.标签 功能：换行，无结尾标签，也无属性。 语法： 第一行第二行（加不加”/”都可以，但是在HTML5中有不
HTML+CSS 小练习 写一个知乎小页面
小渣渣的博客
10-06 1212
最近复习了HTML和CSS，练习下 第一次写，可能排版有点乱。 先上效果图： CSS： .s1{ margin: 20px 10px 15px 10px; width: 700px; height: 500px; } .my_img{ position: absolute; left: 2px; top: 30px; z-index: 1; font-fa...
HTML和CSS练习布局（设计图、静态文件、源码全套）
ajiuyuan的博客
06-08 511
适合HTML和CSS初学者，练习HTML和CSS。初学HTML和CSS找不到合适的设计稿？没有静态图片？没有成功的源码参考？往下看，你都可以轻松的找到他。 2、less文件
黑马程序员 HTML5 学习笔记
susu的博客
07-14 1998
1.html语法规范2.html基本结构标签3.开发工具4.html常用标签5.html中注释和特殊字符
【HTML】HTML 标签 ② ( 排版标签 | 标题标签 | 段落标签 | 水平线标签 | 换行标签 | div 标签 | span 标签 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-05 3039
一、排版标签、 1、标题标签、 2、段落标签、 3、水平线标签、 4、换行标签、 5、div 标签 和 span 标签
HTML简易网页练习
zhangmingxian1的博客
10-28 1291
例如：h1-h6，p，div(没有任何默认样式的块级元素，最常用的元素，不用特意清除默认样式)例如：b i u sub sup span(没有任何默认样式的行内元素)定义：在默认情况下，可以和其他行内元素在一行显示。3、在p标签中，不能嵌套其他的块级元素。定义：在默认情况下，独占一行的元素。4、p标签常用于页面中的纯文本。分割线可以用标签2、文字的尺寸依次减小。
html5排版标题的标签,标题文字的排版技巧
weixin_42360722的博客
07-01 1008
以往我们分享过一些关于文字的编排方式，今天再细化的介绍标题文字的排版，一共介绍了12个案例技巧，并有作品演示更容易看懂，大家可以收藏以便日后设计时作为灵感之用。​接下来大家一起看看标题文字的排版的12个技巧：1.加序号类似于几大优势、几大特点、几个方法之类的内容，可以按照排列顺序给小标题加上对应的序号，这么做可以加深读者的印象，也能使内容更清晰、更便于阅读。序号一般是用阿拉伯数字表示，其表现方式可...
HTML常用排版标签
weixin_45904557的博客
02-23 3051
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分
canvas-latex：为HTML5的画布带来快速漂亮的数学排版
02-03
帆布乳胶为画布带来快速的数学排版渲染自己尝试npm install npm start 命令要查看受支持命令的基本列表，建议查看test/selenium/expressions.yml 。 如果要查看其渲染结果，可以通过运行测试，或者在服务器运行时将...
matlab代码排版-Study_Notes:学习笔记
05-26
matlab代码编写我会和colab一起写笔记，希望我能继续下去。 NO.1-阅读笔记 完成机器学习后，我将再次阅读。 NO.2-学习PYTHON 鱼c论坛现在我正在以其他方式学习python，对我来说是如此之快。 NO.3-阅读笔记 皮包结尾...
html+css练手项目3
呼啦啦啦啦啦的博客
07-13 1744
简单的综合考察的html+css的练手项目
HTML网页排版划分练习
晴天下的大头娃娃
11-06 2485
/* *Copyright (c) 2017，烟台大学计算机学院 All rights reserved. *文件名称：关于HTML的练习 *作 者：张晴晴 *完成日期：2017年11月6日 *版 本 号：v1.0 * *问题描述：HTML5的新特性 *输入描述： 无 *程序输出： 无 */ 网页横栏-下拉列表 body{ font-size:16px
单列变双列css_HTML CSS + DIV实现排版布局
weixin_34378986的博客
02-05 357
HTML CSS + DIV实现排版布局1.网页可以看成是由一个一个“盒子”组成，如图：由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分，中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个的盒子，这些"盒子"中放置着各种内容，页面就是由这些"盒子"拼凑起来案例布局分析：单列布局案例：代码如下：单列布局body{margin:0;}.box{width:960px...
（html+css）小练习-盒子布局
少年的欢喜的博客
10-21 2231
测试样例： html文件设置框架 <div class="container w"> <div class="left"> <a href="#"></a> </div> <div class="right"> <ul> <li><a href="#"></a>
latex教程--latex排版学习笔记---入门提高
07-30
LaTeX是一个专业的排版系统，广泛用于学术论文、科技文档的编写。为了帮助初学者快速上手，有很多好的LaTeX教程可供学习。 首先，初学者可以选择最基础的LaTeX入门教程，了解LaTeX的基本语法和命令。这些教程通常会介绍如何建立LaTeX文档框架、使用不同的字体和排版效果，以及如何插入数学公式等常见的操作。初学者可以通过参考这些教程来完成自己的第一篇LaTeX文档，以熟悉LaTeX的基本使用方法。 一旦掌握了基本的LaTeX知识，可以进一步提高自己的排版技巧。这时候，就可以选择一些LaTeX排版学习笔记来学习了。这些学习笔记通常会提供更深入的LaTeX知识讲解，如如何自定义命令和环境、如何制作漂亮的表格和图表等高级技巧。通过学习这些学习笔记，可以让自己的文档更加专业和美观。 在学习过程中，不仅要注意理论知识的掌握，还要多加练习。可以使用一些LaTeX模板来练习，例如写一篇论文、制作演示文稿等。不断地练习和实践可以巩固所学的知识，并逐渐提高自己的LaTeX水平。 总之，LaTeX教程和学习笔记是学习LaTeX的重要资源，初学者可以通过这些资源来系统地学习和提高自己的LaTeX排版能力。除了阅读教程和学习笔记，多加练习、参考优秀的LaTeX作品也是提高自己的最好方式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值