HTML, the full name of "Hypertext Markup Language", is a standard language used to create web pages. It uses markup (HTML tags) to define various elements such as text, images, links, tables, etc., and organizes these elements to form a web page. This article will introduce the basic syntax, tags, elements, attributes and other related knowledge of HTML, and how to use this knowledge to create web pages.
- Basic syntax of HTML
HTML consists of a series of tags and text. Its basic syntax is as follows:
<!DOCTYPE html> <!-- 声明文档类型 -->
<html> <!-- HTML文档的根元素 -->
<head> <!-- 定义文档头部 -->
<title>网页标题</title> <!-- 定义网页标题 -->
</head>
<body> <!-- 定义文档主体 -->
<!-- 此处可以插入文本、图像、链接等各种元素 -->
</body>
</html>
Among them, "" declares the document type to be HTML5 standard, "" is the root element of the HTML document, and "
" defines The document header is generally used to define the title, style, script and other information of the web page. "
" defines the title of the web page. "<body>" is the main body of the document and is used to define various elements such as text, images, links, etc. </p>
<ol start="2"><li>HTML tags and elements</li></ol>
<p> Tags in HTML are wrapped in angle brackets (< >) and usually appear in pairs, each beginning with tag and a closing tag. For example, "<p>" is a start tag that defines a paragraph, while "</p>" is a closing tag. </p>
<p>There are also some single tags in HTML, which have only one tag but do not require a closing tag. For example, "<img>" is used to insert an image, and its syntax is as follows: </p>
<pre class="brush:php;toolbar:false"><img src="图片地址" alt="图片描述"></pre>
<p> Among them, the "src" attribute specifies the URL address of the image, and the "alt" attribute specifies the description information of the image. </p>
<ol start="3"><li>Attributes of HTML</li></ol>
<p>HTML tags can also contain attributes, which are additional information used to describe elements. For example, the "<a>" tag is used to create a link, and its syntax is as follows: </a></p>
<pre class="brush:php;toolbar:false"><a href="链接地址">链接文本</a></pre>
<p> Among them, the "href" attribute specifies the URL address of the link, and the "link text" is what the user sees on the page. to the text. </p>
<p>In addition to the "href" attribute, there are many other commonly used attributes. For example, the "class" and "id" attributes are used to identify and classify elements for easy access and manipulation by style sheets and JavaScript scripts. The syntax is as follows: </p>
<pre class="brush:php;toolbar:false"><div class="class名称" id="id名称">元素内容</div></pre>
<ol start="4"><li>An example of making a simple web page</li></ol>
<p>The following is an example of a simple web page made using HTML:</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
<style>
body {
background-color: #E6E6FA;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>欢迎访问我的第一个网页！</h1>
<p>这是一个由HTML制作的简单网页示例。</p>
<h2>利用HTML制作网页的步骤：</h2>
<ol>
<li>学习HTML基本语法、标签和属性。</li>
<li>创建HTML文件，用文本编辑器编辑文件代码。</li>
<li>保存HTML文件，用浏览器打开并查看网页效果。</li>
</ol>
<p>祝大家学习愉快，制作美丽的网页！</p>
</body>
</html></pre>
<p>This web page uses It includes various elements such as titles, paragraphs, styles, lists, etc. in HTML. Among them, the "<style>" tag is used to define the style of the web page, the "background-color" attribute specifies the background color, the "font-family" attribute specifies the font family, and the "<ol>" tag is used to create an ordered list. </p>
<ol start="5"><li>Summary</li></ol>
<p>HTML is one of the basic languages for making web pages. Mastering the basic syntax, tags, elements and attributes of HTML will help you create beautiful Valid web page. I hope this article can help you learn HTML, and I wish you write beautiful web pages! </p><p>The above is the detailed content of How to make html. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">href</a> <a href="javascript:void(0);">样式表</a> <a href="javascript:void(0);">background</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 make html" href="https://m.php.cn/faq/526516.html">How to make html</a></span><span>Next article：<a class="dBlack" title="How to make html" href="https://m.php.cn/faq/526520.html">How to make html</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/402895.html" title="Problem in passing value from parent component to child component echarts in Vue" class="aBlack">Problem in passing value from parent component to child component echarts in Vue</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/402896.html" title="Some thoughts on React this binding" class="aBlack">Some thoughts on React this binding</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/402897.html" title="Django uses request to get the parameters sent by the browser" class="aBlack">Django uses request to get the parameters sent by the browser</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/402898.html" title="DOM operation in JQuery - wrap" class="aBlack">DOM operation in JQuery - wrap</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/402899.html" title="Explanation of related content of prototype and prototype chain" class="aBlack">Explanation of related content of prototype and prototype chain</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>
