htmlcss系列学习——（二）html块级元素、行内元素、基础标签的学习

2024-02-23 12:10
文章标签 基础 学习 元素 css html frontend 标签 行内 块级 系列学习

本文主要是介绍htmlcss系列学习——（二）html块级元素、行内元素、基础标签的学习，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

html&css系列学习——（二）html块级元素、行内元素、基础标签的学习

今日份学习计划：
✔html中的块级元素
✔html中的行内元素
✔html在的基础标签

首先，我们来了解一下html块级元素、行内元素、基础标签的相关知识！

html中的块级元素

#块级元素的特点：

 1. 可指定宽高(width/height);2.  默认宽度100%；3. 独占一行；4. 高度由子元素或内容决定

#分类

  1. div：无意义块元素
  2. h1~h6：标题
  3. 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>html块级元素的学习</title>
</head>
<body><!-- div标签 --><div>我,div元素!</div><!-- h1~h6标签 --><h1>1号标题</h1><h2>2号标题</h2><h3>3号标题</h3><h4>4号标题</h4><h5>5号标题</h5><h6>6号标题</h6><!-- p标签 --><p>乌镇戏剧节拥有特邀剧目、青年竞演、古镇嘉年华、小镇对话四大单元，此外每年也在不断推出特别的策划内容。昨日，乌镇戏剧节组委会发布本届乌镇戏剧节青年竞演的命题与规则，并正式开启青年竞演与古镇嘉年华的报名通道。</p>
</body>
</html>
  1. 无序列表

属性：type：
disc 实心圆（默认值）；circle 空心圆；square 实心方块；none 无样式。

  1. 有序列表

属性：type：
1 数字有序列表。(默认值)（例如：1、2、3、4）
a 按字母顺序排列的有序列表，小写。（例如：a、b、c、d）
A 按字母顺序排列的有序列表，大写。（例如：A、B、C、D）
i 罗马字母，小写。（例如：i, ii, iii, iv）
I 罗马字母，大写。（例如：I, II, III, IV）

  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>html块级元素的学习</title>
</head>
<body><!-- 无序列表 快捷方式：ul>li+tab键取消注释的快捷方式：ctrl+/--><!-- ul>li --><ul type="circle"><li>今天是个好天气！</li><li>小梅非常快乐！</li></ul><!-- 有序列表 快捷方式：ol>li+tab键--><!-- ol>li --><ol type="I"><li>出来混总是要还的。</li><li>过眼云烟皆随风,往事不可追。</li></ol><!-- 定义列表 快捷方式：dl>(dt+dd)*3+tab键--><!-- dl>(dt+dd)*3 --><dl><dt>一、蝦滑釀羊肚菌</dt><dd>把鮮美的蝦滑釀入營養的羊肚菌里，兩者之間起了奇妙的作用，令味蕾享受到鮮，香，味，美的最高境界！</dd><dt>二、凉拌手撕杏鲍菇</dt><dd>最近真是热到飞起，不想吃饭，也不想做饭，每天都尽量弄点简单又开胃的菜。今天来个凉拌手撕杏鲍菇，咸酸口味，好吃不怕胖。喜欢酸辣口味的可以加一些小米椒。</dd><dt>三、宜宾燃面</dt><dd>宜宾燃面香气浓郁，重油重色，入口筋道酥脆。因此面干燥多油，挑起来可如火绳一般点燃故名。</dd></dl>
</body>
</html>
  1. html
  2. body
  3. h5新增语义化标签：header、footer、nav 、article、section、aside、address
<!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>html块级元素的学习</title>
</head>
<body><!-- 一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。 --><header>搜索表单/logo</header><!-- 一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。 --><nav>页面导航</nav><!-- 页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。 --><article>文档</article><!-- Html文档独立的功能。 --><section>部分</section><!-- 当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，如：侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。 --><aside>侧边栏</aside><!-- 上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如：作者，相关阅读连接以及版权信息等。一个页面中未限定footer元素的个数。 --><footer>脚注</footer><!-- 在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。 --><address>联系</address>
</body>
</html>

html中的行内元素

#行内元素的特点：

 1. 宽高由自身决定；2. 与其他行内元素共享一行；3. 不可嵌套块元素；4. 不作为结构搭建时，无需指定宽高。

#分类

  1. span：无意义的行内元素
  2. a：超链接
    属性：
    ①href：冒号里面填写跳转路径（href=" “）；
    ②target：_self:当前窗口打开超链接,没写时默认这个； _blank:在新窗口打开超链接(target=”_blank")；
    ③title：超链接标题(title=" ")。
  3. img：图像
    属性：
    ①width/height：图片宽高;
    ②src:图片路径；
    ③art:图片找不到时的替代文本。
  4. 装饰类（逐步淘汰）:strong、b、em、i、sub、sup
<!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>html行内元素的学习</title>
</head>
<body><!-- span标签 --><span>这是一个span标签</span><span>这是一个span标签</span><!-- a标签 --><!-- 为了区分，这里给了换行符br --><br><!-- 直接跳转百度页面 （绝对路径） --><a href="http://www.baidu.com/" title="百度">百度一下，你就知道</a><br><!-- 另外新建一个HelloHtml.html (相对路径)--><a href="./HelloHtml.html" target="_self">在当前页面跳转到另一html页面</a><!-- 图片打开a标签 --><br><a href="http://www.baidu.com/" target="_self"><img width="100px" src="https://scpic.chinaz.net/files/pic/pic6/pic1874.jpg" alt=""></a><!-- 锚点 --><br><!-- 此为页面填充 --><div style="height:200px;"></div><p id="center">此处为中心</p><div style="height:300px;"></div><!-- 回中心 --><a href="#center">回到中心</a><br><a href="#">回到顶部</a><br><!-- 假链接 --><a href="javascript:">点我啊，没反应</a><br><a href="mailto:1234567890@qq.com">发送邮件</a><!-- img标签 --><!-- 绝对路径 --><br><img width="300px" src="https://scpic.chinaz.net/files/pic/pic9/201910/zzpic20739.jpg" alt="图片加载失败" title="我是一绝对路径的图片"><!-- 相对路径 图片01.jpeg为本地保存的图 --><br><img width="300px" src="./01.jpeg" alt="图片加载失败" title="我是一张相对路径的图片"><!-- 装饰标签 --><br><strong>加粗</strong><b>加粗</b><em>倾斜</em><i>倾斜</i><sub>下标</sub><sup>上标</sup>
</body>
</html>

html中的基础标签

#h标签、p标签、img标签、a标签、：

h1~h6：标题标签；
p:段落；
img：图片；
a：超链接。
(例子见上面块级元素内)

#br标签

作用：换行

#hr标签

作用：分割线

#字符实体

空格  &nbsp;
<     &lt;
>     &gt;
“     &quot;
&     &amp;
‘     &apos;

#mailto链接

参数描述
mailto:name@email.com电子邮件收件人地址
cc=name@email.com抄送地址
bcc=name@email.com密件抄送地址
subject=subject texte-mail的题目
body=body texte-mail的内容
?和浏览器地址操作一样，第一个参数符合是？
&其他参数符号是&

#base标签

作用：仅用于统一指定当前页面中所有a标签的打开方式，类似于target。
必须写在head标签之间；同时有base和target时，标签属性按就近原则。

<!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>html基础标签的学习</title><base target="_blank">
</head>
<body><a href="https://www.baidu.com" target="_self">百度一下，你就知道</a><br><a href="https://www.baidu.com">百度百度，搜搜更快乐！</a>
</body>
</html>

#video标签(H5新增)

作用：视频播放
属性：1.src:视频播放地址；2.autoplay:自动播放视频；3.controls:视频控制条；4.poster:视频未播放前显示的占位图片；5.loop:视频循环播放；6.muted:静音；7.width/height: 视频宽、高。

<!-- video标签格式： --><video width="500px" src="./音视频/视频.mp4"  controls poster="./01.jpeg" muted></video>

#audio标签(H5新增)

作用：音频播放
属性：1.src:音频播放地址；2.autoplay:自动播放音频；3.controls:音频控制条；4.loop:音频循环播放；5.muted:静音；6.width/height: 音频宽、高。

<!-- audio标签格式： --><audio src="./音视频/音频.mp3" controls></audio>

#figure& figcaption(H5新增)

1.figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。
2.figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。
3.一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。

<!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>html基础标签的学习</title>
</head>
<body><figure>xxx<figcaption><img src="./01.jpeg" alt="" width="500px"></figcaption></figure><figure><img src="./01.jpeg" alt="" width="500px"></figure>
</body>
</html>

#details&summary&open(H5新增)

1.details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。
2.details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供的详细数据表格。
3.summary元素从属于details，用鼠标单击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。
4.当该属性值为true时，该元素内部的子元素被展开显示；当该属性的值为false时，其内部的子元素被收缩不显示。默认值为false。

<!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>html基础标签的学习</title>
</head>
<body><details open="true"><summary>美食</summary><div>牛肉面</div><div>黄焖鸡</div><div>扬州炒饭</div><div>鲫鱼汤</div></details><details><div>1</div><div>2</div><div>3</div><div>4</div></details>
</body>
</html>

最后，感谢各位看官的观看！
欢迎大家灌水交流！
来源：网图，链接：https://cn.bing.com/images/search?view=detailV2&ccid=8%2Bu6cIe2&id=E089AA69686EE1BDE662C93B73DEEE9492AFBDD3&thid=OIP.8-u6cIe2qYataosYinPlQwAAAA&mediaurl=https%3A%2F%2Fts1.cn.mm.bing.net%2Fth%2Fid%2FR-C.f3ebba7087b6a986ad6a8b188a73e543%3Frik%3D072vkpTu3nM7yQ%26riu%3Dhttp%253a%252f%252fwx1.sinaimg.cn%252flarge%252f0068Lfdely1g1voxvlr26j309q07mwfd.jpg%26ehk%3DzIkGhvvfu%252bv4ZHiCBdVwEATPAzhaPLkTUlR7hyESUps%253d%26risl%3D%26pid%3DImgRaw%26r%3D0%26sres%3D1%26sresct%3D1&exph=274&expw=350&q=%e7%8c%ab%e7%8c%ab%e7%a5%9f%e7%a5%9f%e5%9b%be%e7%89%87&simid=607997877221995568&form=IRPRST&ck=9EAD78B815AEF69F00EF4ABF4A4FB760&selectedindex=10&ajaxhist=0&ajaxserp=0&vt=0&sim=11

这篇关于htmlcss系列学习——（二）html块级元素、行内元素、基础标签的学习的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/738585。

相关文章

CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...
Python基础文件操作方法超详细讲解(详解版)

Python基础文件操作方法超详细讲解(详解版)

《Python基础文件操作方法超详细讲解(详解版)》文件就是操作系统为用户或应用程序提供的一个读写硬盘的虚拟单位,文件的核心操作就是读和写,：本文主要介绍Python基础文件操作方法超详细讲解的相... 目录一、文件操作1. 文件打开与关闭1.1 打开文件1.2 关闭文件2. 访问模式及说明二、文件读写1.
阅读更多...
前端高级CSS用法示例详解

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交
阅读更多...
Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...
Python基于wxPython和FFmpeg开发一个视频标签工具

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2