HTML - 字符实体 ¶

空格的问题
常用符号与字符实体参照表

作者：KK
发表日期：2016.1.26

可能你此前已经尝试过自己弄一些文字上去网页上，但排版总是不如意，特别是空格呢，比如

<p>    今天天气很好……文章内容……</p>
<p>第二行文字</p>

你明明在前面拍了4个空格，为什么在网页上并没有缩进两个文字？而只是缩进了一个空格呢？

原因是在HTML里面，对于空格的处理规则是这样的:

你输入1个或很多个连续空格，它都会只显示1个空格
你输入1个或多个回车，它都只会显示1个空格而不会换行（因为换行是由br标签实现的）
你输入 它就会显示一个空格，有多少个就显示多少个，不妨试下换成这样:

<p>&nbsp;&nbsp;&nbsp;&nbsp;今天天气很好……文章内容……</p>
<p>第二行文字</p>

好了，这样一般就会缩进2个文字单位了

为什么要用 呢？反正就是这样规定的咯，这个概念叫字符实体，在HTML里，有一些符号应该要使用字符实体来代替的

常用符号与字符实体参照表 ¶

我这里只讲你以后可能用得到的，其它你自己上网查更多字符实体哦:

空格:  
小于号: < ——效果: <
大于号: > ——效果: >
和号: & ——效果: &
双引号: " ——效果: "
版权: © ——效果: ©

var shiftWindow = function () { scrollBy(0, -50) }; if (location.hash) setTimeout(shiftWindow, 1); window.addEventListener("hashchange", shiftWindow); var element = document.createElement("script"); element.src = "./jssearch.index.js"; document.body.appendChild(element); var searchBox = $('#searchbox'); // search when typing in search field searchBox.on("keyup", function(event) { var query = $(this).val(); if (query == '' || event.which == 27) { $('#search-resultbox').hide(); return; } else if (event.which == 13) { var selectedLink = $('#search-resultbox a.selected'); if (selectedLink.length != 0) { document.location = selectedLink.attr('href'); return; } } else if (event.which == 38 || event.which == 40) { $('#search-resultbox').show(); var selected = $('#search-resultbox a.selected'); if (selected.length == 0) { $('#search-results').find('a').first().addClass('selected'); } else { var next; if (event.which == 40) { next = selected.parent().next().find('a').first(); } else { next = selected.parent().prev().find('a').first(); } if (next.length != 0) { var resultbox = $('#search-results'); var position = next.position(); // TODO scrolling is buggy and jumps around // resultbox.scrollTop(Math.floor(position.top)); // console.log(position.top); selected.removeClass('selected'); next.addClass('selected'); } } return; } $('#search-resultbox').show(); $('#search-results').html('

No results

'); var result = jssearch.search(query); if (result.length > 0) { var i = 0; var resHtml = ''; for (var key in result) { if (i++ > 20) { break; } resHtml = resHtml + '

' + result[key].file.t + '' + '' + result[key].file.d + '

'; } $('#search-results').html(resHtml); } }); // hide the search results on ESC $(document).on("keyup", function(event) { if (event.which == 27) { $('#search-resultbox').hide(); } }); // hide search results on click to document $(document).bind('click', function (e) { $('#search-resultbox').hide(); }); // except the following: searchBox.bind('click', function(e) { e.stopPropagation(); }); $('#search-resultbox').bind('click', function(e) { e.stopPropagation(); }); });