Introducing external files into html

When we make html pages, we often need to introduce some external files to make our work more efficient. Let me share some of the external file references I use when making html pages:

1. Externally import JavaScript files

<script type="text/javascript" src="../javascript/cart_list.js">
    </script>

As above, a js file named cart_list is introduced, which uses the <script> tag, the type is "text/javascript", and the path is src. When using it, put the JavaScript file in the head tag. This is the standard loading method. To prevent slow loading of web pages, non-critical JavaScript can also be placed at the bottom of the web page. As follows

<script type="text/javascript" src="else_website_link.js"></script>
    </body>
</html>

2. The introduction of css external files

    <link rel="stylesheet" type="text/css" href="../css/navigation.css" />

As above, the css file named navigation is imported, which is also placed in the head tag. The difference from importing the js file is that the link tag is required, the type is "text/css", and the path is href. You can also embed css styles directly inside the html tag element, such as

<div style="font-size:14px; color:#FFFFF0;">

This way of setting CSS styles in the style attribute of tags does not reflect the advantages of CSS in essence, but it has a higher priority than external files, and the introduction of CSS external files can set richer styles and is more convenient to manage.

3. The introduction of some plugins

<script src="../javascript/jquery-3.1.1.js">
<script type="text/javascript" src="../javascript/jquery-tmpl.min.js">
    </script>
    <script type="text/javascript" src="../javascript/lodash.js">
    </script>

The above three plug-ins, jquery, jquery-tmpl, h and lodash, are introduced respectively. We can see that it is actually no different from introducing external js files, because in fact these plug-ins are actually js files written by others, and it should be noted that , When using the jquery-tmpl template, its definition is as follows:

<script id='templateName'  type='text/x-jquery-tmpl'></script>

In the script tag of the head tag, use the form of ${key}, as follows:

<script id="templateName" type="text/x-jquery-tmpl">
<tr>     
            <td>${Sort}</td>
            <td>${Name}</td>
            <td>${Price}</td>
            <td>${Unit}</td>
<tr>
</script>

In the body, find the position to be displayed,

<table id="goods_table">
            <tr>
                <th class="sort">分类</th>
                <th class="name">名称</th>
                <th class="price">Unit price (yuan)</th>
                <th class="unit">单位</th>
                <th class="count">数量</th>
                <th class="subtotal">小计</th>
            </tr>
</table>

call in js file,

$('#templateName'').tmpl(file_name).appendTo('#goods_table');//templateName为模板id,
file_name is the file to be filled in the template goods_table is the location of the page to which the template is to be loaded

The above is just a little bit of my experience citing external documents for reference only

Introducing external files into html

Guess you like