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

浅浅云烟

已于 2022-07-19 20:07:51 修改

阅读量317

点赞数 1

文章标签： html 学习

于 2022-07-19 19:47:59 首次发布

本文链接：https://blog.csdn.net/qianqianyunyan/article/details/125854506

版权

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

今日份学习计划：

✔html中的块级元素

✔html中的行内元素

✔html在的基础标签

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

html中的块级元素

#块级元素的特点：

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

#分类

div：无意义块元素
h1~h6：标题
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>

无序列表

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

有序列表

属性：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）

定义列表

<!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>

html
body
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. 不作为结构搭建时，无需指定宽高。

#分类

span：无意义的行内元素
a：超链接
属性：
①href：冒号里面填写跳转路径（href=" “）；
②target：_self:当前窗口打开超链接,没写时默认这个； _blank:在新窗口打开超链接(target=”_blank")；
③title：超链接标题(title=" ")。
img：图像
属性：
①width/height：图片宽高;
②src:图片路径；
③art:图片找不到时的替代文本。
装饰类（逐步淘汰）: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 text	e-mail的题目
body=body text	e-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>