面试官提问，块元素是什么，行内元素是什么

鷄米花

于 2024-09-15 07:00:00 发布

阅读量228

点赞数 11

分类专栏：小白手册文章标签： html5 javascript css

本文链接：https://blog.csdn.net/jbjmh/article/details/142266621

版权

小白手册专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML简介

概述:HTML（HeyperText MarkUp Language）全称称之为超文本标记语言，它是世界上最简单的语言，
在开发的时候我们只需要进行页面布局（利用标签:element）

注意：超文本标记语言（HTML）又称之为web(开发)，它诞生(1993~2019)这门语言大大小小经历过变化有五次，最近一次2014称之为HTML5（超文本标记语言第五次重大变化）

开发工具

Sublime http://www.sublimetext.com/
VScode https://code.visualstudio.com/
Webstorm http://www.jetbrains.com/webstorm/

体验HTML编程

体验心得：HTML标记语言开发的程序的时候，利用就是标签（element）进行布局页面。
标签组成如下：
<标签名字> 文本内容 </标签名字>
红色部分：称之为开始标签
青色部分：称之为结束标签（闭合标签）
紫色部分：文本内容（text）

标签学习（element）

概述：HTML（超文本标记语言）,它的页面（静态页面）是由标签组成，最终要一部分就是块元素；
很明显一个特征：独占一行
快捷键：shift + ！+ tab

<!DOCTYPE html> //这是超文本标记语言第五次重大变化文档声明方式
<html lang="en"> 
<head>
    <meta charset="UTF-8" />  //chartset:设置字符集  UTF-8（简称万国编码）
    <title>Document</title>
</head>
<body>

</body>
</html>

HTML标签是整个网页根元素（进行页面布局的其他元素：都是嵌套在HTML标签里面作为子元素）
HTML标签右侧有一个lang属性（前端当中管这种写法叫做属性），属性值en(英文简写：代表的是英文下开发)

常用标签—块元素

概述：在web开发中块元素非常常用：块(block)元素是独占一行,在页面中是由上到下进行排列。
常用块元素有很多：h1~h6(标题)、div、p、ul、li…等等
注意：在书写学习这些标签（块元素），一定要注意在body标签内部进行书写.
标签小技巧：打出标签名（ctr + E）标签自动补齐；
运行方式：鼠标右键+赋值路径（在浏览器中运行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>我是人生当中第一12ABC个静态页面</title>
</head>
<body>
    <p>我也是一个块元素--独占一行(一个段落)</p>
    <p>我也是一个块元素--独占一行(一个段落)</p>
    <p>我也是一个块元素--独占一行(一个段落)</p>
    <p>我也是一个块元素--独占一行(一个段落)</p>
    <p>我也是一个块元素--独占一行(一个段落)</p>
    <h1>我代表的是网页中一级标题</h1>
    <h2>我代表的是网页中二级标题</h2>
    <h3>我代表的是网页中三级标题</h3>
    <h4>我代表的是网页中四级标题</h4>
    <h5>我代表的是网页中五级标题</h5>
    <h6>我代表的是网页中六级级标题</h6>
    <h1>我有事一级标题</h1>
    <h1>我有事一级标题</h1>
    <h1>我有事一级标题</h1>
    <h1>我有事一级标题</h1>
    <h1>我有事一级标题</h1>
    <h1>我有事一级标题</h1>
<h1>我有事一级标题</h1>
<div>我也是一个块元素-----经常会用到（布局用到）</div>
 <div>
      <h3>我是三级标题---作为div子元素</h3>
 </div>
</body>
</html>

h1_{h6：一级标题}六级标题（字体越来越小样子）
咱们今天所学习的标签可以复用（多次使用）、标签可以嵌套使用

常用块元素—列表系列

概述：列表（也是块元素）有两个：无序列表ul 、有序列表ol，这两个块元素用来显示列表，
而且li标签经常作为他们子元素一起使用；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
     <!-- 无序列表 -->
     <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
     </ul>
     <ol>
         <li>学习</li>
         <li>喝酒</li>
         <li>烫头</li>
     </ol>
</body>
</html>

总结：
h1~h6(不同级别标题) div(盒子标签) p(段落)
ul（无序列表） ol(有序列表) 他们两者经常结合li元素一起使用
5.2行内元素
概述:前端开发当中行内元素（内联元素）：常见的行内元素有如下几个：
行内元素特征：不是独占一行，从左到右进行排列
span、img、a

注意：在web领域中标签（双闭合标签）、单闭合标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
     <a href="http://www.sina.com">新浪</a>
     <a href="http://www.taobao.com">淘宝</a>
     <a href="http://www.baidu.com">百度</a>
     <span>我也是行内元素</span>
     <span>我也是行内元素span</span>
     <img src="xiaomao.jpg" alt=“默认文字”>
</body>
</html>

a标签href属性是用来设置超链接的地址属性
img标签的src属性是用来设置显示图片路径的（图片名称）图片没有情况下默认显示文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
     <!-- address:块元素独占一行 -->
     <address>
           <iframe width="204" height="613" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://j.map.baidu.com/s/5BcIFb"></iframe>
     </address>
</body>
</html>
5.3小总结
块（block）元素:自己独占一行（h1~h6标题）、div、p、ul、ol、li、address
行内(inline)元素：a 、span、img<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <ul>
        <li><a href="http://www.baidu.com">百度</a></li>
        <li><a href="http://www.sina.com">新浪</a></li>
        <li><a href="http://www.taobao.com">淘宝</a></li>
    </ul>
</body>
</html>

表单元素

概述：前端中比较重要标签：标元素（表单元素经常用来收集用户输入信息），将用户输入信息提交给服务器。
表单元素即为input标签（单闭合标签），这个标签经常集合form标签一起使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <form>
         <!-- 表单元素即为input标签 -->
         <p>
             用户名:  <input type="text" />
         </p>
         <p>
             密&nbsp;&nbsp;码: <input type="password" />
         </p>
         <p>
             日历:<input type="date" />
         </p>
         <p>
             你喜欢的颜色: <input type="color" />
         </p>
         <p>
             你的身高: <input type="range" >
         </p>
         <p>
             你喜欢的食物
             <input type="checkbox" />烤鸭
             <input type="checkbox" />烤鸭
             <input type="checkbox" />烤鸭
             <input type="checkbox" />烤鸭
             <input type="checkbox" />烤鸭
         </p>
         <p>
             你喜欢那个国家？
             <input type="radio" name="A"/>中国
             <input type="radio" name="A"/>韩国
             <input type="radio" name="A"/>日本
             <input type="radio" name="A"/>美国
         </p>
         <p>
             <input type="submit" />
         </p>
    </form>
</body>
</html>

面试官提问环节

问题:HTML是什么
答:HTML[HyperText MarkUp langage]即为超文本标记语言，它是世界上最简单的编程，利用标签完成页面中布局。
问题：块元素是什么
答：块元素在网页中独占一行【一般从上到下进行排列】
h1~h6、div、p、ul、ol、li、address等等
问题：行内元素是什么
span、a、img、表单元素：输入框、单选按钮、复选按钮、提交按钮等等

音频标签

概述：如果你想在网页中显示音频我们利用audio标签显示音频。Web领域中音频audio标签，只能播放下面三种音频格式。（行内元素）
mp3、ogg、wav格式
MP3:音频格式
MP3是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。利用 MPEG Audio Layer 3 的技术，将音乐以1:10 甚至 1:12 的压缩率，压缩成容量较小的文件，而对于大多数用户来说重放的音质与最初的不压缩音频相比没有明显的下降。它是在1991年由位于德国埃尔朗根的研究组织Fraunhofer-Gesellschaft的一组工程师发明和标准化的。用MP3形式存储的音乐就叫作MP3音乐，能播放MP3音乐的机器就叫作MP3播放器。
Ogg:音频格式
Ogg全称是OGGVobis(oggVorbis)是一种音频压缩格式，类似于MP3等的音乐格式。Ogg是完全免费、开放和没有专利限制的。OggVorbis文件的扩展名是".ogg"。Ogg文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器。
wav:音频格式
WAV是最常见的声音文件格式之一，是微软公司专门为Windows开发的一种标准数字音频文件，该文件能记录各种单声道或立体声的声音信息，并能保证声音不失真。但WAV文件有一个致命的缺点，就是它所占用的磁盘空间太大（每分钟的音乐大约需要12兆磁盘空间）。它符合资源互换文件格式（RIFF）规范，用于保存Windows平台的音频信息资源，被Windows平台及其应用程序所广泛支持。Wave格式支持MSADPCM、CCITT A律、CCITT μ律和其他压缩算法，支持多种音频位数、采样频率和声道，是PC机上最为流行的声音文件格式；但其文件尺寸较大，多用于存储简短的声音片段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
     <h1>下面兄弟就是音频</h1>
     <audio src="1.mp3" controls autoplay muted loop></audio>
</body>
</html>

我们可以利用audio标签播放音频（mp3、ogg、wav）
视频利用的是video标签(用法和上面音频几乎一模一样的)
src 设置音频播放路径
controls 显示默认控制条
autoplay 自动播放（兼容问题）
muted 静音
loop 循环播放
注意：video视频标签也是支持三种格式：
mp4、ogg、webm
mp4:
MP4是一套用于音频、视频信息的压缩编码标准，由国际标准化组织（ISO）和国际电工委员会（IEC）下属的“动态图像专家组”（Moving Picture Experts Group，即MPEG）制定，第一版在1998年10月通过，第二版在1999年12月通过。MPEG-4格式的主要用途在于网上流、光盘、语音发送（视频电话），以及电视广播。
WebM：
webM由Google提出，是一个开放、免费的媒体文件格式。WebM 影片格式其实是以 Matroska（即 MKV）容器格式为基础开发的新容器格式，里面包括了VP8影片轨和 Ogg Vorbis 音轨，其中Google将其拥有的VP8视频编码技术以类似BSD授权开源，Ogg Vorbis 本来就是开放格式。 WebM标准的网络视频更加偏向于开源并且是基于HTML5标准的，WebM 项目旨在为对每个人都开放的网络开发高质量、开放的视频格式，其重点是解决视频服务这一核心的网络用户体验。Google 说 WebM 的格式相当有效率，应该可以在 netbook、tablet、手持式装置等上面顺畅地使用。

CSS样式

概述：CSS【Cascading Style Sheets】全称层叠样式表。
理解：可以把HTML文件想向成是一个房子骨架，里面标签（块元素、行内元素）理解为搭建房子转，
CSS负责美化房子（进行装修）,让你的静态页面（网站看的相对好看一些）

概述：下面是我们体验知识点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!-- 样式一般是需要放在style标签里面 -->
    <style type="text/css">
         div{
             color:green;
             font-size:30px;
             background-color:red;
             text-align:center;
             border:5px solid black;
             opacity:.5;
         }
    </style>
</head>
<body>
    <div>我是祖国的老花骨朵</div>
</body>
</html>

标签选择器

概述：样式【CSS】用来美观标签（页面），web领域样式分为三种（今天只是关注内部样式）。
内部样式需要书写在head中，利用子元素双闭合标签style标签完成。
语法格式：

<style type=”text/css”>
      标签名字{
         属性:属性值;
         属性：属性值;
         属性：属性值;
}
<style>

外部样式
内部样式
行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
         h1{
            /* 文字颜色:属性值红、橙、黄、绿、青、蓝、紫色等等 */
            color:skyblue;
            /* 字体大小设置 */
            font-size:16px;
            /* 背景颜色设置 */
            background-color:orange;
            /* 文本对齐方式 */
            text-align:center;
            /* 字体样式设置 */
            font-style:italic;
         }

        div{
           background-color:red;
           font-size:28px;
           color:cyan;
           text-align:center;
           font-style:italic;
           /* 透明度设置：透明度属性值范围0~1 */
           opacity:1;
           /* 光标防止标签中:变为小手; */
           cursor:pointer;
        }
    </style>
</head>
<body>
      <h1>我是一级标题</h1>
      <h1>我是小明呀</h1>
      <div>我是常用布局标签</div>
</body>
</html>

标签选择器：常用样式中选择匹配标签
color【设置标签文字颜色】 red、orange、yellow、green、cyan、blue、purple
font-size【标签文字大小尺寸设置】 Numberpx (数字最小12~)
background-color【背景颜色设置】 red、orange、yellow、green、cyan、blue、purple
text-align【文本对齐方式】 left、center、right
font-style[字体样式] italic
Opacity【透明度设置】 0~1【0：纯透明】
cursor pointer【小手】

id选择器

命名标识符规范：
1:可以数字、字母、下划线、美元符号
2:但是不能以数字开头
3：不能是这门语言当中关键字、保留字
概述:我们上面案例通过标签名字匹配页面中对应标签进行设置(内部样式）,除此之外还可以通过id选择器匹配标签（节点:element）；
注意：一般情况下，页面中标签id属性值唯一（和人的身份证是一样的，没人都有一个但是都不同）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>id选择器</title>
    <style type="text/css">
        #box{
          color:black;
          /* 文本描述 */
          text-decoration:none;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com" id="box">百度</a>
</body>
</html>

在标签（开始标签）这里添加一个id属性，对应右侧属性值
在style标签里面（内部样式）#号+对应节点id的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>id选择器</title>
    <style type="text/css">
        #box{
          color:black;
          /* 文本描述 */
          text-decoration:none;
        }
        #box1{
           /* 列表默认样式设置 */
           list-style:square;
        }
        #cur{
             color:cyan;
        }
        #box2{
             /* 列表默认样式设置 */
             list-style:square;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com" id="box">百度</a>
    <ul id="box1">
         <li>吃饭</li>
         <li id="cur">睡觉</li>
         <li>打豆豆</li>
    </ul>
    <ol id="box2">
        <li>unity3D</li>
        <li>cos2D</li>
        <li>PHP</li>
    </ol>
</body>
</html>

text-decoration【文本描述】 none、underline、overline、line-throuth
list-style none、circle、square

class选择器

概述：我们已经学习过了标签选择器、ID选择器、除此以外还可以使用class(类)选择器；
注意：ID选择器属性值一般唯一的、class属性值可以重复（不是唯一的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
         .current{
           font-size:30px;
           background-color:cyan;
         }
         .cur{
             color:skyblue;
             font-size:18px;
         }
    </style>
</head>
<body>
    <div class="current">我是祖国的老花骨朵,是祖国未来</div>
    <div>我也是祖国花鼓富哦</div>
    <div>我也是祖国花鼓富哦</div>
    <div class="current">我也是祖国花鼓富哦</div>
    <div>我也是祖国花鼓富哦</div>
    <div>我也是祖国花鼓富哦</div>
    <div>我也是祖国花鼓富哦</div>
    <div>今天是北京<span class="cur">2019年11月30日21:47:25</span></div>
</body>
</html>

学习了三个选择器：标签选择器（标签名字）、ID选择器（#+id属性值）、class选择器（.+class属性值）

背景系列样式

概述：背景系列属性有如下几个：
Background-color[背景颜色]、background-image[背景图设置]、background-repeat：【背景图重复】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        div{
            /*宽度和高度设置*/
            width:720px;
            height: 720px;
            /* 背景颜色 */
            background-color:red;
            /* 设置背景图 */
            background-image:url(jie.jpg);
            /* 背景重复设置 */
            background-repeat:no-repeat;
           /* 简写方式 */
           background: no-repeat url(jie.jpg)  red;
        }
    </style>
</head>
<body>
     <div></div>
</body>
</html>

background-color 背景颜色设置（颜色）
Background-image 背景图(图片路径)
Backgrpund-repeat 背景图重复（no-repeat）
他们三者可以进行简写：
background:cyan url(1.jpg) no-repeat;
这三个属性值谁先谁后都可以