Question

我想在HTML页面中预览一些HTML代码。但是当我这样做时，浏览器将其视为实际的HTML，而不是仅仅预览它（例如包括其标签）。我怎样才能防止这种情况发生？您可以将此页面视为HTML教程，希望向学习者提供一些HTML示例。

Answer 1

将<符号转为<，将>符号转为>。

htmlspecialchars()将在PHP中为您执行此操作。

Answer 2

将HTML代码放在<xmp></xmp>标记之间。

Answer 3

这是我为编写报告而编写的JavaScript模块。用户可以在textarea中输入HTML或Markdown，然后查看完成的结果，并在它们之间切换。

function Report (id) {
  this.div = gel(id);
  this.div.style.height = '100%';
  this.trip;
}



//initializes the Report object and renders the HTML of the report to this.div
Report.prototype.init = function(trip) {
  this.report = {'author':trip.owner, 
         'time_created':trip.time_created, 
         'title':trip.title,
         'text':trip.summary,
         'url':trip.url,
         'category':trip.category,
         'id':trip.id}
  this.div.appendChild(this.renderHTML());
}

//show the edit form when the user clicks the edit link    
Report.prototype.editForm = function() {
  var r = this.report;
  var form = dec('form');
  form.action = '/trips/submit_link';
  form.method = 'POST';
  var t = dec('table');
  t.style.width ='95%';
  t.style.paddingBottom ='10px';
  var tr = dec('tr');
  t.appendChild(tr);
  var td = dec('td');
  td.style.width = '15%';
  var strong = dec('strong');
  strong.appendChild(dct('Title'));
  td.appendChild(strong);
  tr.appendChild(td);
  td = dec('td');
  td.style.width = '100%';
  var input = dec('input');
  input.type = 'text';
  input.style.width = '100%';
  input.className = "required" 
  input.name = 'reportTitle';
  input.value = r.title;
  td.appendChild(input); 
  tr.appendChild(td);
  tr = dec('tr');
  t.appendChild(tr);
  td = dec('td');
  var input = dec('input');
  var strong = dec('strong');
  strong.appendChild(dct('URL '));
  td.appendChild(strong);
  tr.appendChild(td);
  td = dec('td');
  input.type = 'text';
  input.name = 'reportURL';
  //input.className = "validate-url" 
  input.value = r.url;
  input.style.width = '100%';
  td.appendChild(input);
  tr.appendChild(td); 
  form.appendChild(t);
  var strong = dec('strong');
  strong.appendChild(dct('Summary or Report '));
  form.appendChild(strong);
  var input = dec('textarea');
  input.style.width = '96%';
  input.style.height = '350px';
  input.name = 'reportBody';
  var converter = new Showdown.converter();
  input.innerHTML = converter.makeHtml(r.text);
  input.style.marginTop = "5px";
  input.style.marginBottom = "5px";
  form.appendChild(input);
  var strong = dec('strong');
  strong.appendChild(dct('Category'));
  strong.style.marginRight = '10px';
  form.appendChild(strong);
  var input = dec('input');
  input.type = 'text';
  input.name = 'category';
  input.style.width = '75%';
  input.value = r.category;
  form.appendChild(input);
  form.appendChild(dec('br'));
  form.appendChild(dec('br'));
  input = dec('input');
  input.type = 'submit';
  input.value = 'Save';
  input.style.cssFloat = 'left';
  input.style.styleFloat = 'left';
  input.style.fontWeight = 'bold';
  form.appendChild(input); 
  input = dec('input');
  input.type = 'button';
  input.value = 'Cancel';
  input.style.color = '#cc5500';
  input.style.fontWeight = 'bold';
  input.style.cssFloat = 'right';
  input.style.styleFloat = 'right';
  var self = this;
  input.onclick = function() {
    rac(self.div);
    self.div.appendChild(self.renderHTML());
  }
  form.appendChild(input);
  input = dec('input');
  input.type = 'hidden';
  input.name = 'tripID';
  input.value = tripID;
  form.appendChild(input);
  return form;
}

//renders the HTML of the report to this.div
Report.prototype.renderHTML = function() {  
  var report = this.report
  var rDiv = dec('div');
  rDiv.style.height = '100%';
  var h1 = dec ('h1')
  if (report.url) {
    var a = dec('a')
    a.href = report.url;
    a.target = '_blank';
    a.appendChild(dct(report.title));
    h1.appendChild(a);
    var img = dec('img');
    img.src = '/site_media/images/external_link.gif';
    img.style.marginLeft = '5px';
    h1.appendChild(img);
  } else {
    h1.appendChild(dct(report.title));
  }
  if (report.author == user) {
    var a = dec('a');
    var self = this;
    a.onclick = function() { 
      rac(self.div);
      self.div.appendChild(self.editForm());
      attachToForms();
    }
    a.className = 'jLink';
    a.appendChild(dct('(edit)'));
    h1.appendChild(dct(' '));
    h1.appendChild(a);
  }
  rDiv.appendChild(h1);
  rDiv.appendChild(dct('Posted on '));
  rDiv.appendChild(dct(report.time_created));
  rDiv.appendChild(dct(' by '));
  var a = dec('a');
  a.href = '/user/' + report.author;
  a.appendChild(dct(report.author));
  rDiv.appendChild(a);
  if (report.url) {
    var div = dec('div');
    div.style.color = 'green';
    div.style.fontSize = '.8em';
    div.appendChild(dct(report.url));
    rDiv.appendChild(div);
  }
  rDiv.appendChild(dec('hr'));
  var div = dec('div');
  div.style.height = '75%';
  div.style.overflowY = 'auto';
  if (report.text) {
    var converter = new Showdown.converter();
    div.innerHTML = converter.makeHtml(report.text);
  }
  rDiv.appendChild(div)
  rac(this.div)
  this.div.appendChild(rDiv)
  return rDiv; 
}

Answer 4

我不确定'预览'html代码是什么意思，因为当你在文本编辑器中输入它时，你会看到它。也许您在访问页面时在Web浏览器中查找“查看源”选项？

如果您希望阻止浏览器“吃掉”您的HTML代码并对其进行解释，并且有兴趣查看代码而不是呈现代码，则可以使用 htmlspecialchars（）。

在HTML页面中预览HTML代码

4 个答案: