到

）等。

内联级别

这些元素不会强制在其上方和下方换行，并且仅占用内容所需的宽度。例如：跨度 ()、强元素 ()

让我们看一个块级框生成的示例 –

立即学习“前端免费学习笔记（深入）”；

示例

现场演示

HTML Headingform {   width:70%;   margin: 0 auto;   text-align: center;}* {   padding: 2px;   margin:5px;}input[type="button"] {   border-radius: 10px;}

登录后复制var textSelect = document.getElementById(“textSelect”);var headingPreview = document.getElementById(“headingPreview”);function changeHeading() { if(textSelect.value === '') headingPreview.innerHTML = 'Write a Heading'; else{ for(var i=0; i<6; i++){ var radInp = document.getElementsByClassName('radio')[i]; if(radInp.checked === true && textSelect.value !== ''){ headingPreview.innerHTML = ''+textSelect.value+''; headingPreview.innerHTML += ''+textSelect.value+''; } } }}

输出

点击文本字段为空的‘预览’按钮后 –

点击文本字段不为空且的‘预览’按钮后选中“h2”单选按钮 –

让我们看一个内联级别框生成的示例 –

示例

这是 em 元素的示例 –

Live演示

em elementform {   width:70%;   margin: 0 auto;   text-align: center;}* {   padding: 2px;   margin:5px;}input[type="button"] {   border-radius: 10px;}

登录后复制var divDisplay = document.getElementById(“divDisplay”);var textSelect = document.getElementById(“textSelect”);function convertItalic() { for(i=0; i<2; i++){ var italicObject = document.createElement("EM"); var italicText = document.createTextNode(textSelect.value); italicObject.appendChild(italicText); divDisplay.appendChild(italicObject); }}