web storm查看文件结构

菜单栏Navigate -> File Structure

https://www.jetbrains.com/help/webstorm/viewing-structure-of-a-source-file.html

You can examine the structure of the file currently opened in the editor using the Structure tool window (Alt+7) or the Structure popup (Ctrl+F12).

Alt+7是固定在左侧栏，ctrl+F12是弹窗显示

以下的示例,

<tr>
    <td>Avatar</td>
    <td><input type="hidden" name="ctl00$cphMain$ucProfile$Avatar$hffulList"
               id="ctl00_cphMain_ucProfile_Avatar_hffulList"
               value="[{&quot;FileName&quot;:&quot;3004057.png&quot;,&quot;Size&quot;:&quot;1550&quot;,&quot;ContentType&quot;:&quot;image/png&quot;,&quot;PhysicalName&quot;:&quot;7778181a-1dad-4898-9c21-df416f812405.png&quot;,&quot;NewPhysicalName&quot;:null,&quot;FileuploadId&quot;:&quot;0&quot;,&quot;FilePath&quot;:null}]">
        <script type="text/javascript">$(function () {
            function JsonToString(json) {
                var str = '';
                for (var key in json) {
                    if (json[key] == null) {
                        str = str + ',"' + key + '":' + json[key];
                    } else {
                        str = str + ',"' + key + '":' + '"' + json[key] + '"';
                    }
                }
                if (str.length > 0) {
                    str = str.substring(1);
                    str = '{' + str + '}';
                }
                return str;
            };
            function JsonArrayToString(jsonAry) {
                var str = '';
                var strItem;
                for (var i = 0; i < jsonAry.length; i++) {
                    strItem = JsonToString(jsonAry[i]);
                    if (strItem.length > 0) {
                        str = str + ',' + strItem;
                    }
                }
                if (str.length > 0) {
                    str = str.substring(1);
                    str = '[' + str + ']';
                }
                return str;
            };
            $(document).on('click', '.LISA_FileuploadResultFileAction', function () {
                var $trDel = $(this).parent().parent();
                var jsonAry = jQuery.parseJSON($('#ctl00_cphMain_ucProfile_Avatar_hffulList').val());
                var jsonItem = jsonAry[$trDel.index()];
                jsonAry.splice($trDel.index(), 1);
                $('#ctl00_cphMain_ucProfile_Avatar_hffulList').val(JsonArrayToString(jsonAry));
                $trDel.remove();
                if ($('#ctl00_cphMain_ucProfile_Avatar_hffulList').val().length = 0) $('#Avatar_Result').hide();
            });
            $('#Avatar').fileupload({
                maxChunkSize: 1048576,
                paramName: '1f041c67-b5db-4599-a9ab-3f1614a651b5',
                url: 'http://172.31.212.20/LISA_60_Dev_BackOffice/Pages/jQueryHandler.ashx',
                dataType: 'json',
                add: function (e, data) {
                    $('#Avatar_ProcessContent').css('width', '0%').html('');
                    $('#Avatar_ProcessWrap').show();
                    var acceptFileTypes = /(\.)(png|gif|jpeg|jpg|pdf|bmp|xls|xlsx|doc|docx|ppt|pptx|zip|rar)$/i;
                    var ext = data.originalFiles[0]['name'].substr(data.originalFiles[0]['name'].lastIndexOf(".")).toLowerCase();
                    if (ext.length > 0 && acceptFileTypes.test(ext)) {
                        data.submit();
                    } else {
                        $('#Avatar_ProcessWrap').hide();
                        alert('Not an accepted file type');
                    }
                },
                done: function (e, data) {
                    var newItem = data.result;
                    $('#Avatar_ProcessWrap').hide();
                    if ($('#ctl00_cphMain_ucProfile_Avatar_hffulList').val().length == 0) {
                        var newItemStr = JsonToString(newItem);
                        newItemStr = '[' + newItemStr + ']';
                        $('#ctl00_cphMain_ucProfile_Avatar_hffulList').val(newItemStr);
                    } else {
                        var jsonAry = jQuery.parseJSON($('#ctl00_cphMain_ucProfile_Avatar_hffulList').val());
                        jsonAry.push(newItem);
                        $('#ctl00_cphMain_ucProfile_Avatar_hffulList').val(JsonArrayToString(jsonAry));
                    }
                    var action = '';
                    action = '<td><a href="javascript:void(0);" class="LISA_FileuploadResultFileAction">Delete</a></td>';
                    $('#Avatar_Result').append('<tr><td><a href="/LISA_60_Dev_BackOffice/FileTemps/' + newItem.PhysicalName + '" target="_black">' + newItem.FileName + '</a></td><td>' + newItem.Size + '&nbsp;Byte</td><td>' + newItem.ContentType + '</td>' + action + '</tr>');
                    $('#Avatar_Result').show();
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#Avatar_ProcessContent').css('width', progress + '%').html(progress + '%');
                },
            });
        });</script>
        <input id="Avatar" type="file">
        <div id="Avatar_ProcessWrap" class="LISA_FileuploadProcessWrap" style="display: none;">
            <div id="Avatar_ProcessContent" class="LISA_FileuploadProcessContent" style="width: 100%;">100%</div>
        </div>
        <table id="Avatar_Result" class="gridview" style="">
            <tr>
                <td><a href="/LISA_60_Dev_BackOffice/FileTemps/7778181a-1dad-4898-9c21-df416f812405.png"
                       target="_black">3004057.png</a></td>
                <td>1550&nbsp;Byte</td>
                <td>image/png</td>
                <td><a href="javascript:void(0);" class="LISA_FileuploadResultFileAction">Delete</a></td>
            </tr>
        </table>
    </td>
</tr>

tr有两个td

第二个td包含5个元素，分别是

input type是hidden

script  type是JavaScript

input  type 是file，一个按钮，弹窗选择文件

div  显示进度条

table  显示上传过的文件

文件结构的icon含义

https://www.jetbrains.com/help/webstorm/symbols.html

Icons in tool windows and structure views #

Icon	Description
	Class
	Abstract class
	Interface
	Method/function
	Function in Dart
	Variable
	Field
	Property
	Parameter
	Element
	Directory
	Tests
	Resource root
	Excluded
Visibility modifiers
	Private
	Protected
	Public
Bookmarks
	Anonymous bookmark – a check sign bookmark. Bookmarks are used for quick navigation within a file or across the entire project.
	Lettered mnemonic bookmark – a letter in the interval from A to Z.
	Numbered mnemonic bookmark – a number in the interval from 0 to 9.