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

本文主要是介绍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

相关文章

在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码

《在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码》在MyBatis的XML映射文件中,trim元素用于动态添加SQL语句的一部分,处理前缀、后缀及多余的逗号或连接符,示... 在MyBATis的XML映射文件中,<trim>元素用于动态地添加SQL语句的一部分,例如SET或W

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

MySQL中my.ini文件的基础配置和优化配置方式

《MySQL中my.ini文件的基础配置和优化配置方式》文章讨论了数据库异步同步的优化思路,包括三个主要方面:幂等性、时序和延迟,作者还分享了MySQL配置文件的优化经验,并鼓励读者提供支持... 目录mysql my.ini文件的配置和优化配置优化思路MySQL配置文件优化总结MySQL my.ini文件

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript

Vue3 的 shallowRef 和 shallowReactive:优化性能

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

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

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert