how to highlight item in goto reference in HTML

The concept is you will have to run some JavaScript to get this to display correctly. I would recommend adding an onclick event to your anchor elements and pass the ID of the section to a function. Something like:

<a href="#" onclick="goTo('cite_note-17'); return false;">1</a>

And then define the function as:

function goTo(sectionId)
{
 document.location.href = "#" + sectionId;
 document.getElementById(sectionId).style.backgroundColor = "blue";

}

You'd probably want some a little more complex (to remove the formatting after a few seconds or something like that), but this hopefully will get you close.

Until the :target selector described by Thorn is well-supported, you'll need some script to do it. Here's an example:

<style type="text/css">
    .target { color: red; }
</style>

<a href="#foo">link</a>
<a href="#bar">link</a>
<a name="foo">target (name)</a>
<span id="bar">target (id)</span>

<script type="text/javascript">
    (function() {
        // Monitor the #fragment part of the window's URL and reflect this
        // in which element has the `target` class.
        //
        var target= '';
        function updateTarget() {
            var hash= location.hash.slice(1);
            if (hash!==target) {

                // Remove `target` class from old target (if any)
                //
                if (target!=='') {
                    var el= document.getElementById(target) || document.anchors[target];
                    if (el)
                        el.className= el.className.replace(/(^|\s)target(\s|$)/, '$1');
                }

                target= hash;

                // Add `target` class to new target (if any)
                //
                if (target!=='') {
                    var el= document.getElementById(target) || document.anchors[target];
                    if (el && !el.className.match(/(^|\s)target(\s|$)/))
                        el.className+= ' target';
                }
            }
        }

        setInterval(updateTarget, 100);
    })();
</script>

This works by polling for changes on the location's fragment part, so that it can cope with the fragment being changed by user navigation, forms, or scripting. It would have to be executed at the bottom of the page or on a page-load/ready event to ensure the target existed when it was first called.