With the continuous development of the Internet, website construction increasingly requires HTML, and HTML has also become a basic tool for data exchange. Therefore, in the era of modern information interaction, mastering HTML has become an essential skill. If you're a complete newbie to programming, HTML is a great place to start.
Learning HTML, like other computer skills, requires a certain foundation and patience. But compared to other programming languages, HTML is an easy-to-learn language, especially for people without programming experience. This article will introduce the basic steps and precautions for learning HTML.
<ol><li>Prerequisites for learning HTML
Before learning HTML, you need to have the following prerequisites:
1.1 Computer and Internet
This is the basic foundation for learning HTML. Computers and the Internet are required during the learning process.
1.2 Editor
In the process of writing HTML, you need a text editor. It is recommended to use open source editors such as Notepad, Sublime Text, and Atom. You can also use Notepad, WordPad, etc. A simple text editor is available, but it is best not to use a rich text editor such as Microsoft Word.
1.3 Learning Concepts
Before learning HTML, you need to understand some basic concepts, such as "tags", "elements", "attributes", etc. These concepts are the foundation of the HTML language, and understanding these concepts can make learning easier to understand.
<li>The basic structure of HTML
HTML (HyperText Markup Language) is the basic language used to create web pages. Before you start learning HTML, you need to understand the basic structure of HTML.
The structure of a standard HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
Each HTML document must start with "".
Between the opening tag and the closing tag is the overall code of our web page.
Write the title of the web page we need, introduce style sheets, introduce scripts, etc. between the
start tag and end tag.
Between the
opening tag and the closing tag, we write the content of our web page.
For example, in the above code, you need to pay attention to:
<li>##<code> tag is used to define the title of the web page and is displayed in the browser tag column. </code>
</li>
<li><h1><code> and </code><p><code> are used to define the title and content of the web page respectively. </code>
</li>
</ul>
<ol start="3">Basic tags of HTML<li>
</ol>To learn HTML, you first need to master its basic tags. Tags in HTML usually appear in pairs, and there is a starting point tag and a closing tag. <p></p>The basic tags are as follows: <p></p>3.1 Title<p></p>The title is an important part of the web page and can highlight important information and hot content in the web page. <p></p>
<pre class="brush:php;toolbar:false"><h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6></pre>3.2 Paragraph<p></p>The paragraph is the main content part of the web page, usually represented by the <p><p></p><code> tag. </code></p>
<pre class="brush:php;toolbar:false"><p>这是一个段落。</p></pre>3.3 Pictures<p></p>You can insert pictures into web pages through the <p><img><code> tag, where the </code>src<code> attribute specifies the path of the picture, ## The #alt</code> attribute specifies the alternate text for the image. <code><pre class="brush:php;toolbar:false"><img src="图片路径" alt="这是一张图片"></pre></code>3.4 Link</p>
<p>Hyperlink is one of the most important components of a web page, which can be achieved through the </p><a><p> tag. The <code>href</code> attribute specifies the address of the link, and the <code>target</code> attribute specifies how the link is opened. <code><pre class="brush:php;toolbar:false"><a href="https://www.baidu.com">百度一下</a></pre></code>3.5 List</p>
<p>The unordered list uses the </p><ul><p> tag, and the ordered list uses the <code><ol></code> tag. <code><li></code>The tag represents the list item. <code><pre class="brush:php;toolbar:false"><ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol></pre></code>3.6 Table</p>
<p>The table is a common web page element and can be defined with the </p><table><p> tag. <code><pre class="brush:php;toolbar:false"><table>
<tr>
<th>标题 1</th>
<th>标题 2</th>
</tr>
<tr>
<td>内容 1</td>
<td>内容 2</td>
</tr>
</table></pre></code>3.7 Form</p>
<p>Form can be used to collect user data, such as user name, password, etc. This can be achieved using the </p><form><p> tag and the <code><input></code> tag. <code><pre class="brush:php;toolbar:false"><form>
<input type="text" name="username" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
<input type="submit" value="提交" />
</form></pre></code></p>Learning resources<ol start="4">
<li>In the process of learning HTML, you can refer to the following learning resources: </ol>
<p></p>W3School: https://www. w3school.com.cn/html/index.asp <ul>This is a good website that provides a wealth of HTML tutorials. <li>
<br>MDN Web Documentation: https://developer.mozilla.org/zh-CN/docs/Web/HTML </li>This is a document provided by Mozilla, with very wide coverage. <li>
<br>Zhihu Column: https://zhuanlan.zhihu.com/html </li>This is a good HTML column on Zhihu. You can not only learn HTML, but also other front-end related technologies. <li><br></li>
</ul>Summary<ol start="5">
<li>HTML is one of the introductory languages for learning programming. Mastering HTML can lay a solid foundation for subsequent learning. Master the use of basic tags and tags, and you can complete some simple web page production. Understanding learning resources can accelerate learning efficiency. Hopefully this article will help you get a better grasp of HTML. </ol><p>The above is the detailed content of How to learn html. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">html</a> <a href="javascript:void(0);">href</a> <a href="javascript:void(0);">样式表</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">ul</a> <a href="javascript:void(0);">table</a> <a href="javascript:void(0);">li</a> <a href="javascript:void(0);">sublime text</a> <a href="javascript:void(0);">https</a> <a href="javascript:void(0);">microsoft</a> <a href="javascript:void(0);">atom</a> <a href="javascript:void(0);">word</a><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="How to import javascript into node.js desktop application" href="http://m.php.cn/faq/527516.html">How to import javascript into node.js desktop application</a></span><span>Next article：<a class="dBlack" title="How to import javascript into node.js desktop application" href="http://m.php.cn/faq/527519.html">How to import javascript into node.js desktop application</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/547702.html" title="Can computer majors teach Vue?" class="aBlack">Can computer majors teach Vue?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/508829.html" title="Should you use java or nodejs for high concurrency?" class="aBlack">Should you use java or nodejs for high concurrency?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/542520.html" title="javascript does not repeat in array" class="aBlack">javascript does not repeat in array</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/544945.html" title="What can be written in JavaScript course design?" class="aBlack">What can be written in JavaScript course design?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/547457.html" title="What extensions should be installed in vue?" class="aBlack">What extensions should be installed in vue?</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><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></html>
