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。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya（不是本人，claude AI）在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容： 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
学习hash总结

学习hash总结

2014/1/29/   最近刚开始学hash，名字很陌生，但是hash的思想却很熟悉，以前早就做过此类的题，但是不知道这就是hash思想而已，说白了hash就是一个映射，往往灵活利用数组的下标来实现算法，hash的作用：1、判重；2、统计次数；
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...
【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程（Gaussian Process，简称GP）是一种概率模型，用于描述一组随机变量的联合概率分布，其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数（或核函数） 1.3 核函数1.4 高斯过程回归（Gauss
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2