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

相关文章

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》:本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin

python3如何找到字典的下标index、获取list中指定元素的位置索引

《python3如何找到字典的下标index、获取list中指定元素的位置索引》:本文主要介绍python3如何找到字典的下标index、获取list中指定元素的位置索引问题,具有很好的参考价值,... 目录enumerate()找到字典的下标 index获取list中指定元素的位置索引总结enumerat

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,