The following are some of my own thoughts and gains. Due to my shallow personal knowledge, if there is something wrong or inaccurate, please criticize and correct me.
The three musketeers of front-end development, HTML, CSS, and JS, are well-known and are the basis for getting started with the front-end. Front-end programmers use these three components to form a large number of web pages. However, when you first learn, because you cannot quickly understand all the knowledge points, you often feel like a blind person trying to grasp the elephant when learning - that is, you do not know much about the functions and division of labor of each component, and you cannot grasp the direction of learning as a whole, so it is difficult. Forming a complete knowledge system is a headache. I have a characteristic in learning. I like to start from the bottom knowledge, and then add other content layer by layer on this basis, and finally form a complete framework. This is the way I'm used to learning.
At the beginning, I was still a little dizzy. The knowledge points were one after another, and they also overlapped with each other. The front was connected to the back, and the back was connected to the front. It still took a lot of effort to understand. But after reading the entire content two or three times, the entire framework becomes much clearer. Simply put, the division of labor in HTML, CSS, and JS embodies the concept of software layering. The general function distribution is: HTML is responsible for describing content, CSS is responsible for describing the style of elements, and JS is responsible for implementing the actions of the web page. In this way, it is actually not clear enough. Newbies can’t quite understand it. I think we can understand why there are these three divisions from the development process of web pages.
Early web pages were static web pages, and the elements in the web pages basically had no action. People went online mainly to browse information, and the interactivity requirements for web pages were also low. We can take a look at Yahoo's website in 1996 (the picture is taken from the Internet). There are pictures, hyperlinks and search boxes on the web page. Most of them use the default style. Such web page style and content are mixed together. If you want to modify the style of the web page , you need to modify them one by one, which will be more troublesome. So how to solve this problem? The pioneers of web development separated the style from the content and combined all the statements describing the style of the web page into one file. This file is called a cascading style sheet, or CSS for short. If we want to modify the style, we can modify it from this file. Through some selectors, we can quickly change the style of a certain element or a certain type of element, thus improving efficiency.
After removing the style from the web page, the HTML language is only responsible for describing the content of the web page. What does this mean? In HTML, we use the
element to mark the header file, the
element to mark the name of the web page, the <body> element to mark the body of the web page, the <table> element to mark the table, etc., by adding these elements By filling in the content in the element, we write nodes with specific styles. All these HTML nodes constitute the content of the web page. Most of these tags have default styles. If we are not satisfied with the default styles, we can also modify them in the CSS file. </p>
<p> After completing the separation of content and presentation, we have to explain the actions of the web page. One problem with static pages is that the content of the web page will not change after it is generated. When we browse the web, we need to interact. We need to log in to Weibo to comment, like and forward. We need to control the actions of characters when playing web games. These functions are all carried by JavaScript (JS). </p>
<p> JavaScript is a lightweight programming language. It does not have strict regulations on data types like C/C/JAVA, nor does it have pointers, operator overloading, etc. Speaking of which, the name is very confusing. There is Java in the name, but everyone says it has nothing to do with Java. This is really a headache. This is like making a movie called "My Name is Pan Jinlian" but saying that you have nothing to do with Pan Jinlian. (Laughs) Just kidding. However, in comparison, the syntax of JavaScript and Java have many similarities, but JavaScript is much simpler than Java. Unlike Java, JS is a platform language with various components and frameworks. JS is closely linked to the web. JS is executed by inserting it into HTML. Through JavaScript, we can write HTML output, react to events, change HTML content, images, styles, verify input and other functions. Basically all interactions on the web page are implemented through JS functions. This part is also the most difficult part in The Three Musketeers, and I am only so-so at mastering it now. Later articles will expand on specific knowledge points. </p>
<p> JS files and CSS files are ultimately applied to HTML. In HTML, we can insert JS code through the <script> element, which can be placed in <head> or <body>. Or write JS files externally and reference them in HTML. The CSS code is slightly different. We can insert CSS code through the <style> element. The <style> element must be placed in the <head> element. Or write a CSS file externally and reference it in HTML. You can also specify CSS styles directly in an element, which is called inline style. </p>
<p> Through this last part, we can try to summarize the relationship between these three parts. HTML is like the foundation of a house, CSS and JS are, these three parts together form a beautiful house. We cannot separate them and say that certain parts are a house. Only three of them together can form a beautiful house. </p>
<p>The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. </p>
<p>Related articles: </p>
<p><a href="http://www.php.cn/js-tutorial-391103.html" target="_blank">p5.js Pythagoras tree implementation code_javascript skills</a><br></p>
<p>##Based on js Introduction to storage key-value pairs and precautions in _javascript skills<a href="http://www.php.cn/js-tutorial-391064.html" target="_blank"></a><br></p>
<p>javascript in-depth understanding of js closure<a href="http://www.php.cn/js-tutorial-391076.html" target="_blank"></a><br></p><p>The above is the detailed content of Talk about HTML+CSS+JS (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="About how to optimize your JS code (graphic tutorial)" href="https://m.php.cn/faq/396812.html">About how to optimize your JS code (graphic tutorial)</a></span><span>Next article：<a class="dBlack" title="About how to optimize your JS code (graphic tutorial)" href="https://m.php.cn/faq/396816.html">About how to optimize your JS code (graphic tutorial)</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
